mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-20 17:26:01 +08:00
90 lines
2.9 KiB
HTML
90 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<!--<script src="https://unpkg.com/@esotericsoftware/spine-canvas@4.0.*/dist/iife/spine-canvas.js"></script>-->
|
|
<script src="../dist/iife/spine-canvas.js"></script>
|
|
</head>
|
|
|
|
<body style="margin: 0; padding: 0; background: #333">
|
|
<canvas id="canvas" style="width: 100%; height: 100vh;"></canvas>
|
|
</body>
|
|
|
|
<script>
|
|
let lastFrameTime = Date.now() / 1000;
|
|
let canvas, context;
|
|
let assetManager;
|
|
let skeleton, animationState, bounds;
|
|
let skeletonRenderer;
|
|
|
|
async function load() {
|
|
canvas = document.getElementById("canvas");
|
|
context = canvas.getContext("2d");
|
|
skeletonRenderer = new spine.SkeletonRenderer(context);
|
|
skeletonRenderer.triangleRendering = true;
|
|
|
|
// Load the assets.
|
|
assetManager = new spine.AssetManager("assets/");
|
|
assetManager.loadBinary("spineboy-pro.skel");
|
|
assetManager.loadTextureAtlas("spineboy.atlas");
|
|
await assetManager.loadAll();
|
|
|
|
// Create the texture atlas and skeleton data.
|
|
let atlas = assetManager.require("spineboy.atlas");
|
|
let atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
|
let skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
|
let skeletonData = skeletonBinary.readSkeletonData(assetManager.require("spineboy-pro.skel"));
|
|
|
|
// Instantiate a new skeleton based on the atlas and skeleton data.
|
|
skeleton = new spine.Skeleton(skeletonData);
|
|
skeleton.setToSetupPose();
|
|
skeleton.updateWorldTransform(spine.Physics.update);
|
|
bounds = skeleton.getBoundsRect();
|
|
|
|
// Setup an animation state with a default mix of 0.2 seconds.
|
|
var animationStateData = new spine.AnimationStateData(skeleton.data);
|
|
animationStateData.defaultMix = 0.2;
|
|
animationState = new spine.AnimationState(animationStateData);
|
|
|
|
// Set the run animation, looping.
|
|
animationState.setAnimation(0, "run", true);
|
|
|
|
// Start rendering.
|
|
requestAnimationFrame(render);
|
|
}
|
|
|
|
function render() {
|
|
// Calculate the delta time between this and the last frame in seconds.
|
|
var now = Date.now() / 1000;
|
|
var delta = now - lastFrameTime;
|
|
lastFrameTime = now;
|
|
|
|
// Resize the canvas drawing buffer if the canvas CSS width and height changed
|
|
// and clear the canvas.
|
|
if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
|
|
canvas.width = canvas.clientWidth;
|
|
canvas.height = canvas.clientHeight;
|
|
}
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Center the skeleton and resize it so it fits inside the canvas.
|
|
skeleton.x = canvas.width / 2;
|
|
skeleton.y = canvas.height - canvas.height * 0.1;
|
|
let scale = canvas.height / bounds.height * 0.8;
|
|
skeleton.scaleX = scale;
|
|
skeleton.scaleY = -scale;
|
|
|
|
// Update and apply the animation state, update the skeleton's
|
|
// world transforms and render the skeleton.
|
|
animationState.update(delta);
|
|
animationState.apply(skeleton);
|
|
skeleton.updateWorldTransform(spine.Physics.update);
|
|
skeletonRenderer.draw(skeleton);
|
|
|
|
requestAnimationFrame(render);
|
|
}
|
|
|
|
load();
|
|
</script>
|
|
|
|
</html> |