ourcade / phaser3-typescript-spine

Example project for Spine animations in Phaser 3 with TypeScript plus SpinePlugin typing files! 🌟

Phaser 3 + TypeScript + Spine

Example project for Spine animations in Phaser 3 with TypeScript plus SpinePlugin typing files! 🌟

In-depth Guide

You can find a guide explaining this project here.

Demo

https://ourcade.github.io/phaser3-typescript-spine/

Prerequisites

This example project uses the phaser3-parcel-template and requires Parcel.

Getting Started

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/

Project Structure

    ├── ...
    ├── 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.

License

MIT License