@melonjs/spine-plugin 1.0.0

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@melonjs/spine-plugin",
+  "version": "1.0.0",
+  "description": "melonJS Spine plugin",
+  "type": "module",
+  "keywords": [
+    "2D",
+    "HTML5",
+    "javascript",
+    "TypeScript",
+    "es6",
+    "Canvas",
+    "WebGL",
+    "WebGL2",
+    "melonjs",
+    "Spine",
+    "esotericsoftware"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/melonjs/debug-spine.git"
+  },
+  "bugs": {
+    "url": "https://github.com/melonjs/debug-spine/issues"
+  },
+  "license": "MIT",
+  "author": "AltByte Pte Ltd",
+  "funding": "https://github.com/sponsors/melonjs",
+  "engines": {
+    "node": ">= 19"
+  },
+  "main": "dist/@melonjs/spine-plugin.js",
+  "module": "dist/@melonjs/spine-plugin.js",
+  "types": "dist/@melonjs/spine-plugin.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist/",
+    "src/",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "melonjs": "^15.9.0"
+  },
+  "dependencies": {
+    "@esotericsoftware/spine-canvas": "^4.2.18",
+    "@esotericsoftware/spine-core": "^4.2.18",
+    "@esotericsoftware/spine-webgl": "^4.2.18"
+  },
+  "devDependencies": {
+    "@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-replace": "^5.0.2",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.47.0",
+    "eslint-plugin-jsdoc": "^46.4.6",
+    "rollup": "^3.28.0",
+    "rollup-plugin-bundle-size": "^1.0.3",
+    "typescript": "^5.1.6"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run lint && rollup -c --silent && npm run types",
+    "lint": "eslint src/**.js rollup.config.mjs",
+    "serve": "python3 -m http.server",
+    "test": "npm run serve",
+    "prepublishOnly": "npm run build",
+    "clean": "del-cli --force dist/*",
+    "types": "tsc"
+  },
+  "homepage": "https://github.com/melonjs/debug-spine#readme",
+  "directories": {
+    "test": "test"
+  }
+}

package/src/AssetManager.js

@@ -0,0 +1,42 @@
+import { event, video } from "melonjs";
+import * as spineWebGL from "@esotericsoftware/spine-webgl";
+import * as spineCanvas from "@esotericsoftware/spine-canvas";
+
+export default class AssetManager {
+    asset_manager;
+    pathPrefix;
+
+    constructor(pathPrefix = "") {
+        event.once(event.VIDEO_INIT, this.initAssetManager.bind(this));
+        this.pathPrefix = pathPrefix;
+    }
+
+    initAssetManager() {
+        if (video.renderer.WebGLVersion >= 1) {
+            this.asset_manager = new spineWebGL.AssetManager(video.renderer.getContext(), this.pathPrefix);
+        } else {
+            // canvas renderer
+            this.asset_manager = new spineCanvas.AssetManager(this.pathPrefix);
+        }
+    }
+
+    setPrefix(pathPrefix) {
+        this.asset_manager.pathPrefix = pathPrefix;
+    }
+
+    loadAsset(atlas, skel) {
+        if (atlas) {
+            this.asset_manager.loadTextureAtlas(atlas);
+        }
+
+        if (skel.endsWith(".skel")) {
+            this.asset_manager.loadBinary(skel);
+        } else {
+            this.asset_manager.loadText(skel);
+        }
+    }
+
+    loadAll() {
+        return this.asset_manager.loadAll();
+    }
+}

package/src/SkeletonRenderer.js

@@ -0,0 +1,82 @@
+import { Color as MColor, Math as MMath } from "melonjs";
+import { RegionAttachment, Color } from "@esotericsoftware/spine-core";
+
+const worldVertices = new Float32Array(8);
+const blendModeLUT = ["normal", "additive", "multiply", "screen"];
+
+export default class SkeletonRenderer {
+    isWebGLRenderer;
+    skeletonRenderer;
+    runtime;
+    tempColor = new Color();
+    tintColor = new MColor();
+
+    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 drawOrder = skeleton.drawOrder;
+        let skeletonColor = skeleton.color;
+
+        for (var i = 0, n = drawOrder.length; i < n; i++) {
+            let slot = drawOrder[i];
+            let bone = slot.bone;
+
+            if (!bone.active) continue;
+
+            let attachment = slot.getAttachment();
+
+            if (attachment instanceof RegionAttachment) {
+                let region = attachment.region;
+                let image = region.texture.getImage();
+                let slotColor = slot.color;
+                let regionColor = attachment.color;
+                let blendMode = slot.data.blendMode;
+                let color = this.tintColor;
+
+                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, 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]);
+                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.setTint(color);
+                renderer.setBlendMode(blendModeLUT[blendMode]);
+                renderer.setGlobalAlpha(color.a);
+                renderer.drawImage(image, image.width * region.u, image.height * region.v, w, h, 0, 0, w, h);
+                renderer.restore();
+            }
+        }
+    }
+
+    updateSkeleton(skeleton) {
+        // for update skeleton
+        //if (this.isWebGLRenderer === false) {
+            skeleton.scaleY = -1;
+        //}
+    }
+}

