Example project for Spine animations in Phaser 3 with TypeScript plus SpinePlugin typing files! ๐
You can find a guide explaining this project here.
https://ourcade.github.io/phaser3-typescript-spine/
This example project uses the phaser3-parcel-template and requires Parcel.
Clone this repository to your local machine (or download from Github or use a tool like Degit):
git clone https://github.com/ourcade/phaser3-typescript-spine.git my-project-folder
Go into your project folder and install dependencies:
cd my-project-folder
npm install
Start development server:
npm run start
You'll see Spine Boy in his idle animation. Press the left
and right
arrow keys to cycle through his other animations. ๐
Demo: https://ourcade.github.io/phaser3-typescript-spine/
โโโ ...
โโโ public
โ โโโ assets
โ โ โโโ spine
โ โ โ โโโ spineboy.atlas
โ โ โ โโโ spineboy.json
โ โ โ โโโ spineboy.png
โโโ src
โ โโโ scenes
โ โ โโโ SpineDemo.ts
โ โโโ types
โ โ โโโ globals.d.ts
โ โโโ index.html
โ โโโ main.ts
The Spine Boy assets exported from Spine is in public/assets/spine
. These files are loaded in the preload()
method of SpineDemo.ts
.
The Phaser 3 SpinePlugin is loaded in main.ts
.