@safe-engine/pixi 8.1.3 → 8.2.2

package/dist/spine/lib/SpineDebugRenderer.d.ts

@@ -0,0 +1,109 @@
+/** ****************************************************************************
+ * Spine Runtimes License Agreement
+ * Last updated July 28, 2023. Replaces all prior versions.
+ *
+ * Copyright (c) 2013-2023, Esoteric Software LLC
+ *
+ * Integration of the Spine Runtimes into software or otherwise creating
+ * derivative works of the Spine Runtimes is permitted under the terms and
+ * conditions of Section 2 of the Spine Editor License Agreement:
+ * http://esotericsoftware.com/spine-editor-license
+ *
+ * Otherwise, it is permitted to integrate the Spine Runtimes into software or
+ * otherwise create derivative works of the Spine Runtimes (collectively,
+ * "Products"), provided that each user of the Products must obtain their own
+ * Spine Editor license and redistribution of the Products in any form must
+ * include this license and copyright notice.
+ *
+ * THE SPINE RUNTIMES ARE PROVIDED BY ESOTERIC SOFTWARE LLC "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL ESOTERIC SOFTWARE LLC BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES,
+ * BUSINESS INTERRUPTION, OR LOSS OF USE, DATA, OR PROFITS) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE
+ * SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *****************************************************************************/
+import { Container, Graphics } from 'pixi.js';
+import { Spine } from './Spine.js';
+import type { AnimationStateListener } from '@esotericsoftware/spine-core';
+/**
+ * Make a class that extends from this interface to create your own debug renderer.
+ * @public
+ */
+export interface ISpineDebugRenderer {
+    /**
+     * This will be called every frame, after the spine has been updated.
+     */
+    renderDebug: (spine: Spine) => void;
+    /**
+     *  This is called when the `spine.debug` object is set to null or when the spine is destroyed.
+     */
+    unregisterSpine: (spine: Spine) => void;
+    /**
+     * This is called when the `spine.debug` object is set to a new instance of a debug renderer.
+     */
+    registerSpine: (spine: Spine) => void;
+}
+type DebugDisplayObjects = {
+    bones: Container;
+    skeletonXY: Graphics;
+    regionAttachmentsShape: Graphics;
+    meshTrianglesLine: Graphics;
+    meshHullLine: Graphics;
+    clippingPolygon: Graphics;
+    boundingBoxesRect: Graphics;
+    boundingBoxesCircle: Graphics;
+    boundingBoxesPolygon: Graphics;
+    pathsCurve: Graphics;
+    pathsLine: Graphics;
+    parentDebugContainer: Container;
+    eventText: Container;
+    eventCallback: AnimationStateListener;
+};
+/**
+ * This is a debug renderer that uses PixiJS Graphics under the hood.
+ * @public
+ */
+export declare class SpineDebugRenderer implements ISpineDebugRenderer {
+    private readonly registeredSpines;
+    drawMeshHull: boolean;
+    drawMeshTriangles: boolean;
+    drawBones: boolean;
+    drawPaths: boolean;
+    drawBoundingBoxes: boolean;
+    drawClipping: boolean;
+    drawRegionAttachments: boolean;
+    drawEvents: boolean;
+    lineWidth: number;
+    regionAttachmentsColor: number;
+    meshHullColor: number;
+    meshTrianglesColor: number;
+    clippingPolygonColor: number;
+    boundingBoxesRectColor: number;
+    boundingBoxesPolygonColor: number;
+    boundingBoxesCircleColor: number;
+    pathsCurveColor: number;
+    pathsLineColor: number;
+    skeletonXYColor: number;
+    bonesColor: number;
+    eventFontSize: number;
+    eventFontColor: number;
+    /**
+     * The debug is attached by force to each spine object.
+     * So we need to create it inside the spine when we get the first update
+     */
+    registerSpine(spine: Spine): void;
+    renderDebug(spine: Spine): void;
+    private drawBonesFunc;
+    private drawRegionAttachmentsFunc;
+    private drawMeshHullAndMeshTriangles;
+    drawClippingFunc(spine: Spine, debugDisplayObjects: DebugDisplayObjects, lineWidth: number): void;
+    drawBoundingBoxesFunc(spine: Spine, debugDisplayObjects: DebugDisplayObjects, lineWidth: number): void;
+    private drawPathsFunc;
+    unregisterSpine(spine: Spine): void;
+}
+export {};
+//# sourceMappingURL=SpineDebugRenderer.d.ts.map

