UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][webgl][widget] Fixed SceneRenderer, immediate mode rendering methods didn't take into account two color tint shader

Browse Source
This commit is contained in:
badlogic 2017-04-07 15:50:22 +02:00
parent 58f7f17b37
commit 5af8185261
21 changed files with 772 additions and 412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spine-ts/build/spine-all.d.ts vendored
View File

@ -1399,6 +1399,7 @@ declare module spine.webgl {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
camera: OrthoCamera; camera: OrthoCamera;
batcher: PolygonBatcher; batcher: PolygonBatcher;
private twoColorTint;
private batcherShader; private batcherShader;
private shapes; private shapes;
private shapesShader; private shapesShader;

275
spine-ts/build/spine-all.js
View File

@ -6973,10 +6973,12 @@ var spine;
if (this.dirtyVertices || this.dirtyIndices) if (this.dirtyVertices || this.dirtyIndices)
this.update(); this.update();
this.bind(shader); this.bind(shader);
if (this.indicesLength > 0) if (this.indicesLength > 0) {
gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2); gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2);
else }
else {
gl.drawArrays(primitiveType, offset, count); gl.drawArrays(primitiveType, offset, count);
}
this.unbind(shader); this.unbind(shader);
}; };
Mesh.prototype.bind = function (shader) { Mesh.prototype.bind = function (shader) {
@ -7188,6 +7190,7 @@ var spine;
var SceneRenderer = (function () { var SceneRenderer = (function () {
function SceneRenderer(canvas, gl, twoColorTint) { function SceneRenderer(canvas, gl, twoColorTint) {
if (twoColorTint === void 0) { twoColorTint = true; } if (twoColorTint === void 0) { twoColorTint = true; }
this.twoColorTint = false;
this.activeRenderer = null; this.activeRenderer = null;
this.QUAD = [ this.QUAD = [
0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0,
@ -7199,6 +7202,7 @@ var spine;
this.WHITE = new spine.Color(1, 1, 1, 1); this.WHITE = new spine.Color(1, 1, 1, 1);
this.canvas = canvas; this.canvas = canvas;
this.gl = gl; this.gl = gl;
this.twoColorTint = twoColorTint;
this.camera = new webgl.OrthoCamera(canvas.width, canvas.height); this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
this.batcherShader = twoColorTint ? webgl.Shader.newTwoColoredTextured(gl) : webgl.Shader.newColoredTextured(gl); this.batcherShader = twoColorTint ? webgl.Shader.newTwoColoredTextured(gl) : webgl.Shader.newColoredTextured(gl);
this.batcher = new webgl.PolygonBatcher(gl, twoColorTint); this.batcher = new webgl.PolygonBatcher(gl, twoColorTint);
@ -7230,38 +7234,63 @@ var spine;
if (color === null) if (color === null)
color = this.WHITE; color = this.WHITE;
var quad = this.QUAD; var quad = this.QUAD;
quad[0] = x; var i = 0;
quad[1] = y; quad[i++] = x;
quad[2] = color.r; quad[i++] = y;
quad[3] = color.g; quad[i++] = color.r;
quad[4] = color.b; quad[i++] = color.g;
quad[5] = color.a; quad[i++] = color.b;
quad[6] = 0; quad[i++] = color.a;
quad[7] = 1; quad[i++] = 0;
quad[8] = x + width; quad[i++] = 1;
quad[9] = y; if (this.twoColorTint) {
quad[10] = color.r; quad[i++] = 0;
quad[11] = color.g; quad[i++] = 0;
quad[12] = color.b; quad[i++] = 0;
quad[13] = color.a; quad[i++] = 0;
quad[14] = 1; }
quad[15] = 1; quad[i++] = x + width;
quad[16] = x + width; quad[i++] = y;
quad[17] = y + height; quad[i++] = color.r;
quad[18] = color.r; quad[i++] = color.g;
quad[19] = color.g; quad[i++] = color.b;
quad[20] = color.b; quad[i++] = color.a;
quad[21] = color.a; quad[i++] = 1;
quad[22] = 1; quad[i++] = 1;
quad[23] = 0; if (this.twoColorTint) {
quad[24] = x; quad[i++] = 0;
quad[25] = y + height; quad[i++] = 0;
quad[26] = color.r; quad[i++] = 0;
quad[27] = color.g; quad[i++] = 0;
quad[28] = color.b; }
quad[29] = color.a; quad[i++] = x + width;
quad[30] = 0; quad[i++] = y + height;
quad[31] = 0; quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 1;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x;
quad[i++] = y + height;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 0;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
}; };
SceneRenderer.prototype.drawTextureRotated = function (texture, x, y, width, height, pivotX, pivotY, angle, color, premultipliedAlpha) { SceneRenderer.prototype.drawTextureRotated = function (texture, x, y, width, height, pivotX, pivotY, angle, color, premultipliedAlpha) {
@ -7323,38 +7352,63 @@ var spine;
y3 += worldOriginY; y3 += worldOriginY;
x4 += worldOriginX; x4 += worldOriginX;
y4 += worldOriginY; y4 += worldOriginY;
quad[0] = x1; var i = 0;
quad[1] = y1; quad[i++] = x1;
quad[2] = color.r; quad[i++] = y1;
quad[3] = color.g; quad[i++] = color.r;
quad[4] = color.b; quad[i++] = color.g;
quad[5] = color.a; quad[i++] = color.b;
quad[6] = 0; quad[i++] = color.a;
quad[7] = 1; quad[i++] = 0;
quad[8] = x2; quad[i++] = 1;
quad[9] = y2; if (this.twoColorTint) {
quad[10] = color.r; quad[i++] = 0;
quad[11] = color.g; quad[i++] = 0;
quad[12] = color.b; quad[i++] = 0;
quad[13] = color.a; quad[i++] = 0;
quad[14] = 1; }
quad[15] = 1; quad[i++] = x2;
quad[16] = x3; quad[i++] = y2;
quad[17] = y3; quad[i++] = color.r;
quad[18] = color.r; quad[i++] = color.g;
quad[19] = color.g; quad[i++] = color.b;
quad[20] = color.b; quad[i++] = color.a;
quad[21] = color.a; quad[i++] = 1;
quad[22] = 1; quad[i++] = 1;
quad[23] = 0; if (this.twoColorTint) {
quad[24] = x4; quad[i++] = 0;
quad[25] = y4; quad[i++] = 0;
quad[26] = color.r; quad[i++] = 0;
quad[27] = color.g; quad[i++] = 0;
quad[28] = color.b; }
quad[29] = color.a; quad[i++] = x3;
quad[30] = 0; quad[i++] = y3;
quad[31] = 0; quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 1;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x4;
quad[i++] = y4;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 0;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
}; };
SceneRenderer.prototype.drawRegion = function (region, x, y, width, height, color, premultipliedAlpha) { SceneRenderer.prototype.drawRegion = function (region, x, y, width, height, color, premultipliedAlpha) {
@ -7364,38 +7418,63 @@ var spine;
if (color === null) if (color === null)
color = this.WHITE; color = this.WHITE;
var quad = this.QUAD; var quad = this.QUAD;
quad[0] = x; var i = 0;
quad[1] = y; quad[i++] = x;
quad[2] = color.r; quad[i++] = y;
quad[3] = color.g; quad[i++] = color.r;
quad[4] = color.b; quad[i++] = color.g;
quad[5] = color.a; quad[i++] = color.b;
quad[6] = region.u; quad[i++] = color.a;
quad[7] = region.v2; quad[i++] = region.u;
quad[8] = x + width; quad[i++] = region.v2;
quad[9] = y; if (this.twoColorTint) {
quad[10] = color.r; quad[i++] = 0;
quad[11] = color.g; quad[i++] = 0;
quad[12] = color.b; quad[i++] = 0;
quad[13] = color.a; quad[i++] = 0;
quad[14] = region.u2; }
quad[15] = region.v2; quad[i++] = x + width;
quad[16] = x + width; quad[i++] = y;
quad[17] = y + height; quad[i++] = color.r;
quad[18] = color.r; quad[i++] = color.g;
quad[19] = color.g; quad[i++] = color.b;
quad[20] = color.b; quad[i++] = color.a;
quad[21] = color.a; quad[i++] = region.u2;
quad[22] = region.u2; quad[i++] = region.v2;
quad[23] = region.v; if (this.twoColorTint) {
quad[24] = x; quad[i++] = 0;
quad[25] = y + height; quad[i++] = 0;
quad[26] = color.r; quad[i++] = 0;
quad[27] = color.g; quad[i++] = 0;
quad[28] = color.b; }
quad[29] = color.a; quad[i++] = x + width;
quad[30] = region.u; quad[i++] = y + height;
quad[31] = region.v; quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = region.u2;
quad[i++] = region.v;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x;
quad[i++] = y + height;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = region.u;
quad[i++] = region.v;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
this.batcher.draw(region.texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(region.texture, quad, this.QUAD_TRIANGLES);
}; };
SceneRenderer.prototype.line = function (x, y, x2, y2, color, color2) { SceneRenderer.prototype.line = function (x, y, x2, y2, color, color2) {

2
spine-ts/build/spine-all.js.map
View File

File diff suppressed because one or more lines are too long

1
spine-ts/build/spine-webgl.d.ts vendored
View File

@ -1320,6 +1320,7 @@ declare module spine.webgl {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
camera: OrthoCamera; camera: OrthoCamera;
batcher: PolygonBatcher; batcher: PolygonBatcher;
private twoColorTint;
private batcherShader; private batcherShader;
private shapes; private shapes;
private shapesShader; private shapesShader;

275
spine-ts/build/spine-webgl.js
View File

@ -6435,10 +6435,12 @@ var spine;
if (this.dirtyVertices || this.dirtyIndices) if (this.dirtyVertices || this.dirtyIndices)
this.update(); this.update();
this.bind(shader); this.bind(shader);
if (this.indicesLength > 0) if (this.indicesLength > 0) {
gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2); gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2);
else }
else {
gl.drawArrays(primitiveType, offset, count); gl.drawArrays(primitiveType, offset, count);
}
this.unbind(shader); this.unbind(shader);
}; };
Mesh.prototype.bind = function (shader) { Mesh.prototype.bind = function (shader) {
@ -6650,6 +6652,7 @@ var spine;
var SceneRenderer = (function () { var SceneRenderer = (function () {
function SceneRenderer(canvas, gl, twoColorTint) { function SceneRenderer(canvas, gl, twoColorTint) {
if (twoColorTint === void 0) { twoColorTint = true; } if (twoColorTint === void 0) { twoColorTint = true; }
this.twoColorTint = false;
this.activeRenderer = null; this.activeRenderer = null;
this.QUAD = [ this.QUAD = [
0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0,
@ -6661,6 +6664,7 @@ var spine;
this.WHITE = new spine.Color(1, 1, 1, 1); this.WHITE = new spine.Color(1, 1, 1, 1);
this.canvas = canvas; this.canvas = canvas;
this.gl = gl; this.gl = gl;
this.twoColorTint = twoColorTint;
this.camera = new webgl.OrthoCamera(canvas.width, canvas.height); this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
this.batcherShader = twoColorTint ? webgl.Shader.newTwoColoredTextured(gl) : webgl.Shader.newColoredTextured(gl); this.batcherShader = twoColorTint ? webgl.Shader.newTwoColoredTextured(gl) : webgl.Shader.newColoredTextured(gl);
this.batcher = new webgl.PolygonBatcher(gl, twoColorTint); this.batcher = new webgl.PolygonBatcher(gl, twoColorTint);
@ -6692,38 +6696,63 @@ var spine;
if (color === null) if (color === null)
color = this.WHITE; color = this.WHITE;
var quad = this.QUAD; var quad = this.QUAD;
quad[0] = x; var i = 0;
quad[1] = y; quad[i++] = x;
quad[2] = color.r; quad[i++] = y;
quad[3] = color.g; quad[i++] = color.r;
quad[4] = color.b; quad[i++] = color.g;
quad[5] = color.a; quad[i++] = color.b;
quad[6] = 0; quad[i++] = color.a;
quad[7] = 1; quad[i++] = 0;
quad[8] = x + width; quad[i++] = 1;
quad[9] = y; if (this.twoColorTint) {
quad[10] = color.r; quad[i++] = 0;
quad[11] = color.g; quad[i++] = 0;
quad[12] = color.b; quad[i++] = 0;
quad[13] = color.a; quad[i++] = 0;
quad[14] = 1; }
quad[15] = 1; quad[i++] = x + width;
quad[16] = x + width; quad[i++] = y;
quad[17] = y + height; quad[i++] = color.r;
quad[18] = color.r; quad[i++] = color.g;
quad[19] = color.g; quad[i++] = color.b;
quad[20] = color.b; quad[i++] = color.a;
quad[21] = color.a; quad[i++] = 1;
quad[22] = 1; quad[i++] = 1;
quad[23] = 0; if (this.twoColorTint) {
quad[24] = x; quad[i++] = 0;
quad[25] = y + height; quad[i++] = 0;
quad[26] = color.r; quad[i++] = 0;
quad[27] = color.g; quad[i++] = 0;
quad[28] = color.b; }
quad[29] = color.a; quad[i++] = x + width;
quad[30] = 0; quad[i++] = y + height;
quad[31] = 0; quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 1;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x;
quad[i++] = y + height;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 0;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
}; };
SceneRenderer.prototype.drawTextureRotated = function (texture, x, y, width, height, pivotX, pivotY, angle, color, premultipliedAlpha) { SceneRenderer.prototype.drawTextureRotated = function (texture, x, y, width, height, pivotX, pivotY, angle, color, premultipliedAlpha) {
@ -6785,38 +6814,63 @@ var spine;
y3 += worldOriginY; y3 += worldOriginY;
x4 += worldOriginX; x4 += worldOriginX;
y4 += worldOriginY; y4 += worldOriginY;
quad[0] = x1; var i = 0;
quad[1] = y1; quad[i++] = x1;
quad[2] = color.r; quad[i++] = y1;
quad[3] = color.g; quad[i++] = color.r;
quad[4] = color.b; quad[i++] = color.g;
quad[5] = color.a; quad[i++] = color.b;
quad[6] = 0; quad[i++] = color.a;
quad[7] = 1; quad[i++] = 0;
quad[8] = x2; quad[i++] = 1;
quad[9] = y2; if (this.twoColorTint) {
quad[10] = color.r; quad[i++] = 0;
quad[11] = color.g; quad[i++] = 0;
quad[12] = color.b; quad[i++] = 0;
quad[13] = color.a; quad[i++] = 0;
quad[14] = 1; }
quad[15] = 1; quad[i++] = x2;
quad[16] = x3; quad[i++] = y2;
quad[17] = y3; quad[i++] = color.r;
quad[18] = color.r; quad[i++] = color.g;
quad[19] = color.g; quad[i++] = color.b;
quad[20] = color.b; quad[i++] = color.a;
quad[21] = color.a; quad[i++] = 1;
quad[22] = 1; quad[i++] = 1;
quad[23] = 0; if (this.twoColorTint) {
quad[24] = x4; quad[i++] = 0;
quad[25] = y4; quad[i++] = 0;
quad[26] = color.r; quad[i++] = 0;
quad[27] = color.g; quad[i++] = 0;
quad[28] = color.b; }
quad[29] = color.a; quad[i++] = x3;
quad[30] = 0; quad[i++] = y3;
quad[31] = 0; quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 1;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x4;
quad[i++] = y4;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 0;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
}; };
SceneRenderer.prototype.drawRegion = function (region, x, y, width, height, color, premultipliedAlpha) { SceneRenderer.prototype.drawRegion = function (region, x, y, width, height, color, premultipliedAlpha) {
@ -6826,38 +6880,63 @@ var spine;
if (color === null) if (color === null)
color = this.WHITE; color = this.WHITE;
var quad = this.QUAD; var quad = this.QUAD;
quad[0] = x; var i = 0;
quad[1] = y; quad[i++] = x;
quad[2] = color.r; quad[i++] = y;
quad[3] = color.g; quad[i++] = color.r;
quad[4] = color.b; quad[i++] = color.g;
quad[5] = color.a; quad[i++] = color.b;
quad[6] = region.u; quad[i++] = color.a;
quad[7] = region.v2; quad[i++] = region.u;
quad[8] = x + width; quad[i++] = region.v2;
quad[9] = y; if (this.twoColorTint) {
quad[10] = color.r; quad[i++] = 0;
quad[11] = color.g; quad[i++] = 0;
quad[12] = color.b; quad[i++] = 0;
quad[13] = color.a; quad[i++] = 0;
quad[14] = region.u2; }
quad[15] = region.v2; quad[i++] = x + width;
quad[16] = x + width; quad[i++] = y;
quad[17] = y + height; quad[i++] = color.r;
quad[18] = color.r; quad[i++] = color.g;
quad[19] = color.g; quad[i++] = color.b;
quad[20] = color.b; quad[i++] = color.a;
quad[21] = color.a; quad[i++] = region.u2;
quad[22] = region.u2; quad[i++] = region.v2;
quad[23] = region.v; if (this.twoColorTint) {
quad[24] = x; quad[i++] = 0;
quad[25] = y + height; quad[i++] = 0;
quad[26] = color.r; quad[i++] = 0;
quad[27] = color.g; quad[i++] = 0;
quad[28] = color.b; }
quad[29] = color.a; quad[i++] = x + width;
quad[30] = region.u; quad[i++] = y + height;
quad[31] = region.v; quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = region.u2;
quad[i++] = region.v;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x;
quad[i++] = y + height;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = region.u;
quad[i++] = region.v;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
this.batcher.draw(region.texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(region.texture, quad, this.QUAD_TRIANGLES);
}; };
SceneRenderer.prototype.line = function (x, y, x2, y2, color, color2) { SceneRenderer.prototype.line = function (x, y, x2, y2, color, color2) {

2
spine-ts/build/spine-webgl.js.map
View File

File diff suppressed because one or more lines are too long

1
spine-ts/build/spine-widget.d.ts vendored
View File

@ -1320,6 +1320,7 @@ declare module spine.webgl {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
camera: OrthoCamera; camera: OrthoCamera;
batcher: PolygonBatcher; batcher: PolygonBatcher;
private twoColorTint;
private batcherShader; private batcherShader;
private shapes; private shapes;
private shapesShader; private shapesShader;

275
spine-ts/build/spine-widget.js
View File

@ -6435,10 +6435,12 @@ var spine;
if (this.dirtyVertices || this.dirtyIndices) if (this.dirtyVertices || this.dirtyIndices)
this.update(); this.update();
this.bind(shader); this.bind(shader);
if (this.indicesLength > 0) if (this.indicesLength > 0) {
gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2); gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2);
else }
else {
gl.drawArrays(primitiveType, offset, count); gl.drawArrays(primitiveType, offset, count);
}
this.unbind(shader); this.unbind(shader);
}; };
Mesh.prototype.bind = function (shader) { Mesh.prototype.bind = function (shader) {
@ -6650,6 +6652,7 @@ var spine;
var SceneRenderer = (function () { var SceneRenderer = (function () {
function SceneRenderer(canvas, gl, twoColorTint) { function SceneRenderer(canvas, gl, twoColorTint) {
if (twoColorTint === void 0) { twoColorTint = true; } if (twoColorTint === void 0) { twoColorTint = true; }
this.twoColorTint = false;
this.activeRenderer = null; this.activeRenderer = null;
this.QUAD = [ this.QUAD = [
0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0,
@ -6661,6 +6664,7 @@ var spine;
this.WHITE = new spine.Color(1, 1, 1, 1); this.WHITE = new spine.Color(1, 1, 1, 1);
this.canvas = canvas; this.canvas = canvas;
this.gl = gl; this.gl = gl;
this.twoColorTint = twoColorTint;
this.camera = new webgl.OrthoCamera(canvas.width, canvas.height); this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
this.batcherShader = twoColorTint ? webgl.Shader.newTwoColoredTextured(gl) : webgl.Shader.newColoredTextured(gl); this.batcherShader = twoColorTint ? webgl.Shader.newTwoColoredTextured(gl) : webgl.Shader.newColoredTextured(gl);
this.batcher = new webgl.PolygonBatcher(gl, twoColorTint); this.batcher = new webgl.PolygonBatcher(gl, twoColorTint);
@ -6692,38 +6696,63 @@ var spine;
if (color === null) if (color === null)
color = this.WHITE; color = this.WHITE;
var quad = this.QUAD; var quad = this.QUAD;
quad[0] = x; var i = 0;
quad[1] = y; quad[i++] = x;
quad[2] = color.r; quad[i++] = y;
quad[3] = color.g; quad[i++] = color.r;
quad[4] = color.b; quad[i++] = color.g;
quad[5] = color.a; quad[i++] = color.b;
quad[6] = 0; quad[i++] = color.a;
quad[7] = 1; quad[i++] = 0;
quad[8] = x + width; quad[i++] = 1;
quad[9] = y; if (this.twoColorTint) {
quad[10] = color.r; quad[i++] = 0;
quad[11] = color.g; quad[i++] = 0;
quad[12] = color.b; quad[i++] = 0;
quad[13] = color.a; quad[i++] = 0;
quad[14] = 1; }
quad[15] = 1; quad[i++] = x + width;
quad[16] = x + width; quad[i++] = y;
quad[17] = y + height; quad[i++] = color.r;
quad[18] = color.r; quad[i++] = color.g;
quad[19] = color.g; quad[i++] = color.b;
quad[20] = color.b; quad[i++] = color.a;
quad[21] = color.a; quad[i++] = 1;
quad[22] = 1; quad[i++] = 1;
quad[23] = 0; if (this.twoColorTint) {
quad[24] = x; quad[i++] = 0;
quad[25] = y + height; quad[i++] = 0;
quad[26] = color.r; quad[i++] = 0;
quad[27] = color.g; quad[i++] = 0;
quad[28] = color.b; }
quad[29] = color.a; quad[i++] = x + width;
quad[30] = 0; quad[i++] = y + height;
quad[31] = 0; quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 1;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x;
quad[i++] = y + height;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 0;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
}; };
SceneRenderer.prototype.drawTextureRotated = function (texture, x, y, width, height, pivotX, pivotY, angle, color, premultipliedAlpha) { SceneRenderer.prototype.drawTextureRotated = function (texture, x, y, width, height, pivotX, pivotY, angle, color, premultipliedAlpha) {
@ -6785,38 +6814,63 @@ var spine;
y3 += worldOriginY; y3 += worldOriginY;
x4 += worldOriginX; x4 += worldOriginX;
y4 += worldOriginY; y4 += worldOriginY;
quad[0] = x1; var i = 0;
quad[1] = y1; quad[i++] = x1;
quad[2] = color.r; quad[i++] = y1;
quad[3] = color.g; quad[i++] = color.r;
quad[4] = color.b; quad[i++] = color.g;
quad[5] = color.a; quad[i++] = color.b;
quad[6] = 0; quad[i++] = color.a;
quad[7] = 1; quad[i++] = 0;
quad[8] = x2; quad[i++] = 1;
quad[9] = y2; if (this.twoColorTint) {
quad[10] = color.r; quad[i++] = 0;
quad[11] = color.g; quad[i++] = 0;
quad[12] = color.b; quad[i++] = 0;
quad[13] = color.a; quad[i++] = 0;
quad[14] = 1; }
quad[15] = 1; quad[i++] = x2;
quad[16] = x3; quad[i++] = y2;
quad[17] = y3; quad[i++] = color.r;
quad[18] = color.r; quad[i++] = color.g;
quad[19] = color.g; quad[i++] = color.b;
quad[20] = color.b; quad[i++] = color.a;
quad[21] = color.a; quad[i++] = 1;
quad[22] = 1; quad[i++] = 1;
quad[23] = 0; if (this.twoColorTint) {
quad[24] = x4; quad[i++] = 0;
quad[25] = y4; quad[i++] = 0;
quad[26] = color.r; quad[i++] = 0;
quad[27] = color.g; quad[i++] = 0;
quad[28] = color.b; }
quad[29] = color.a; quad[i++] = x3;
quad[30] = 0; quad[i++] = y3;
quad[31] = 0; quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 1;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x4;
quad[i++] = y4;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 0;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
}; };
SceneRenderer.prototype.drawRegion = function (region, x, y, width, height, color, premultipliedAlpha) { SceneRenderer.prototype.drawRegion = function (region, x, y, width, height, color, premultipliedAlpha) {
@ -6826,38 +6880,63 @@ var spine;
if (color === null) if (color === null)
color = this.WHITE; color = this.WHITE;
var quad = this.QUAD; var quad = this.QUAD;
quad[0] = x; var i = 0;
quad[1] = y; quad[i++] = x;
quad[2] = color.r; quad[i++] = y;
quad[3] = color.g; quad[i++] = color.r;
quad[4] = color.b; quad[i++] = color.g;
quad[5] = color.a; quad[i++] = color.b;
quad[6] = region.u; quad[i++] = color.a;
quad[7] = region.v2; quad[i++] = region.u;
quad[8] = x + width; quad[i++] = region.v2;
quad[9] = y; if (this.twoColorTint) {
quad[10] = color.r; quad[i++] = 0;
quad[11] = color.g; quad[i++] = 0;
quad[12] = color.b; quad[i++] = 0;
quad[13] = color.a; quad[i++] = 0;
quad[14] = region.u2; }
quad[15] = region.v2; quad[i++] = x + width;
quad[16] = x + width; quad[i++] = y;
quad[17] = y + height; quad[i++] = color.r;
quad[18] = color.r; quad[i++] = color.g;
quad[19] = color.g; quad[i++] = color.b;
quad[20] = color.b; quad[i++] = color.a;
quad[21] = color.a; quad[i++] = region.u2;
quad[22] = region.u2; quad[i++] = region.v2;
quad[23] = region.v; if (this.twoColorTint) {
quad[24] = x; quad[i++] = 0;
quad[25] = y + height; quad[i++] = 0;
quad[26] = color.r; quad[i++] = 0;
quad[27] = color.g; quad[i++] = 0;
quad[28] = color.b; }
quad[29] = color.a; quad[i++] = x + width;
quad[30] = region.u; quad[i++] = y + height;
quad[31] = region.v; quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = region.u2;
quad[i++] = region.v;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x;
quad[i++] = y + height;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = region.u;
quad[i++] = region.v;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
this.batcher.draw(region.texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(region.texture, quad, this.QUAD_TRIANGLES);
}; };
SceneRenderer.prototype.line = function (x, y, x2, y2, color, color2) { SceneRenderer.prototype.line = function (x, y, x2, y2, color, color2) {

2
spine-ts/build/spine-widget.js.map
View File

File diff suppressed because one or more lines are too long

4
spine-ts/webgl/demos/hoverboard.js
View File

@ -21,6 +21,10 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
canvas = document.getElementById("hoverboard-canvas"); canvas = document.getElementById("hoverboard-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager; assetManager = spineDemos.assetManager;

4
spine-ts/webgl/demos/imagechanges.js
View File

@ -16,6 +16,10 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
canvas = document.getElementById("imagechanges-canvas"); canvas = document.getElementById("imagechanges-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager; assetManager = spineDemos.assetManager;

4
spine-ts/webgl/demos/meshes.js
View File

@ -14,6 +14,10 @@ var meshesDemo = function(loadingComplete, bgColor) {
canvas = document.getElementById("meshes-canvas"); canvas = document.getElementById("meshes-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer.skeletonDebugRenderer.drawRegionAttachments = false; renderer.skeletonDebugRenderer.drawRegionAttachments = false;

4
spine-ts/webgl/demos/skins.js
View File

@ -13,6 +13,10 @@ var skinsDemo = function(loadingComplete, bgColor) {
canvas = document.getElementById("skins-canvas"); canvas = document.getElementById("skins-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager; assetManager = spineDemos.assetManager;

4
spine-ts/webgl/demos/spritesheets.js
View File

@ -19,6 +19,10 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
canvas = document.getElementById("spritesheets-canvas"); canvas = document.getElementById("spritesheets-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager; assetManager = spineDemos.assetManager;

4
spine-ts/webgl/demos/stretchyman.js
View File

@ -29,6 +29,10 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
canvas = document.getElementById("stretchyman-canvas"); canvas = document.getElementById("stretchyman-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager; assetManager = spineDemos.assetManager;

38
spine-ts/webgl/demos/tank.js
View File

@ -1,6 +1,6 @@
var tankDemo = function(loadingComplete, bgColor) { var tankDemo = function(loadingComplete, bgColor) {
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds; var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen;
var playButton, timeLine, isPlaying = true, playTime = 0; var playButton, timeLine, isPlaying = true, playTime = 0;
@ -11,15 +11,19 @@ var tankDemo = function(loadingComplete, bgColor) {
function init () { function init () {
canvas = document.getElementById("tank-canvas"); canvas = document.getElementById("tank-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager; assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); }; var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png"); assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas"); assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer); loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load); requestAnimationFrame(load);
} }
@ -28,7 +32,7 @@ var tankDemo = function(loadingComplete, bgColor) {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) { if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path); return assetManager.get(DEMO_NAME, path);
}); });
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -59,7 +63,7 @@ var tankDemo = function(loadingComplete, bgColor) {
function setupUI() { function setupUI() {
playButton = $("#tank-playbutton"); playButton = $("#tank-playbutton");
var playButtonUpdate = function () { var playButtonUpdate = function () {
isPlaying = !isPlaying; isPlaying = !isPlaying;
if (isPlaying) if (isPlaying)
playButton.addClass("pause").removeClass("play"); playButton.addClass("pause").removeClass("play");
@ -86,8 +90,8 @@ var tankDemo = function(loadingComplete, bgColor) {
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
$("#tank-drawbones").change(function() { $("#tank-drawbones").change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked; renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked; renderer.skeletonDebugRenderer.drawBones = this.checked;
}); });
} }
function render () { function render () {
@ -96,15 +100,15 @@ var tankDemo = function(loadingComplete, bgColor) {
if (isPlaying) { if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration; var animationDuration = state.getCurrent(0).animation.duration;
playTime += delta; playTime += delta;
while (playTime >= animationDuration) while (playTime >= animationDuration)
playTime -= animationDuration; playTime -= animationDuration;
timeLine.set(playTime / animationDuration); timeLine.set(playTime / animationDuration);
state.update(delta); state.update(delta);
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
} }
offset.x = skeleton.findBone("tankRoot").worldX; offset.x = skeleton.findBone("tankRoot").worldX;
offset.y = skeleton.findBone("tankRoot").worldY; offset.y = skeleton.findBone("tankRoot").worldY;
@ -116,11 +120,11 @@ var tankDemo = function(loadingComplete, bgColor) {
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin(); renderer.begin();
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, true); renderer.drawSkeletonDebug(skeleton, true);
renderer.end(); renderer.end();
loadingScreen.draw(true); loadingScreen.draw(true);

4
spine-ts/webgl/demos/transforms.js
View File

@ -23,6 +23,10 @@ var transformsDemo = function(loadingComplete, bgColor) {
canvas = document.getElementById("transforms-canvas"); canvas = document.getElementById("transforms-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager; assetManager = spineDemos.assetManager;

4
spine-ts/webgl/demos/transitions.js
View File

@ -18,6 +18,10 @@ var transitionsDemo = function(loadingComplete, bgColor) {
canvas = document.getElementById("transitions-canvas"); canvas = document.getElementById("transitions-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager; assetManager = spineDemos.assetManager;

4
spine-ts/webgl/demos/vine.js
View File

@ -21,6 +21,10 @@ var vineDemo = function(loadingComplete, bgColor) {
canvas = document.getElementById("vine-canvas"); canvas = document.getElementById("vine-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
if (!gl) {
alert('WebGL is unavailable.');
return;
}
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.webgl.SceneRenderer(canvas, gl);
input = new spine.webgl.Input(canvas); input = new spine.webgl.Input(canvas);

7
spine-ts/webgl/src/Mesh.ts
View File

@ -100,8 +100,11 @@ module spine.webgl {
let gl = this.gl; let gl = this.gl;
if (this.dirtyVertices || this.dirtyIndices) this.update(); if (this.dirtyVertices || this.dirtyIndices) this.update();
this.bind(shader); this.bind(shader);
if (this.indicesLength > 0) gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2); if (this.indicesLength > 0) {
else gl.drawArrays(primitiveType, offset, count); gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2);
} else {
gl.drawArrays(primitiveType, offset, count);
}
this.unbind(shader); this.unbind(shader);
} }

269
spine-ts/webgl/src/SceneRenderer.ts
View File

@ -34,6 +34,7 @@ module spine.webgl {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
camera: OrthoCamera; camera: OrthoCamera;
batcher: PolygonBatcher; batcher: PolygonBatcher;
private twoColorTint = false;
private batcherShader: Shader; private batcherShader: Shader;
private shapes: ShapeRenderer; private shapes: ShapeRenderer;
private shapesShader: Shader; private shapesShader: Shader;
@ -52,6 +53,7 @@ module spine.webgl {
constructor (canvas: HTMLCanvasElement, gl: WebGLRenderingContext, twoColorTint: boolean = true) { constructor (canvas: HTMLCanvasElement, gl: WebGLRenderingContext, twoColorTint: boolean = true) {
this.canvas = canvas; this.canvas = canvas;
this.gl = gl; this.gl = gl;
this.twoColorTint = twoColorTint;
this.camera = new OrthoCamera(canvas.width, canvas.height); this.camera = new OrthoCamera(canvas.width, canvas.height);
this.batcherShader = twoColorTint ? Shader.newTwoColoredTextured(gl) : Shader.newColoredTextured(gl); this.batcherShader = twoColorTint ? Shader.newTwoColoredTextured(gl) : Shader.newColoredTextured(gl);
this.batcher = new PolygonBatcher(gl, twoColorTint); this.batcher = new PolygonBatcher(gl, twoColorTint);
@ -82,38 +84,63 @@ module spine.webgl {
this.enableRenderer(this.batcher); this.enableRenderer(this.batcher);
if (color === null) color = this.WHITE; if (color === null) color = this.WHITE;
let quad = this.QUAD; let quad = this.QUAD;
quad[0] = x; var i = 0;
quad[1] = y; quad[i++] = x;
quad[2] = color.r; quad[i++] = y;
quad[3] = color.g; quad[i++] = color.r;
quad[4] = color.b; quad[i++] = color.g;
quad[5] = color.a; quad[i++] = color.b;
quad[6] = 0; quad[i++] = color.a;
quad[7] = 1; quad[i++] = 0;
quad[8] = x + width; quad[i++] = 1;
quad[9] = y; if (this.twoColorTint) {
quad[10] = color.r; quad[i++] = 0;
quad[11] = color.g; quad[i++] = 0;
quad[12] = color.b; quad[i++] = 0;
quad[13] = color.a; quad[i++] = 0;
quad[14] = 1; }
quad[15] = 1; quad[i++] = x + width;
quad[16] = x + width; quad[i++] = y;
quad[17] = y + height; quad[i++] = color.r;
quad[18] = color.r; quad[i++] = color.g;
quad[19] = color.g; quad[i++] = color.b;
quad[20] = color.b; quad[i++] = color.a;
quad[21] = color.a; quad[i++] = 1;
quad[22] = 1; quad[i++] = 1;
quad[23] = 0; if (this.twoColorTint) {
quad[24] = x; quad[i++] = 0;
quad[25] = y + height; quad[i++] = 0;
quad[26] = color.r; quad[i++] = 0;
quad[27] = color.g; quad[i++] = 0;
quad[28] = color.b; }
quad[29] = color.a; quad[i++] = x + width;
quad[30] = 0; quad[i++] = y + height;
quad[31] = 0; quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 1;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x;
quad[i++] = y + height;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 0;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
} }
@ -188,38 +215,63 @@ module spine.webgl {
x4 += worldOriginX; x4 += worldOriginX;
y4 += worldOriginY; y4 += worldOriginY;
quad[0] = x1; var i = 0;
quad[1] = y1; quad[i++] = x1;
quad[2] = color.r; quad[i++] = y1;
quad[3] = color.g; quad[i++] = color.r;
quad[4] = color.b; quad[i++] = color.g;
quad[5] = color.a; quad[i++] = color.b;
quad[6] = 0; quad[i++] = color.a;
quad[7] = 1; quad[i++] = 0;
quad[8] = x2; quad[i++] = 1;
quad[9] = y2; if (this.twoColorTint) {
quad[10] = color.r; quad[i++] = 0;
quad[11] = color.g; quad[i++] = 0;
quad[12] = color.b; quad[i++] = 0;
quad[13] = color.a; quad[i++] = 0;
quad[14] = 1; }
quad[15] = 1; quad[i++] = x2;
quad[16] = x3; quad[i++] = y2;
quad[17] = y3; quad[i++] = color.r;
quad[18] = color.r; quad[i++] = color.g;
quad[19] = color.g; quad[i++] = color.b;
quad[20] = color.b; quad[i++] = color.a;
quad[21] = color.a; quad[i++] = 1;
quad[22] = 1; quad[i++] = 1;
quad[23] = 0; if (this.twoColorTint) {
quad[24] = x4; quad[i++] = 0;
quad[25] = y4; quad[i++] = 0;
quad[26] = color.r; quad[i++] = 0;
quad[27] = color.g; quad[i++] = 0;
quad[28] = color.b; }
quad[29] = color.a; quad[i++] = x3;
quad[30] = 0; quad[i++] = y3;
quad[31] = 0; quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 1;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x4;
quad[i++] = y4;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 0;
quad[i++] = 0;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
} }
@ -227,38 +279,63 @@ module spine.webgl {
this.enableRenderer(this.batcher); this.enableRenderer(this.batcher);
if (color === null) color = this.WHITE; if (color === null) color = this.WHITE;
let quad = this.QUAD; let quad = this.QUAD;
quad[0] = x; var i = 0;
quad[1] = y; quad[i++] = x;
quad[2] = color.r; quad[i++] = y;
quad[3] = color.g; quad[i++] = color.r;
quad[4] = color.b; quad[i++] = color.g;
quad[5] = color.a; quad[i++] = color.b;
quad[6] = region.u; quad[i++] = color.a;
quad[7] = region.v2; quad[i++] = region.u;
quad[8] = x + width; quad[i++] = region.v2;
quad[9] = y; if (this.twoColorTint) {
quad[10] = color.r; quad[i++] = 0;
quad[11] = color.g; quad[i++] = 0;
quad[12] = color.b; quad[i++] = 0;
quad[13] = color.a; quad[i++] = 0;
quad[14] = region.u2; }
quad[15] = region.v2; quad[i++] = x + width;
quad[16] = x + width; quad[i++] = y;
quad[17] = y + height; quad[i++] = color.r;
quad[18] = color.r; quad[i++] = color.g;
quad[19] = color.g; quad[i++] = color.b;
quad[20] = color.b; quad[i++] = color.a;
quad[21] = color.a; quad[i++] = region.u2;
quad[22] = region.u2; quad[i++] = region.v2;
quad[23] = region.v; if (this.twoColorTint) {
quad[24] = x; quad[i++] = 0;
quad[25] = y + height; quad[i++] = 0;
quad[26] = color.r; quad[i++] = 0;
quad[27] = color.g; quad[i++] = 0;
quad[28] = color.b; }
quad[29] = color.a; quad[i++] = x + width;
quad[30] = region.u; quad[i++] = y + height;
quad[31] = region.v; quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = region.u2;
quad[i++] = region.v;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x;
quad[i++] = y + height;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = region.u;
quad[i++] = region.v;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
this.batcher.draw(<GLTexture>region.texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(<GLTexture>region.texture, quad, this.QUAD_TRIANGLES);
} }