mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 22:34:53 +08:00
67 lines
2.2 KiB
HTML
67 lines
2.2 KiB
HTML
<html>
|
|
<body>
|
|
<script src="../../build/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.webgl.ManagedWebGLRenderingContext(canvas);
|
|
var assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
|
|
var renderer = new spine.webgl.SceneRenderer(canvas, context);
|
|
var time = new spine.TimeKeeper();
|
|
var loadingScreen = new spine.webgl.LoadingScreen(new spine.webgl.SceneRenderer(canvas, context));
|
|
|
|
var skeleton = null;
|
|
var animationState = null;
|
|
|
|
assetManager.loadText("spineboy-ess.json");
|
|
assetManager.loadTextureAtlas("spineboy.atlas");
|
|
|
|
requestAnimationFrame(load);
|
|
|
|
function load () {
|
|
if (assetManager.isLoadingComplete()) {
|
|
var atlas = assetManager.get("spineboy.atlas");
|
|
var skeletonJson = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
|
|
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("spineboy-ess.json"));
|
|
var animationStateData = new spine.AnimationStateData(skeletonData);
|
|
|
|
skeleton = new spine.Skeleton(skeletonData);
|
|
animationState = new spine.AnimationState(animationStateData);
|
|
var offset = new spine.Vector2();
|
|
var size = new spine.Vector2();
|
|
skeleton.updateWorldTransform();
|
|
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);
|
|
|
|
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();
|
|
|
|
renderer.begin();
|
|
renderer.drawSkeleton(skeleton, true);
|
|
renderer.end();
|
|
|
|
loadingScreen.draw(true);
|
|
|
|
requestAnimationFrame(render);
|
|
}
|
|
</script>
|
|
</html> |