From e290569748c8e653395697df598a2ef43b5a8682 Mon Sep 17 00:00:00 2001
From: Davide Tantillo <iamdjj@gmail.com>
Date: Wed, 5 Jun 2024 14:43:56 +0200
Subject: [PATCH] [ts][pixi] Add feature to attach pixi objects to slots

[ts][pixi] Format fix

[ts][pixi] Format fix

[ts][pixi] Use world scale for slot object.
---
 spine-ts/index.html                           |   1 +
 .../spine-pixi/example/assets/spine_logo.png  | Bin 0 -> 3495 bytes
 spine-ts/spine-pixi/example/slot-objects.html | 125 ++++++++++++++++++
 spine-ts/spine-pixi/src/Spine.ts              |  87 +++++++++++-
 4 files changed, 210 insertions(+), 3 deletions(-)
 create mode 100644 spine-ts/spine-pixi/example/assets/spine_logo.png
 create mode 100644 spine-ts/spine-pixi/example/slot-objects.html

diff --git a/spine-ts/index.html b/spine-ts/index.html
index a6f7969ad..a37e1a52f 100644
--- a/spine-ts/index.html
+++ b/spine-ts/index.html
@@ -43,6 +43,7 @@ <h1>spine-ts Examples</h1>
         <li><a href="/spine-pixi/example/physics2.html">Physics II</a></li>
         <li><a href="/spine-pixi/example/physics3.html">Physics III</a></li>
         <li><a href="/spine-pixi/example/physics4.html">Physics IV</a></li>
+        <li><a href="/spine-pixi/example/slot-objects.html">Slot Objects</a></li>
       </ul>
       <li>Phaser</li>
       <ul>
diff --git a/spine-ts/spine-pixi/example/assets/spine_logo.png b/spine-ts/spine-pixi/example/assets/spine_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..40e65c5c91884ba3af3a5d70cb8eb265c6b3baeb
GIT binary patch
literal 3495
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
VJ?gnkes}-?002ovPDHLkV1l0uroI3G

literal 0
HcmV?d00001

