JSDoc: Tutorial: How to Add Spine Animations

To use Spine animations, you will need to enable the Spine module.

Import the Spine module:

   import SpineModuleInitialization from "../node_modules/jsge/modules/spine/dist/bundle.js";

Install the module, passing the module key, spineModule, and the spine assets folder:

   this.spineModule = this.iSystem.installModule(
   "spineModule",
   SpineModuleInitialization,
   "./spine/spine-assets");

After installing the module(step 2), the iLoader will be expanded to include three new methods for loading Spine animation file:

register() {
   ...
   this.iLoader.addSpineJson("spine-text-key", "./spine-file.json");
   this.iLoader.addSpineBinary("spine-binary-key", "./spine-file.skel");
   this.iLoader.addSpineAtlas("spine-atlas", "./spine-file.atlas");
   ...

The GameStage.draw will have two new methods: stage.draw.spine(x,y, spine-text-key | spine-binary-key, spine-atlas) and stage.draw.texture(x, y, width, height, "texture-image-key"):
```
init() {
   const spineDrawObject = this.draw.spine(0, 0, "spine-text-key", "spine-atlas");
   ...
```

These objects should be added to the stage in the same way as other draw objects.
Spine specific methods will be available:

spineDrawObject.scale(0.5);
spineDrawObject.animationState.setAnimation(0, "run", true);
spineDrawObject.setSkin("goblin");

After that, Spine objects will be rendered.

Live example

See the Pen JsGE - Spine animations by Arturas-Alfredas Lapinskas (@yaalfred) on CodePen.

Ask a question

https://github.com/ALapinskas/jsge/discussions/categories/q-a