@melonjs/spine-plugin 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melonjs/spine-plugin",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "melonJS Spine plugin",
   "homepage": "https://github.com/melonjs/spine-plugin#readme",
   "type": "module",
@@ -46,23 +46,24 @@
     "CHANGELOG.md"
   ],
   "peerDependencies": {
-    "melonjs": "^15.9.2"
+    "melonjs": "^15.12.0"
   },
   "dependencies": {
-    "@esotericsoftware/spine-canvas": "^4.2.18",
-    "@esotericsoftware/spine-core": "^4.2.18",
-    "@esotericsoftware/spine-webgl": "^4.2.18"
+    "@esotericsoftware/spine-canvas": "^4.2.23",
+    "@esotericsoftware/spine-core": "^4.2.23",
+    "@esotericsoftware/spine-webgl": "^4.2.23"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.22.11",
+    "@babel/eslint-parser": "^7.22.15",
     "@babel/plugin-syntax-import-assertions": "^7.22.5",
     "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-replace": "^5.0.2",
-    "del-cli": "^5.0.1",
-    "eslint": "^8.48.0",
-    "eslint-plugin-jsdoc": "^46.5.0",
-    "rollup": "^3.28.1",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.50.0",
+    "eslint-plugin-jsdoc": "^46.8.2",
+    "rollup": "^3.29.2",
     "rollup-plugin-bundle-size": "^1.0.3",
     "typescript": "^5.2.2"
   },

package/src/AssetManager.js

@@ -1,42 +1,129 @@
-import { event, video } from "melonjs";
+import { utils, loader } from "melonjs";
 import * as spineWebGL from "@esotericsoftware/spine-webgl";
 import * as spineCanvas from "@esotericsoftware/spine-canvas";
 
