@melonjs/spine-plugin 1.5.0 → 2.0.1

package/src/AssetManager.js

@@ -1,129 +0,0 @@
-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;
-
-    /**
-     * @param {CanvasRenderer|WebGLRenderer} renderer - a melonJS renderer instance
-     * @param {string} [pathPrefix=""] - a default path prefix for assets location
-     */
-    constructor(renderer, pathPrefix = "") {
-        this.pathPrefix = 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 =  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.loadTextureAtlas(atlas);
-        }
-
-        if (skel.endsWith(".skel")) {
-            this.loadBinary(skel);
-        } else {
-            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/SkeletonRenderer.js

@@ -1,220 +0,0 @@
-import { Color as MColor, Math as MMath, Polygon } from "melonjs";
-import { SkeletonClipping, ClippingAttachment, MeshAttachment, RegionAttachment } from "@esotericsoftware/spine-core";
-
-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 {
-    skeletonRenderer;
-    runtime;
-    tintColor = new MColor();
-    tempColor = new MColor();
-    debugRendering = false;
-    clipper = new SkeletonClipping();
-    clippingVertices = [];
-    clippingMask = new Polygon(0, 0);
-
-    constructor(runtime) {
-        this.runtime = runtime;
-        this.skeletonRenderer = new runtime.SkeletonRenderer();
-    }
-
-    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 : vertexSize;
-            let slot = drawOrder[i];
-            let bone = slot.bone;
-            let image;
-            let region;
-            let triangles;
-
-            if (!bone.active) {
-                clipper.clipEndWithSlot(slot);
-                renderer.clearMask();
-                continue;
-            }
-
-            let attachment = slot.getAttachment();
-
-            if (attachment instanceof RegionAttachment) {
-                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);
-
-                renderer.setGlobalAlpha(color.a);
-                renderer.setTint(color);
-                renderer.setBlendMode(blendModeLUT[blendMode]);
-
-                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();
-            }
-            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;
-        }
-    }
-}

package/src/SpinePlugin.js

@@ -1,24 +0,0 @@
-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);
-    }
-}