@melonjs/spine-plugin 1.4.0 → 2.0.0

package/src/AssetManager.js

@@ -1,68 +0,0 @@
-import { event, video } 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 {string} [pathPrefix=""] - a default path prefix for assets location
-     */
-    constructor(pathPrefix = "") {
-        event.once(event.VIDEO_INIT, () => {
-            this.pathPrefix = pathPrefix;
-            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);
-            }
-        });
-    }
-
-    /**
-     * 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
-     * // 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.asset_manager.loadTextureAtlas(atlas);
-        }
-
-        if (skel.endsWith(".skel")) {
-            this.asset_manager.loadBinary(skel);
-        } else {
-            this.asset_manager.loadText(skel);
-        }
-    }
-
-    /**
-     * load all defined spine assets
-     * @see loadAsset
-     */
-    loadAll() {
-        return this.asset_manager.loadAll();
-    }
-}

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/index.js

@@ -1,411 +0,0 @@
-import { Math, Renderable, Vector2d, video, loader, utils, event } 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";
-
-import { name, version, dependencies, homepage } from "../package.json";
-
-export let assetManager = new AssetManager();
-
-// a custom Spine parser for melonJS preloader
-function spineParser(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;
-
-    // set url prefix
-    assetManager.setPrefix(path);
-
-    // load asset
-    switch (ext) {
-        case "atlas":
-            assetManager.asset_manager.loadTextureAtlas(filename, onload, onerror);
-            break;
-        case "json":
-            assetManager.asset_manager.loadText(filename, onload, onerror);
-            break;
-        case "skel":
-            assetManager.asset_manager.loadBinary(filename, onload, onerror);
-            break;
-        default:
-            throw "Spine plugin: unknown extension when preloading spine assets";
-    }
-
-    return 1;
-}
-
-// set the spine custom parser
-loader.setParser("spine", spineParser);
-
-// hello world
-event.once(event.VIDEO_INIT, () => {
-    console.log(`${name} ${version} - spine runtime ${dependencies["@esotericsoftware/spine-core"]} | ${homepage}`);
-});
-
-/**
- * @classdesc
- * An object to display a Spine animated skeleton on screen.
- * @augments Renderable
- */
-export default class Spine extends Renderable {
-    runtime;
-    skeleton;
-    animationState;
-    skeletonRenderer;
-    assetManager;
-    root;
-    boneOffset;
-    boneSize;
-
-    /**
-     * @param {number} x - the x coordinates of the Spine object
-     * @param {number} y - the y coordinates of the Spine object
-     * @param {object} settings - Configuration parameters for the Spine object
-     * @param {number} [settings.atlasFile] - the name of the atlasFile to be used to create this spine animation
-     * @param {number} [settings.jsonFile] - the name of the atlasFile to be used to create this spine animation
-     * @param {number} [settings.mixTime = 0.2] - the default mix duration to use when no mix duration has been defined between two animations.
-     * @example
-    * import * as Spine from '@melonjs/spine-plugin';
-    * import * as me from 'melonjs';
-    *
-    * // prepare/declare assets for the preloader
-    * const DataManifest = [
-    *     {
-    *         "name": "alien-ess.json",
-    *         "type": "spine",
-    *         "src": "data/spine/alien-ess.json"
-    *     },
-    *     {
-    *         "name": "alien.atlas",
-    *         "type": "spine",
-    *         "src": "data/spine/alien.atlas"
-    *     },
-    * ]
-    *
-    * // create a new Spine Renderable
-    * let spineAlien = new Spine(100, 100, {atlasFile: "alien.atlas", jsonFile: "alien-ess.json"});
-    *
-    * // set default animation
-    * spineAlien.setAnimation(0, "death", true);
-    *
-    * // add it to the game world
-    * me.game.world.addChild(spineAlien);
-    */
-    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;
-        }
-
-        // use internally when calulcating bounds
-        this.boneOffset = new Vector2();
-        this.boneSize = new Vector2();
-
-        // default mixTime
-        this.mixTime = typeof settings.mixTime !== "undefined" ? settings.mixTime :  0.2;
-
-
-        if (settings.jsonFile) {
-            this.jsonFile = settings.jsonFile;
-            this.atlasFile = settings.atlasFile;
-            this.setSkeleton(this.atlasFile, this.jsonFile);
-        }
-    }
-
-    /**
-     * Whether to enabler the debug mode when rendering the spine object
-     * @default false
-     * @type {boolean}
-     */
-    get debugRendering() {
-        return this.skeletonRenderer.debugRendering;
-    }
-
-    set debugRendering(value) {
-        this.skeletonRenderer.debugRendering = value;
-    }
-
-    /**
-     * set and load the given skeleton atlas and json definition files
-     * (use this if you did not specify any json or atlas through the constructor)
-     * @param {number} [atlasFile] - the name of the atlasFile to be used to create this spine animation
-     * @param {number} [jsonFile] - the name of the atlasFile to be used to create this spine animation
-     * @example
-     * // create a new Spine Renderable
-     * let spineAlien = new Spine(100, 100);
-     *
-     * // set the skeleton
-     * spineAlien.setSkeleton("alien.atlas", "alien-ess.json");
-     *
-     * // set default animation
-     * spineAlien.setAnimation(0, "death", true);
-     *
-     * // add it to the game world
-     * me.game.world.addChild(spineAlien);
-     */
-    setSkeleton(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);
-
-        // get a reference to the root bone
-        this.root = this.skeleton.getRootBone();
-        // Spine uses Y-up, melonJS uses Y-down
-        this.root.scaleY *= -1;
-
-        // mark the object as dirty
-        this.isDirty = true;
-    }
-
-     /**
-     * Rotate this Spine object by the specified angle (in radians).
-     * @param {number} angle - The angle to rotate (in radians)
-     * @param {Vector2d|ObservableVector2d} [v] - an optional point to rotate around
-     * @returns {Spine} Reference to this object for method chaining
-     */
-    rotate(angle, v) {
-        // rotation for rootBone is in degrees (anti-clockwise)
-        this.skeleton.getRootBone().rotation -= Math.radToDeg(angle) + 90;
-        // melonJS rotate method takes radians
-        return super.rotate(angle, v);
-    }
-
-     /**
-     * scale the Spine object around his anchor point.  Scaling actually applies changes
-     * to the currentTransform member wich is used by the renderer to scale the object
-     * when rendering.  It does not scale the object itself.  For example if the renderable
-     * is an image, the image.width and image.height properties are unaltered but the currentTransform
-     * member will be changed.
-     * @param {number} x - a number representing the abscissa of the scaling vector.
-     * @param {number} [y=x] - a number representing the ordinate of the scaling vector.
-     * @returns {Spine} Reference to this object for method chaining
-     */
-    scale(x, y = x) {
-        // untested
-        return super.scale(x, y);
-    }
-
-    /**
-     * update the bounding box for this spine object.
-     * (this will automatically update the bounds of the entire skeleton animation)
-     * @param {boolean} [absolute=true] - update the bounds size and position in (world) absolute coordinates
-     * @returns {Bounds} this shape bounding box Rectangle object
-     */
-    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) {
-        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;
-            }
-
-            // 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
-     * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance
-     * @param {Camera2d} [viewport] - the viewport to (re)draw
-     */
-    draw(renderer) {
-        this.skeletonRenderer.draw(renderer, this.skeleton);
-    }
-
-    /**
-     * Sets the current animation for a track, discarding any queued animations.
-     * @param {number} [track_index] -  If the formerly current track entry was never applied to a skeleton, it is replaced (not mixed from). In either case trackEnd determines when the track is cleared.
-     * @param {number} [index] - the animation index
-     * @param {boolean} [loop= false] - If true, the animation will repeat. If false it will not, instead its last frame is applied if played beyond its duration.
-     * @returns A track entry to allow further customization of animation playback. References to the track entry must not be kept after the dispose event occurs.
-     */
-    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);
-        }
-    }
-
-    /**
-     * Sets the current animation for a track, discarding any queued animations.
-     * @param {number} [track_index] -  If the formerly current track entry was never applied to a skeleton, it is replaced (not mixed from). In either case trackEnd determines when the track is cleared.
-     * @param {string} [name] - the animation name
-     * @param {boolean} [loop= false] - If true, the animation will repeat. If false it will not, instead its last frame is applied if played beyond its duration.
-     * @returns A track entry to allow further customization of animation playback. References to the track entry must not be kept after the dispose event occurs.
-     * @example
-     * // set the current animation
-     * spineAlien.setAnimation(0, "death", true);
-     */
-    setAnimation(track_index, name, loop = false) {
-        this.animationState.setAnimation(track_index, name, loop);
-    }
-
-    /**
-     * Adds an animation to be played after the current or last queued animation for a track, and sets the track entry's mixDuration.
-     * @param {number} [delay=0] - If > 0, sets delay. If <= 0, the delay set is the duration of the previous track entry minus any mix duration plus the specified `delay` (ie the mix ends at (`delay` = 0) or before (`delay` < 0) the previous track entry duration). If the previous entry is looping, its next loop completion is used instead of its duration.
-     * @return A track entry to allow further customization of animation playback. References to the track entry must not be kept after the dispose} event occurs.
-     */
-    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
-        };
-    }
-
-    /**
-     * Set the default mix duration to use when no mix duration has been defined between two animations.
-     * @param {number} mixTime
-     */
-    setDefaultMixTime(mixTime) {
-        this.animationState.data.defaultMix = this.mixTime = mixTime;
-    }
-
-    /**
-     * Sets a mix duration by animation name.
-     */
-    setTransitionMixTime(firstAnimation, secondAnimation, mixTime) {
-        this.animationState.setMix(firstAnimation, secondAnimation, mixTime);
-    }
-
-    /**
-     * Sets a skin by name.
-     * @param {string} skinName
-     * @example
-     * // create a new Spine Renderable
-     * let spineAlien = new Spine(100, 100, {atlasFile: "mix-and-match-pma.atlas", jsonFile: "mix-and-match-pro.json"});
-     *
-     * // set default animation
-     * spineAlien.setAnimation(0, "dance", true);
-     *
-     * // set default skin
-     * spineAlien.setSkinByName("full-skins/girl");
-     *
-     * // add it to the game world
-     * me.game.world.addChild(spineAlien);
-     */
-    setSkinByName(skinName) {
-        this.skeleton.setSkinByName(skinName);
-    }
-
-    /**
-     * Sets this slot to the setup pose.
-     */
-    setToSetupPose() {
-        this.skeleton.setToSetupPose();
-    }
-}