PIXI Spine Runner

Run your 2D spine animations using pixi.js rendering library.

This tool is useful when you want to cross-check a spine animation on your end without having prior knowledge of a rendering library like pixi.js.

Point to note

In case you don't know, we are not running spine animation file i.e. .spine file, as it is not possible using code. We're running the spine using the below three files:

• .json
• .atlas
• .png You must have these files in order to run the spine and these must be located at the same folder. Also make sure one thing, your .atlas should be pointing to the correct .png files' name. You can open the file and easily see which pngs it is pointing.

Install the package

npm i pixi-spine-runner

Write a config to for spine

This config includes all the settings for the spine animation that will be rendered using pixi.js, such as the path to your spine's JSON file in the project and the div element where you want to display your spine. You can also adjust the animation speed from the config.

Example

const config = {
    divElement: document.getElementById('game'),
    pixiDevTool: true,
    backgroundColor: '#C69241',
    paddingX: 20,
    paddingY: 20,
    jsonPath: "./assets/your_spine.json",
    animations: [],
    animationsSwitchTime: 3000,
    singleAnimationLoop: true,
    animationsLoop: true,
    animationScale: {
        x: 1,
        y: 1
    },
    animationSpeed: 1
}

Explaination

• divElement: It's the div element you want your spine to be in.
• pixiDevTool: If it's true you'll be able to see containers of pixi using Pixi Dev tool chrome's extension.
• backgroundColor: background color of the app
• paddingX: X padding from the box which surrounds the spine.
• paddingY: Y padding from the box which surrounds the spine.
• jsonPath: It's the path of the json file in the project.
• animations: If you want to play any specific set of animations then mention those in this array otherwise leave empty, it will play all the animations one by one. (You can find those available animations for the spine in the json)
• animationsSwitchTime: Time in milliseconds, for each animation to play and switch to next animation in loop.
• singleAnimationLoop: If true, then it will play the animation in loop until the next animation time comes.
• animationsLoop: To play all the animations in loop. If true, it will start playing the all animations again one after one once all done.
• animationScale: Set the x and y scaling of the spine. Value should be in 0 to 1. Sometimes Animation is so large to fit in the browser's window, you can set the scaling to lower for letting it to fit in the browser's window.
• animationSpeed: Set the animation's speed.

Run spine animation

Create an instance:

const spineRunner = new PixiSpineRunner(config)

Start animation

spineRunner.init()