diff --git a/spine-ts/spine-pixi/example/slot-objects.html b/spine-ts/spine-pixi/example/slot-objects.html
new file mode 100644
index 000000000..493d374fd
--- /dev/null
+++ b/spine-ts/spine-pixi/example/slot-objects.html
@@ -0,0 +1,125 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi</title>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
+    <script src="../dist/iife/spine-pixi.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
+    <link rel="stylesheet" href="../../index.css">
+  </head>
+
+  <body>
+    <script>
+      (async function () {
+        var app = new PIXI.Application({
+          width: window.innerWidth,
+          height: window.innerHeight,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true,
+          resizeTo: window,
+          backgroundColor: 0x2c3e50,
+          hello: true,
+        });
+        document.body.appendChild(app.view);
+
+        // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
+        PIXI.Assets.add("spineboyData", "./assets/spineboy-pro.skel");
+        PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
+
+        // Create the spine display object
+        const spineboy = spine.Spine.from("spineboyData", "spineboyAtlas", {
+          scale: 0.5,
+        });
+
+        // Set the default mix time to use when transitioning
+        // from one animation to the next.
+        spineboy.state.data.defaultMix = 0.2;
+
+        // Center the spine object on screen.
+        spineboy.x = window.innerWidth / 2;
+        spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
+
+        // Set animation "run" on track 0, looped.
+        spineboy.state.setAnimation(0, "walk", true);
+
+        // Add the display object to the stage.
+        app.stage.addChild(spineboy);
+
+        const logo1 = PIXI.Sprite.from('assets/spine_logo.png');
+        const logo2 = PIXI.Sprite.from('assets/spine_logo.png');
+        const logo3 = PIXI.Sprite.from('assets/spine_logo.png');
+        const logo4 = PIXI.Sprite.from('assets/spine_logo.png');
+        const text = new PIXI.Text('Spine Text');
+
+        // putting logo1 on top of the gun
+        spineboy.addSlotObject("gun", logo1);
+
+        // putting logo2 on top of the hand using slot directly and remove the attachment hand
+        let frontFist;
+        setTimeout(() => {
+          frontFist = spineboy.skeleton.findSlot("front-fist");
+          spineboy.addSlotObject(frontFist, logo2);
+          frontFist.setAttachment(null);
+        }, 2000)
+
+        // scaling the bone, will scale the pixi object too
+        setTimeout(() => {
+          frontFist.bone.scaleX = .5
+          frontFist.bone.scaleY = .5
+        }, 3000)
+
+        // adding a pixi text in a slot using slot index
+        let mouth;
+        setTimeout(() => {
+          mouth = spineboy.skeleton.findSlot("mouth");
+          spineboy.addSlotObject(mouth, text);
+        }, 4000)
+
+        // adding one display object to an already "occupied" slot will remove the old one,
+        // and move the given one to the slot
+        setTimeout(() => {
+          spineboy.addSlotObject(mouth, logo1);
+        }, 5000)
+
+        // adding multiple DisplayObjects to a slot using a Container to control their offset, size, ...
+        setTimeout(() => {
+          const container = new PIXI.Container();
+          container.addChild(logo3, logo4);
+          logo3.y = 20;
+          logo3.scale.set(.5);
+          logo4.scale.set(.5);
+          logo4.tint = 0xFF5500;
+          spineboy.addSlotObject("gun", container);
+        }, 6000)
+
+        // removing the container won't automatically destroy the displayObject contained, so take care of them
+        setTimeout(() => {
+          const container = new PIXI.Container();
+          spineboy.removeSlotObject("gun");
+          logo3.destroy();
+          logo4.destroy();
+        }, 7000)
+
+        // removing a specific slot object, that is not in that slot do nothing
+        setTimeout(() => {
+          const container = new PIXI.Container();
+          spineboy.removeSlotObject(frontFist, text);
+          text.destroy();
+        }, 8000)
+
+        // removing a specific slot object
+        setTimeout(() => {
+          const container = new PIXI.Container();
+          spineboy.removeSlotObject(frontFist, logo2);
+          logo2.destroy();
+        }, 9000)
+
+        // resetting the slot with the original attachment
+        setTimeout(() => {
+          frontFist.setToSetupPose();
+        }, 10000)
+      })();
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/spine-ts/spine-pixi/src/Spine.ts b/spine-ts/spine-pixi/src/Spine.ts
index d32515b91..5375391b1 100644
--- a/spine-ts/spine-pixi/src/Spine.ts
+++ b/spine-ts/spine-pixi/src/Spine.ts
@@ -34,6 +34,7 @@ import {
 	AtlasAttachmentLoader,
 	ClippingAttachment,
 	Color,
+	MathUtils,
 	MeshAttachment,
 	Physics,
 	RegionAttachment,
@@ -224,8 +225,78 @@ export class Spine extends Container {
 		}
 	}
 