package/dist/spine/lib/SpineDebugRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpineDebugRenderer.d.ts","sourceRoot":"","sources":["../../../src/spine/lib/SpineDebugRenderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;+EA2B+E;AAE/E,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAQ,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AASnC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAE3E;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IACnC;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC;AAED,KAAK,mBAAmB,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,QAAQ,CAAC;IACrB,sBAAsB,EAAE,QAAQ,CAAC;IACjC,iBAAiB,EAAE,QAAQ,CAAC;IAC5B,YAAY,EAAE,QAAQ,CAAC;IACvB,eAAe,EAAE,QAAQ,CAAC;IAC1B,iBAAiB,EAAE,QAAQ,CAAC;IAC5B,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,oBAAoB,EAAE,QAAQ,CAAC;IAC/B,UAAU,EAAE,QAAQ,CAAC;IACrB,SAAS,EAAE,QAAQ,CAAC;IACpB,oBAAoB,EAAE,SAAS,CAAC;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,aAAa,EAAE,sBAAsB,CAAC;CACtC,CAAC;AAEF;;;GAGG;AACH,qBAAa,kBAAmB,YAAW,mBAAmB;IAC7D,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAA8C;IAExE,YAAY,UAAQ;IACpB,iBAAiB,UAAQ;IACzB,SAAS,UAAQ;IACjB,SAAS,UAAQ;IACjB,iBAAiB,UAAQ;IACzB,YAAY,UAAQ;IACpB,qBAAqB,UAAQ;IAC7B,UAAU,UAAQ;IAElB,SAAS,SAAK;IACd,sBAAsB,SAAY;IAClC,aAAa,SAAY;IACzB,kBAAkB,SAAY;IAC9B,oBAAoB,SAAY;IAChC,sBAAsB,SAAY;IAClC,yBAAyB,SAAY;IACrC,wBAAwB,SAAY;IACpC,eAAe,SAAY;IAC3B,cAAc,SAAY;IAC1B,eAAe,SAAY;IAC3B,UAAU,SAAY;IACtB,aAAa,SAAM;IACnB,cAAc,SAAO;IAE5B;;;OAGG;IACI,aAAa,CAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAyElC,WAAW,CAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IA+DvC,OAAO,CAAC,aAAa;IAyGrB,OAAO,CAAC,yBAAyB;IA2BjC,OAAO,CAAC,4BAA4B;IA4DpC,gBAAgB,CAAE,KAAK,EAAE,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;IA8BlG,qBAAqB,CAAE,KAAK,EAAE,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;IAuDvG,OAAO,CAAC,aAAa;IAwEd,eAAe,CAAE,KAAK,EAAE,KAAK,GAAG,IAAI;CAe3C"}

package/dist/spine/lib/SpineDebugRenderer.js

