@melonjs/spine-plugin 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+## 1.2.1 - _2023-08-23
+
+- code refactoring and optimization to prepare for future feature additions
+- fix URLs in the package.json file
+
+## 1.2.0 - _2023-08-22
+
+- add support for clipping (coin example is now rendered properly)
+
+## 1.1.0 - _2023-08-19
+
+- add some basic debug rendering
+- optimize code (remove unneeded logic)
+
+## 1.0.0 - _2023-08-16_
+
+initial release

package/README.md

@@ -1,8 +1,8 @@
 # melonJS Spine Plugin
 
-a [Spine](http://en.esotericsoftware.com/spine-in-depth) 4.1 plugin implementation for [melonJS 2](www.melonjs.org)
+a [Spine](http://en.esotericsoftware.com/spine-in-depth) 4.1 plugin implementation for [melonJS 2](http://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!
 
@@ -17,6 +17,7 @@ this plugin is already bundled with the required Spine runtime, so there is no n
 >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:

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

@@ -4070,12 +4070,14 @@ declare class CanvasTexture extends Texture {
 }
 declare class SkeletonRenderer {
     constructor(runtime: any);
-    isWebGLRenderer: any;
     skeletonRenderer: any;
     runtime: any;
-    tempColor: Color;
     tintColor: Color$1;
+    vertexSize: number;
     debugRendering: boolean;
+    clipper: SkeletonClipping;
+    clippingVertices: any[];
+    clippingMask: Polygon;
     draw(renderer: any, skeleton: any): void;
 }
 import { Vector2d } from 'melonjs';
@@ -4129,4 +4131,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.1.0
+ * melonJS Spine plugin - v1.2.1
  * 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
@@ -14932,40 +14932,77 @@ class AssetManager {
 const worldVertices = new Float32Array(8);
 const blendModeLUT = ["normal", "additive", "multiply", "screen"];
 
+const regionDebugColor = "green";
+const clipDebugColor = "blue";
+
 class SkeletonRenderer {
-    isWebGLRenderer;
     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;
         this.skeletonRenderer = new runtime.SkeletonRenderer();
-        this.tempColor = new Color();
     }
 
     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;
-
-        if (this.debugRendering === true) {
-            renderer.setColor("green");
-        }
+        let clippingMask = this.clippingMask;
+        let debugRendering = this.debugRendering;
 
         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;
+            let image;
+            let region;
 
-            if (!bone.active) continue;
+            if (!bone.active) {
+                clipper.clipEndWithSlot(slot);
+                renderer.clearMask();
+                continue;
+            }
 
             let attachment = slot.getAttachment();
 
             if (attachment instanceof RegionAttachment) {
-                let region = attachment.region;
-                let image = region.texture.getImage();
+                attachment.computeWorldVertices(slot, worldVertices, 0, clippedVertexSize);
+                region = attachment.region;
+                image = region.texture.getImage();
+            } else if (attachment instanceof MeshAttachment) {
+                /*
+                // commenting for now as totally untested
+                let mesh = attachment;
+                mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, worldVertices, 0, 2);
+                region = mesh.region;
+                image = mesh.region.texture.getImage();
+                */
+               console.warn("spine-plugin: MeshAttachment is not supported yet");
+            } 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);
+                clippingMask.setVertices(vertices, clip.worldVerticesLength);
+                if (debugRendering === true) {
+                    renderer.setColor(clipDebugColor);
+                    renderer.stroke(clippingMask);
+                }
+                continue;
+            } else {
+                clipper.clipEndWithSlot(slot);
+                renderer.clearMask();
+                continue;
+            }
+
+            if (typeof image !== "undefined") {
                 let slotColor = slot.color;
                 let regionColor = attachment.color;
                 let blendMode = slot.data.blendMode;
@@ -14976,8 +15013,6 @@ class SkeletonRenderer {
                     skeletonColor.b * slotColor.b * regionColor.b,
                     skeletonColor.a * slotColor.a * regionColor.a);
 
-                attachment.computeWorldVertices(slot, worldVertices, 0, 2);
-
                 renderer.save();
                 renderer.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
                 renderer.translate(attachment.offset[0], attachment.offset[1]);
@@ -15000,13 +15035,24 @@ class SkeletonRenderer {
                 renderer.setTint(color);
                 renderer.setBlendMode(blendModeLUT[blendMode]);
                 renderer.setGlobalAlpha(color.a);
+
+                if (clipper.isClipping()) {
+                    renderer.setMask(clippingMask);
+                }
+
                 renderer.drawImage(image, image.width * region.u, image.height * region.v, w, h, 0, 0, w, h);
-                if (this.debugRendering === true) {
+
+                if (debugRendering === true) {
+                    renderer.setColor(regionDebugColor);
                     renderer.strokeRect(0, 0, w, h);
                 }
+
                 renderer.restore();
             }
+            clipper.clipEndWithSlot(slot);
+            renderer.clearMask();
         }
+        clipper.clipEnd();
     }
 }
 

package/package.json

