@melonjs/spine-plugin 1.0.0 → 1.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 a [Spine](http://en.esotericsoftware.com/spine-in-depth) 4.1 plugin implementation for [melonJS 2](www.melonjs.org)
 
-![melonjs-spine-gif](https://github.com/melonjs/spine-plugin/assets/4033090/e4f1db3e-e2c7-4d18-9d80-b42fc9897c59)
+![melonjs-spine-gif](https://github.com/melonjs/spine-plugin/assets/4033090/dc259c8e-def6-419e-83a9-cda374715686)
 
 >Note: although functional, this plugin is still a work in progress. Feedback and especially contributions are welcome!
 
@@ -13,10 +13,11 @@ a [Spine](http://en.esotericsoftware.com/spine-in-depth) 4.1 plugin implementati
 
 Installation
 -------------------------------------------------------------------------------
-this plugin is already bundled with the require Spine runtime, so there is no need to install it separately.
+this plugin is already bundled with the required Spine runtime, so there is no need to install it separately.
 >Note: this plugin requires melonJS version 15.9 or higher.
 
 To install the plugin using npm :
+
 `$ [sudo] npm install @melonjs/spine-plugin`
 
 Then import and use the plugin in your project. For example:
@@ -29,8 +30,8 @@ Spine.assetManager.loadAsset("alien.atlas", "alien-ess.json");
 
 // create new Spine Renderable
 export default class AlienSpine extends Spine {
-	constructor(x, y, settings ){
-		super(x, y, settings);
+    constructor(x, y, settings ){
+        super(x, y, settings);
         ...
     }
 }

package/dist/@melonjs/spine-plugin.d.ts

@@ -370,6 +370,8 @@ declare class Spine extends Renderable$1 {
     mixTime: any;
     jsonFile: any;
     atlasFile: any;
+    set debugRendering(arg: boolean);
+    get debugRendering(): boolean;
     setSkeleton(atlasFile: any, jsonFile: any): void;
     loadSpineAssets(atlasFile: any, jsonFile: any): void;
     rotate(angle: any, v: any): void;
@@ -4073,8 +4075,12 @@ declare class SkeletonRenderer {
     runtime: any;
     tempColor: Color;
     tintColor: Color$1;
+    vertexSize: number;
+    debugRendering: boolean;
+    clipper: SkeletonClipping;
+    clippingVertices: any[];
+    clippingMask: Polygon;
     draw(renderer: any, skeleton: any): void;
-    updateSkeleton(skeleton: any): void;
 }
 import { Vector2d } from 'melonjs';
 /******************************************************************************
@@ -4127,4 +4133,5 @@ declare class Vertices {
     vertices: any;
 }
 import { Color as Color$1 } from 'melonjs';
+import { Polygon } from 'melonjs';
 export { Spine as default };

package/dist/@melonjs/spine-plugin.js

@@ -1,11 +1,11 @@
 /*!
- * melonJS Spine plugin - v1.0.0
+ * melonJS Spine plugin - v1.2.0
  * http://www.melonjs.org
  * @melonjs/spine-plugin is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
  * @copyright (C) 2011 - 2023 AltByte Pte Ltd
  */
-import { event, video, Color as Color$1, Math as Math$1, Renderable as Renderable$1, Vector2d } from 'melonjs';
+import { event, video, Color as Color$1, Polygon, Math as Math$1, Renderable as Renderable$1, Vector2d } from 'melonjs';
 
 /******************************************************************************
  * Spine Runtimes License Agreement
@@ -14938,6 +14938,11 @@ class SkeletonRenderer {
     runtime;
     tempColor = new Color();
     tintColor = new Color$1();
+    vertexSize = 2 + 2 + 4;
+    debugRendering = false;
+    clipper = new SkeletonClipping();
+    clippingVertices = [];
+    clippingMask = new Polygon(0, 0);
 
     constructor(runtime) {
         this.runtime = runtime;
@@ -14946,15 +14951,20 @@ class SkeletonRenderer {
     }
 
     draw(renderer, skeleton) {
-        // based on https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-canvas/src/SkeletonRenderer.ts
+        let clipper = this.clipper;
         let drawOrder = skeleton.drawOrder;
         let skeletonColor = skeleton.color;
 
         for (var i = 0, n = drawOrder.length; i < n; i++) {
+            let clippedVertexSize = clipper.isClipping() ? 2 : this.vertexSize;
             let slot = drawOrder[i];
             let bone = slot.bone;
 
-            if (!bone.active) continue;
+            if (!bone.active) {
+                clipper.clipEndWithSlot(slot);
+                renderer.clearMask();
+                continue;
+            }
 
             let attachment = slot.getAttachment();
 
@@ -14971,7 +14981,7 @@ class SkeletonRenderer {
                     skeletonColor.b * slotColor.b * regionColor.b,
                     skeletonColor.a * slotColor.a * regionColor.a);
 
-                attachment.computeWorldVertices(slot, worldVertices, 0, 2);
+                attachment.computeWorldVertices(slot, worldVertices, 0, clippedVertexSize);
 
                 renderer.save();
                 renderer.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
@@ -14995,17 +15005,41 @@ class SkeletonRenderer {
                 renderer.setTint(color);
                 renderer.setBlendMode(blendModeLUT[blendMode]);
                 renderer.setGlobalAlpha(color.a);
+
+                if (clipper.isClipping()) {
+                    renderer.setMask(this.clippingMask);
+                }
+
                 renderer.drawImage(image, image.width * region.u, image.height * region.v, w, h, 0, 0, w, h);
+
+                if (this.debugRendering === true) {
+                    renderer.setColor("green");
+                    renderer.strokeRect(0, 0, w, h);
+                }
+
                 renderer.restore();
+            } else if (attachment instanceof MeshAttachment) {
+                // do nothing for now;
+            } else if (attachment instanceof ClippingAttachment) {
+                let clip = attachment;
+                let vertices = this.clippingVertices;
+                clipper.clipStart(slot, clip);
+                clip.computeWorldVertices(slot, 0, clip.worldVerticesLength, vertices, 0, 2);
+                this.clippingMask.setVertices(vertices, clip.worldVerticesLength);
+                if (this.debugRendering === true) {
+                    renderer.setColor("blue");
+                    renderer.stroke(this.clippingMask);
+                }
+                continue;
+            } else {
+                clipper.clipEndWithSlot(slot);
+                renderer.clearMask();
+                continue;
             }
+            clipper.clipEndWithSlot(slot);
+            renderer.clearMask();
         }
-    }
-
-    updateSkeleton(skeleton) {
-        // for update skeleton
-        //if (this.isWebGLRenderer === false) {
-            skeleton.scaleY = -1;
-        //}
+        clipper.clipEnd();
     }
 }
 
@@ -15055,9 +15089,19 @@ class Spine extends Renderable$1 {
         }
     }
 
+    get debugRendering() {
+        return this.skeletonRenderer.debugRendering;
+    }
+
+    set debugRendering(value) {
+        this.skeletonRenderer.debugRendering = value;
+    }
+
     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) {
@@ -15139,7 +15183,7 @@ class Spine extends Renderable$1 {
      * @param {number} dt - time since the last update in milliseconds.
      * @returns {boolean} true if the renderable is dirty
      */
-    update(dt) { // eslint-disable-line no-unused-vars
+    update(dt) {
         if (typeof this.skeleton !== "undefined") {
             let rootBone = this.skeleton.getRootBone();
 
@@ -15151,7 +15195,6 @@ class Spine extends Renderable$1 {
                 rootBone.y = this.pos.y;
             }
 
-            this.skeletonRenderer.updateSkeleton(rootBone);
             // Update and apply the animation state, update the skeleton's
             // world transforms and render the skeleton.
             this.animationState.update(dt / 1000);
@@ -15176,12 +15219,12 @@ class Spine extends Renderable$1 {
         this.skeletonRenderer.draw(renderer, this.skeleton);
     }
 
-
     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); }
+        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);
+        }
     }
 
     setAnimation(track_index, name, loop = false) {
@@ -15189,10 +15232,11 @@ class Spine extends Renderable$1 {
     }
 
     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); }
+        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);
+        }
     }
 
     addAnimationByName(track_index, animationName, loop = false, delay = 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melonjs/spine-plugin",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "melonJS Spine plugin",
   "type": "module",
   "keywords": [
@@ -52,11 +52,11 @@
     "@babel/eslint-parser": "^7.22.0",
     "@babel/plugin-syntax-import-assertions": "^7.22.5",
     "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.0",
     "@rollup/plugin-replace": "^5.0.2",
     "del-cli": "^5.0.0",
     "eslint": "^8.47.0",
-    "eslint-plugin-jsdoc": "^46.4.6",
+    "eslint-plugin-jsdoc": "^46.5.0",
     "rollup": "^3.28.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "typescript": "^5.1.6"
@@ -70,7 +70,7 @@
     "clean": "del-cli --force dist/*",
     "types": "tsc"
   },
-  "homepage": "https://github.com/melonjs/debug-spine#readme",
+  "homepage": "https://github.com/melonjs/spine-plugin#readme",
   "directories": {
     "test": "test"
   }

package/src/SkeletonRenderer.js

@@ -1,5 +1,5 @@
-import { Color as MColor, Math as MMath } from "melonjs";
-import { RegionAttachment, Color } from "@esotericsoftware/spine-core";
+import { Color as MColor, Math as MMath, Polygon } from "melonjs";
+import { SkeletonClipping, ClippingAttachment, MeshAttachment, RegionAttachment, Color } from "@esotericsoftware/spine-core";
 
 const worldVertices = new Float32Array(8);
 const blendModeLUT = ["normal", "additive", "multiply", "screen"];
@@ -10,6 +10,11 @@ export default class SkeletonRenderer {
     runtime;
     tempColor = new Color();
     tintColor = new MColor();
+    vertexSize = 2 + 2 + 4;
+    debugRendering = false;
+    clipper = new SkeletonClipping();
+    clippingVertices = [];
+    clippingMask = new Polygon(0, 0);
 
     constructor(runtime) {
         this.runtime = runtime;
@@ -18,15 +23,20 @@ export default class SkeletonRenderer {
     }
 
     draw(renderer, skeleton) {
-        // based on https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-canvas/src/SkeletonRenderer.ts
+        let clipper = this.clipper;
         let drawOrder = skeleton.drawOrder;
         let skeletonColor = skeleton.color;
 
         for (var i = 0, n = drawOrder.length; i < n; i++) {
+            let clippedVertexSize = clipper.isClipping() ? 2 : this.vertexSize;
             let slot = drawOrder[i];
             let bone = slot.bone;
 
-            if (!bone.active) continue;
+            if (!bone.active) {
+                clipper.clipEndWithSlot(slot);
+                renderer.clearMask();
+                continue;
+            }
 
             let attachment = slot.getAttachment();
 
@@ -43,7 +53,7 @@ export default class SkeletonRenderer {
                     skeletonColor.b * slotColor.b * regionColor.b,
                     skeletonColor.a * slotColor.a * regionColor.a);
 
-                attachment.computeWorldVertices(slot, worldVertices, 0, 2);
+                attachment.computeWorldVertices(slot, worldVertices, 0, clippedVertexSize);
 
                 renderer.save();
                 renderer.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
@@ -67,16 +77,40 @@ export default class SkeletonRenderer {
                 renderer.setTint(color);
                 renderer.setBlendMode(blendModeLUT[blendMode]);
                 renderer.setGlobalAlpha(color.a);
+
+                if (clipper.isClipping()) {
+                    renderer.setMask(this.clippingMask);
+                }
+
                 renderer.drawImage(image, image.width * region.u, image.height * region.v, w, h, 0, 0, w, h);
+
+                if (this.debugRendering === true) {
+                    renderer.setColor("green");
+                    renderer.strokeRect(0, 0, w, h);
+                }
+
                 renderer.restore();
+            } else if (attachment instanceof MeshAttachment) {
+                // do nothing for now;
+            } else if (attachment instanceof ClippingAttachment) {
+                let clip = attachment;
+                let vertices = this.clippingVertices;
+                clipper.clipStart(slot, clip);
+                clip.computeWorldVertices(slot, 0, clip.worldVerticesLength, vertices, 0, 2);
+                this.clippingMask.setVertices(vertices, clip.worldVerticesLength);
+                if (this.debugRendering === true) {
+                    renderer.setColor("blue");
+                    renderer.stroke(this.clippingMask);
+                }
+                continue;
+            } else {
+                clipper.clipEndWithSlot(slot);
+                renderer.clearMask();
+                continue;
             }
+            clipper.clipEndWithSlot(slot);
+            renderer.clearMask();
         }
-    }
-
-    updateSkeleton(skeleton) {
-        // for update skeleton
-        //if (this.isWebGLRenderer === false) {
-            skeleton.scaleY = -1;
-        //}
+        clipper.clipEnd();
     }
 }

package/src/index.js

@@ -53,9 +53,19 @@ export default class Spine extends Renderable {
         }
     }
 
+    get debugRendering() {
+        return this.skeletonRenderer.debugRendering;
+    }
+
+    set debugRendering(value) {
+        this.skeletonRenderer.debugRendering = value;
+    }
+
     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) {
@@ -137,7 +147,7 @@ export default class Spine extends Renderable {
      * @param {number} dt - time since the last update in milliseconds.
      * @returns {boolean} true if the renderable is dirty
      */
-    update(dt) { // eslint-disable-line no-unused-vars
+    update(dt) {
         if (typeof this.skeleton !== "undefined") {
             let rootBone = this.skeleton.getRootBone();
 
@@ -149,7 +159,6 @@ export default class Spine extends Renderable {
                 rootBone.y = this.pos.y;
             }
 
-            this.skeletonRenderer.updateSkeleton(rootBone);
             // Update and apply the animation state, update the skeleton's
             // world transforms and render the skeleton.
             this.animationState.update(dt / 1000);
@@ -174,12 +183,12 @@ export default class Spine extends Renderable {
         this.skeletonRenderer.draw(renderer, this.skeleton);
     }
 
-
     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); }
+        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);
+        }
     }
 
     setAnimation(track_index, name, loop = false) {
@@ -187,10 +196,11 @@ export default class Spine extends Renderable {
     }
 
     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); }
+        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);
+        }
     }
 
     addAnimationByName(track_index, animationName, loop = false, delay = 0) {