@@ -0,0 +1,474 @@
+/** ****************************************************************************
+ * Spine Runtimes License Agreement
+ * Last updated July 28, 2023. Replaces all prior versions.
+ *
+ * Copyright (c) 2013-2023, Esoteric Software LLC
+ *
+ * Integration of the Spine Runtimes into software or otherwise creating
+ * derivative works of the Spine Runtimes is permitted under the terms and
+ * conditions of Section 2 of the Spine Editor License Agreement:
+ * http://esotericsoftware.com/spine-editor-license
+ *
+ * Otherwise, it is permitted to integrate the Spine Runtimes into software or
+ * otherwise create derivative works of the Spine Runtimes (collectively,
+ * "Products"), provided that each user of the Products must obtain their own
+ * Spine Editor license and redistribution of the Products in any form must
+ * include this license and copyright notice.
+ *
+ * THE SPINE RUNTIMES ARE PROVIDED BY ESOTERIC SOFTWARE LLC "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL ESOTERIC SOFTWARE LLC BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES,
+ * BUSINESS INTERRUPTION, OR LOSS OF USE, DATA, OR PROFITS) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE
+ * SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *****************************************************************************/
+import { Container, Graphics, Text } from 'pixi.js';
+import { ClippingAttachment, MeshAttachment, PathAttachment, RegionAttachment, SkeletonBounds } from '@esotericsoftware/spine-core';
+/**
+ * This is a debug renderer that uses PixiJS Graphics under the hood.
+ * @public
+ */
+export class SpineDebugRenderer {
+    constructor() {
+        this.registeredSpines = new Map();
+        this.drawMeshHull = true;
+        this.drawMeshTriangles = true;
+        this.drawBones = true;
+        this.drawPaths = true;
+        this.drawBoundingBoxes = true;
+        this.drawClipping = true;
+        this.drawRegionAttachments = true;
+        this.drawEvents = true;
+        this.lineWidth = 1;
+        this.regionAttachmentsColor = 0x0078ff;
+        this.meshHullColor = 0x0078ff;
+        this.meshTrianglesColor = 0xffcc00;
+        this.clippingPolygonColor = 0xff00ff;
+        this.boundingBoxesRectColor = 0x00ff00;
+        this.boundingBoxesPolygonColor = 0x00ff00;
+        this.boundingBoxesCircleColor = 0x00ff00;
+        this.pathsCurveColor = 0xff0000;
+        this.pathsLineColor = 0xff00ff;
+        this.skeletonXYColor = 0xff0000;
+        this.bonesColor = 0x00eecc;
+        this.eventFontSize = 24;
+        this.eventFontColor = 0x0;
+    }
+    /**
+     * The debug is attached by force to each spine object.
+     * So we need to create it inside the spine when we get the first update
+     */
+    registerSpine(spine) {
+        if (this.registeredSpines.has(spine)) {
+            console.warn('SpineDebugRenderer.registerSpine() - this spine is already registered!', spine);
+            return;
+        }
+        const debugDisplayObjects = {
+            parentDebugContainer: new Container(),
+            bones: new Container(),
+            skeletonXY: new Graphics(),
+            regionAttachmentsShape: new Graphics(),
+            meshTrianglesLine: new Graphics(),
+            meshHullLine: new Graphics(),
+            clippingPolygon: new Graphics(),
+            boundingBoxesRect: new Graphics(),
+            boundingBoxesCircle: new Graphics(),
+            boundingBoxesPolygon: new Graphics(),
+            pathsCurve: new Graphics(),
+            pathsLine: new Graphics(),
+            eventText: new Container(),
+            eventCallback: {
+                event: (_, event) => {
+                    if (this.drawEvents) {
+                        const scale = Math.abs(spine.scale.x || spine.scale.y || 1);
+                        const text = new Text({
+                            text: event.data.name,
+                            style: {
+                                fontSize: this.eventFontSize / scale,
+                                fill: this.eventFontColor,
+                                fontFamily: 'monospace'
+                            }
+                        });
+                        text.scale.x = Math.sign(spine.scale.x);
+                        text.anchor.set(0.5);
+                        debugDisplayObjects.eventText.addChild(text);
+                        setTimeout(() => {
+                            if (!text.destroyed) {
+                                text.destroy();
+                            }
+                        }, 250);
+                    }
+                },
+            },
+        };
+        debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.bones);
+        debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.skeletonXY);
+        debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.regionAttachmentsShape);
+        debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.meshTrianglesLine);
+        debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.meshHullLine);
+        debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.clippingPolygon);
+        debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.boundingBoxesRect);
+        debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.boundingBoxesCircle);
+        debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.boundingBoxesPolygon);
+        debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.pathsCurve);
+        debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.pathsLine);
+        debugDisplayObjects.parentDebugContainer.addChild(debugDisplayObjects.eventText);
+        debugDisplayObjects.parentDebugContainer.zIndex = 9999999;
+        // Disable screen reader and mouse input on debug objects.
+        debugDisplayObjects.parentDebugContainer.accessibleChildren = false;
+        debugDisplayObjects.parentDebugContainer.eventMode = 'none';
+        debugDisplayObjects.parentDebugContainer.interactiveChildren = false;
+        spine.addChild(debugDisplayObjects.parentDebugContainer);
+        spine.state.addListener(debugDisplayObjects.eventCallback);
+        this.registeredSpines.set(spine, debugDisplayObjects);
+    }
+    renderDebug(spine) {
+        if (!this.registeredSpines.has(spine)) {
+            // This should never happen. Spines are registered when you assign spine.debug
+            this.registerSpine(spine);
+        }
+        const debugDisplayObjects = this.registeredSpines.get(spine);
+        if (!debugDisplayObjects) {
+            return;
+        }
+        spine.addChild(debugDisplayObjects.parentDebugContainer);
+        debugDisplayObjects.skeletonXY.clear();
+        debugDisplayObjects.regionAttachmentsShape.clear();
+        debugDisplayObjects.meshTrianglesLine.clear();
+        debugDisplayObjects.meshHullLine.clear();
+        debugDisplayObjects.clippingPolygon.clear();
+        debugDisplayObjects.boundingBoxesRect.clear();
+        debugDisplayObjects.boundingBoxesCircle.clear();
+        debugDisplayObjects.boundingBoxesPolygon.clear();
+        debugDisplayObjects.pathsCurve.clear();
+        debugDisplayObjects.pathsLine.clear();
+        for (let len = debugDisplayObjects.bones.children.length; len > 0; len--) {
+            debugDisplayObjects.bones.children[len - 1].destroy({ children: true, texture: true, textureSource: true });
+        }
+        const scale = Math.abs(spine.scale.x || spine.scale.y || 1);
+        const lineWidth = this.lineWidth / scale;
+        if (this.drawBones) {
+            this.drawBonesFunc(spine, debugDisplayObjects, lineWidth, scale);
+        }
+        if (this.drawPaths) {
+            this.drawPathsFunc(spine, debugDisplayObjects, lineWidth);
+        }
+        if (this.drawBoundingBoxes) {
+            this.drawBoundingBoxesFunc(spine, debugDisplayObjects, lineWidth);
+        }
+        if (this.drawClipping) {
+            this.drawClippingFunc(spine, debugDisplayObjects, lineWidth);
+        }
+        if (this.drawMeshHull || this.drawMeshTriangles) {
+            this.drawMeshHullAndMeshTriangles(spine, debugDisplayObjects, lineWidth);
+        }
+        if (this.drawRegionAttachments) {
+            this.drawRegionAttachmentsFunc(spine, debugDisplayObjects, lineWidth);
+        }
+        if (this.drawEvents) {
+            for (const child of debugDisplayObjects.eventText.children) {
+                child.alpha -= 0.05;
+                child.y -= 2;
+            }
+        }
+    }
+    drawBonesFunc(spine, debugDisplayObjects, lineWidth, scale) {
+        const skeleton = spine.skeleton;
+        const skeletonX = skeleton.x;
+        const skeletonY = skeleton.y;
+        const bones = skeleton.bones;
+        debugDisplayObjects.skeletonXY.strokeStyle = { width: lineWidth, color: this.skeletonXYColor };
+        for (let i = 0, len = bones.length; i < len; i++) {
+            const bone = bones[i];
+            const boneLen = bone.data.length;
+            const starX = skeletonX + bone.worldX;
+            const starY = skeletonY + bone.worldY;
+            const endX = skeletonX + (boneLen * bone.a) + bone.worldX;
+            const endY = skeletonY + (boneLen * bone.b) + bone.worldY;
+            if (bone.data.name === 'root' || bone.data.parent === null) {
+                continue;
+            }
+            const w = Math.abs(starX - endX);
+            const h = Math.abs(starY - endY);
+            // a = w, // side length a
+            const a2 = Math.pow(w, 2); // square root of side length a
+            const b = h; // side length b
+            const b2 = Math.pow(h, 2); // square root of side length b
+            const c = Math.sqrt(a2 + b2); // side length c
+            const c2 = Math.pow(c, 2); // square root of side length c
+            const rad = Math.PI / 180;
+            // A = Math.acos([a2 + c2 - b2] / [2 * a * c]) || 0, // Angle A
+            // C = Math.acos([a2 + b2 - c2] / [2 * a * b]) || 0, // C angle
+            const B = Math.acos((c2 + b2 - a2) / (2 * b * c)) || 0; // angle of corner B
+            if (c === 0) {
+                continue;
+            }
+            const gp = new Graphics();
+            debugDisplayObjects.bones.addChild(gp);
+            // draw bone
+            const refRation = c / 50 / scale;
+            gp.context
+                .poly([0, 0, 0 - refRation, c - (refRation * 3), 0, c - refRation, 0 + refRation, c - (refRation * 3)])
+                .fill(this.bonesColor);
+            gp.x = starX;
+            gp.y = starY;
+            gp.pivot.y = c;
+            // Calculate bone rotation angle
+            let rotation = 0;
+            if (starX < endX && starY < endY) {
+                // bottom right
+                rotation = -B + (180 * rad);
+            }
+            else if (starX > endX && starY < endY) {
+                // bottom left
+                rotation = (180 * rad) + B;
+            }
+            else if (starX > endX && starY > endY) {
+                // top left
+                rotation = -B;
+            }
+            else if (starX < endX && starY > endY) {
+                // bottom left
+                rotation = B;
+            }
+            else if (starY === endY && starX < endX) {
+                // To the right
+                rotation = 90 * rad;
+            }
+            else if (starY === endY && starX > endX) {
+                // go left
+                rotation = -90 * rad;
+            }
+            else if (starX === endX && starY < endY) {
+                // down
+                rotation = 180 * rad;
+            }
+            else if (starX === endX && starY > endY) {
+                // up
+                rotation = 0;
+            }
+            gp.rotation = rotation;
+            // Draw the starting rotation point of the bone
+            gp.circle(0, c, refRation * 1.2)
+                .fill({ color: 0x000000, alpha: 0.6 })
+                .stroke({ width: lineWidth + refRation / 2.4, color: this.bonesColor });
+        }
+        // Draw the skeleton starting point "X" form
+        const startDotSize = lineWidth * 3;
+        debugDisplayObjects.skeletonXY.context
+            .moveTo(skeletonX - startDotSize, skeletonY - startDotSize)
+            .lineTo(skeletonX + startDotSize, skeletonY + startDotSize)
+            .moveTo(skeletonX + startDotSize, skeletonY - startDotSize)
+            .lineTo(skeletonX - startDotSize, skeletonY + startDotSize)
+            .stroke();
+    }
+    drawRegionAttachmentsFunc(spine, debugDisplayObjects, lineWidth) {
+        const skeleton = spine.skeleton;
+        const slots = skeleton.slots;
+        for (let i = 0, len = slots.length; i < len; i++) {
+            const slot = slots[i];
+            const attachment = slot.getAttachment();
+            if (attachment === null || !(attachment instanceof RegionAttachment)) {
+                continue;
+            }
+            const regionAttachment = attachment;
+            const vertices = new Float32Array(8);
+            regionAttachment.computeWorldVertices(slot, vertices, 0, 2);
+            debugDisplayObjects.regionAttachmentsShape.poly(Array.from(vertices.slice(0, 8)));
+        }
+        debugDisplayObjects.regionAttachmentsShape.stroke({
+            color: this.regionAttachmentsColor,
+            width: lineWidth
+        });
+    }
+    drawMeshHullAndMeshTriangles(spine, debugDisplayObjects, lineWidth) {
+        const skeleton = spine.skeleton;
+        const slots = skeleton.slots;
+        for (let i = 0, len = slots.length; i < len; i++) {
+            const slot = slots[i];
+            if (!slot.bone.active) {
+                continue;
+            }
+            const attachment = slot.getAttachment();
+            if (attachment === null || !(attachment instanceof MeshAttachment)) {
+                continue;
+            }
+            const meshAttachment = attachment;
+            const vertices = new Float32Array(meshAttachment.worldVerticesLength);
+            const triangles = meshAttachment.triangles;
+            let hullLength = meshAttachment.hullLength;
+            meshAttachment.computeWorldVertices(slot, 0, meshAttachment.worldVerticesLength, vertices, 0, 2);
+            // draw the skinned mesh (triangle)
+            if (this.drawMeshTriangles) {
+                for (let i = 0, len = triangles.length; i < len; i += 3) {
+                    const v1 = triangles[i] * 2;
+                    const v2 = triangles[i + 1] * 2;
+                    const v3 = triangles[i + 2] * 2;
+                    debugDisplayObjects.meshTrianglesLine.context
+                        .moveTo(vertices[v1], vertices[v1 + 1])
+                        .lineTo(vertices[v2], vertices[v2 + 1])
+                        .lineTo(vertices[v3], vertices[v3 + 1]);
+                }
+            }
+            // draw skin border
+            if (this.drawMeshHull && hullLength > 0) {
+                hullLength = (hullLength >> 1) * 2;
+                let lastX = vertices[hullLength - 2];
+                let lastY = vertices[hullLength - 1];
+                for (let i = 0, len = hullLength; i < len; i += 2) {
+                    const x = vertices[i];
+                    const y = vertices[i + 1];
+                    debugDisplayObjects.meshHullLine.context
+                        .moveTo(x, y)
+                        .lineTo(lastX, lastY);
+                    lastX = x;
+                    lastY = y;
+                }
+            }
+        }
+        debugDisplayObjects.meshHullLine.stroke({ width: lineWidth, color: this.meshHullColor });
+        debugDisplayObjects.meshTrianglesLine.stroke({ width: lineWidth, color: this.meshTrianglesColor });
+    }
+    drawClippingFunc(spine, debugDisplayObjects, lineWidth) {
+        const skeleton = spine.skeleton;
+        const slots = skeleton.slots;
+        for (let i = 0, len = slots.length; i < len; i++) {
+            const slot = slots[i];
+            if (!slot.bone.active) {
+                continue;
+            }
+            const attachment = slot.getAttachment();
+            if (attachment === null || !(attachment instanceof ClippingAttachment)) {
+                continue;
+            }
+            const clippingAttachment = attachment;
+            const nn = clippingAttachment.worldVerticesLength;
+            const world = new Float32Array(nn);
+            clippingAttachment.computeWorldVertices(slot, 0, nn, world, 0, 2);
+            debugDisplayObjects.clippingPolygon.poly(Array.from(world));
+        }
+        debugDisplayObjects.clippingPolygon.stroke({
+            width: lineWidth, color: this.clippingPolygonColor, alpha: 1
+        });
+    }
+    drawBoundingBoxesFunc(spine, debugDisplayObjects, lineWidth) {
+        // draw the total outline of the bounding box
+        const bounds = new SkeletonBounds();
+        bounds.update(spine.skeleton, true);
+        if (bounds.minX !== Infinity) {
+            debugDisplayObjects.boundingBoxesRect
+                .rect(bounds.minX, bounds.minY, bounds.getWidth(), bounds.getHeight())
+                .stroke({ width: lineWidth, color: this.boundingBoxesRectColor });
+        }
+        const polygons = bounds.polygons;
+        const drawPolygon = (polygonVertices, _offset, count) => {
+            if (count < 3) {
+                throw new Error('Polygon must contain at least 3 vertices');
+            }
+            const paths = [];
+            const dotSize = lineWidth * 2;
+            for (let i = 0, len = polygonVertices.length; i < len; i += 2) {
+                const x1 = polygonVertices[i];
+                const y1 = polygonVertices[i + 1];
+                // draw the bounding box node
+                debugDisplayObjects.boundingBoxesCircle.beginFill(this.boundingBoxesCircleColor);
+                debugDisplayObjects.boundingBoxesCircle.drawCircle(x1, y1, dotSize);
+                debugDisplayObjects.boundingBoxesCircle.fill(0);
+                debugDisplayObjects.boundingBoxesCircle
+                    .circle(x1, y1, dotSize)
+                    .fill({ color: this.boundingBoxesCircleColor });
+                paths.push(x1, y1);
+            }
+            // draw the bounding box area
+            debugDisplayObjects.boundingBoxesPolygon
+                .poly(paths)
+                .fill({
+                color: this.boundingBoxesPolygonColor,
+                alpha: 0.1
+            })
+                .stroke({
+                width: lineWidth,
+                color: this.boundingBoxesPolygonColor
+            });
+        };
+        for (let i = 0, len = polygons.length; i < len; i++) {
+            const polygon = polygons[i];
+            drawPolygon(polygon, 0, polygon.length);
+        }
+    }
+    drawPathsFunc(spine, debugDisplayObjects, lineWidth) {
+        const skeleton = spine.skeleton;
+        const slots = skeleton.slots;
+        for (let i = 0, len = slots.length; i < len; i++) {
+            const slot = slots[i];
+            if (!slot.bone.active) {
+                continue;
+            }
+            const attachment = slot.getAttachment();
+            if (attachment === null || !(attachment instanceof PathAttachment)) {
+                continue;
+            }
+            const pathAttachment = attachment;
+            let nn = pathAttachment.worldVerticesLength;
+            const world = new Float32Array(nn);
+            pathAttachment.computeWorldVertices(slot, 0, nn, world, 0, 2);
+            let x1 = world[2];
+            let y1 = world[3];
+            let x2 = 0;
+            let y2 = 0;
+            if (pathAttachment.closed) {
+                const cx1 = world[0];
+                const cy1 = world[1];
+                const cx2 = world[nn - 2];
+                const cy2 = world[nn - 1];
+                x2 = world[nn - 4];
+                y2 = world[nn - 3];
+                // curve
+                debugDisplayObjects.pathsCurve.moveTo(x1, y1);
+                debugDisplayObjects.pathsCurve.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2);
+                // handle
+                debugDisplayObjects.pathsLine.moveTo(x1, y1);
+                debugDisplayObjects.pathsLine.lineTo(cx1, cy1);
+                debugDisplayObjects.pathsLine.moveTo(x2, y2);
+                debugDisplayObjects.pathsLine.lineTo(cx2, cy2);
+            }
+            nn -= 4;
+            for (let ii = 4; ii < nn; ii += 6) {
+                const cx1 = world[ii];
+                const cy1 = world[ii + 1];
+                const cx2 = world[ii + 2];
+                const cy2 = world[ii + 3];
+                x2 = world[ii + 4];
+                y2 = world[ii + 5];
+                // curve
+                debugDisplayObjects.pathsCurve.moveTo(x1, y1);
+                debugDisplayObjects.pathsCurve.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2);
+                // handle
+                debugDisplayObjects.pathsLine.moveTo(x1, y1);
+                debugDisplayObjects.pathsLine.lineTo(cx1, cy1);
+                debugDisplayObjects.pathsLine.moveTo(x2, y2);
+                debugDisplayObjects.pathsLine.lineTo(cx2, cy2);
+                x1 = x2;
+                y1 = y2;
+            }
+        }
+        debugDisplayObjects.pathsCurve.stroke({ width: lineWidth, color: this.pathsCurveColor });
+        debugDisplayObjects.pathsLine.stroke({ width: lineWidth, color: this.pathsLineColor });
+    }
+    unregisterSpine(spine) {
+        if (!this.registeredSpines.has(spine)) {
+            console.warn('SpineDebugRenderer.unregisterSpine() - spine is not registered, can\'t unregister!', spine);
+        }
+        const debugDisplayObjects = this.registeredSpines.get(spine);
+        if (!debugDisplayObjects) {
+            return;
+        }
+        spine.state.removeListener(debugDisplayObjects.eventCallback);
+        debugDisplayObjects.parentDebugContainer.destroy({ textureSource: true, children: true, texture: true });
+        this.registeredSpines.delete(spine);
+    }
+}

