mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 14:24:53 +08:00
72 lines
2.6 KiB
HTML
72 lines
2.6 KiB
HTML
<html>
|
|
|
|
<body>
|
|
<script src="../dist/iife/spine-webgl.js"></script>
|
|
<canvas width="640" height="480"></canvas>
|
|
</body>
|
|
<script>
|
|
var canvas = document.getElementsByTagName("canvas")[0];
|
|
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
|
var context = new spine.ManagedWebGLRenderingContext(canvas);
|
|
var assetManager = new spine.AssetManager(context, "../example/assets/");
|
|
var renderer = new spine.SceneRenderer(canvas, context);
|
|
var time = new spine.TimeKeeper();
|
|
var loadingScreen = new spine.LoadingScreen(new spine.SceneRenderer(canvas, context));
|
|
|
|
var skeleton = null;
|
|
var animationState = null;
|
|
|
|
assetManager.loadText("spineboy-pro.json");
|
|
assetManager.loadTextureAtlas("spineboy-pma.atlas");
|
|
|
|
requestAnimationFrame(load);
|
|
|
|
function load() {
|
|
if (assetManager.isLoadingComplete()) {
|
|
var atlas = assetManager.get("spineboy-pma.atlas");
|
|
var skeletonJson = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
|
|
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("spineboy-pro.json"));
|
|
var animationStateData = new spine.AnimationStateData(skeletonData);
|
|
animationStateData.defaultMix = 0.3;
|
|
|
|
skeleton = new spine.Skeleton(skeletonData);
|
|
animationState = new spine.AnimationState(animationStateData);
|
|
var offset = new spine.Vector2();
|
|
var size = new spine.Vector2();
|
|
skeleton.updateWorldTransform(spine.Physics.update);
|
|
skeleton.getBounds(offset, size, []);
|
|
renderer.camera.position.x = offset.x + size.x / 2;
|
|
renderer.camera.position.y = offset.y + size.y / 2;
|
|
renderer.camera.zoom = size.x > size.y ? size.x / canvas.width : size.y / canvas.height;
|
|
|
|
animationState.setAnimation(0, "walk", true);
|
|
animationState.addAnimation(0, "run", true, 1);
|
|
animationState.addAnimation(0, "jump", true, 3);
|
|
|
|
requestAnimationFrame(render);
|
|
} else {
|
|
loadingScreen.draw(false);
|
|
requestAnimationFrame(load);
|
|
}
|
|
}
|
|
|
|
function render() {
|
|
context.gl.clearColor(0.9, 0.9, 0.9, 1);
|
|
context.gl.clear(context.gl.COLOR_BUFFER_BIT);
|
|
|
|
time.update();
|
|
animationState.update(time.delta);
|
|
animationState.apply(skeleton);
|
|
skeleton.updateWorldTransform(spine.Physics.update);
|
|
|
|
renderer.begin();
|
|
renderer.drawSkeleton(skeleton, true);
|
|
renderer.end();
|
|
|
|
loadingScreen.draw(true);
|
|
|
|
requestAnimationFrame(render);
|
|
}
|
|
</script>
|
|
|
|
</html> |