UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 07:14:55 +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;
camera: OrthoCamera;
batcher: PolygonBatcher;
private twoColorTint;
private batcherShader;
private shapes;
private shapesShader;

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

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

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

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

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

@ -6435,10 +6435,12 @@ var spine;
if (this.dirtyVertices || this.dirtyIndices)
this.update();
this.bind(shader);
if (this.indicesLength > 0)
if (this.indicesLength > 0) {
gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2);
else
}
else {
gl.drawArrays(primitiveType, offset, count);
}
this.unbind(shader);
};
Mesh.prototype.bind = function (shader) {
@ -6650,6 +6652,7 @@ var spine;
var SceneRenderer = (function () {
function SceneRenderer(canvas, gl, twoColorTint) {
if (twoColorTint === void 0) { twoColorTint = true; }
this.twoColorTint = false;
this.activeRenderer = null;
this.QUAD = [
0, 0, 1, 1, 1, 1, 0, 0,
@ -6661,6 +6664,7 @@ var spine;
this.WHITE = new spine.Color(1, 1, 1, 1);
this.canvas = canvas;
this.gl = gl;
this.twoColorTint = twoColorTint;
this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
this.batcherShader = twoColorTint ? webgl.Shader.newTwoColoredTextured(gl) : webgl.Shader.newColoredTextured(gl);
this.batcher = new webgl.PolygonBatcher(gl, twoColorTint);
@ -6692,38 +6696,63 @@ var spine;
if (color === null)
color = this.WHITE;
var quad = this.QUAD;
quad[0] = x;
quad[1] = y;
quad[2] = color.r;
quad[3] = color.g;
quad[4] = color.b;
quad[5] = color.a;
quad[6] = 0;
quad[7] = 1;
quad[8] = x + width;
quad[9] = y;
quad[10] = color.r;
quad[11] = color.g;
quad[12] = color.b;
quad[13] = color.a;
quad[14] = 1;
quad[15] = 1;
quad[16] = x + width;
quad[17] = y + height;
quad[18] = color.r;
quad[19] = color.g;
quad[20] = color.b;
quad[21] = color.a;
quad[22] = 1;
quad[23] = 0;
quad[24] = x;
quad[25] = y + height;
quad[26] = color.r;
quad[27] = color.g;
quad[28] = color.b;
quad[29] = color.a;
quad[30] = 0;
quad[31] = 0;
var i = 0;
quad[i++] = x;
quad[i++] = y;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 0;
quad[i++] = 1;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x + width;
quad[i++] = y;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 1;
quad[i++] = 1;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x + width;
quad[i++] = y + height;
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);
};
SceneRenderer.prototype.drawTextureRotated = function (texture, x, y, width, height, pivotX, pivotY, angle, color, premultipliedAlpha) {
@ -6785,38 +6814,63 @@ var spine;
y3 += worldOriginY;
x4 += worldOriginX;
y4 += worldOriginY;
quad[0] = x1;
quad[1] = y1;
quad[2] = color.r;
quad[3] = color.g;
quad[4] = color.b;
quad[5] = color.a;
quad[6] = 0;
quad[7] = 1;
quad[8] = x2;
quad[9] = y2;
quad[10] = color.r;
quad[11] = color.g;
quad[12] = color.b;
quad[13] = color.a;
quad[14] = 1;
quad[15] = 1;
quad[16] = x3;
quad[17] = y3;
quad[18] = color.r;
quad[19] = color.g;
quad[20] = color.b;
quad[21] = color.a;
quad[22] = 1;
quad[23] = 0;
quad[24] = x4;
quad[25] = y4;
quad[26] = color.r;
quad[27] = color.g;
quad[28] = color.b;
quad[29] = color.a;
quad[30] = 0;
quad[31] = 0;
var i = 0;
quad[i++] = x1;
quad[i++] = y1;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 0;
quad[i++] = 1;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x2;
quad[i++] = y2;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = 1;
quad[i++] = 1;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x3;
quad[i++] = y3;
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);
};
SceneRenderer.prototype.drawRegion = function (region, x, y, width, height, color, premultipliedAlpha) {
@ -6826,38 +6880,63 @@ var spine;
if (color === null)
color = this.WHITE;
var quad = this.QUAD;
quad[0] = x;
quad[1] = y;
quad[2] = color.r;
quad[3] = color.g;
quad[4] = color.b;
quad[5] = color.a;
quad[6] = region.u;
quad[7] = region.v2;
quad[8] = x + width;
quad[9] = y;
quad[10] = color.r;
quad[11] = color.g;
quad[12] = color.b;
quad[13] = color.a;
quad[14] = region.u2;
quad[15] = region.v2;
quad[16] = x + width;
quad[17] = y + height;
quad[18] = color.r;
quad[19] = color.g;
quad[20] = color.b;
quad[21] = color.a;
quad[22] = region.u2;
quad[23] = region.v;
quad[24] = x;
quad[25] = y + height;
quad[26] = color.r;
quad[27] = color.g;
quad[28] = color.b;
quad[29] = color.a;
quad[30] = region.u;
quad[31] = region.v;
var i = 0;
quad[i++] = x;
quad[i++] = y;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = region.u;
quad[i++] = region.v2;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x + width;
quad[i++] = y;
quad[i++] = color.r;
quad[i++] = color.g;
quad[i++] = color.b;
quad[i++] = color.a;
quad[i++] = region.u2;
quad[i++] = region.v2;
if (this.twoColorTint) {
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
quad[i++] = 0;
}
quad[i++] = x + width;
quad[i++] = y + height;
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);
};
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.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
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);
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.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
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);
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.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
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.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.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
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);
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.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
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);
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.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
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);
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 skeleton, state, offset, bounds;
var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen;
var playButton, timeLine, isPlaying = true, playTime = 0;
@ -11,15 +11,19 @@ var tankDemo = function(loadingComplete, bgColor) {
function init () {
canvas = document.getElementById("tank-canvas");
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);
assetManager = spineDemos.assetManager;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
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.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
@ -28,7 +32,7 @@ var tankDemo = function(loadingComplete, bgColor) {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
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 skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -59,7 +63,7 @@ var tankDemo = function(loadingComplete, bgColor) {
function setupUI() {
playButton = $("#tank-playbutton");
var playButtonUpdate = function () {
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying)
playButton.addClass("pause").removeClass("play");
@ -86,8 +90,8 @@ var tankDemo = function(loadingComplete, bgColor) {
renderer.skeletonDebugRenderer.drawBones = false;
$("#tank-drawbones").change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
}
function render () {
@ -96,15 +100,15 @@ var tankDemo = function(loadingComplete, bgColor) {
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
playTime += delta;
playTime += delta;
while (playTime >= animationDuration)
playTime -= animationDuration;
timeLine.set(playTime / animationDuration);
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
}
skeleton.updateWorldTransform();
}
offset.x = skeleton.findBone("tankRoot").worldX;
offset.y = skeleton.findBone("tankRoot").worldY;
@ -116,11 +120,11 @@ var tankDemo = function(loadingComplete, bgColor) {
renderer.resize(spine.webgl.ResizeMode.Fit);
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.drawSkeletonDebug(skeleton, true);
renderer.drawSkeletonDebug(skeleton, true);
renderer.end();
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.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
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);
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.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
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);
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.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
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);
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;
if (this.dirtyVertices || this.dirtyIndices) this.update();
this.bind(shader);
if (this.indicesLength > 0) gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2);
else gl.drawArrays(primitiveType, offset, count);
if (this.indicesLength > 0) {
gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2);
} else {
gl.drawArrays(primitiveType, offset, count);
}
this.unbind(shader);
}

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

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