package/src/index.js

@@ -0,0 +1,231 @@
+import { Math, Renderable, Vector2d, video } 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";
+
+export let assetManager = new AssetManager();
+
+export default class Spine extends Renderable {
+    runtime;
+    skeleton;
+    animationState;
+    skeletonRenderer;
+    assetManager;
+    root;
+    boneOffset;
+    boneSize;
+
+    constructor(x, y, settings) {
+        super(x, y, settings.width, settings.height);
+
+        if (video.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
+        this.anchorPoint.set(0, 0);
+
+        // displaying order
+        if (typeof settings.z !== "undefined") {
+            this.pos.z = settings.z;
+        }
+
+        this.scaleValue = {x: 1, y: 1};
+        this.boneOffset = new Vector2();
+        this.boneSize = new Vector2();
+
+        this.mixTime = settings.mixTime || 0.2;
+
+        if (settings.jsonFile) {
+            this.jsonFile = settings.jsonFile;
+            this.atlasFile = settings.atlasFile;
+
+            this.setSkeleton(this.atlasFile, this.jsonFile);
+        }
+    }
+
+    setSkeleton(atlasFile, jsonFile) {
+        this.loadSpineAssets(atlasFile, jsonFile);
+        this.root = this.skeleton.getRootBone();
+    }
+
+    loadSpineAssets(atlasFile, jsonFile) {
+        // Create the texture atlas and skeleton data.
+        let atlas = this.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));
+
+        // Instantiate a new skeleton based on the atlas and skeleton data.
+        this.skeleton = new this.runtime.Skeleton(skeletonData);
+        this.skeleton.setToSetupPose();
+        this.skeleton.updateWorldTransform();
+
+        // 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);
+    }
+
+    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);
+    }
+
+    scale(x, y = x) {
+        this.scaleValue = {x, y};
+        super.scale(x, y);
+    }
+
+    updateBounds(absolute = true) {
+        if (this.isRenderable) {
+            let bounds = this.getBounds();
+            let isIdentity = this.autoTransform === true && this.currentTransform.isIdentity();
+
+            bounds.clear();
+
+            if (typeof this.skeleton !== "undefined") {
+                let rootBone = this.skeleton.getRootBone();
+                let boneOffset = this.boneOffset;
+                let boneSize = this.boneSize;
+
+                this.skeleton.getBounds(boneOffset, boneSize);
+
+                bounds.addFrame(
+                    boneOffset.x - rootBone.x,
+                    boneOffset.y - rootBone.y,
+                    boneSize.x + boneOffset.x - rootBone.x,
+                    boneSize.y + boneOffset.y  - rootBone.y,
+                    !isIdentity ? this.currentTransform : undefined
+                );
+            } else {
+                bounds.addFrame(
+                    0,
+                    0,
+                    this.width,
+                    this.height,
+                    !isIdentity ? this.currentTransform : undefined
+                );
+            }
+
+            if (absolute === true) {
+                var absPos = this.getAbsolutePosition();
+                bounds.centerOn(absPos.x + bounds.centerX,  absPos.y + bounds.centerY);
+            }
+            return bounds;
+
+        } else {
+            // manage the case where updateBounds is called
+            // before the object being yet properly initialized
+            return super.updateBounds(absolute);
+        }
+    }
+
+    /**
+     * update function (automatically called by melonJS).
+     * @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
+        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;
+            }
+
+            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);
+            this.animationState.apply(this.skeleton);
+            this.skeleton.updateWorldTransform();
+
+            this.updateBounds();
+        }
+        return true;
+    }
+
+
+    /**
+     * draw this spine object
+     * @name draw
+     * @memberof Spine
+     * @protected
+     * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance
+     * @param {Camera2d} [viewport] - the viewport to (re)draw
+     */
+    draw(renderer) {
+        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); }
+    }
+
+    setAnimation(track_index, name, loop = false) {
+        this.animationState.setAnimation(track_index, name, loop);
+    }
+
+    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); }
+    }
+
+    addAnimationByName(track_index, animationName, loop = false, delay = 0) {
+        this.animationState.addAnimation(track_index, animationName, loop, delay);
+    }
+
+    getSpinePosition() {
+        return new Vector2d(this.pos.x, this.pos.y);
+    }
+
+    setSpineSize(width, height) {
+        this.width = width;
+        this.height = height;
+    }
+
+    getSpineSize() {
+        return {
+            width: this.width,
+            height: this.height
+        };
+    }
+
+    setDefaultMixTime(mixTime) {
+        this.animationState.data.defaultMix = mixTime;
+    }
+
+    setTransitionMixTime(firstAnimation, secondAnimation, mixTime) {
+        this.animationState.setMix(firstAnimation, secondAnimation, mixTime);
+    }
+
+    setSkinByName(skinName) {
+        this.skeleton.setSkinByName(skinName);
+    }
+
+    setToSetupPose() {
+        this.skeleton.setToSetupPose();
+    }
+}