Skip to content

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

License

Notifications You must be signed in to change notification settings

ourcade/phaser3-typescript-spine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

26 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

parcel3-typescript-spine

Phaser 3 + TypeScript + Spine

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

License

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. πŸŽ‰

Spine Boy

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published