Skip to content

Commit f8bcbb3

Browse files
davidetandavidetan
committed
[ts][pixi-v7] Allow to define a bounds providers for the Spine game object. See #2734.
1 parent 9fb49c2 commit f8bcbb3

File tree

6 files changed

+360
-15
lines changed

6 files changed

+360
-15
lines changed

‎spine-ts/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ <h1>spine-ts Examples</h1>
5353
<li><a href="/spine-pixi-v7/example/physics3.html">Physics III</a></li>
5454
<li><a href="/spine-pixi-v7/example/physics4.html">Physics IV</a></li>
5555
<li><a href="/spine-pixi-v7/example/slot-objects.html">Slot Objects</a></li>
56+
<li><a href="/spine-pixi-v7/example/bounds.html">Bounds</a></li>
5657
<li><a href="/spine-pixi-v7/example/bunnymark.html?count=500">Bunny Mark</a></li>
5758
</ul>
5859
<li>PixiJS v8</li>
@@ -79,6 +80,7 @@ <h1>spine-ts Examples</h1>
7980
<li><a href="/spine-pixi-v8/example/physics3.html">Physics III</a></li>
8081
<li><a href="/spine-pixi-v8/example/physics4.html">Physics IV</a></li>
8182
<li><a href="/spine-pixi-v8/example/slot-objects.html">Slot Objects</a></li>
83+
<li><a href="/spine-pixi-v8/example/bounds.html">Bounds</a></li>
8284
<li><a href="/spine-pixi-v8/example/bunnymark.html?count=500&renderer=webgpu">Bunny Mark</a></li>
8385
</ul>
8486
<li>Phaser</li>

‎spine-ts/package-lock.json‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎spine-ts/spine-pixi-v7/example/bounds.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<html>
2+
<head>
3+
<meta charset="UTF-8" />
4+
<title>spine-pixi-v7</title>
5+
<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.4.2/dist/pixi.min.js"></script>
6+
<script src="../dist/iife/spine-pixi-v7.js"></script>
7+
<link rel="stylesheet" href="../../index.css">
8+
</head>
9+
10+
<body>
11+
<script>
12+
(async function () {
13+
14+
var app = new PIXI.Application({
15+
width: window.innerWidth,
16+
height: window.innerHeight,
17+
resolution: window.devicePixelRatio || 1,
18+
autoDensity: true,
19+
resizeTo: window,
20+
backgroundColor: 0x2c3e50,
21+
hello: true,
22+
});
23+
document.body.appendChild(app.view);
24+
25+
// Pre-load the skeleton data and atlas. You can also load .json skeleton data.
26+
PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel"});
27+
PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas"});
28+
await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
29+
30+
31+
// Create the spine display object
32+
const spineboy1 = spine.Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas", scale: .2 });
33+
34+
const spineboy2 = spine.Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas", scale: .2,
35+
boundsProvider: new spine.SetupPoseBoundsProvider(),
36+
});
37+
38+
const spineboy3 = spine.Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas", scale: .2,
39+
boundsProvider: new spine.SkinsAndAnimationBoundsProvider("portal", undefined, undefined, false),
40+
});
41+
42+
const spineboy4 = spine.Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas", scale: .2,
43+
boundsProvider: new spine.SkinsAndAnimationBoundsProvider("portal", undefined, undefined, true),
44+
});
45+
46+
const spineboy5 = spine.Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas", scale: .2,
47+
boundsProvider: new spine.AABBRectangleBoundsProvider(-100, -100, 100, 100),
48+
});
49+
50+
const maxHeight = spineboy3.getBounds().height;
51+
const scaleFactor = 1 / (maxHeight * 5 / window.innerHeight);
52+
const scaledMaxHeight = maxHeight * scaleFactor;
53+
54+
const texts = [
55+
"Default bounds: dynamic, recomputed when queried",
56+
"Set up pose bound: fixed, based on setup pose",
57+
"Skin and animations based bound: fixed, the max AABB rectangle containing the skeleton with the given skin and given animations (clipping is ignored)",
58+
"Skin and animations based bound: same as above, but with clipping true. The bounds is smaller because clipped attachments' parts are not considered",
59+
"AABB Rectangle bounds: fixed, manually provided bounds. The origin is in skeleton root and size are in skeleton space",
60+
]
61+
62+
const pointerOn = [];
63+
64+
const elements = [spineboy1, spineboy2, spineboy3, spineboy4, spineboy5].map((spineboy, i) => {
65+
// const elements = [spineboy1].map((spineboy, i) => {
66+
67+
spineboy.x = window.innerWidth / 2;
68+
spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
69+
70+
const x = 300 * scaleFactor;
71+
72+
// spineboy placement
73+
spineboy.scale.set(scaleFactor);
74+
spineboy.state.setAnimation(0, "portal", true);
75+
spineboy.x = x;
76+
spineboy.y = 70 * scaleFactor + (window.innerHeight / 10 * (1 + 2*i));
77+
78+
app.stage.addChild(spineboy);
79+
80+
// yellow rectangle to show bounds
81+
const graphics = new PIXI.Graphics();
82+
app.stage.addChild(graphics);
83+
84+
// text
85+
const basicText = new PIXI.Text(
86+
texts[i],
87+
{
88+
fontSize: 20 * scaleFactor,
89+
fill: "white",
90+
wordWrap: true,
91+
wordWrapWidth: 400 * scaleFactor,
92+
}
93+
);
94+
basicText.x = x + scaledMaxHeight + 0 * scaleFactor;
95+
basicText.y = scaledMaxHeight * (i + .5);
96+
basicText.anchor.set(0, 0.5);
97+
app.stage.addChild(basicText);
98+
99+
// pointer events
100+
spineboy.eventMode = "static";
101+
spineboy.cursor = "pointer";
102+
spineboy.on("pointerenter", () => pointerOn[i] = true);
103+
spineboy.on("pointerleave", () => pointerOn[i] = false);
104+
105+
return [spineboy, graphics];
106+
})
107+
108+
app.ticker.add((delta) => {
109+
elements.forEach(([spineboy, graphic], i) => {
110+
const bound = spineboy.getBounds();
111+
graphic.clear();
112+
graphic.lineStyle(2, 0xfeeb77);
113+
graphic.beginFill(0xff0000, pointerOn[i] ? .2 : 0);
114+
graphic.drawRect(bound.x, bound.y, bound.width, bound.height);
115+
graphic.endFill();
116+
})
117+
})
118+
119+
})();
120+
</script>
121+
</body>
122+
</html>

‎spine-ts/spine-pixi-v7/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"@pixi/graphics": "^7.2.4",
4040
"@pixi/text": "^7.2.4",
4141
"@pixi/assets": "^7.2.4",
42-
"@pixi/mesh": "^7.2.4"
42+
"@pixi/mesh": "^7.2.4",
43+
"@pixi/events": "^7.2.4"
4344
}
4445
}

0 commit comments

Comments
 (0)