@melonjs/spine-plugin 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+## 1.3.0 - 2023-08-28å
+
+- add support for Mesh Attachement
+- added more examples under the test folder and separated them into individual files
+- add a fullscreen option to examples (pressing the "F" key toggles fullscreen mode)
+
+## 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,6 +1,6 @@
 # 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/dc259c8e-def6-419e-83a9-cda374715686)
 
@@ -14,7 +14,7 @@ a [Spine](http://en.esotericsoftware.com/spine-in-depth) 4.1 plugin implementati
 Installation
 -------------------------------------------------------------------------------
 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.
+>Note: this plugin requires melonJS version 15.9.2 or higher.
 
 To install the plugin using npm :
 

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

@@ -4070,17 +4070,17 @@ declare class CanvasTexture extends Texture {
 }
 declare class SkeletonRenderer {
     constructor(runtime: any);
-    isWebGLRenderer: any;
     skeletonRenderer: any;
     runtime: any;
-    tempColor: Color;
     tintColor: Color$1;
-    vertexSize: number;
+    tempColor: Color$1;
     debugRendering: boolean;
     clipper: SkeletonClipping;
     clippingVertices: any[];
     clippingMask: Polygon;
     draw(renderer: any, skeleton: any): void;
+    drawTriangle(renderer: any, img: any, x0: any, y0: any, u0: any, v0: any, x1: any, y1: any, u1: any, v1: any, x2: any, y2: any, u2: any, v2: any): void;
+    computeMeshVertices(slot: any, mesh: any, pma: boolean | undefined, vertexSize: any): void;
 }
 import { Vector2d } from 'melonjs';
 /******************************************************************************

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

@@ -1,5 +1,5 @@
 /*!
- * melonJS Spine plugin - v1.2.0
+ * melonJS Spine plugin - v1.3.0
  * http://www.melonjs.org
  * @melonjs/spine-plugin is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -14929,16 +14929,19 @@ class AssetManager {
     }
 }
 
-const worldVertices = new Float32Array(8);
+const vertexSize = 2 + 2 + 4;
 const blendModeLUT = ["normal", "additive", "multiply", "screen"];
+const regionDebugColor = "green";
+const meshDebugColor = "yellow";
+const clipDebugColor = "blue";
+
+let worldVertices = new Float32Array(vertexSize * 1024);
 
 class SkeletonRenderer {
-    isWebGLRenderer;
     skeletonRenderer;
     runtime;
-    tempColor = new Color();
     tintColor = new Color$1();
-    vertexSize = 2 + 2 + 4;
+    tempColor = new Color$1();
     debugRendering = false;
     clipper = new SkeletonClipping();
     clippingVertices = [];
@@ -14947,18 +14950,22 @@ class SkeletonRenderer {
     constructor(runtime) {
         this.runtime = runtime;
         this.skeletonRenderer = new runtime.SkeletonRenderer();
-        this.tempColor = new Color();
     }
 
     draw(renderer, skeleton) {
         let clipper = this.clipper;
         let drawOrder = skeleton.drawOrder;
         let skeletonColor = skeleton.color;
+        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 clippedVertexSize = clipper.isClipping() ? 2 : vertexSize;
             let slot = drawOrder[i];
             let bone = slot.bone;
+            let image;
+            let region;
+            let triangles;
 
             if (!bone.active) {
                 clipper.clipEndWithSlot(slot);
@@ -14969,78 +14976,175 @@ class SkeletonRenderer {
             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) {
+                this.computeMeshVertices(slot, attachment, false, clippedVertexSize);
+                triangles = attachment.triangles;
+                region = attachment.region;
+                image = region.texture.getImage();
+            } 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;
                 let color = this.tintColor;
 
+                renderer.save();
+
                 color.setFloat(skeletonColor.r * slotColor.r * regionColor.r,
                     skeletonColor.g * slotColor.g * regionColor.g,
                     skeletonColor.b * slotColor.b * regionColor.b,
                     skeletonColor.a * slotColor.a * regionColor.a);
 
-                attachment.computeWorldVertices(slot, worldVertices, 0, clippedVertexSize);
-
-                renderer.save();
-                renderer.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
-                renderer.translate(attachment.offset[0], attachment.offset[1]);
-                renderer.rotate(Math$1.degToRad(attachment.rotation));
-
-                let atlasScale = attachment.width / region.originalWidth;
-                renderer.scale(atlasScale * attachment.scaleX, atlasScale * attachment.scaleY);
-
-                let w = region.width, h = region.height;
-                let hW = w / 2, hH = h / 2;
-                renderer.translate(hW, hH);
-                if (region.degrees === 90) {
-                    let t = w;
-                    w = h;
-                    h = t;
-                    renderer.rotate(-Math$1.ETA);
-                }
-                renderer.scale(1, -1);
-                renderer.translate(-hW, -hH);
+                renderer.setGlobalAlpha(color.a);
                 renderer.setTint(color);
                 renderer.setBlendMode(blendModeLUT[blendMode]);
-                renderer.setGlobalAlpha(color.a);
 
-                if (clipper.isClipping()) {
-                    renderer.setMask(this.clippingMask);
-                }
+                if (typeof triangles !== "undefined") {
+                    let vertices = worldVertices;
+                    for (var j = 0; j < triangles.length; j += 3) {
+                        let t1 = triangles[j] * 8, t2 = triangles[j + 1] * 8, t3 = triangles[j + 2] * 8;
+                        let x0 = vertices[t1], y0 = vertices[t1 + 1], u0 = vertices[t1 + 6], v0 = vertices[t1 + 7];
+                        let x1 = vertices[t2], y1 = vertices[t2 + 1], u1 = vertices[t2 + 6], v1 = vertices[t2 + 7];
+                        let x2 = vertices[t3], y2 = vertices[t3 + 1], u2 = vertices[t3 + 6], v2 = vertices[t3 + 7];
 
-                renderer.drawImage(image, image.width * region.u, image.height * region.v, w, h, 0, 0, w, h);
+                        this.drawTriangle(renderer, image, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2);
+                    }
+                } else {
+                    let atlasScale = attachment.width / region.originalWidth;
+                    let w = region.width, h = region.height;
+                    let hW = w / 2, hH = h / 2;
 
-                if (this.debugRendering === true) {
-                    renderer.setColor("green");
-                    renderer.strokeRect(0, 0, w, h);
+                    renderer.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
+                    renderer.translate(attachment.offset[0], attachment.offset[1]);
+                    renderer.rotate(Math$1.degToRad(attachment.rotation));
+                    renderer.scale(atlasScale * attachment.scaleX, atlasScale * attachment.scaleY);
+                    renderer.translate(hW, hH);
+                    if (region.degrees === 90) {
+                        let t = w;
+                        w = h;
+                        h = t;
+                        renderer.rotate(-Math$1.ETA);
+                    }
+                    renderer.scale(1, -1);
+                    renderer.translate(-hW, -hH);
+
+                    if (clipper.isClipping()) {
+                        renderer.setMask(clippingMask);
+                    }
+                    renderer.drawImage(image, image.width * region.u, image.height * region.v, w, h, 0, 0, w, h);
+
+                    if (debugRendering === true) {
+                        renderer.setColor(regionDebugColor);
+                        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();
         }
         clipper.clipEnd();
     }
+
+    drawTriangle(renderer, img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2) {
+        u0 *= img.width;
+        v0 *= img.height;
+        u1 *= img.width;
+        v1 *= img.height;
+        u2 *= img.width;
+        v2 *= img.height;
+
+        renderer.save();
+        renderer.beginPath();
+        renderer.moveTo(x0, y0);
+        renderer.lineTo(x1, y1);
+        renderer.lineTo(x2, y2);
+        renderer.closePath();
+        renderer.setMask();
+
+        x1 -= x0;
+        y1 -= y0;
+        x2 -= x0;
+        y2 -= y0;
+
+        u1 -= u0;
+        v1 -= v0;
+        u2 -= u0;
+        v2 -= v0;
+
+        var det = 1 / (u1 * v2 - u2 * v1),
+
+            // linear transformation
+            a = (v2 * x1 - v1 * x2) * det,
+            b = (v2 * y1 - v1 * y2) * det,
+            c = (u1 * x2 - u2 * x1) * det,
+            d = (u1 * y2 - u2 * y1) * det,
+
+            // translation
+            e = x0 - a * u0 - c * v0,
+            f = y0 - b * u0 - d * v0;
+
+        renderer.transform(a, b, c, d, e, f);
+        renderer.drawImage(img, 0, 0);
+        renderer.clearMask();
+        renderer.restore();
+
+        if (this.debugRendering === true) {
+            renderer.setColor(meshDebugColor);
+            renderer.stroke();
+        }
+
+    }
+
+    computeMeshVertices(slot, mesh, pma = false, vertexSize) {
+        let skeletonColor = slot.bone.skeleton.color;
+        let slotColor = slot.color;
+        let regionColor = mesh.color;
+        let alpha = skeletonColor.a * slotColor.a * regionColor.a;
+        let multiplier = pma ? alpha : 1;
+
+        this.tempColor.setFloat(skeletonColor.r * slotColor.r * regionColor.r * multiplier,
+                                skeletonColor.g * slotColor.g * regionColor.g * multiplier,
+                                skeletonColor.b * slotColor.b * regionColor.b * multiplier,
+                                alpha);
+
+        if (worldVertices.length < mesh.worldVerticesLength) worldVertices = new Float32Array(mesh.worldVerticesLength);
+        mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, worldVertices, 0, vertexSize);
+
+        let uvs = mesh.uvs;
+        let color = this.tempColor.toArray();
+        let vertices = worldVertices;
+        let vertexCount = mesh.worldVerticesLength / 2;
+        for (let i = 0, u = 0, v = 2; i < vertexCount; i++) {
+            vertices[v++] = color[0];
+            vertices[v++] = color[1];
+            vertices[v++] = color[2];
+            vertices[v++] = color[3];
+            vertices[v++] = uvs[u++];
+            vertices[v++] = uvs[u++];
+            v += 2;
+        }
+    }
 }
 
 let assetManager = new AssetManager();

package/package.json

@@ -1,27 +1,31 @@
 {
   "name": "@melonjs/spine-plugin",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "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,10 +42,11 @@
     "src/",
     "package.json",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "CHANGELOG.md"
   ],
   "peerDependencies": {
-    "melonjs": "^15.9.0"
+    "melonjs": "^15.9.2"
   },
   "dependencies": {
     "@esotericsoftware/spine-canvas": "^4.2.18",
@@ -49,17 +54,17 @@
     "@esotericsoftware/spine-webgl": "^4.2.18"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.22.0",
+    "@babel/eslint-parser": "^7.22.11",
     "@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",
+    "del-cli": "^5.0.1",
+    "eslint": "^8.48.0",
     "eslint-plugin-jsdoc": "^46.5.0",
-    "rollup": "^3.28.0",
+    "rollup": "^3.28.1",
     "rollup-plugin-bundle-size": "^1.0.3",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   },
   "scripts": {
     "build": "npm run clean && npm run lint && rollup -c --silent && npm run types",
@@ -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,16 +1,19 @@
 import { Color as MColor, Math as MMath, Polygon } from "melonjs";
-import { SkeletonClipping, ClippingAttachment, MeshAttachment, RegionAttachment, Color } from "@esotericsoftware/spine-core";
+import { SkeletonClipping, ClippingAttachment, MeshAttachment, RegionAttachment } from "@esotericsoftware/spine-core";
 
-const worldVertices = new Float32Array(8);
+const vertexSize = 2 + 2 + 4;
 const blendModeLUT = ["normal", "additive", "multiply", "screen"];
+const regionDebugColor = "green";
+const meshDebugColor = "yellow";
+const clipDebugColor = "blue";
+
+let worldVertices = new Float32Array(vertexSize * 1024);
 
 export default class SkeletonRenderer {
-    isWebGLRenderer;
     skeletonRenderer;
     runtime;
-    tempColor = new Color();
     tintColor = new MColor();
-    vertexSize = 2 + 2 + 4;
+    tempColor = new MColor();
     debugRendering = false;
     clipper = new SkeletonClipping();
     clippingVertices = [];
@@ -19,18 +22,22 @@ export default class SkeletonRenderer {
     constructor(runtime) {
         this.runtime = runtime;
         this.skeletonRenderer = new runtime.SkeletonRenderer();
-        this.tempColor = new Color();
     }
 
     draw(renderer, skeleton) {
         let clipper = this.clipper;
         let drawOrder = skeleton.drawOrder;
         let skeletonColor = skeleton.color;
+        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 clippedVertexSize = clipper.isClipping() ? 2 : vertexSize;
             let slot = drawOrder[i];
             let bone = slot.bone;
+            let image;
+            let region;
+            let triangles;
 
             if (!bone.active) {
                 clipper.clipEndWithSlot(slot);
@@ -41,76 +48,173 @@ export default class SkeletonRenderer {
             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) {
+                this.computeMeshVertices(slot, attachment, false, clippedVertexSize);
+                triangles = attachment.triangles;
+                region = attachment.region;
+                image = region.texture.getImage();
+            } 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;
                 let color = this.tintColor;
 
+                renderer.save();
+
                 color.setFloat(skeletonColor.r * slotColor.r * regionColor.r,
                     skeletonColor.g * slotColor.g * regionColor.g,
                     skeletonColor.b * slotColor.b * regionColor.b,
                     skeletonColor.a * slotColor.a * regionColor.a);
 
-                attachment.computeWorldVertices(slot, worldVertices, 0, clippedVertexSize);
-
-                renderer.save();
-                renderer.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
-                renderer.translate(attachment.offset[0], attachment.offset[1]);
-                renderer.rotate(MMath.degToRad(attachment.rotation));
-
-                let atlasScale = attachment.width / region.originalWidth;
-                renderer.scale(atlasScale * attachment.scaleX, atlasScale * attachment.scaleY);
-
-                let w = region.width, h = region.height;
-                let hW = w / 2, hH = h / 2;
-                renderer.translate(hW, hH);
-                if (region.degrees === 90) {
-                    let t = w;
-                    w = h;
-                    h = t;
-                    renderer.rotate(-MMath.ETA);
-                }
-                renderer.scale(1, -1);
-                renderer.translate(-hW, -hH);
+                renderer.setGlobalAlpha(color.a);
                 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);
+                if (typeof triangles !== "undefined") {
+                    let vertices = worldVertices;
+                    for (var j = 0; j < triangles.length; j += 3) {
+                        let t1 = triangles[j] * 8, t2 = triangles[j + 1] * 8, t3 = triangles[j + 2] * 8;
+                        let x0 = vertices[t1], y0 = vertices[t1 + 1], u0 = vertices[t1 + 6], v0 = vertices[t1 + 7];
+                        let x1 = vertices[t2], y1 = vertices[t2 + 1], u1 = vertices[t2 + 6], v1 = vertices[t2 + 7];
+                        let x2 = vertices[t3], y2 = vertices[t3 + 1], u2 = vertices[t3 + 6], v2 = vertices[t3 + 7];
+
+                        this.drawTriangle(renderer, image, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2);
+                    }
+                } else {
+                    let atlasScale = attachment.width / region.originalWidth;
+                    let w = region.width, h = region.height;
+                    let hW = w / 2, hH = h / 2;
+
+                    renderer.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
+                    renderer.translate(attachment.offset[0], attachment.offset[1]);
+                    renderer.rotate(MMath.degToRad(attachment.rotation));
+                    renderer.scale(atlasScale * attachment.scaleX, atlasScale * attachment.scaleY);
+                    renderer.translate(hW, hH);
+                    if (region.degrees === 90) {
+                        let t = w;
+                        w = h;
+                        h = t;
+                        renderer.rotate(-MMath.ETA);
+                    }
+                    renderer.scale(1, -1);
+                    renderer.translate(-hW, -hH);
+
+                    if (clipper.isClipping()) {
+                        renderer.setMask(clippingMask);
+                    }
+                    renderer.drawImage(image, image.width * region.u, image.height * region.v, w, h, 0, 0, w, h);
+
+                    if (debugRendering === true) {
+                        renderer.setColor(regionDebugColor);
+                        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();
         }
         clipper.clipEnd();
     }
+
+    drawTriangle(renderer, img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2) {
+        u0 *= img.width;
+        v0 *= img.height;
+        u1 *= img.width;
+        v1 *= img.height;
+        u2 *= img.width;
+        v2 *= img.height;
+
+        renderer.save();
+        renderer.beginPath();
+        renderer.moveTo(x0, y0);
+        renderer.lineTo(x1, y1);
+        renderer.lineTo(x2, y2);
+        renderer.closePath();
+        renderer.setMask();
+
+        x1 -= x0;
+        y1 -= y0;
+        x2 -= x0;
+        y2 -= y0;
+
+        u1 -= u0;
+        v1 -= v0;
+        u2 -= u0;
+        v2 -= v0;
+
+        var det = 1 / (u1 * v2 - u2 * v1),
+
+            // linear transformation
+            a = (v2 * x1 - v1 * x2) * det,
+            b = (v2 * y1 - v1 * y2) * det,
+            c = (u1 * x2 - u2 * x1) * det,
+            d = (u1 * y2 - u2 * y1) * det,
+
+            // translation
+            e = x0 - a * u0 - c * v0,
+            f = y0 - b * u0 - d * v0;
+
+        renderer.transform(a, b, c, d, e, f);
+        renderer.drawImage(img, 0, 0);
+        renderer.clearMask();
+        renderer.restore();
+
+        if (this.debugRendering === true) {
+            renderer.setColor(meshDebugColor);
+            renderer.stroke();
+        }
+
+    }
+
+    computeMeshVertices(slot, mesh, pma = false, vertexSize) {
+        let skeletonColor = slot.bone.skeleton.color;
+        let slotColor = slot.color;
+        let regionColor = mesh.color;
+        let alpha = skeletonColor.a * slotColor.a * regionColor.a;
+        let multiplier = pma ? alpha : 1;
+
+        this.tempColor.setFloat(skeletonColor.r * slotColor.r * regionColor.r * multiplier,
+                                skeletonColor.g * slotColor.g * regionColor.g * multiplier,
+                                skeletonColor.b * slotColor.b * regionColor.b * multiplier,
+                                alpha);
+
+        if (worldVertices.length < mesh.worldVerticesLength) worldVertices = new Float32Array(mesh.worldVerticesLength);
+        mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, worldVertices, 0, vertexSize);
+
+        let uvs = mesh.uvs;
+        let color = this.tempColor.toArray();
+        let vertices = worldVertices;
+        let vertexCount = mesh.worldVerticesLength / 2;
+        for (let i = 0, u = 0, v = 2; i < vertexCount; i++) {
+            vertices[v++] = color[0];
+            vertices[v++] = color[1];
+            vertices[v++] = color[2];
+            vertices[v++] = color[3];
+            vertices[v++] = uvs[u++];
+            vertices[v++] = uvs[u++];
+            v += 2;
+        }
+    }
 }