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

[pixi] Clean-up and extend examples

Browse Source
This commit is contained in:
Mario Zechner 2023-07-18 14:51:57 +02:00
parent deb4117b6a
commit 8d04c7a75b
6 changed files with 205 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/export/runtimes.sh
View File

@ -373,8 +373,8 @@ cp -f ../mix-and-match/export/mix-and-match-pma.png "$ROOT/spine-ts/spine-phaser
rm "$ROOT/spine-ts/spine-pixi/example/assets/"*
cp -f ../raptor/export/raptor-pro.json "$ROOT/spine-ts/spine-pixi/example/assets/"
cp -f ../raptor/export/raptor-pma.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"
cp -f ../raptor/export/raptor-pma.png "$ROOT/spine-ts/spine-pixi/example/assets/"
cp -f ../raptor/export/raptor.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"
cp -f ../raptor/export/raptor.png "$ROOT/spine-ts/spine-pixi/example/assets/"
cp -f ../spineboy/export/spineboy-pro.skel "$ROOT/spine-ts/spine-pixi/example/assets/"
cp -f ../spineboy/export/spineboy-pma.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"

1
spine-ts/index.html
View File

@ -19,6 +19,7 @@
<li>Pixi</li>
<ul>
<li><a href="/spine-pixi/example/index.html">Basic example</a></li>
<li><a href="/spine-pixi/example/events-example.html">Events example</a></li>
</ul>
<li>Phaser</li>
<ul>

69
spine-ts/spine-pixi/example/events-example.html Normal file
View File

@ -0,0 +1,69 @@
<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>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<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, "run", true);
// Set callbacks to receive animation state events
// Add the display object to the stage.
app.stage.addChild(spineboy);
})();
</script>
</body>
</html>

111
spine-ts/spine-pixi/example/index.html
View File

@ -1,7 +1,6 @@
<html>
<head>
<meta charset="UTF-8">
<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>
@ -15,7 +14,7 @@
body,
html {
height: 100%
height: 100%;
}
canvas {
@ -35,106 +34,34 @@
autoDensity: true,
resizeTo: window,
backgroundColor: 0x2c3e50,
hello:true
hello: true,
});
document.body.appendChild(app.view);
// Feel free to mix and match the binary skeleton, the json skeleton, the rect atlas and the polypack atlas
// You only need one skeleton and one atlas, the rest is just to show how to load different formats
PIXI.Assets.add("spineboySkeletonJson", "./assets/spineboy-pro.json");
PIXI.Assets.add("spineboySkeletonBinary", "./assets/spineboy-pro.skel");
PIXI.Assets.add("spineboyAtlas", "./assets/spineboy.atlas");
PIXI.Assets.add("spineboyAtlasPolypack", "./assets/spineboy-polypack.atlas");
await PIXI.Assets.load([
"spineboySkeletonJson",
"spineboySkeletonBinary",
"spineboyAtlas",
"spineboyAtlasPolypack"
]);
// 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("spineboySkeletonJson", "spineboyAtlas", { scale: 0.5 });
// .from(...) is a shortcut + cache for creating the skeleton data at a certain scale
// Here would be the "long way" of doing it (without cache):
// const skeletonAsset = Assets.get(skeletonAssetName);
// const atlasAsset = Assets.get(atlasAssetName);
// const attachmentLoader = new AtlasAttachmentLoader(atlasAsset);
// let parser; // You can skip this guessing step if you know the type of the skeleton asset
// if (skeletonAsset instanceof Uint8Array) {
// parser = new SkeletonBinary(attachmentLoader);
// } else {
// parser = new SkeletonJson(attachmentLoader);
// }
// parser.scale = options?.scale ?? 1;
// skeletonData = parser.readSkeletonData(skeletonAsset);
// onst spineBoy = new spine.Spine(skeletonData, options);
// Set the position
spineBoy.x = window.innerWidth / 2;
spineBoy.y = window.innerHeight * 0.9;
// start an animation. AutoUpdate is on by default, we don't need a manual rAF loop
spineBoy.state.setAnimation(0, "run", true);
// add to stage
app.stage.addChild(spineBoy);
// do we want debug? we can have debug!
const spinedebugger = new spine.SpineDebugRenderer();
spineBoy.debug = spinedebugger;
// End of spine setup. The rest is the tweakpane on the right to play with the spineboy
const pane = new Tweakpane.Pane({ title: 'spine pixi.js' });
// spineboy position on screen
pane.addInput(spineBoy, 'position', {
x: { min: 0, max: window.innerWidth },
y: { min: 0, max: window.innerHeight },
const spineboy = spine.Spine.from("spineboyData", "spineboyAtlas", {
scale: 0.5,
});
// Interesting example on how to get the pixi global position of a bone, and how to set a bone to a pixi global position
// spine's "global" position is local to the spine display object. It's not the same as pixi's global position
const aux = {aimPosition:spineBoy.toGlobal(spineBoy.getBonePosition("crosshair"))};
const aimControl = pane.addInput(aux, 'aimPosition', {
x: { min: 0, max: window.innerWidth },
y: { min: 0, max: window.innerHeight },
}).on("change", (e) => {
spineBoy.setBonePosition("crosshair", spineBoy.toLocal(e.value));
})
aimControl.hidden = true;
// Set the default mix time to use when transitioning
// from one animation to the next.
spineboy.state.data.defaultMix = 0.2;
// anim changer
pane.addBlade({
view: 'list',
label: 'animation',
options: spineBoy.skeleton.data.animations.map(a => ({ text: a.name, value: a.name })),
value: 'run',
}).on("change", (e) => {
spineBoy.state.setAnimation(0, e.value, true);
aimControl.hidden = !(e.value == "aim")
})
// Center the spine object on screen.
spineboy.x = window.innerWidth / 2;
spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
// turn on or off debug draws
const debugFolder = pane.addFolder({
title: 'Debug options',
});
debugFolder.addInput(spinedebugger, 'drawMeshHull');
debugFolder.addInput(spinedebugger, 'drawMeshTriangles');
debugFolder.addInput(spinedebugger, 'drawBones');
debugFolder.addInput(spinedebugger, 'drawPaths');
debugFolder.addInput(spinedebugger, 'drawBoundingBoxes');
debugFolder.addInput(spinedebugger, 'drawClipping');
debugFolder.addInput(spinedebugger, 'drawRegionAttachments');
debugFolder.addInput(spinedebugger, 'drawEvents');
// Set animation "run" on track 0, looped.
spineboy.state.setAnimation(0, "run", true);
// Add the display object to the stage.
app.stage.addChild(spineboy);
})();
</script>
</body>
</html>

