mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 22:34:53 +08:00
109 lines
3.5 KiB
HTML
109 lines
3.5 KiB
HTML
<html>
|
|
<script src="../../build/spine-webgl.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
|
<style>
|
|
* { margin: 0; padding: 0; }
|
|
body, html { height: 100% }
|
|
canvas { position: absolute; width: 100% ;height: 100%; }
|
|
</style>
|
|
<body>
|
|
<canvas id="canvas"></canvas>
|
|
<center><div id="info" style="color: #fff; position: fixed; top: 0; width: 100%"></div></center>
|
|
<script>
|
|
|
|
var info, canvas;
|
|
var gl, renderer, input, assetManager;
|
|
var skeleton;
|
|
var coords = new spine.webgl.Vector3();
|
|
var temp = new spine.webgl.Vector3();
|
|
var temp2 = new spine.Vector2();
|
|
var lastFrameTime = Date.now() / 1000;
|
|
var target = null;
|
|
var boneName = "hip";
|
|
|
|
function init () {
|
|
info = document.getElementById("info");
|
|
canvas = document.getElementById("canvas");
|
|
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
|
|
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
|
|
|
|
renderer = new spine.webgl.SceneRenderer(canvas, gl);
|
|
assetManager = new spine.webgl.AssetManager(gl);
|
|
input = new spine.webgl.Input(canvas);
|
|
input.addListener({
|
|
down: function(x, y) {
|
|
var bone = skeleton.findBone(boneName);
|
|
renderer.camera.unproject(coords.set(x, y, 0));
|
|
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 20) {
|
|
target = bone;
|
|
}
|
|
},
|
|
up: function(x, y) {
|
|
target = null;
|
|
},
|
|
moved: function(x, y) {
|
|
if (target != null) {
|
|
renderer.camera.unproject(coords.set(x, y, 0));
|
|
if (target.parent !== null) {
|
|
target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
|
|
target.x = temp2.x;
|
|
target.y = temp2.y;
|
|
} else {
|
|
target.x = coords.x - skeleton.x;
|
|
target.y = coords.y - skeleton.y;
|
|
}
|
|
}
|
|
}
|
|
})
|
|
assetManager.loadTexture("assets/spineboy.png");
|
|
assetManager.loadText("assets/spineboy-mesh.json");
|
|
assetManager.loadText("assets/spineboy.atlas");
|
|
requestAnimationFrame(loading);
|
|
}
|
|
|
|
function loading () {
|
|
if (assetManager.isLoadingComplete()) {
|
|
var atlas = new spine.TextureAtlas(assetManager.get("assets/spineboy.atlas"), function(path) {
|
|
return assetManager.get("assets/" + path);
|
|
});
|
|
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
|
|
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
|
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/spineboy-mesh.json"));
|
|
skeleton = new spine.Skeleton(skeletonData);
|
|
skeleton.setToSetupPose();
|
|
skeleton.updateWorldTransform();
|
|
requestAnimationFrame(render);
|
|
} else requestAnimationFrame(loading);
|
|
}
|
|
|
|
function render () {
|
|
var now = Date.now() / 1000;
|
|
var delta = now - lastFrameTime;
|
|
lastFrameTime = now;
|
|
|
|
renderer.resize();
|
|
gl.clearColor(0.2, 0.2, 0.2, 1);
|
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
|
|
renderer.begin();
|
|
renderer.line(-canvas.width, 0, canvas.width, 0, spine.Color.RED);
|
|
renderer.triangle(true, 100, 100, 200, 100, 150, 200, spine.Color.RED, spine.Color.GREEN, spine.Color.BLUE);
|
|
renderer.drawTexture(assetManager.get("assets/spineboy.png"), -200, 100, 200, 200);
|
|
renderer.line(0, -canvas.height, 0, canvas.height, spine.Color.GREEN);
|
|
renderer.rect(false, -200, 100, 200, 200, spine.Color.BLUE);
|
|
renderer.line(0, 0, 400, 400, spine.Color.BLUE);
|
|
skeleton.updateWorldTransform();
|
|
renderer.drawSkeleton(skeleton);
|
|
var bone = skeleton.findBone(boneName);
|
|
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, spine.Color.MAGENTA);
|
|
renderer.end();
|
|
|
|
requestAnimationFrame(render);
|
|
}
|
|
|
|
(function() {
|
|
init();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |