UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 01:36:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Davide Tantillo 2025-04-24 16:03:25 +02:00
parent d7f3ab4723
commit 1530550acd
5 changed files with 291 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spine-ts/index.html
View File

@ -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/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/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.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/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> <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> </ul>

130
spine-ts/spine-pixi-v7/example/slot-objects-scale-rotation.html Normal file
View File

@ -0,0 +1,130 @@
<html>
<head>
<meta charset="UTF-8" />
<title>spine-pixi</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.4.2/dist/pixi.min.js"></script>
<script src="../dist/iife/spine-pixi-v7.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
<link rel="stylesheet" href="../../index.css">
<script src="https://cdn.jsdelivr.net/npm/lil-gui@0.20.0/dist/lil-gui.umd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/lil-gui@0.20.0/dist/lil-gui.min.css" rel="stylesheet">
</head>
<body>
<script>
(async function () {
await Promise.resolve();
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);
// adding skeleton to cache
PIXI.Assets.cache.set("jsonSkel", jsonSkel);
// adding texture atlas to cache and loading the respective texture page
const textureAtlas = new spine.TextureAtlas(txtAtlas);
const texturePng = await PIXI.Assets.load(slotPng);
textureAtlas.pages[0].setTexture(spine.SpineTexture.from(texturePng.baseTexture));
PIXI.Assets.cache.set("spineboyAtlas", textureAtlas);
// creating spine game object
const spineGO = spine.Spine.from({skeleton: "jsonSkel", atlas: "spineboyAtlas" });
spineGO.position.set(300, 300);
app.stage.addChild(spineGO);
// creating slot object
const container = new PIXI.Container();
const sprite = await PIXI.Sprite.from(texturePng);
sprite.anchor.x = 0.5;
sprite.anchor.y = 0.5;
sprite.tint = 0x00ff00
container.addChild(sprite);
spineGO.addSlotObject("replaceMe", container);
// adding controls
const parentBone = spineGO.skeleton.findBone("pivot");
const parent2Bone = spineGO.skeleton.findBone("pivot2");
const bone = spineGO.skeleton.findBone("replaceMe");
const myObject = {
parentScaleX: 1, parentScaleY: 1, parentRotation: 0,
parent2ScaleX: 1, parent2ScaleY: 1, parent2Rotation: 0,
scaleX: 1, scaleY: 1, rotation: 0,
};
const gui = new lil.GUI({});
gui.add(myObject, 'parentScaleX').min(-3).max(3).step(0.1).name('parentScaleX').onChange(value => parentBone.scaleX = value);
gui.add(myObject, 'parentScaleY').min(-3).max(3).step(0.1).name('parentScaleY').onChange(value => parentBone.scaleY = value);
gui.add(myObject, 'parentRotation').min(-180).max(180).step(1).name('parentRotation').onChange(value => parentBone.rotation = value);
gui.add(myObject, 'parent2ScaleX').min(-3).max(3).step(0.1).name('parent2ScaleX').onChange(value => parent2Bone.scaleX = value);
gui.add(myObject, 'parent2ScaleY').min(-3).max(3).step(0.1).name('parent2ScaleY').onChange(value => parent2Bone.scaleY = value);
gui.add(myObject, 'parent2Rotation').min(-180).max(180).step(1).name('parent2Rotation').onChange(value => parent2Bone.rotation = value);
gui.add(myObject, 'scaleX').min(-3).max(3).step(0.1).name('scaleX').onChange(value => bone.scaleX = value);
gui.add(myObject, 'scaleY').min(-3).max(3).step(0.1).name('scaleY').onChange(value => bone.scaleY = value);
gui.add(myObject, 'rotation').min(-180).max(180).step(1).name('rotation').onChange(value => bone.rotation = value);
// add instructions
const basicText = new PIXI.Text(
"This example shows that slot objects follow scale and rotation from ancestors too, but if a rotation on a bone occurs scale won't work anymore on ancestors.",
{ fontSize: 20, fill: "white", wordWrap: true, wordWrapWidth: 300 }
);
basicText.position.set(10, 10);
basicText.anchor.set(0, 0);
app.stage.addChild(basicText);
})();
const jsonSkel = {
"bones": [
{ "name": "root" },
{ "name": "pivot", "parent": "root",
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"x": 20,
"y": -20
},
{
"name": "pivot2", "parent": "pivot",
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"x": 20,
"y": -20
},
{
"name": "replaceMe", "parent": "pivot2",
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"x": 20,
"y": -20
}
],
"slots": [{ "name": "replaceMe", "bone": "replaceMe", "attachment": "image" }],
"skins": [{ "name": "default", "attachments": { "replaceMe": { "image": { "width": 100, "height": 100 } } }}],
"animations": { "animation": {} }
}
const txtAtlas =
`skeleton.png
size:100,100
filter:Linear,Linear
image
bounds:0,0,100,100`;
const slotPng = "data:image/png;base64,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";
</script>
</body>
</html>

23
spine-ts/spine-pixi-v7/src/Spine.ts
View File

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

126
spine-ts/spine-pixi-v8/example/slot-objects-scale-rotation.html Normal file
View File

@ -0,0 +1,126 @@
<html>
<head>
<meta charset="UTF-8" />
<title>spine-pixi</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.js"></script>
<script src="../dist/iife/spine-pixi-v8.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
<link rel="stylesheet" href="../../index.css">
<script src="https://cdn.jsdelivr.net/npm/lil-gui@0.20.0/dist/lil-gui.umd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/lil-gui@0.20.0/dist/lil-gui.min.css" rel="stylesheet">
</head>
<body>
<script>
(async function () {
var app = new PIXI.Application();
await app.init({
width: window.innerWidth,
height: window.innerHeight,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
resizeTo: window,
backgroundColor: 0x2c3e50,
hello: true,
})
document.body.appendChild(app.view);
// adding skeleton to cache
PIXI.Assets.cache.set("jsonSkel", jsonSkel);
// adding texture atlas to cache and loading the respective texture page
const textureAtlas = new spine.TextureAtlas(txtAtlas);
const texturePng = await PIXI.Assets.load(slotPng);
textureAtlas.pages[0].setTexture(spine.SpineTexture.from(texturePng.source));
PIXI.Assets.cache.set("spineboyAtlas", textureAtlas);
// creating spine game object
const spineGO = spine.Spine.from({skeleton: "jsonSkel", atlas: "spineboyAtlas" });
spineGO.position.set(300, 300);
app.stage.addChild(spineGO);
// creating slot object
const container = new PIXI.Container();
const sprite = await PIXI.Sprite.from(texturePng);
sprite.anchor.x = 0.5;
sprite.anchor.y = 0.5;
sprite.tint = 0x00ff00
container.addChild(sprite);
spineGO.addSlotObject("replaceMe", container);
// adding controls
const parentBone = spineGO.skeleton.findBone("pivot");
const parent2Bone = spineGO.skeleton.findBone("pivot2");
const bone = spineGO.skeleton.findBone("replaceMe");
const myObject = {
parentScaleX: 1, parentScaleY: 1, parentRotation: 0,
parent2ScaleX: 1, parent2ScaleY: 1, parent2Rotation: 0,
scaleX: 1, scaleY: 1, rotation: 0,
};
const gui = new lil.GUI({});
gui.add(myObject, 'parentScaleX').min(-3).max(3).step(0.1).name('parentScaleX').onChange(value => parentBone.scaleX = value);
gui.add(myObject, 'parentScaleY').min(-3).max(3).step(0.1).name('parentScaleY').onChange(value => parentBone.scaleY = value);
gui.add(myObject, 'parentRotation').min(-180).max(180).step(1).name('parentRotation').onChange(value => parentBone.rotation = value);
gui.add(myObject, 'parent2ScaleX').min(-3).max(3).step(0.1).name('parent2ScaleX').onChange(value => parent2Bone.scaleX = value);
gui.add(myObject, 'parent2ScaleY').min(-3).max(3).step(0.1).name('parent2ScaleY').onChange(value => parent2Bone.scaleY = value);
gui.add(myObject, 'parent2Rotation').min(-180).max(180).step(1).name('parent2Rotation').onChange(value => parent2Bone.rotation = value);
gui.add(myObject, 'scaleX').min(-3).max(3).step(0.1).name('scaleX').onChange(value => bone.scaleX = value);
gui.add(myObject, 'scaleY').min(-3).max(3).step(0.1).name('scaleY').onChange(value => bone.scaleY = value);
gui.add(myObject, 'rotation').min(-180).max(180).step(1).name('rotation').onChange(value => bone.rotation = value);
// add instructions
const basicText = new PIXI.Text({
text: "This example shows that slot objects follow scale and rotation from ancestors too, but if a rotation on a bone occurs scale won't work anymore on ancestors.",
style: { fontSize: 20, fill: "white", wordWrap: true, wordWrapWidth: 300 }
});
basicText.position.set(10, 10);
basicText.anchor.set(0, 0);
app.stage.addChild(basicText);
})();
const jsonSkel = {
"bones": [
{ "name": "root" },
{ "name": "pivot", "parent": "root",
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"x": 20,
"y": -20
},
{
"name": "pivot2", "parent": "pivot",
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"x": 20,
"y": -20
},
{
"name": "replaceMe", "parent": "pivot2",
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"x": 20,
"y": -20
}
],
"slots": [{ "name": "replaceMe", "bone": "replaceMe", "attachment": "image" }],
"skins": [{ "name": "default", "attachments": { "replaceMe": { "image": { "width": 100, "height": 100 } } }}],
"animations": { "animation": {} }
}
const txtAtlas =
`skeleton.png
size:100,100
filter:Linear,Linear
image
bounds:0,0,100,100`;
const slotPng = "data:image/png;base64,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"
</script>
</body>
</html>

20
spine-ts/spine-pixi-v8/src/Spine.ts
View File

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