@@ -1,27 +1,31 @@
 {
   "name": "@melonjs/spine-plugin",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "melonJS Spine plugin",
+  "homepage": "https://github.com/melonjs/spine-plugin#readme",
   "type": "module",
   "keywords": [
     "2D",
     "HTML5",
     "javascript",
     "TypeScript",
-    "es6",
+    "ES6",
     "Canvas",
     "WebGL",
     "WebGL2",
     "melonjs",
-    "Spine",
+    "plugin",
+    "spine",
+    "spine-runtimes",
+    "spine-animation",
     "esotericsoftware"
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/melonjs/debug-spine.git"
+    "url": "git+https://github.com/melonjs/spine-plugin.git"
   },
   "bugs": {
-    "url": "https://github.com/melonjs/debug-spine/issues"
+    "url": "https://github.com/melonjs/spine-plugin/issues"
   },
   "license": "MIT",
   "author": "AltByte Pte Ltd",
@@ -38,7 +42,8 @@
     "src/",
     "package.json",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "CHANGELOG.md"
   ],
   "peerDependencies": {
     "melonjs": "^15.9.0"
@@ -52,12 +57,12 @@
     "@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.2.0",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-replace": "^5.0.2",
     "del-cli": "^5.0.0",
     "eslint": "^8.47.0",
-    "eslint-plugin-jsdoc": "^46.4.6",
-    "rollup": "^3.28.0",
+    "eslint-plugin-jsdoc": "^46.5.0",
+    "rollup": "^3.28.1",
     "rollup-plugin-bundle-size": "^1.0.3",
     "typescript": "^5.1.6"
   },
@@ -69,9 +74,5 @@
     "prepublishOnly": "npm run build",
     "clean": "del-cli --force dist/*",
     "types": "tsc"
-  },
-  "homepage": "https://github.com/melonjs/spine-plugin#readme",
-  "directories": {
-    "test": "test"
   }
 }

package/src/SkeletonRenderer.js

@@ -1,43 +1,80 @@
-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 } from "@esotericsoftware/spine-core";
 
 const worldVertices = new Float32Array(8);
 const blendModeLUT = ["normal", "additive", "multiply", "screen"];
 
+const regionDebugColor = "green";
+const clipDebugColor = "blue";
+
 export default class SkeletonRenderer {
-    isWebGLRenderer;
     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;
         this.skeletonRenderer = new runtime.SkeletonRenderer();
-        this.tempColor = new Color();
     }
 
     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;
-
-        if (this.debugRendering === true) {
-            renderer.setColor("green");
-        }
+        let clippingMask = this.clippingMask;
+        let debugRendering = this.debugRendering;
 
         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;
+            let image;
+            let region;
 
-            if (!bone.active) continue;
+            if (!bone.active) {
+                clipper.clipEndWithSlot(slot);
+                renderer.clearMask();
+                continue;
+            }
 
             let attachment = slot.getAttachment();
 
             if (attachment instanceof RegionAttachment) {
-                let region = attachment.region;
-                let image = region.texture.getImage();
+                attachment.computeWorldVertices(slot, worldVertices, 0, clippedVertexSize);
+                region = attachment.region;
+                image = region.texture.getImage();
+            } else if (attachment instanceof MeshAttachment) {
+                /*
+                // commenting for now as totally untested
+                let mesh = attachment;
+                mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, worldVertices, 0, 2);
+                region = mesh.region;
+                image = mesh.region.texture.getImage();
+                */
+               console.warn("spine-plugin: MeshAttachment is not supported yet");
+            } 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);
+                clippingMask.setVertices(vertices, clip.worldVerticesLength);
+                if (debugRendering === true) {
+                    renderer.setColor(clipDebugColor);
+                    renderer.stroke(clippingMask);
+                }
+                continue;
+            } else {
+                clipper.clipEndWithSlot(slot);
+                renderer.clearMask();
+                continue;
+            }
+
+            if (typeof image !== "undefined") {
                 let slotColor = slot.color;
                 let regionColor = attachment.color;
                 let blendMode = slot.data.blendMode;
@@ -48,8 +85,6 @@ export default class SkeletonRenderer {
                     skeletonColor.b * slotColor.b * regionColor.b,
                     skeletonColor.a * slotColor.a * regionColor.a);
 
-                attachment.computeWorldVertices(slot, worldVertices, 0, 2);
-
                 renderer.save();
                 renderer.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
                 renderer.translate(attachment.offset[0], attachment.offset[1]);
@@ -72,12 +107,23 @@ export default class SkeletonRenderer {
                 renderer.setTint(color);
                 renderer.setBlendMode(blendModeLUT[blendMode]);
                 renderer.setGlobalAlpha(color.a);
+
+                if (clipper.isClipping()) {
+                    renderer.setMask(clippingMask);
+                }
+
                 renderer.drawImage(image, image.width * region.u, image.height * region.v, w, h, 0, 0, w, h);
-                if (this.debugRendering === true) {
+
+                if (debugRendering === true) {
+                    renderer.setColor(regionDebugColor);
                     renderer.strokeRect(0, 0, w, h);
                 }
+
                 renderer.restore();
             }
+            clipper.clipEndWithSlot(slot);
+            renderer.clearMask();
         }
+        clipper.clipEnd();
     }
 }