pixi-spine

pixi-spine

Spine implementation for PixiJS v5.

For v4 please see v4.x branch and use npm version 1.5.21

Usage

Prebuilt Files

If you are just including the built files, pixi spine adds itself to a PIXI namespace:

new PIXI.spine.Spine();

Basic example

var app = new PIXI.Application();

document.body.appendChild(app.view);

app.loader
    .add('spineCharacter', 'spine-data-1/HERO.json')
    .load(function (loader, resources) {
        var animation = new PIXI.spine.Spine(resources.spineCharacter.spineData);

        // add the animation to the scene and render...
        app.stage.addChild(animation);
        
        // run 
        var animation = new PIXI.spine.Spine(spineBoyData);
        if (animation.state.hasAnimation('run')) {
            // run forever, little boy!
            animation.state.setAnimation(0, 'run', true);
            // dont run too fast
            animation.state.timeScale = 0.1;
        }
        
        app.start();
    });

Want to go advanced?

Read our docs.

Two-color tint

Light-dark tint is supported with help of pixi-heaven

let spine = new PIXI.heaven.Spine(spineData);

WebPack and Angular

Possible webpack way:

import * as PIXI from "pixi.js';
window.PIXI = PIXI;
import "pixi-spine";

Angular:

import * as PIXI from "pixi.js";
global.PIXI = PIXI;
require("pixi-spine");

Using webpack or browserify?

Our library is tested for integration with webpack and browserify, check our travis config and checkpack.

How to get a wrong result using browserify/webpack

If resource.spineData is missing and you consider to use resource.data instead, please don't do that and think about middlewares. You probably created loader before pixi-spine was connected to the project. Consider that you use app.loader, here's what to check:

if (app.loader._afterMiddleware.indexOf(PIXI.spine.AtlasParser.use) < 0) {
   app.loader.use(PIXI.spine.AtlasParser.use);
   console.log('Hey, I managed to initialize loader before pixi-spine module!');
}

If you see it in the console, then you should consider using pixi.js and pixi-spine as external dependencies and not pack them inside the build. Or at least create loader in the same module you call add and load functions.

Typescript

There's "bin/pixi-spine.d.ts" file, you can use it.

Spine version

We aim to support the latest stable version of spine.

If you are below Spine 3.5, please please enable "beta updates" and re-export everything from the spine editor.

According to spine runtime license, you can use runtime only if you have bought the editor, so exporting latest versions of animations shouldn't be a problem for you.

Building

You will need to have node setup on your machine.

Make sure you have yarn installed:

npm install -g yarn

Then you can install dependencies and build:

yarn
yarn build

That will output the built distributables to ./bin.