mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-20 09:16:01 +08:00
97 lines
3.0 KiB
HTML
97 lines
3.0 KiB
HTML
<html>
|
|
<script src="../dist/iife/spine-webgl.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
|
|
<script>
|
|
class App {
|
|
constructor() {
|
|
this.skeleton = null;
|
|
this.animationState = null;
|
|
}
|
|
|
|
loadAssets(canvas) {
|
|
canvas.assetManager.loadBinary("assets/spineboy-pro.skel");
|
|
canvas.assetManager.loadTextureAtlas("assets/spineboy-pma.atlas");
|
|
canvas.assetManager.loadTexture("head.png");
|
|
}
|
|
|
|
initialize(canvas) {
|
|
let assetManager = canvas.assetManager;
|
|
|
|
// Create the texture atlas.
|
|
let atlas = assetManager.require("assets/spineboy-pma.atlas");
|
|
|
|
// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
|
|
let atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
|
|
|
// Create a SkeletonBinary instance for parsing the .skel file.
|
|
let skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
|
|
|
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
|
|
skeletonBinary.scale = 1;
|
|
let skeletonData = skeletonBinary.readSkeletonData(assetManager.require("assets/spineboy-pro.skel"));
|
|
this.skeleton = new spine.Skeleton(skeletonData);
|
|
|
|
// Create an AnimationState, and set the "run" animation in looping mode.
|
|
let animationStateData = new spine.AnimationStateData(skeletonData);
|
|
this.animationState = new spine.AnimationState(animationStateData);
|
|
this.animationState.setAnimation(0, "run", true);
|
|
|
|
// Get the custom head image from the asset manager and create an
|
|
// attachment from it.
|
|
let texture = assetManager.require("head.png");
|
|
let textureRegion = {
|
|
texture: texture,
|
|
u: 0, v: 0, u2: 1, v2: 1,
|
|
width: texture.getImage().width, height: texture.getImage().height,
|
|
degrees: 0,
|
|
offsetX: 0, offsetY: 0,
|
|
originalWidth: texture.getImage().width, originalHeight: texture.getImage().height
|
|
};
|
|
let headSlot = this.skeleton.findSlot("head");
|
|
let newHeadAttachment = headSlot.getAttachment().copy();
|
|
newHeadAttachment.region = textureRegion;
|
|
newHeadAttachment.updateRegion();
|
|
headSlot.setAttachment(newHeadAttachment);
|
|
}
|
|
|
|
update(canvas, delta) {
|
|
// Update the animation state using the delta time.
|
|
this.animationState.update(delta);
|
|
// Apply the animation state to the skeleton.
|
|
this.animationState.apply(this.skeleton);
|
|
// Let the skeleton update the transforms of its bones.
|
|
this.skeleton.updateWorldTransform(spine.Physics.update);
|
|
}
|
|
|
|
render(canvas) {
|
|
let renderer = canvas.renderer;
|
|
// Resize the viewport to the full canvas.
|
|
renderer.resize(spine.ResizeMode.Expand);
|
|
|
|
// Clear the canvas with a light gray color.
|
|
canvas.clear(0.2, 0.2, 0.2, 1);
|
|
|
|
// Begin rendering.
|
|
renderer.begin();
|
|
// Draw the skeleton
|
|
renderer.drawSkeleton(this.skeleton, false);
|
|
// Complete rendering.
|
|
renderer.end();
|
|
}
|
|
}
|
|
|
|
new spine.SpineCanvas(document.getElementById("canvas"), {
|
|
app: new App()
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |