mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 14:24:53 +08:00
de6cee955b
Previously, we'd export to global objects called spine.canvas, spine.webgl, spine.threejs. Going forward, all Spine APIs will be hosted by the global spine object when the runtime is used straight from the bundled .js files in the build/ folder. This is a minor change with a simple fix on the user side, i.e. replace spine.canvas. with spine.
83 lines
2.1 KiB
HTML
83 lines
2.1 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>
|
|
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
|
|
<canvas id="canvas" style="background: #ff00ff;"></canvas>
|
|
</body>
|
|
<script>
|
|
var canvas = document.getElementById("canvas");
|
|
canvas.width = canvas.clientWidth;
|
|
canvas.height = canvas.clientHeight;
|
|
var context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
|
|
var gl = context.gl;
|
|
|
|
var vertices = [-1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
|
|
1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
|
|
0, 1, 1, 1, 1, 1, 0.5, 1, 0, 0, 0, 0];
|
|
var indices = [0, 1, 2];
|
|
var mesh = new spine.Mesh(context,
|
|
[new spine.Position2Attribute(), new spine.ColorAttribute(), new spine.TexCoordAttribute()],
|
|
10920, 10920 * 3);
|
|
mesh.setVertices(vertices);
|
|
mesh.setIndices(indices);
|
|
|
|
var shader = spine.Shader.newTwoColoredTextured(context);
|
|
|
|
var assetManager = new spine.AssetManager(context);
|
|
assetManager.loadTexture("../example/assets/spineboy.png");
|
|
|
|
var camMatrix = new spine.Matrix4();
|
|
|
|
var batcher = new spine.PolygonBatcher(context, true);
|
|
|
|
requestAnimationFrame(load);
|
|
|
|
function load() {
|
|
if (assetManager.isLoadingComplete()) {
|
|
texture = assetManager.get("../example/assets/spineboy.png");
|
|
requestAnimationFrame(render);
|
|
} else requestAnimationFrame(load);
|
|
}
|
|
|
|
function render() {
|
|
gl.clearColor(1, 0, 0, 1);
|
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
|
|
shader.bind();
|
|
shader.setUniform4x4f(spine.Shader.MVP_MATRIX, camMatrix.values);
|
|
shader.setUniformi("u_texture", 0);
|
|
if (texture != null) {
|
|
/*gl.enable(gl.BLEND);
|
|
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
|
mesh.setVertices(vertices);
|
|
mesh.setIndices(indices);
|
|
mesh.draw(shader, gl.TRIANGLES);*/
|
|
|
|
batcher.begin(shader);
|
|
batcher.draw(texture, vertices, indices);
|
|
batcher.end();
|
|
}
|
|
shader.unbind();
|
|
|
|
requestAnimationFrame(render);
|
|
}
|
|
</script> |