+/**
+ * @classdesc
+ * An Asset Manager class to load spine assets
+ */
 export default class AssetManager {
     asset_manager;
     pathPrefix;
 
-    constructor(pathPrefix = "") {
-        event.once(event.VIDEO_INIT, this.initAssetManager.bind(this));
+    /**
+     * @param {CanvasRenderer|WebGLRenderer} renderer - a melonJS renderer instance
+     * @param {string} [pathPrefix=""] - a default path prefix for assets location
+     */
+    constructor(renderer, pathPrefix = "") {
         this.pathPrefix = pathPrefix;
-    }
-
-    initAssetManager() {
-        if (video.renderer.WebGLVersion >= 1) {
-            this.asset_manager = new spineWebGL.AssetManager(video.renderer.getContext(), this.pathPrefix);
+        if (renderer.WebGLVersion >= 1) {
+            this.asset_manager = new spineWebGL.AssetManager(renderer.getContext(), this.pathPrefix);
         } else {
             // canvas renderer
             this.asset_manager = new spineCanvas.AssetManager(this.pathPrefix);
         }
+
+        // set the spine custom parser
+        loader.setParser("spine", (data, onload, onerror) => {
+            // decompose data.src for the spine loader
+            const ext = utils.file.getExtension(data.src);
+            const basename = utils.file.getBasename(data.src);
+            const path = utils.file.getPath(data.src);
+            const filename = basename + "." + ext;
+
+            this.setPrefix(path);
+
+            // load asset
+            switch (ext) {
+                case "atlas":
+                    this.loadTextureAtlas(filename, onload, onerror);
+                    break;
+                case "json":
+                    this.loadText(filename, onload, onerror);
+                    break;
+                case "skel":
+                    this.loadBinary(filename, onload, onerror);
+                    break;
+                default:
+                    throw "Spine plugin: unknown extension when preloading spine assets";
+            }
+
+            return 1;
+        });
+
     }
 
+    /**
+     * set a default path prefix for assets location
+     * @see loadAsset
+     * @param {string} pathPrefix
+     */
     setPrefix(pathPrefix) {
-        this.asset_manager.pathPrefix = pathPrefix;
+        this.asset_manager.pathPrefix =  this.pathPrefix = pathPrefix;
     }
 
+    /**
+     * define all spine assets to be loaded
+     * @see setPrefix
+     * @see loadAll
+     * @param {string} atlas
+     * @param {string} skel
+     * @example
+     * // "manually" load spine assets
+     * Spine.assetManager.setPrefix("data/spine/");
+     * Spine.assetManager.loadAsset("alien.atlas", "alien-ess.json");
+     * await Spine.assetManager.loadAll();
+     */
     loadAsset(atlas, skel) {
         if (atlas) {
-            this.asset_manager.loadTextureAtlas(atlas);
+            this.loadTextureAtlas(atlas);
         }
 
         if (skel.endsWith(".skel")) {
-            this.asset_manager.loadBinary(skel);
+            this.loadBinary(skel);
         } else {
-            this.asset_manager.loadText(skel);
+            this.loadText(skel);
         }
     }
 
+    /**
+     * load the given texture atlas
+     * @param {string} atlas
+     */
+    loadTextureAtlas(atlas, onload, onerror) {
+        return this.asset_manager.loadTextureAtlas(atlas, onload, onerror);
+    }
+
+
+    /**
+     * load the given skeleton .skel file
+     * @param {string} skel
+     */
+    loadBinary(skel, onload, onerror) {
+        return this.asset_manager.loadBinary(skel, onload, onerror);
+    }
+
+    /**
+     * load the given skeleton binary file
+     * @param {string} skel
+     */
+    loadText(skel, onload, onerror) {
+        return this.asset_manager.loadText(skel, onload, onerror);
+    }
+
+    /**
+     * load all defined spine assets
+     * @see loadAsset
+     */
     loadAll() {
         return this.asset_manager.loadAll();
     }
+
+    /**
+     * get the loaded skeleton data
+     * @param {string} path
+     */
+    require(path) {
+        return this.asset_manager.require(path);
+    }
 }

package/src/SpinePlugin.js

@@ -0,0 +1,24 @@
+import { plugin } from "melonjs";
+import { name, version, dependencies, homepage, peerDependencies } from "../package.json";
+import AssetManager from "./AssetManager";
+
+/**
+ * @classdesc
+ * a Spine 4.x plugin implementation for melonJS
+ * @augments plugin.BasePlugin
+ */
+export class SpinePlugin extends plugin.BasePlugin {
+    constructor() {
+        // call the super constructor
+        super();
+
+        // minimum melonJS version expected to run this plugin
+        this.version = peerDependencies["melonjs"];
+
+        // hello world
+        console.log(`${name} ${version} - spine runtime ${dependencies["@esotericsoftware/spine-core"]} | ${homepage}`);
+
+        // instantiate the asset manager
+        this.assetManager = new AssetManager(this.app.renderer);
+    }
+}

package/src/index.js

@@ -1,34 +1,106 @@
-import { Math, Renderable, Vector2d, video } from "melonjs";
-
+import { Math, Renderable, Vector2d, plugin } from "melonjs";
 import * as spineWebGL from "@esotericsoftware/spine-webgl";
 import * as spineCanvas from "@esotericsoftware/spine-canvas";
 import { Vector2 } from "@esotericsoftware/spine-core";
 
-import AssetManager from "./AssetManager.js";
 import SkeletonRenderer from "./SkeletonRenderer.js";
+import { SpinePlugin } from "./SpinePlugin.js";
+
+export { SpinePlugin } from "./SpinePlugin.js";
 
-export let assetManager = new AssetManager();
+// a temporary array used for skeleton.getBounds();
+let tempArray = [];
 
+/**
+ * @classdesc
+ * An renderable object to render Spine animated skeleton.
+ * @augments Renderable
+ */
 export default class Spine extends Renderable {
     runtime;
     skeleton;
+    plugin;
+    renderer;
     animationState;
     skeletonRenderer;
-    assetManager;
     root;
     boneOffset;
     boneSize;
+    isSpineFlipped = {
+        x : false,
+        y : false
+    };
+
+    /**
+     * Stores settings and other state for the playback of the current animation (if any).
+     * @type {TrackEntry}
+     * @see http://en.esotericsoftware.com/spine-api-reference#TrackEntry
+     * @see setAnimation
+     * @default undefined
+     * @example
+     * // set a default animation to "run"
+     * this.setAnimation(0, "run", true);
+     * ...
+     * ...
+     * // pause the animation
+     * this.currentTrack.timeScale = 0;
+     * ...
+     * ...
+     * // resume the animation
+     * this.currentTrack.timeScale = 1;
+     */
+    currentTrack;
 
+    /**
+     * @param {number} x - the x coordinates of the Spine object
+     * @param {number} y - the y coordinates of the Spine object
+     * @param {object} settings - Configuration parameters for the Spine object
+     * @param {number} [settings.atlasFile] - the name of the atlasFile to be used to create this spine animation
+     * @param {number} [settings.jsonFile] - the name of the atlasFile to be used to create this spine animation
+     * @param {number} [settings.mixTime = 0.2] - the default mix duration to use when no mix duration has been defined between two animations.
+     * @example
+    * import * as Spine from '@melonjs/spine-plugin';
+    * import * as me from 'melonjs';
+    *
+    * // prepare/declare assets for the preloader
+    * const DataManifest = [
+    *     {
+    *         "name": "alien-ess.json",
+    *         "type": "spine",
+    *         "src": "data/spine/alien-ess.json"
+    *     },
+    *     {
+    *         "name": "alien.atlas",
+    *         "type": "spine",
+    *         "src": "data/spine/alien.atlas"
+    *     },
+    * ]
+    *
+    * // create a new Spine Renderable
+    * let spineAlien = new Spine(100, 100, {atlasFile: "alien.atlas", jsonFile: "alien-ess.json"});
+    *
+    * // set default animation
+    * spineAlien.setAnimation(0, "death", true);
+    *
+    * // add it to the game world
+    * me.game.world.addChild(spineAlien);
+    */
     constructor(x, y, settings) {
         super(x, y, settings.width, settings.height);
 
-        if (video.renderer.WebGLVersion >= 1) {
+        // ensure plugin was properly registered
+        this.plugin = plugin.get(SpinePlugin);
+        if (typeof this.plugin === "undefined") {
+            throw "Spine plugin: plugin needs to be registered first using plugin.register";
+        }
+        this.renderer = this.plugin.app.renderer;
+
+        if (this.renderer.WebGLVersion >= 1) {
             this.runtime = spineWebGL;
         } else {
             this.runtime = spineCanvas;
         }
 
-        this.assetManager = assetManager.asset_manager;
         this.skeletonRenderer = new SkeletonRenderer(this.runtime);
 
         // force anchorPoint to 0,0
@@ -39,20 +111,26 @@ export default class Spine extends Renderable {
             this.pos.z = settings.z;
         }
 
-        this.scaleValue = {x: 1, y: 1};
+        // use internally when calulcating bounds
         this.boneOffset = new Vector2();
         this.boneSize = new Vector2();
 
-        this.mixTime = settings.mixTime || 0.2;
+        // default mixTime
+        this.mixTime = typeof settings.mixTime !== "undefined" ? settings.mixTime :  0.2;
+
 
         if (settings.jsonFile) {
             this.jsonFile = settings.jsonFile;
             this.atlasFile = settings.atlasFile;
-
             this.setSkeleton(this.atlasFile, this.jsonFile);
         }
     }
 
+    /**
+     * Whether to enabler the debug mode when rendering the spine object
+     * @default false
+     * @type {boolean}
+     */
     get debugRendering() {
         return this.skeletonRenderer.debugRendering;
     }
@@ -61,43 +139,107 @@ export default class Spine extends Renderable {
         this.skeletonRenderer.debugRendering = value;
     }
 
+    /**
+     * set and load the given skeleton atlas and json definition files
+     * (use this if you did not specify any json or atlas through the constructor)
+     * @param {number} [atlasFile] - the name of the atlasFile to be used to create this spine animation
+     * @param {number} [jsonFile] - the name of the atlasFile to be used to create this spine animation
+     * @example
+     * // create a new Spine Renderable
+     * let spineAlien = new Spine(100, 100);
+     *
+     * // set the skeleton
+     * spineAlien.setSkeleton("alien.atlas", "alien-ess.json");
+     *
+     * // set default animation
+     * spineAlien.setAnimation(0, "death", true);
+     *
+     * // add it to the game world
+     * me.game.world.addChild(spineAlien);
+     */
     setSkeleton(atlasFile, jsonFile) {
-        this.loadSpineAssets(atlasFile, jsonFile);
-        this.root = this.skeleton.getRootBone();
-         // Spine uses Y-up, melonJS uses Y-down
-        this.root.scaleY *= -1;
-    }
-
-    loadSpineAssets(atlasFile, jsonFile) {
         // Create the texture atlas and skeleton data.
-        let atlas = this.assetManager.require(atlasFile);
+        let atlas = this.plugin.assetManager.require(atlasFile);
         let atlasLoader = new this.runtime.AtlasAttachmentLoader(atlas);
         let skeletonJson = new this.runtime.SkeletonJson(atlasLoader);
-        let skeletonData = skeletonJson.readSkeletonData(this.assetManager.require(jsonFile));
+        let skeletonData = skeletonJson.readSkeletonData(this.plugin.assetManager.require(jsonFile));
 
         // Instantiate a new skeleton based on the atlas and skeleton data.
         this.skeleton = new this.runtime.Skeleton(skeletonData);
-        this.skeleton.setToSetupPose();
-        this.skeleton.updateWorldTransform();
+
+        this.setToSetupPose();
 
         // Setup an animation state with a default mix of 0.2 seconds.
         var animationStateData = new this.runtime.AnimationStateData(this.skeleton.data);
         animationStateData.defaultMix = this.mixTime;
         this.animationState = new this.runtime.AnimationState(animationStateData);
+
+        // get a reference to the root bone
+        this.root = this.skeleton.getRootBone();
+    }
+
+    /**
+     * flip the Spine skeleton on the horizontal axis (around its center)
+     * @param {boolean} [flip=true] - `true` to flip this Spine object.
+     * @returns {Spine} Reference to this object for method chaining
+     */
+    flipX(flip = true) {
+        if (this.isSpineFlipped.x !== flip) {
+            this.isSpineFlipped.x = flip;
+            this.root.scaleX *= -1;
+            this.isDirty = true;
+        }
+        return this;
+    }
+
+    /**
+     * flip the Spine skeleton on the vertical axis (around its center)
+     * @param {boolean} [flip=true] - `true` to flip this Spine object.
+     * @returns {Spine} Reference to this object for method chaining
+     */
+    flipY(flip = true) {
+        if (this.isSpineFlipped.y !== flip) {
+            this.isSpineFlipped.y = flip;
+            this.root.scaleY *= -1;
+            this.isDirty = true;
+        }
+        return this;
     }
 
+     /**
+     * Rotate this Spine object by the specified angle (in radians).
+     * @param {number} angle - The angle to rotate (in radians)
+     * @param {Vector2d|ObservableVector2d} [v] - an optional point to rotate around
+     * @returns {Spine} Reference to this object for method chaining
+     */
     rotate(angle, v) {
         // rotation for rootBone is in degrees (anti-clockwise)
         this.skeleton.getRootBone().rotation -= Math.radToDeg(angle) + 90;
         // melonJS rotate method takes radians
-        super.rotate(angle, v);
+        return super.rotate(angle, v);
     }
 
+     /**
+     * scale the Spine object around his anchor point.  Scaling actually applies changes
+     * to the currentTransform member wich is used by the renderer to scale the object
+     * when rendering.  It does not scale the object itself.  For example if the renderable
+     * is an image, the image.width and image.height properties are unaltered but the currentTransform
+     * member will be changed.
+     * @param {number} x - a number representing the abscissa of the scaling vector.
+     * @param {number} [y=x] - a number representing the ordinate of the scaling vector.
+     * @returns {Spine} Reference to this object for method chaining
+     */
     scale(x, y = x) {
-        this.scaleValue = {x, y};
-        super.scale(x, y);
+        // untested
+        return super.scale(x, y);
     }
 
+    /**
+     * update the bounding box for this spine object.
+     * (this will automatically update the bounds of the entire skeleton animation)
+     * @param {boolean} [absolute=true] - update the bounds size and position in (world) absolute coordinates
+     * @returns {Bounds} this shape bounding box Rectangle object
+     */
     updateBounds(absolute = true) {
         if (this.isRenderable) {
             let bounds = this.getBounds();
@@ -110,13 +252,16 @@ export default class Spine extends Renderable {
                 let boneOffset = this.boneOffset;
                 let boneSize = this.boneSize;
 
-                this.skeleton.getBounds(boneOffset, boneSize);
+                this.skeleton.getBounds(boneOffset, boneSize, tempArray);
+
+                let minX = boneOffset.x - rootBone.x,
+                    minY = boneOffset.y - rootBone.y;
 
                 bounds.addFrame(
-                    boneOffset.x - rootBone.x,
-                    boneOffset.y - rootBone.y,
-                    boneSize.x + boneOffset.x - rootBone.x,
-                    boneSize.y + boneOffset.y  - rootBone.y,
+                    minX,
+                    minY,
+                    minX + boneSize.x,
+                    minY + boneSize.y,
                     !isIdentity ? this.currentTransform : undefined
                 );
             } else {
@@ -131,6 +276,7 @@ export default class Spine extends Renderable {
 
             if (absolute === true) {
                 var absPos = this.getAbsolutePosition();
+                //bounds.translate(absPos.x, absPos.y);
                 bounds.centerOn(absPos.x + bounds.centerX,  absPos.y + bounds.centerY);
             }
             return bounds;
@@ -150,22 +296,24 @@ export default class Spine extends Renderable {
     update(dt) {
         if (typeof this.skeleton !== "undefined") {
             let rootBone = this.skeleton.getRootBone();
-
-            // update the root bone position
-            if (rootBone.x !== this.pos.x) {
-                rootBone.x = this.pos.x;
-            }
-            if (rootBone.y !== this.pos.y) {
-                rootBone.y = this.pos.y;
-            }
+            //let height = this.renderer.getHeight();
 
             // Update and apply the animation state, update the skeleton's
-            // world transforms and render the skeleton.
             this.animationState.update(dt / 1000);
             this.animationState.apply(this.skeleton);
+
+            // update the root bone position
+            rootBone.x = this.pos.x;
+            rootBone.y = this.pos.y;
+
+            // world transforms
             this.skeleton.updateWorldTransform();
 
+            // update Bounds
             this.updateBounds();
+
+            // world transforms
+            //this.skeleton.updateWorldTransform();
         }
         return true;
     }
@@ -173,9 +321,6 @@ export default class Spine extends Renderable {
 
     /**
      * draw this spine object
-     * @name draw
-     * @memberof Spine
-     * @protected
      * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance
      * @param {Camera2d} [viewport] - the viewport to (re)draw
      */
@@ -183,23 +328,60 @@ export default class Spine extends Renderable {
         this.skeletonRenderer.draw(renderer, this.skeleton);
     }
 
+    /**
+     * Sets the current animation for a track, discarding any queued animations.
+     * @param {number} [track_index] -  If the formerly current track entry was never applied to a skeleton, it is replaced (not mixed from). In either case trackEnd determines when the track is cleared.
+     * @param {number} [index] - the animation index
+     * @param {boolean} [loop= false] - If true, the animation will repeat. If false it will not, instead its last frame is applied if played beyond its duration.
+     * @returns {TrackEntry} A track entry to allow further customization of animation playback. References to the track entry must not be kept after the dispose event occurs.
+     */
     setAnimationByIndex(track_index, index, loop = false) {
         if (index < 0 || index >= this.skeleton.data.animations.length) {
             return (console.log("Animation Index not found"));
         } else {
-            this.animationState.setAnimation(track_index, this.skeleton.data.animations[index].name, loop);
+            return this.setAnimation(track_index, this.skeleton.data.animations[index].name, loop);
         }
     }
 
+    /**
+     * Sets the current animation for a track, discarding any queued animations.
+     * @param {number} [track_index] -  If the formerly current track entry was never applied to a skeleton, it is replaced (not mixed from). In either case trackEnd determines when the track is cleared.
+     * @param {string} [name] - the animation name
+     * @param {boolean} [loop= false] - If true, the animation will repeat. If false it will not, instead its last frame is applied if played beyond its duration.
+     * @returns {TrackEntry} A track entry to allow further customization of animation playback. References to the track entry must not be kept after the dispose event occurs.
+     * @example
+     * // set the current animation
+     * spineAlien.setAnimation(0, "death", true);
+     */
     setAnimation(track_index, name, loop = false) {
-        this.animationState.setAnimation(track_index, name, loop);
+        this.currentTrack = this.animationState.setAnimation(track_index, name, loop);
+        return this.currentTrack;
+    }
+
+    /**
+     * return true if the given animation name is the current running animation for the current track.
+     * @name isCurrentAnimation
+     * @param {string} name - animation name
+     * @returns {boolean}
+     * @example
+     * if (!this.isCurrentAnimation("death")) {
+     *     // do something funny...
+     * }
+     */
+    isCurrentAnimation(name) {
+        return typeof this.currentTrack !== "undefined" && this.currentTrack.animation.name === name;
     }
 
+    /**
+     * Adds an animation to be played after the current or last queued animation for a track, and sets the track entry's mixDuration.
+     * @param {number} [delay=0] - If > 0, sets delay. If <= 0, the delay set is the duration of the previous track entry minus any mix duration plus the specified `delay` (ie the mix ends at (`delay` = 0) or before (`delay` < 0) the previous track entry duration). If the previous entry is looping, its next loop completion is used instead of its duration.
+     * @return {TrackEntry} A track entry to allow further customization of animation playback. References to the track entry must not be kept after the dispose} event occurs.
+     */
     addAnimationByIndex(track_index, index, loop = false, delay = 0) {
         if (index < 0 || index >= this.skeleton.data.animations.length) {
             return (console.log("Animation Index not found"));
         } else {
-            this.animationState.addAnimation(track_index, this.skeleton.data.animations[index].name, loop, delay);
+            return this.addAnimation(track_index, this.skeleton.data.animations[index].name, loop, delay);
         }
     }
 
@@ -223,19 +405,55 @@ export default class Spine extends Renderable {
         };
     }
 
+    /**
+     * Set the default mix duration to use when no mix duration has been defined between two animations.
+     * @param {number} mixTime
+     */
     setDefaultMixTime(mixTime) {
-        this.animationState.data.defaultMix = mixTime;
+        this.animationState.data.defaultMix = this.mixTime = mixTime;
     }
 
+    /**
+     * Sets a mix duration by animation name.
+     */
     setTransitionMixTime(firstAnimation, secondAnimation, mixTime) {
         this.animationState.setMix(firstAnimation, secondAnimation, mixTime);
     }
 
+    /**
+     * Sets a skin by name.
+     * @param {string} skinName
+     * @example
+     * // create a new Spine Renderable
+     * let spineAlien = new Spine(100, 100, {atlasFile: "mix-and-match-pma.atlas", jsonFile: "mix-and-match-pro.json"});
+     *
+     * // set default animation
+     * spineAlien.setAnimation(0, "dance", true);
+     *
+     * // set default skin
+     * spineAlien.setSkinByName("full-skins/girl");
+     *
+     * // add it to the game world
+     * me.game.world.addChild(spineAlien);
+     */
     setSkinByName(skinName) {
         this.skeleton.setSkinByName(skinName);
     }
 
+    /**
+     * Reset this slot to the setup pose.
+     */
     setToSetupPose() {
         this.skeleton.setToSetupPose();
+        // Spine uses Y-up, melonJS uses Y-down
+        this.skeleton.getRootBone().scaleY *= -1;
+        this.skeleton.updateWorldTransform();
+        // reset flip flags
+        this.isSpineFlipped.y = false;
+        this.isSpineFlipped.x = false;
+        // reset reference to current track entry
+        this.currentTrack = undefined;
+        // mark the object as dirty
+        this.isDirty = true;
     }
 }