Tutorial: How to add spine animations

To use spine animations you will have to enable spine module.

1. To do that first import it:

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

2. Than install, passing module key, spineModule and spine assets folder:

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

3. After installing the module(step 2), iLoader will be expanded to have 3 new methods for loading spine animation files:

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");
    ...

4. GameStage.draw will have two new methods .spine(x,y, spine-text-key | spine-binary-key, spine-atlas) and .texture(x, y, width, height, "texture-image-key"):

init() {
    const spineDrawObject = this.draw.spine(0, 0, "spine-text-key", "spine-atlas");
    ...

5. This objects should be added to the stage same as the other draw objects.
   Spine specific methods will be available:

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

6. After that spine objects will be rendered.

Live example

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