spine-phaser-ce

Spine runtimes plugin for Phaser CE. Check out the repository at github

Features

• Full support of the last Spine version (4.x.x).
• Support for Canvas and WebGL.
• Support for Canvas mesh.

Requisites

• Phaser CE 2.20.0 or newer (not tested with older versions).
• Globally declared Phaser so the plugin can extend it.
• Some spines to use with the plugin.

How to use

1. Install via npm: npm install @reltdeats/spine-phaser-ce
2. Add the plugin to your Phaser CE game:

import SpinePlugin from '@reltdeats/spine-phaser-ce';

this.game.plugins.add(SpinePlugin);

or...

1. Use jsdelivr cdn:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@reltdeats/[email protected]/dist/spine-phaser-ce.min.js"></script>

this.game.plugins.add(SpinePlugin);

2. Import the plugin:

this.game.plugins.add(SpinePlugin);

3. Import your assets with the spine loader:

// The loader expects a config object with the following structure:
const spineDino = {
    image: require('../../assets/spines/dino.png'),
    atlas: require('../../assets/spines/dino.atlas'),
    json: require('../../assets/spines/dino.json')
}

// For spines with multiples atlases, 
// use images in plural and the key of 
// the image atlas must be the name of the atlas.
const spineBomb = {
    images: {
        Bomb: require('../../assets/spines/bomb/Bomb.png'),
        Bomb_2: require('../../assets/spines/bomb/Bomb_2.png')
    },
    atlas: require('../../assets/spines/bomb/Bomb.atlas.txt'),
    json: require('../../assets/spines/bomb/Bomb.json')
}

// Also, the loader supports binary format
const spineStar = {
    image: require('../../assets/spines/star/Star.png'),
    atlas: require('../../assets/spines/star/Star.atlas'),
    binary: require('../../assets/spines/star/Star.skel')
}
   
// Load the spine with your game loader
this.game.load.spine('spineStar', spineStar);

4. Add the spine to the game:

// The last two arguments, group and premultipliedAlpha
// are optional. 
// Group is a reference to a Phaser.Group
this.star = this.game.add.spine(200, 300, 'spineStar', group, false);

Manipulating the Spine and examples

All transforms are handled by the Phaser CE system:

this.star.x = 300;
this.star.y = 100;
this.star.scale.setTo(1, 2);
this.star.scale.x = -1;
this.star.rotation = Phaser.Math.degToRad(45);

Specific Spine functionalities are handled by the oficial Spine runtimes. For handling animations, mixing and all the spine features, please refer to the oficial spine documentation.

Example:

this.star.animationState.setAnimation(0, 'Idle', true);

this.game.time.events.loop(8000, () => {
    this.star.animationState.setAnimation(0, 'In', false);
    this.star.animationState.addAnimation(0, 'Idle', false);
    this.star.animationState.addAnimation(0, 'Out', false);
});

For more examples, check out the example index.

If you are cloning the github repository, run the following commands to launch the examples in your web browser:

npm i
npm run serve

Debug

Debug is still in progress and shows little to no information. WIP.

To enable debug, just set the debug property of the spine to true.

this.star = this.game.add.spine(200, 300, 'spineStar', group, false);
this.star.debug = true;

Canvas mesh

To enable canvas mesh, set the enableCanvasMesh property of the spine to true.

Be aware, that canvas mesh is a hack to render each triangle of the mesh separately. This can cause some aliasing (cause the triangles are not attached to each other) and performance issues.

this.star = this.game.add.spine(200, 300, 'spineStar', group, false);
this.star.enableCanvasMesh = true;

Maintenance

I use this plugin in my daily work, so expect some improvements and inclusion of Phaser features over time.

Feel free to report any bugs the usual way in the github issues page.