-	private verticesCache: NumberArrayLike = Utils.newFloatArray(1024);
+	private slotsObject = new Map<Slot, DisplayObject>();
+	private getSlotFromRef (slotRef: number | string | Slot): Slot {
+		let slot: Slot | null;
+		if (typeof slotRef === 'number') slot = this.skeleton.slots[slotRef];
+		else if (typeof slotRef === 'string') slot = this.skeleton.findSlot(slotRef);
+		else slot = slotRef;
+
+		if (!slot) throw new Error(`No slot found with the given slot reference: ${slotRef}`);
 
+		return slot;
+	}
+	/**
+	 * Add a pixi DisplayObject as a child of the Spine object.
+	 * The DisplayObject will be rendered coherently with the draw order of the slot.
+	 * If an attachment is active on the slot, the pixi DisplayObject will be rendered on top of it.
+	 * If the DisplayObject is already attached to the given slot, nothing will happen.
+	 * If the DisplayObject is already attached to another slot, it will be removed from that slot
+	 * before adding it to the given one.
+	 * If another DisplayObject is already attached to this slot, the old one will be removed from this
+	 * slot before adding it to the current one.
+	 * @param slotRef - The slot index, or the slot name, or the Slot where the pixi object will be added to.
+	 * @param pixiObject - The pixi DisplayObject to add.
+	 */
+	addSlotObject (slotRef: number | string | Slot, pixiObject: DisplayObject): void {
+		let slot = this.getSlotFromRef(slotRef);
+		let oldPixiObject = this.slotsObject.get(slot);
+
+		// search if the pixiObject was already in another slotObject
+		if (!oldPixiObject) {
+			for (const [slot, oldPixiObjectAnotherSlot] of this.slotsObject) {
+				if (oldPixiObjectAnotherSlot === pixiObject) {
+					this.removeSlotObject(slot, pixiObject);
+					break;
+				}
+			}
+		}
+
+		if (oldPixiObject === pixiObject) return;
+		if (oldPixiObject) this.removeChild(oldPixiObject);
+
+		this.slotsObject.set(slot, pixiObject);
+		this.addChild(pixiObject);
+	}
+	/**
+	 * Return the DisplayObject connected to the given slot, if any.
+	 * Otherwise return undefined
+	 * @param pixiObject - The slot index, or the slot name, or the Slot to get the DisplayObject from.
+	 * @returns a DisplayObject if any, undefined otherwise.
+	 */
+	getSlotObject (slotRef: number | string | Slot): DisplayObject | undefined {
+		return this.slotsObject.get(this.getSlotFromRef(slotRef));
+	}
+	/**
+	 * Remove a slot object from the given slot.
+	 * If `pixiObject` is passed and attached to the given slot, remove it from the slot.
+	 * If `pixiObject` is not passed and the given slot has an attached DisplayObject, remove it from the slot.
+	 * @param slotRef - The slot index, or the slot name, or the Slot where the pixi object will be remove from.
+	 * @param pixiObject - Optional, The pixi DisplayObject to remove.
+	 */
+	removeSlotObject (slotRef: number | string | Slot, pixiObject?: DisplayObject): void {
+		let slot = this.getSlotFromRef(slotRef);
+		let slotObject = this.slotsObject.get(slot);
+		if (!slotObject) return;
+
+		// if pixiObject is passed, remove only if it is equal to the given one
+		if (pixiObject && pixiObject !== slotObject) return;
+
+		this.removeChild(slotObject);
+		this.slotsObject.delete(slot);
+	}
+
+	private verticesCache: NumberArrayLike = Utils.newFloatArray(1024);
 	private renderMeshes (): void {
 		this.resetMeshes();
 
@@ -233,8 +304,18 @@ export class Spine extends Container {
 		let uvs: NumberArrayLike | null = null;
 		const drawOrder = this.skeleton.drawOrder;
 
-		for (let i = 0, n = drawOrder.length; i < n; i++) {
+		for (let i = 0, n = drawOrder.length, slotObjectsCounter = 0; i < n; i++) {
 			const slot = drawOrder[i];
+
+			// render pixi object on the current slot on top of the slot attachment
+			let pixiObject = this.slotsObject.get(slot);
+			let zIndex = i + slotObjectsCounter;
+			if (pixiObject) {
+				pixiObject.setTransform(slot.bone.worldX, slot.bone.worldY, slot.bone.getWorldScaleX(), slot.bone.getWorldScaleX(), slot.bone.getWorldRotationX() * MathUtils.degRad);
+				pixiObject.zIndex = zIndex + 1;
+				slotObjectsCounter++;
+			}
+
 			const useDarkColor = slot.darkColor != null;
 			const vertexSize = Spine.clipper.isClipping() ? 2 : useDarkColor ? Spine.DARK_VERTEX_SIZE : Spine.VERTEX_SIZE;
 			if (!slot.bone.active) {
@@ -331,7 +412,7 @@ export class Spine extends Container {
 				}
 
 				const mesh = this.getMeshForSlot(slot);
-				mesh.zIndex = i;
+				mesh.zIndex = zIndex;
 				mesh.updateFromSpineData(texture, slot.data.blendMode, slot.data.name, finalVertices, finalVerticesLength, finalIndices, finalIndicesLength, useDarkColor);
 			}