Skip to content
dill pixel

Spine

dill pixel supports the Spine format for animations. Spine is a 2D skeletal animation tool that allows you to animate 2D characters and objects in a way that is similar to how 3D animations are done. This allows for more complex animations and more efficient use of resources.

Getting Started

To work with Spine in dill pixel you’ll need to include pixi-spine

Terminal window
npm i pixi-spine

Loading a Spine Animation

If you have a Spine animation called spineboy-pro in your src/assets/spine folder and you’ve configured Vite to serve the assets, you can load it into your game like this:

import { AssetMapData, SpineAsset } from 'dill-pixel';
import { Spine } from 'pixi-spine';


...


// Declare the variable to hold the spine animation


private _spine: Spine;


...


// Load the spine asset


public static get Assets(): AssetMapData[] {
  return [new SpineAsset('spineboy-pro')];
}


// Create the spine object


this._spine = this.add.spine({
  name: 'spineboy-pro',
  autoUpdate: true,
  scale: 0.5,
  position: [0, 100],
});

Playing an Animation

To play an animation on the spine object, call .state.setAnimation with the track number, the animation name, and whether the animation should loop or not:

// Play an animation


this._spine.state.setAnimation(0, 'walk', true);