UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 01:36:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[webgl] Added PMA & tint black test.

Browse Source
This commit is contained in:
badlogic 2017-09-25 14:21:48 +02:00
parent c1538b113b
commit 1b9762a54f
3 changed files with 99 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/export/runtimes.sh
View File

@ -216,6 +216,7 @@ cp -f ../raptor/export/raptor.png ../../spine-ts/webgl/example/assets/
cp -f ../spineboy/export/spineboy-ess.json ../../spine-ts/webgl/example/assets/ cp -f ../spineboy/export/spineboy-ess.json ../../spine-ts/webgl/example/assets/
cp -f ../spineboy/export/spineboy.atlas ../../spine-ts/webgl/example/assets/ cp -f ../spineboy/export/spineboy.atlas ../../spine-ts/webgl/example/assets/
cp -f ../spineboy/export/spineboy.png ../../spine-ts/webgl/example/assets/ cp -f ../spineboy/export/spineboy.png ../../spine-ts/webgl/example/assets/
cp -f ../spineboy/export/spineboy-pma.png ../../spine-ts/webgl/example/assets/
cp -f ../tank/export/tank-pro.json ../../spine-ts/webgl/example/assets/ cp -f ../tank/export/tank-pro.json ../../spine-ts/webgl/example/assets/
cp -f ../tank/export/tank.atlas ../../spine-ts/webgl/example/assets/ cp -f ../tank/export/tank.atlas ../../spine-ts/webgl/example/assets/

BIN
spine-ts/webgl/example/assets/spineboy-pma.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 567 KiB

98
spine-ts/webgl/example/test-pma-tintblack.html Normal file
View File

@ -0,0 +1,98 @@
<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 { width: 640px ;height: 640px; }
</style>
<body>
<canvas id="canvas" style="background: #ff00ff;"></canvas>
<div>
<div><label>Light: </label><input type="text" value="ffffffff" id="light"></div>
<div><label>Dark: </label><input type="text" value="000000" id="dark"></div>
<div><label>PMA blend:</label><input type="checkbox" id="pmaBlend"></div>
<div><label>PMA texture:</label><input type="checkbox" id="pmaTexture"></div>
<div><label>Ivan's shader:</label><input type="checkbox" id="ivan"></div>
</div>
</body>
<script>
$("#light").change(function() {
var light = $("#light").val();
var r = parseInt(light.substr(0,2),16) / 255;
var g = parseInt(light.substr(2,2),16) / 255;
var b = parseInt(light.substr(4,2),16) / 255;
var a = parseInt(light.substr(6,2),16) / 255;
for (var i = 0, j = 2; i < 4; i++, j+=12) {
vertices[j] = r;
vertices[j+1] = g;
vertices[j+2] = b;
vertices[j+3] = a;
}
})
$("#dark").change(function() {
var dark = $("#dark").val();
var r = parseInt(dark.substr(0,2),16) / 255;
var g = parseInt(dark.substr(2,2),16) / 255;
var b = parseInt(dark.substr(4,2),16) / 255;
for (var i = 0, j = 8; i < 4; i++, j+=12) {
vertices[j] = r;
vertices[j+1] = g;
vertices[j+2] = b;
}
})
var canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var context = new spine.webgl.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,
1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0,
-1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0];
var indices = [ 0, 1, 2, 2, 3, 0 ];
var shader = spine.webgl.Shader.newTwoColoredTextured(context);
var assetManager = new spine.webgl.AssetManager(context);
assetManager.loadTexture("assets/spineboy.png");
assetManager.loadTexture("assets/spineboy-pma.png");
var camMatrix = new spine.webgl.Matrix4();
var batcher = new spine.webgl.PolygonBatcher(context, true);
requestAnimationFrame(load);
function load () {
if (assetManager.isLoadingComplete()) {
texture = assetManager.get("assets/spineboy.png");
texturePma = assetManager.get("assets/spineboy-pma.png");
requestAnimationFrame(render);
} else requestAnimationFrame(load);
}
function render() {
gl.clearColor(1, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
shader.bind();
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values);
shader.setUniformi("u_texture", 0);
if (texture != null) {
batcher.setBlendMode($("#pmaBlend").prop("checked") ? context.gl.ONE : context.gl.SRC_ALPHA, context.gl.ONE_MINUS_SRC_ALPHA)
batcher.begin(shader);
batcher.draw($("#pmaTexture").prop("checked") ? texturePma : texture, vertices, indices);
batcher.end();
}
shader.unbind();
requestAnimationFrame(render);
}
</script>