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

Example project for Spine animations in Phaser 3 with TypeScript plus SpinePlugin typing files! 🌟
https://github.com/ourcade/phaser3-typescript-spine

parcel phaser phaser3 spine typescript typescript-definitions

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ourcade/phaser3-typescript-spine
• Owner: ourcade
• License: mit
• Created: 2020-01-09T00:12:26.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-02T11:22:40.000Z (almost 2 years ago)
• Last Synced: 2023-03-06T08:22:09.196Z (almost 2 years ago)
• Topics: parcel, phaser, phaser3, spine, typescript, typescript-definitions
• Language: TypeScript
• Size: 3.57 MB
• Stars: 15
• Watchers: 1
• Forks: 7
• Open Issues: 6
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![parcel3-typescript-spine](https://user-images.githubusercontent.com/2236153/72027279-9e637980-323b-11ea-984e-7da548af5a83.png)

# Phaser 3 + TypeScript + Spine

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

![License](https://img.shields.io/badge/license-MIT-green)

## In-depth Guide

[You can find a guide explaining this project here.](https://blog.ourcade.co/posts/2020/phaser-3-parcel-typescript-spine/)

## Demo

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

## Prerequisites

This example project uses the [phaser3-parcel-template](https://github.com/ourcade/phaser3-parcel-template) and requires [Parcel](https://parceljs.org/).

## Getting Started

Clone this repository to your local machine (or download from Github or use a tool like [Degit](https://github.com/Rich-Harris/degit)):

```bash

git clone https://github.com/ourcade/phaser3-typescript-spine.git my-project-folder

```

Go into your project folder and install dependencies:

```bash

cd my-project-folder

npm install

```

Start development server:

```bash

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](https://github.com/ourcade/phaser3-parcel-template/blob/master/LICENSE)