[ts][pixi-v7][pixi-v8] Fixed slot objects ignoring negative parent bone scale. See #2818.

spine-ts/index.html

@@ -43,6 +43,7 @@
         <li><a href="/spine-pixi-v8/example/physics3.html">Physics III</a> - (<a href="/spine-pixi-v7/example/physics3.html">v7</a>)</li>
         <li><a href="/spine-pixi-v8/example/physics4.html">Physics IV</a> - (<a href="/spine-pixi-v7/example/physics4.html">v7</a>)</li>
         <li><a href="/spine-pixi-v8/example/slot-objects.html">Slot Objects</a> - (<a href="/spine-pixi-v7/example/slot-objects.html">v7</a>)</li>
+        <li><a href="/spine-pixi-v8/example/slot-objects-scale-rotation.html">Slot Objects (Rotation, scale test)</a> - (<a href="/spine-pixi-v7/example/slot-objects-scale-rotation.html">v7</a>)</li>
         <li><a href="/spine-pixi-v8/example/bounds.html">Bounds</a> - (<a href="/spine-pixi-v7/example/bounds.html">v7</a>)</li>
         <li><a href="/spine-pixi-v8/example/bunnymark.html?count=500&renderer=webgpu">Bunny Mark</a> - (<a href="/spine-pixi-v7/example/bunnymark.html?count=500">v7</a>)</li>
       </ul>

spine-ts/spine-pixi-v7/src/Spine.ts

@@ -34,7 +34,6 @@ import {
 	AtlasAttachmentLoader,
 	ClippingAttachment,
 	Color,
-	MathUtils,
 	MeshAttachment,
 	Physics,
 	RegionAttachment,
@@ -52,7 +51,7 @@ import { SlotMesh } from "./SlotMesh.js";
 import { DarkSlotMesh } from "./DarkSlotMesh.js";
 import type { ISpineDebugRenderer, SpineDebugRenderer } from "./SpineDebugRenderer.js";
 import { Assets } from "@pixi/assets";
-import { IPointData, Point, Rectangle } from "@pixi/core";
+import { IPointData, Point } from "@pixi/core";
 import { Ticker } from "@pixi/core";
 import type { IDestroyOptions, DisplayObject } from "@pixi/display";
 import { Bounds, Container } from "@pixi/display";
@@ -593,8 +592,24 @@ export class Spine extends Container {
 
 		if (slotObject.visible) {
 			slotObject.position.set(slot.bone.worldX, slot.bone.worldY);
-			slotObject.scale.set(slot.bone.getWorldScaleX(), slot.bone.getWorldScaleY());
-			slotObject.rotation = slot.bone.getWorldRotationX() * MathUtils.degRad;
+			slotObject.angle = slot.bone.getWorldRotationX();
+
+			let bone: Bone | null = slot.bone;
+			let cumulativeScaleX = 1;
+			let cumulativeScaleY = 1;
+			while (bone) {
+				cumulativeScaleX *= bone.scaleX;
+				cumulativeScaleY *= bone.scaleY;
+				bone = bone.parent;
+			};
+
+			if (cumulativeScaleX < 0) slotObject.angle -= 180;
+
+			slotObject.scale.set(
+				slot.bone.getWorldScaleX() * Math.sign(cumulativeScaleX),
+				slot.bone.getWorldScaleY() * Math.sign(cumulativeScaleY),
+			);
+
 			slotObject.zIndex = zIndex + 1;
 			slotObject.alpha = this.skeleton.color.a * slot.color.a;
 		}

spine-ts/spine-pixi-v8/src/Spine.ts

@@ -33,7 +33,6 @@ import {
 	Cache,
 	Container,
 	ContainerOptions,
-	DEG_TO_RAD,
 	DestroyOptions,
 	fastCopy,
 	Graphics,
@@ -785,14 +784,25 @@ export class Spine extends ViewContainer {
 		container.visible = this.skeleton.drawOrder.includes(slot) && followAttachmentValue;
 
 		if (container.visible) {
-			const bone = slot.bone;
+			let bone: Bone | null = slot.bone;
 
 			container.position.set(bone.worldX, bone.worldY);
+			container.angle = bone.getWorldRotationX();
+
+			let cumulativeScaleX = 1;
+			let cumulativeScaleY = 1;
+			while (bone) {
+				cumulativeScaleX *= bone.scaleX;
+				cumulativeScaleY *= bone.scaleY;
+				bone = bone.parent;
+			};
 
-			container.scale.x = bone.getWorldScaleX();
-			container.scale.y = bone.getWorldScaleY();
+			if (cumulativeScaleX < 0) container.angle -= 180;
 
-			container.rotation = bone.getWorldRotationX() * DEG_TO_RAD;
+			container.scale.set(
+				slot.bone.getWorldScaleX() * Math.sign(cumulativeScaleX),
+				slot.bone.getWorldScaleY() * Math.sign(cumulativeScaleY),
+			);
 
 			container.alpha = this.skeleton.color.a * slot.color.a;
 		}