mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-03-26 22:49:01 +08:00
123 lines
3.6 KiB
HTML
123 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
</head>
|
|
<script src="../dist/iife/spine-webgl.js"></script>
|
|
<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">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
|
|
<script>
|
|
class App {
|
|
constructor() {
|
|
this.skeleton1 = null;
|
|
this.skeleton2 = null;
|
|
this.animationState1 = null;
|
|
this.animationState2 = null;
|
|
this.manualControl = false;
|
|
}
|
|
|
|
loadAssets(canvas) {
|
|
canvas.assetManager.loadBinary("/assets/dragon-ess.skel");
|
|
canvas.assetManager.loadTextureAtlas("/assets/dragon-pma.atlas");
|
|
}
|
|
|
|
initialize(canvas) {
|
|
let assetManager = canvas.assetManager;
|
|
|
|
var atlas = assetManager.require("/assets/dragon-pma.atlas");
|
|
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
|
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
|
|
|
skeletonBinary.scale = 0.5;
|
|
var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("/assets/dragon-ess.skel"));
|
|
|
|
// First skeleton
|
|
this.skeleton1 = new spine.Skeleton(skeletonData);
|
|
var animationStateData1 = new spine.AnimationStateData(skeletonData);
|
|
this.animationState1 = new spine.AnimationState(animationStateData1);
|
|
this.animationState1.setAnimation(0, "flying", true);
|
|
|
|
// Second skeleton sharing the same skeletonData
|
|
this.skeleton2 = new spine.Skeleton(skeletonData);
|
|
var animationStateData2 = new spine.AnimationStateData(skeletonData);
|
|
this.animationState2 = new spine.AnimationState(animationStateData2);
|
|
this.animationState2.setAnimation(0, "flying", true);
|
|
|
|
// GUI for manual time control
|
|
const myObject = { time1: 0, time2: 0 };
|
|
let prevValue1 = 0;
|
|
let prevValue2 = 0;
|
|
|
|
const gui = new lil.GUI({});
|
|
gui.add(myObject, 'time1').min(0).max(10).step(0.01)
|
|
.name('time dragon 1')
|
|
.onChange(value => {
|
|
this.manualControl = true;
|
|
const delta = value - prevValue1;
|
|
prevValue1 = value;
|
|
this.animationState1.update(delta / 10);
|
|
this.animationState1.apply(this.skeleton1);
|
|
this.skeleton1.updateWorldTransform(spine.Physics.update);
|
|
});
|
|
|
|
gui.add(myObject, 'time2').min(0).max(10).step(0.01)
|
|
.name('time dragon 2')
|
|
.onChange(value => {
|
|
this.manualControl = true;
|
|
const delta = value - prevValue2;
|
|
prevValue2 = value;
|
|
this.animationState2.update(delta / 10);
|
|
this.animationState2.apply(this.skeleton2);
|
|
this.skeleton2.updateWorldTransform(spine.Physics.update);
|
|
});
|
|
}
|
|
|
|
update(canvas, delta) {
|
|
if (this.manualControl) return;
|
|
|
|
this.animationState1.update(delta);
|
|
this.animationState1.apply(this.skeleton1);
|
|
this.skeleton1.updateWorldTransform(spine.Physics.update);
|
|
|
|
this.animationState2.update(delta);
|
|
this.animationState2.apply(this.skeleton2);
|
|
this.skeleton2.updateWorldTransform(spine.Physics.update);
|
|
}
|
|
|
|
render(canvas) {
|
|
let renderer = canvas.renderer;
|
|
renderer.resize(spine.ResizeMode.Expand);
|
|
canvas.clear(0.2, 0.2, 0.2, 1);
|
|
|
|
// Position the two skeletons
|
|
this.skeleton1.x = 0;
|
|
this.skeleton1.y = -100;
|
|
|
|
this.skeleton2.x = 0;
|
|
this.skeleton2.y = 200;
|
|
|
|
renderer.begin();
|
|
renderer.drawSkeleton(this.skeleton1);
|
|
renderer.drawSkeleton(this.skeleton2);
|
|
renderer.end();
|
|
}
|
|
}
|
|
|
|
new spine.SpineCanvas(document.getElementById("canvas"), {
|
|
app: new App()
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|