74
spine-ts/spine-pixi/example/manual-loading.html Normal file
View File

@ -0,0 +1,74 @@
<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>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<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"]);
// Manually load the data and create a Spine display object from it using
// the Spine core API. This will not use the interal cache like Spine.from(),
// so you have to cache data yourself.
const atlas = PIXI.Assets.get("spineboyAtlas");
const attachmentLoader = new spine.AtlasAttachmentLoader(atlas);
const binaryLoader = new spine.SkeletonBinary(attachmentLoader);
binaryLoader.scale = 0.5;
const skeletonData = binaryLoader.readSkeletonData(
PIXI.Assets.get("spineboyData")
);
const spineboy = new spine.Spine(skeletonData);
// 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, "run", true);
// Add the display object to the stage.
app.stage.addChild(spineboy);
})();
</script>
</body>
</html>

19
spine-ts/spine-pixi/src/Spine.ts
View File

@ -122,23 +122,8 @@ export class Spine extends Container {
this.state = new AnimationState(animData);
this.autoUpdate = options?.autoUpdate ?? true;
this.slotMeshFactory = options?.slotMeshFactory ?? ((): ISlotMesh => new SlotMesh());
/**
* This is locked behind https://github.com/pixijs/pixijs/issues/8957
* I don't want to make a custom event emitter and do `this.spineEvents.on` because that's just as "far" as `this.state.addListener`
* So, until pixi fixes the custom event system, I'll stick to spine native events. - @miltoncandelero
this.spineListeners = {
complete: (trackEntry) => this.emit("complete", trackEntry),
dispose: (trackEntry) => this.emit("dispose", trackEntry),
end: (trackEntry) => this.emit("end", trackEntry),
event: (trackEntry, event) => this.emit("event", trackEntry, event),
interrupt: (trackEntry) => this.emit("interrupt", trackEntry),
start: (trackEntry) => this.emit("start", trackEntry),
};
this.state.addListener(this.spineListeners);
*/
this.skeleton.setToSetupPose();
this.skeleton.updateWorldTransform();
}
public update (deltaSeconds: number): void {