package/dist/spine/lib/SpinePipe.d.ts

@@ -0,0 +1,49 @@
+/** ****************************************************************************
+ * Spine Runtimes License Agreement
+ * Last updated July 28, 2023. Replaces all prior versions.
+ *
+ * Copyright (c) 2013-2023, Esoteric Software LLC
+ *
+ * Integration of the Spine Runtimes into software or otherwise creating
+ * derivative works of the Spine Runtimes is permitted under the terms and
+ * conditions of Section 2 of the Spine Editor License Agreement:
+ * http://esotericsoftware.com/spine-editor-license
+ *
+ * Otherwise, it is permitted to integrate the Spine Runtimes into software or
+ * otherwise create derivative works of the Spine Runtimes (collectively,
+ * "Products"), provided that each user of the Products must obtain their own
+ * Spine Editor license and redistribution of the Products in any form must
+ * include this license and copyright notice.
+ *
+ * THE SPINE RUNTIMES ARE PROVIDED BY ESOTERIC SOFTWARE LLC "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL ESOTERIC SOFTWARE LLC BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES,
+ * BUSINESS INTERRUPTION, OR LOSS OF USE, DATA, OR PROFITS) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE
+ * SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *****************************************************************************/
+import { ExtensionType, InstructionSet, type Renderer, type RenderPipe } from 'pixi.js';
+import { Spine } from './Spine.js';
+export declare class SpinePipe implements RenderPipe<Spine> {
+    /** @ignore */
+    static extension: {
+        readonly type: readonly [ExtensionType.WebGLPipes, ExtensionType.WebGPUPipes, ExtensionType.CanvasPipes];
+        readonly name: "spine";
+    };
+    renderer: Renderer;
+    private gpuSpineData;
+    private readonly _destroyRenderableBound;
+    constructor(renderer: Renderer);
+    validateRenderable(spine: Spine): boolean;
+    addRenderable(spine: Spine, instructionSet: InstructionSet): void;
+    updateRenderable(spine: Spine): void;
+    destroyRenderable(spine: Spine): void;
+    destroy(): void;
+    private _getSpineData;
+    private _initMeshData;
+}
+//# sourceMappingURL=SpinePipe.d.ts.map

package/dist/spine/lib/SpinePipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinePipe.d.ts","sourceRoot":"","sources":["../../../src/spine/lib/SpinePipe.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;+EA2B+E;AAE/E,OAAO,EAEM,aAAa,EACzB,cAAc,EAGd,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAanC,qBAAa,SAAU,YAAW,UAAU,CAAC,KAAK,CAAC;IAClD,cAAc;IACd,MAAM,CAAC,SAAS;;;MAOL;IAEX,QAAQ,EAAE,QAAQ,CAAC;IAEnB,OAAO,CAAC,YAAY,CAA2C;IAC/D,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAwE;gBAEnG,QAAQ,EAAE,QAAQ;IAI/B,kBAAkB,CAAE,KAAK,EAAE,KAAK,GAAG,OAAO;IAoC1C,aAAa,CAAE,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,cAAc;IA+C3D,gBAAgB,CAAE,KAAK,EAAE,KAAK;IA0B9B,iBAAiB,CAAE,KAAK,EAAE,KAAK;IAK/B,OAAO;IAKP,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,aAAa;CAKrB"}