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

[ts] Added various helper classes to make writing demos easier

Browse Source
This commit is contained in:
badlogic 2016-08-24 15:58:31 +02:00
parent fe97a774ea
commit a69aec8a76
26 changed files with 2023 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -730,6 +730,11 @@ declare module spine {
g: number;
b: number;
a: number;
static WHITE: Color;
static RED: Color;
static GREEN: Color;
static BLUE: Color;
static MAGENTA: Color;
constructor(r?: number, g?: number, b?: number, a?: number);
set(r: number, g: number, b: number, a: number): void;
setFromColor(c: Color): void;
@ -958,6 +963,27 @@ declare module spine.webgl {
constructor(gl: WebGLRenderingContext);
}
}
declare module spine.webgl {
class OrthoCamera {
position: Vector3;
direction: Vector3;
up: Vector3;
near: number;
far: number;
zoom: number;
viewportWidth: number;
viewportHeight: number;
projectionView: Matrix4;
inverseProjectionView: Matrix4;
projection: Matrix4;
view: Matrix4;
private tmp;
constructor(viewportWidth: number, viewportHeight: number);
update(): void;
unproject(screenCoords: Vector3): Vector3;
setViewport(viewportWidth: number, viewportHeight: number): void;
}
}
declare module spine.webgl {
class GLTexture extends Texture implements Disposable {
private gl;
@ -972,6 +998,24 @@ declare module spine.webgl {
dispose(): void;
}
}
declare module spine.webgl {
class Input {
element: HTMLElement;
lastX: number;
lastY: number;
buttonDown: boolean;
private listeners;
constructor(element: HTMLElement);
private setupCallbacks(element);
addListener(listener: InputListener): void;
removeListener(listener: InputListener): void;
}
interface InputListener {
down(x: number, y: number): void;
up(x: number, y: number): void;
moved(x: number, y: number): void;
}
}
declare module spine.webgl {
const M00: number;
const M01: number;
@ -992,6 +1036,10 @@ declare module spine.webgl {
class Matrix4 {
temp: Float32Array;
values: Float32Array;
private static xAxis;
private static yAxis;
private static zAxis;
private static tmpMatrix;
constructor();
set(values: ArrayLike<number>): Matrix4;
transpose(): Matrix4;
@ -1005,6 +1053,8 @@ declare module spine.webgl {
ortho(left: number, right: number, bottom: number, top: number, near: number, far: number): Matrix4;
multiply(matrix: Matrix4): Matrix4;
multiplyLeft(matrix: Matrix4): Matrix4;
lookAt(position: Vector3, direction: Vector3, up: Vector3): this;
static initTemps(): void;
}
}
declare module spine.webgl {
@ -1062,10 +1112,10 @@ declare module spine.webgl {
}
}
declare module spine.webgl {
class PolygonBatcher {
class PolygonBatcher implements Disposable {
private gl;
private drawCalls;
private drawing;
private isDrawing;
private mesh;
private shader;
private lastTexture;
@ -1080,6 +1130,39 @@ declare module spine.webgl {
private flush();
end(): void;
getDrawCalls(): number;
dispose(): void;
}
}
declare module spine.webgl {
class SceneRenderer implements Disposable {
gl: WebGLRenderingContext;
canvas: HTMLCanvasElement;
camera: OrthoCamera;
private batcherShader;
private batcher;
private shapes;
private shapesShader;
private activeRenderer;
private skeletonRenderer;
private QUAD;
private QUAD_TRIANGLES;
private WHITE;
constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
begin(): void;
drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void;
quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void;
rect(filled: boolean, x: number, y: number, width: number, height: number, color?: Color): void;
rectLine(filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color?: Color): void;
polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): void;
curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
end(): void;
resize(): void;
private enableRenderer(renderer);
dispose(): void;
}
}
declare module spine.webgl {
@ -1132,19 +1215,22 @@ declare module spine.webgl {
private shader;
private vertexIndex;
private tmp;
private srcBlend;
private dstBlend;
constructor(gl: WebGLRenderingContext, maxVertices?: number);
begin(shader: Shader): void;
setBlendMode(srcBlend: number, dstBlend: number): void;
setColor(color: Color): void;
setColorWith(r: number, g: number, b: number, a: number): void;
point(x: number, y: number, color?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color): void;
triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void;
quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void;
rect(filled: boolean, x: number, y: number, width: number, height: number, color?: Color): void;
rectLine(filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color?: Color): void;
x(x: number, y: number, size: number): void;
polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
circle(filled: boolean, x: number, y: number, radius: number, segments: number, color?: Color): void;
circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): void;
curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
private vertex(x, y, color);
end(): void;
@ -1199,6 +1285,8 @@ declare module spine.webgl {
x: number;
y: number;
z: number;
constructor(x?: number, y?: number, z?: number);
setFrom(v: Vector3): Vector3;
set(x: number, y: number, z: number): Vector3;
add(v: Vector3): Vector3;
sub(v: Vector3): Vector3;

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

@ -4012,6 +4012,11 @@ var spine;
this.a = 1;
return this;
};
Color.WHITE = new Color(1, 1, 1, 1);
Color.RED = new Color(1, 0, 0, 1);
Color.GREEN = new Color(0, 1, 0, 1);
Color.BLUE = new Color(0, 0, 1, 1);
Color.MAGENTA = new Color(1, 0, 1, 1);
return Color;
}());
spine.Color = Color;
@ -4824,7 +4829,9 @@ var spine;
var AssetManager = (function (_super) {
__extends(AssetManager, _super);
function AssetManager(gl) {
_super.call(this, function (image) { return new spine.webgl.GLTexture(gl, image); });
_super.call(this, function (image) {
return new spine.webgl.GLTexture(gl, image);
});
}
return AssetManager;
}(spine.AssetManager));
@ -4832,6 +4839,60 @@ var spine;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var OrthoCamera = (function () {
function OrthoCamera(viewportWidth, viewportHeight) {
this.position = new webgl.Vector3(0, 0, 0);
this.direction = new webgl.Vector3(0, 0, -1);
this.up = new webgl.Vector3(0, 1, 0);
this.near = 0;
this.far = 100;
this.zoom = 1;
this.viewportWidth = 0;
this.viewportHeight = 0;
this.projectionView = new webgl.Matrix4();
this.inverseProjectionView = new webgl.Matrix4();
this.projection = new webgl.Matrix4();
this.view = new webgl.Matrix4();
this.tmp = new webgl.Vector3();
this.viewportWidth = viewportWidth;
this.viewportHeight = viewportHeight;
this.update();
}
OrthoCamera.prototype.update = function () {
var projection = this.projection;
var view = this.view;
var projectionView = this.projectionView;
var inverseProjectionView = this.inverseProjectionView;
var zoom = this.zoom, viewportWidth = this.viewportWidth, viewportHeight = this.viewportHeight;
projection.ortho(zoom * (-viewportWidth / 2), zoom * (viewportWidth / 2), zoom * (-viewportHeight / 2), zoom * (viewportHeight / 2), this.near, this.far);
view.lookAt(this.position, this.direction, this.up);
projectionView.set(projection.values);
projectionView.multiply(view);
inverseProjectionView.set(projectionView.values).invert();
};
OrthoCamera.prototype.unproject = function (screenCoords) {
var x = screenCoords.x, y = this.viewportHeight - screenCoords.y - 1;
var tmp = this.tmp;
tmp.x = (2 * x) / this.viewportWidth - 1;
tmp.y = (2 * y) / this.viewportHeight - 1;
tmp.z = (2 * screenCoords.z) - 1;
tmp.project(this.inverseProjectionView);
screenCoords.set(tmp.x, tmp.y, tmp.z);
return screenCoords;
};
OrthoCamera.prototype.setViewport = function (viewportWidth, viewportHeight) {
this.viewportWidth = viewportWidth;
this.viewportHeight = viewportHeight;
};
return OrthoCamera;
}());
webgl.OrthoCamera = OrthoCamera;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
@ -4890,6 +4951,80 @@ var spine;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var Input = (function () {
function Input(element) {
this.lastX = 0;
this.lastY = 0;
this.buttonDown = false;
this.listeners = new Array();
this.element = element;
this.setupCallbacks(element);
}
Input.prototype.setupCallbacks = function (element) {
var _this = this;
element.addEventListener("mousedown", function (ev) {
if (ev instanceof MouseEvent) {
var rect = element.getBoundingClientRect();
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
var listeners = _this.listeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i].down(x, y);
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
}
}, true);
element.addEventListener("mousemove", function (ev) {
if (ev instanceof MouseEvent) {
var rect = element.getBoundingClientRect();
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
var listeners = _this.listeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i].moved(x, y);
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
}
}, true);
element.addEventListener("mouseup", function (ev) {
if (ev instanceof MouseEvent) {
var rect = element.getBoundingClientRect();
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
var listeners = _this.listeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i].up(x, y);
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
}
}, true);
element.addEventListener(navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "DOMMouseScroll" : "mousewheel", function (ev) {
}, true);
};
Input.prototype.addListener = function (listener) {
this.listeners.push(listener);
};
Input.prototype.removeListener = function (listener) {
var idx = this.listeners.indexOf(listener);
if (idx > -1) {
this.listeners.splice(idx, 1);
}
};
return Input;
}());
webgl.Input = Input;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
@ -5147,6 +5282,43 @@ var spine;
t[webgl.M33] = m[webgl.M30] * v[webgl.M03] + m[webgl.M31] * v[webgl.M13] + m[webgl.M32] * v[webgl.M23] + m[webgl.M33] * v[webgl.M33];
return this.set(this.temp);
};
Matrix4.prototype.lookAt = function (position, direction, up) {
Matrix4.initTemps();
var xAxis = Matrix4.xAxis, yAxis = Matrix4.yAxis, zAxis = Matrix4.zAxis;
zAxis.setFrom(direction).normalize();
xAxis.setFrom(direction).normalize();
xAxis.cross(up).normalize();
yAxis.setFrom(xAxis).cross(zAxis).normalize();
this.identity();
var val = this.values;
val[webgl.M00] = xAxis.x;
val[webgl.M01] = xAxis.y;
val[webgl.M02] = xAxis.z;
val[webgl.M10] = yAxis.x;
val[webgl.M11] = yAxis.y;
val[webgl.M12] = yAxis.z;
val[webgl.M20] = -zAxis.x;
val[webgl.M21] = -zAxis.y;
val[webgl.M22] = -zAxis.z;
Matrix4.tmpMatrix.identity();
Matrix4.tmpMatrix.values[webgl.M03] = -position.x;
Matrix4.tmpMatrix.values[webgl.M13] = -position.y;
Matrix4.tmpMatrix.values[webgl.M23] = -position.z;
this.multiply(Matrix4.tmpMatrix);
return this;
};
Matrix4.initTemps = function () {
if (Matrix4.xAxis === null)
Matrix4.xAxis = new webgl.Vector3();
if (Matrix4.yAxis === null)
Matrix4.yAxis = new webgl.Vector3();
if (Matrix4.zAxis === null)
Matrix4.zAxis = new webgl.Vector3();
};
Matrix4.xAxis = null;
Matrix4.yAxis = null;
Matrix4.zAxis = null;
Matrix4.tmpMatrix = new Matrix4();
return Matrix4;
}());
webgl.Matrix4 = Matrix4;
@ -5323,7 +5495,7 @@ var spine;
var PolygonBatcher = (function () {
function PolygonBatcher(gl, maxVertices) {
if (maxVertices === void 0) { maxVertices = 10920; }
this.drawing = false;
this.isDrawing = false;
this.shader = null;
this.lastTexture = null;
this.verticesLength = 0;
@ -5337,12 +5509,12 @@ var spine;
}
PolygonBatcher.prototype.begin = function (shader) {
var gl = this.gl;
if (this.drawing)
if (this.isDrawing)
throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
this.drawCalls = 0;
this.shader = shader;
this.lastTexture = null;
this.drawing = true;
this.isDrawing = true;
gl.enable(gl.BLEND);
gl.blendFunc(this.srcBlend, this.dstBlend);
};
@ -5350,7 +5522,7 @@ var spine;
var gl = this.gl;
this.srcBlend = srcBlend;
this.dstBlend = dstBlend;
if (this.drawing) {
if (this.isDrawing) {
this.flush();
gl.blendFunc(this.srcBlend, this.dstBlend);
}
@ -5388,22 +5560,193 @@ var spine;
};
PolygonBatcher.prototype.end = function () {
var gl = this.gl;
if (!this.drawing)
if (!this.isDrawing)
throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
if (this.verticesLength > 0 || this.indicesLength > 0)
this.flush();
this.shader = null;
this.lastTexture = null;
this.drawing = false;
this.isDrawing = false;
gl.disable(gl.BLEND);
};
PolygonBatcher.prototype.getDrawCalls = function () { return this.drawCalls; };
PolygonBatcher.prototype.dispose = function () {
this.mesh.dispose();
};
return PolygonBatcher;
}());
webgl.PolygonBatcher = PolygonBatcher;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var SceneRenderer = (function () {
function SceneRenderer(canvas, gl) {
this.activeRenderer = null;
this.QUAD = [
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
];
this.QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
this.WHITE = new spine.Color(1, 1, 1, 1);
this.canvas = canvas;
this.gl = gl;
this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
this.batcherShader = webgl.Shader.newColoredTextured(gl);
this.batcher = new webgl.PolygonBatcher(gl);
this.shapesShader = webgl.Shader.newColored(gl);
this.shapes = new webgl.ShapeRenderer(gl);
this.skeletonRenderer = new webgl.SkeletonRenderer(gl);
}
SceneRenderer.prototype.begin = function () {
this.camera.update();
this.enableRenderer(this.batcher);
};
SceneRenderer.prototype.drawSkeleton = function (skeleton, premultipliedAlpha) {
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
this.enableRenderer(this.batcher);
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.batcher);
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;
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
};
SceneRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
if (color === void 0) { color = null; }
if (color2 === void 0) { color2 = null; }
this.enableRenderer(this.shapes);
this.shapes.line(x, y, x2, y2, color);
};
SceneRenderer.prototype.triangle = function (filled, x, y, x2, y2, x3, y3, color, color2, color3) {
if (color === void 0) { color = null; }
if (color2 === void 0) { color2 = null; }
if (color3 === void 0) { color3 = null; }
this.enableRenderer(this.shapes);
this.shapes.triangle(filled, x, y, x2, y2, x3, y3, color, color2, color3);
};
SceneRenderer.prototype.quad = function (filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4) {
if (color === void 0) { color = null; }
if (color2 === void 0) { color2 = null; }
if (color3 === void 0) { color3 = null; }
if (color4 === void 0) { color4 = null; }
this.enableRenderer(this.shapes);
this.shapes.quad(filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4);
};
SceneRenderer.prototype.rect = function (filled, x, y, width, height, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.shapes);
this.shapes.rect(filled, x, y, width, height, color);
};
SceneRenderer.prototype.rectLine = function (filled, x1, y1, x2, y2, width, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.shapes);
this.shapes.rectLine(filled, x1, y1, x2, y2, width, color);
};
SceneRenderer.prototype.polygon = function (polygonVertices, offset, count, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.shapes);
this.shapes.polygon(polygonVertices, offset, count, color);
};
SceneRenderer.prototype.circle = function (filled, x, y, radius, color, segments) {
if (color === void 0) { color = null; }
if (segments === void 0) { segments = 0; }
this.enableRenderer(this.shapes);
this.shapes.circle(filled, x, y, radius, color, segments);
};
SceneRenderer.prototype.curve = function (x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.shapes);
this.shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color);
};
SceneRenderer.prototype.end = function () {
if (this.activeRenderer === this.batcher)
this.batcher.end();
else if (this.activeRenderer === this.shapes)
this.shapes.end();
this.activeRenderer = null;
};
SceneRenderer.prototype.resize = function () {
var canvas = this.canvas;
var w = canvas.clientWidth;
var h = canvas.clientHeight;
if (canvas.width != w || canvas.height != h) {
canvas.width = w;
canvas.height = h;
}
this.camera.setViewport(w, h);
this.camera.update();
this.gl.viewport(0, 0, canvas.width, canvas.height);
};
SceneRenderer.prototype.enableRenderer = function (renderer) {
if (this.activeRenderer === renderer)
return;
this.end();
if (renderer instanceof webgl.PolygonBatcher) {
this.batcherShader.bind();
this.batcherShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher;
}
else {
this.shapesShader.bind();
this.shapesShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
this.shapes.begin(this.shapesShader);
this.activeRenderer = this.shapes;
}
};
SceneRenderer.prototype.dispose = function () {
this.batcher.dispose();
this.batcherShader.dispose();
this.shapes.dispose();
this.shapesShader.dispose();
};
return SceneRenderer;
}());
webgl.SceneRenderer = SceneRenderer;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
@ -5557,6 +5900,8 @@ var spine;
this.color = new spine.Color(1, 1, 1, 1);
this.vertexIndex = 0;
this.tmp = new spine.Vector2();
this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
if (maxVertices > 10920)
throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.gl = gl;
@ -5568,6 +5913,18 @@ var spine;
this.shader = shader;
this.vertexIndex = 0;
this.isDrawing = true;
var gl = this.gl;
gl.enable(gl.BLEND);
gl.blendFunc(this.srcBlend, this.dstBlend);
};
ShapeRenderer.prototype.setBlendMode = function (srcBlend, dstBlend) {
var gl = this.gl;
this.srcBlend = srcBlend;
this.dstBlend = dstBlend;
if (this.isDrawing) {
this.flush();
gl.blendFunc(this.srcBlend, this.dstBlend);
}
};
ShapeRenderer.prototype.setColor = function (color) {
this.color.setFromColor(color);
@ -5582,18 +5939,15 @@ var spine;
color = this.color;
this.vertex(x, y, color);
};
ShapeRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
ShapeRenderer.prototype.line = function (x, y, x2, y2, color) {
if (color === void 0) { color = null; }
if (color2 === void 0) { color2 = null; }
this.check(ShapeType.Line, 2);
var vertices = this.mesh.getVertices();
var idx = this.vertexIndex;
if (color === null)
color = this.color;
if (color2 === null)
color2 = this.color;
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x2, y2, color);
};
ShapeRenderer.prototype.triangle = function (filled, x, y, x2, y2, x3, y3, color, color2, color3) {
if (color === void 0) { color = null; }
@ -5725,8 +6079,9 @@ var spine;
this.vertex(x2, y2, color);
}
};
ShapeRenderer.prototype.circle = function (filled, x, y, radius, segments, color) {
ShapeRenderer.prototype.circle = function (filled, x, y, radius, color, segments) {
if (color === void 0) { color = null; }
if (segments === void 0) { segments = 0; }
if (segments === 0)
segments = Math.max(1, (6 * spine.MathUtils.cbrt(radius)) | 0);
if (segments <= 0)
@ -5827,6 +6182,7 @@ var spine;
this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0;
this.gl.disable(this.gl.BLEND);
};
ShapeRenderer.prototype.check = function (shapeType, numVertices) {
if (!this.isDrawing)
@ -6012,8 +6368,7 @@ var spine;
shapes.setColor(this.boneOriginColor);
for (var i = 0, n = bones.length; i < n; i++) {
var bone = bones[i];
shapes.setColor(SkeletonDebugRenderer.GREEN);
shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, 8);
shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, SkeletonDebugRenderer.GREEN, 8);
}
}
shapes.end();
@ -6082,11 +6437,23 @@ var spine;
var webgl;
(function (webgl) {
var Vector3 = (function () {
function Vector3() {
function Vector3(x, y, z) {
if (x === void 0) { x = 0; }
if (y === void 0) { y = 0; }
if (z === void 0) { z = 0; }
this.x = 0;
this.y = 0;
this.z = 0;
this.x = x;
this.y = y;
this.z = z;
}
Vector3.prototype.setFrom = function (v) {
this.x = v.x;
this.y = v.y;
this.z = v.z;
return this;
};
Vector3.prototype.set = function (x, y, z) {
this.x = x;
this.y = y;

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

File diff suppressed because one or more lines are too long

5
spine-ts/build/spine-core.d.ts vendored
View File

@ -704,6 +704,11 @@ declare module spine {
g: number;
b: number;
a: number;
static WHITE: Color;
static RED: Color;
static GREEN: Color;
static BLUE: Color;
static MAGENTA: Color;
constructor(r?: number, g?: number, b?: number, a?: number);
set(r: number, g: number, b: number, a: number): void;
setFromColor(c: Color): void;

5
spine-ts/build/spine-core.js
View File

@ -3836,6 +3836,11 @@ var spine;
this.a = 1;
return this;
};
Color.WHITE = new Color(1, 1, 1, 1);
Color.RED = new Color(1, 0, 0, 1);
Color.GREEN = new Color(0, 1, 0, 1);
Color.BLUE = new Color(0, 0, 1, 1);
Color.MAGENTA = new Color(1, 0, 1, 1);
return Color;
}());
spine.Color = Color;

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

File diff suppressed because one or more lines are too long

5
spine-ts/build/spine-threejs.d.ts vendored
View File

@ -704,6 +704,11 @@ declare module spine {
g: number;
b: number;
a: number;
static WHITE: Color;
static RED: Color;
static GREEN: Color;
static BLUE: Color;
static MAGENTA: Color;
constructor(r?: number, g?: number, b?: number, a?: number);
set(r: number, g: number, b: number, a: number): void;
setFromColor(c: Color): void;

5
spine-ts/build/spine-threejs.js
View File

@ -3836,6 +3836,11 @@ var spine;
this.a = 1;
return this;
};
Color.WHITE = new Color(1, 1, 1, 1);
Color.RED = new Color(1, 0, 0, 1);
Color.GREEN = new Color(0, 1, 0, 1);
Color.BLUE = new Color(0, 0, 1, 1);
Color.MAGENTA = new Color(1, 0, 1, 1);
return Color;
}());
spine.Color = Color;

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

File diff suppressed because one or more lines are too long

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

@ -704,6 +704,11 @@ declare module spine {
g: number;
b: number;
a: number;
static WHITE: Color;
static RED: Color;
static GREEN: Color;
static BLUE: Color;
static MAGENTA: Color;
constructor(r?: number, g?: number, b?: number, a?: number);
set(r: number, g: number, b: number, a: number): void;
setFromColor(c: Color): void;
@ -888,6 +893,27 @@ declare module spine.webgl {
constructor(gl: WebGLRenderingContext);
}
}
declare module spine.webgl {
class OrthoCamera {
position: Vector3;
direction: Vector3;
up: Vector3;
near: number;
far: number;
zoom: number;
viewportWidth: number;
viewportHeight: number;
projectionView: Matrix4;
inverseProjectionView: Matrix4;
projection: Matrix4;
view: Matrix4;
private tmp;
constructor(viewportWidth: number, viewportHeight: number);
update(): void;
unproject(screenCoords: Vector3): Vector3;
setViewport(viewportWidth: number, viewportHeight: number): void;
}
}
declare module spine.webgl {
class GLTexture extends Texture implements Disposable {
private gl;
@ -902,6 +928,24 @@ declare module spine.webgl {
dispose(): void;
}
}
declare module spine.webgl {
class Input {
element: HTMLElement;
lastX: number;
lastY: number;
buttonDown: boolean;
private listeners;
constructor(element: HTMLElement);
private setupCallbacks(element);
addListener(listener: InputListener): void;
removeListener(listener: InputListener): void;
}
interface InputListener {
down(x: number, y: number): void;
up(x: number, y: number): void;
moved(x: number, y: number): void;
}
}
declare module spine.webgl {
const M00: number;
const M01: number;
@ -922,6 +966,10 @@ declare module spine.webgl {
class Matrix4 {
temp: Float32Array;
values: Float32Array;
private static xAxis;
private static yAxis;
private static zAxis;
private static tmpMatrix;
constructor();
set(values: ArrayLike<number>): Matrix4;
transpose(): Matrix4;
@ -935,6 +983,8 @@ declare module spine.webgl {
ortho(left: number, right: number, bottom: number, top: number, near: number, far: number): Matrix4;
multiply(matrix: Matrix4): Matrix4;
multiplyLeft(matrix: Matrix4): Matrix4;
lookAt(position: Vector3, direction: Vector3, up: Vector3): this;
static initTemps(): void;
}
}
declare module spine.webgl {
@ -992,10 +1042,10 @@ declare module spine.webgl {
}
}
declare module spine.webgl {
class PolygonBatcher {
class PolygonBatcher implements Disposable {
private gl;
private drawCalls;
private drawing;
private isDrawing;
private mesh;
private shader;
private lastTexture;
@ -1010,6 +1060,39 @@ declare module spine.webgl {
private flush();
end(): void;
getDrawCalls(): number;
dispose(): void;
}
}
declare module spine.webgl {
class SceneRenderer implements Disposable {
gl: WebGLRenderingContext;
canvas: HTMLCanvasElement;
camera: OrthoCamera;
private batcherShader;
private batcher;
private shapes;
private shapesShader;
private activeRenderer;
private skeletonRenderer;
private QUAD;
private QUAD_TRIANGLES;
private WHITE;
constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
begin(): void;
drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void;
quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void;
rect(filled: boolean, x: number, y: number, width: number, height: number, color?: Color): void;
rectLine(filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color?: Color): void;
polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): void;
curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
end(): void;
resize(): void;
private enableRenderer(renderer);
dispose(): void;
}
}
declare module spine.webgl {
@ -1062,19 +1145,22 @@ declare module spine.webgl {
private shader;
private vertexIndex;
private tmp;
private srcBlend;
private dstBlend;
constructor(gl: WebGLRenderingContext, maxVertices?: number);
begin(shader: Shader): void;
setBlendMode(srcBlend: number, dstBlend: number): void;
setColor(color: Color): void;
setColorWith(r: number, g: number, b: number, a: number): void;
point(x: number, y: number, color?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color): void;
triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void;
quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void;
rect(filled: boolean, x: number, y: number, width: number, height: number, color?: Color): void;
rectLine(filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color?: Color): void;
x(x: number, y: number, size: number): void;
polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
circle(filled: boolean, x: number, y: number, radius: number, segments: number, color?: Color): void;
circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): void;
curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
private vertex(x, y, color);
end(): void;
@ -1129,6 +1215,8 @@ declare module spine.webgl {
x: number;
y: number;
z: number;
constructor(x?: number, y?: number, z?: number);
setFrom(v: Vector3): Vector3;
set(x: number, y: number, z: number): Vector3;
add(v: Vector3): Vector3;
sub(v: Vector3): Vector3;

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

@ -3836,6 +3836,11 @@ var spine;
this.a = 1;
return this;
};
Color.WHITE = new Color(1, 1, 1, 1);
Color.RED = new Color(1, 0, 0, 1);
Color.GREEN = new Color(0, 1, 0, 1);
Color.BLUE = new Color(0, 0, 1, 1);
Color.MAGENTA = new Color(1, 0, 1, 1);
return Color;
}());
spine.Color = Color;
@ -4403,7 +4408,9 @@ var spine;
var AssetManager = (function (_super) {
__extends(AssetManager, _super);
function AssetManager(gl) {
_super.call(this, function (image) { return new spine.webgl.GLTexture(gl, image); });
_super.call(this, function (image) {
return new spine.webgl.GLTexture(gl, image);
});
}
return AssetManager;
}(spine.AssetManager));
@ -4411,6 +4418,60 @@ var spine;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var OrthoCamera = (function () {
function OrthoCamera(viewportWidth, viewportHeight) {
this.position = new webgl.Vector3(0, 0, 0);
this.direction = new webgl.Vector3(0, 0, -1);
this.up = new webgl.Vector3(0, 1, 0);
this.near = 0;
this.far = 100;
this.zoom = 1;
this.viewportWidth = 0;
this.viewportHeight = 0;
this.projectionView = new webgl.Matrix4();
this.inverseProjectionView = new webgl.Matrix4();
this.projection = new webgl.Matrix4();
this.view = new webgl.Matrix4();
this.tmp = new webgl.Vector3();
this.viewportWidth = viewportWidth;
this.viewportHeight = viewportHeight;
this.update();
}
OrthoCamera.prototype.update = function () {
var projection = this.projection;
var view = this.view;
var projectionView = this.projectionView;
var inverseProjectionView = this.inverseProjectionView;
var zoom = this.zoom, viewportWidth = this.viewportWidth, viewportHeight = this.viewportHeight;
projection.ortho(zoom * (-viewportWidth / 2), zoom * (viewportWidth / 2), zoom * (-viewportHeight / 2), zoom * (viewportHeight / 2), this.near, this.far);
view.lookAt(this.position, this.direction, this.up);
projectionView.set(projection.values);
projectionView.multiply(view);
inverseProjectionView.set(projectionView.values).invert();
};
OrthoCamera.prototype.unproject = function (screenCoords) {
var x = screenCoords.x, y = this.viewportHeight - screenCoords.y - 1;
var tmp = this.tmp;
tmp.x = (2 * x) / this.viewportWidth - 1;
tmp.y = (2 * y) / this.viewportHeight - 1;
tmp.z = (2 * screenCoords.z) - 1;
tmp.project(this.inverseProjectionView);
screenCoords.set(tmp.x, tmp.y, tmp.z);
return screenCoords;
};
OrthoCamera.prototype.setViewport = function (viewportWidth, viewportHeight) {
this.viewportWidth = viewportWidth;
this.viewportHeight = viewportHeight;
};
return OrthoCamera;
}());
webgl.OrthoCamera = OrthoCamera;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
@ -4469,6 +4530,80 @@ var spine;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var Input = (function () {
function Input(element) {
this.lastX = 0;
this.lastY = 0;
this.buttonDown = false;
this.listeners = new Array();
this.element = element;
this.setupCallbacks(element);
}
Input.prototype.setupCallbacks = function (element) {
var _this = this;
element.addEventListener("mousedown", function (ev) {
if (ev instanceof MouseEvent) {
var rect = element.getBoundingClientRect();
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
var listeners = _this.listeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i].down(x, y);
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
}
}, true);
element.addEventListener("mousemove", function (ev) {
if (ev instanceof MouseEvent) {
var rect = element.getBoundingClientRect();
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
var listeners = _this.listeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i].moved(x, y);
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
}
}, true);
element.addEventListener("mouseup", function (ev) {
if (ev instanceof MouseEvent) {
var rect = element.getBoundingClientRect();
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
var listeners = _this.listeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i].up(x, y);
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
}
}, true);
element.addEventListener(navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "DOMMouseScroll" : "mousewheel", function (ev) {
}, true);
};
Input.prototype.addListener = function (listener) {
this.listeners.push(listener);
};
Input.prototype.removeListener = function (listener) {
var idx = this.listeners.indexOf(listener);
if (idx > -1) {
this.listeners.splice(idx, 1);
}
};
return Input;
}());
webgl.Input = Input;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
@ -4726,6 +4861,43 @@ var spine;
t[webgl.M33] = m[webgl.M30] * v[webgl.M03] + m[webgl.M31] * v[webgl.M13] + m[webgl.M32] * v[webgl.M23] + m[webgl.M33] * v[webgl.M33];
return this.set(this.temp);
};
Matrix4.prototype.lookAt = function (position, direction, up) {
Matrix4.initTemps();
var xAxis = Matrix4.xAxis, yAxis = Matrix4.yAxis, zAxis = Matrix4.zAxis;
zAxis.setFrom(direction).normalize();
xAxis.setFrom(direction).normalize();
xAxis.cross(up).normalize();
yAxis.setFrom(xAxis).cross(zAxis).normalize();
this.identity();
var val = this.values;
val[webgl.M00] = xAxis.x;
val[webgl.M01] = xAxis.y;
val[webgl.M02] = xAxis.z;
val[webgl.M10] = yAxis.x;
val[webgl.M11] = yAxis.y;
val[webgl.M12] = yAxis.z;
val[webgl.M20] = -zAxis.x;
val[webgl.M21] = -zAxis.y;
val[webgl.M22] = -zAxis.z;
Matrix4.tmpMatrix.identity();
Matrix4.tmpMatrix.values[webgl.M03] = -position.x;
Matrix4.tmpMatrix.values[webgl.M13] = -position.y;
Matrix4.tmpMatrix.values[webgl.M23] = -position.z;
this.multiply(Matrix4.tmpMatrix);
return this;
};
Matrix4.initTemps = function () {
if (Matrix4.xAxis === null)
Matrix4.xAxis = new webgl.Vector3();
if (Matrix4.yAxis === null)
Matrix4.yAxis = new webgl.Vector3();
if (Matrix4.zAxis === null)
Matrix4.zAxis = new webgl.Vector3();
};
Matrix4.xAxis = null;
Matrix4.yAxis = null;
Matrix4.zAxis = null;
Matrix4.tmpMatrix = new Matrix4();
return Matrix4;
}());
webgl.Matrix4 = Matrix4;
@ -4902,7 +5074,7 @@ var spine;
var PolygonBatcher = (function () {
function PolygonBatcher(gl, maxVertices) {
if (maxVertices === void 0) { maxVertices = 10920; }
this.drawing = false;
this.isDrawing = false;
this.shader = null;
this.lastTexture = null;
this.verticesLength = 0;
@ -4916,12 +5088,12 @@ var spine;
}
PolygonBatcher.prototype.begin = function (shader) {
var gl = this.gl;
if (this.drawing)
if (this.isDrawing)
throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
this.drawCalls = 0;
this.shader = shader;
this.lastTexture = null;
this.drawing = true;
this.isDrawing = true;
gl.enable(gl.BLEND);
gl.blendFunc(this.srcBlend, this.dstBlend);
};
@ -4929,7 +5101,7 @@ var spine;
var gl = this.gl;
this.srcBlend = srcBlend;
this.dstBlend = dstBlend;
if (this.drawing) {
if (this.isDrawing) {
this.flush();
gl.blendFunc(this.srcBlend, this.dstBlend);
}
@ -4967,22 +5139,193 @@ var spine;
};
PolygonBatcher.prototype.end = function () {
var gl = this.gl;
if (!this.drawing)
if (!this.isDrawing)
throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
if (this.verticesLength > 0 || this.indicesLength > 0)
this.flush();
this.shader = null;
this.lastTexture = null;
this.drawing = false;
this.isDrawing = false;
gl.disable(gl.BLEND);
};
PolygonBatcher.prototype.getDrawCalls = function () { return this.drawCalls; };
PolygonBatcher.prototype.dispose = function () {
this.mesh.dispose();
};
return PolygonBatcher;
}());
webgl.PolygonBatcher = PolygonBatcher;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var SceneRenderer = (function () {
function SceneRenderer(canvas, gl) {
this.activeRenderer = null;
this.QUAD = [
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
];
this.QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
this.WHITE = new spine.Color(1, 1, 1, 1);
this.canvas = canvas;
this.gl = gl;
this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
this.batcherShader = webgl.Shader.newColoredTextured(gl);
this.batcher = new webgl.PolygonBatcher(gl);
this.shapesShader = webgl.Shader.newColored(gl);
this.shapes = new webgl.ShapeRenderer(gl);
this.skeletonRenderer = new webgl.SkeletonRenderer(gl);
}
SceneRenderer.prototype.begin = function () {
this.camera.update();
this.enableRenderer(this.batcher);
};
SceneRenderer.prototype.drawSkeleton = function (skeleton, premultipliedAlpha) {
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
this.enableRenderer(this.batcher);
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.batcher);
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;
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
};
SceneRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
if (color === void 0) { color = null; }
if (color2 === void 0) { color2 = null; }
this.enableRenderer(this.shapes);
this.shapes.line(x, y, x2, y2, color);
};
SceneRenderer.prototype.triangle = function (filled, x, y, x2, y2, x3, y3, color, color2, color3) {
if (color === void 0) { color = null; }
if (color2 === void 0) { color2 = null; }
if (color3 === void 0) { color3 = null; }
this.enableRenderer(this.shapes);
this.shapes.triangle(filled, x, y, x2, y2, x3, y3, color, color2, color3);
};
SceneRenderer.prototype.quad = function (filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4) {
if (color === void 0) { color = null; }
if (color2 === void 0) { color2 = null; }
if (color3 === void 0) { color3 = null; }
if (color4 === void 0) { color4 = null; }
this.enableRenderer(this.shapes);
this.shapes.quad(filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4);
};
SceneRenderer.prototype.rect = function (filled, x, y, width, height, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.shapes);
this.shapes.rect(filled, x, y, width, height, color);
};
SceneRenderer.prototype.rectLine = function (filled, x1, y1, x2, y2, width, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.shapes);
this.shapes.rectLine(filled, x1, y1, x2, y2, width, color);
};
SceneRenderer.prototype.polygon = function (polygonVertices, offset, count, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.shapes);
this.shapes.polygon(polygonVertices, offset, count, color);
};
SceneRenderer.prototype.circle = function (filled, x, y, radius, color, segments) {
if (color === void 0) { color = null; }
if (segments === void 0) { segments = 0; }
this.enableRenderer(this.shapes);
this.shapes.circle(filled, x, y, radius, color, segments);
};
SceneRenderer.prototype.curve = function (x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.shapes);
this.shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color);
};
SceneRenderer.prototype.end = function () {
if (this.activeRenderer === this.batcher)
this.batcher.end();
else if (this.activeRenderer === this.shapes)
this.shapes.end();
this.activeRenderer = null;
};
SceneRenderer.prototype.resize = function () {
var canvas = this.canvas;
var w = canvas.clientWidth;
var h = canvas.clientHeight;
if (canvas.width != w || canvas.height != h) {
canvas.width = w;
canvas.height = h;
}
this.camera.setViewport(w, h);
this.camera.update();
this.gl.viewport(0, 0, canvas.width, canvas.height);
};
SceneRenderer.prototype.enableRenderer = function (renderer) {
if (this.activeRenderer === renderer)
return;
this.end();
if (renderer instanceof webgl.PolygonBatcher) {
this.batcherShader.bind();
this.batcherShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher;
}
else {
this.shapesShader.bind();
this.shapesShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
this.shapes.begin(this.shapesShader);
this.activeRenderer = this.shapes;
}
};
SceneRenderer.prototype.dispose = function () {
this.batcher.dispose();
this.batcherShader.dispose();
this.shapes.dispose();
this.shapesShader.dispose();
};
return SceneRenderer;
}());
webgl.SceneRenderer = SceneRenderer;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
@ -5136,6 +5479,8 @@ var spine;
this.color = new spine.Color(1, 1, 1, 1);
this.vertexIndex = 0;
this.tmp = new spine.Vector2();
this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
if (maxVertices > 10920)
throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.gl = gl;
@ -5147,6 +5492,18 @@ var spine;
this.shader = shader;
this.vertexIndex = 0;
this.isDrawing = true;
var gl = this.gl;
gl.enable(gl.BLEND);
gl.blendFunc(this.srcBlend, this.dstBlend);
};
ShapeRenderer.prototype.setBlendMode = function (srcBlend, dstBlend) {
var gl = this.gl;
this.srcBlend = srcBlend;
this.dstBlend = dstBlend;
if (this.isDrawing) {
this.flush();
gl.blendFunc(this.srcBlend, this.dstBlend);
}
};
ShapeRenderer.prototype.setColor = function (color) {
this.color.setFromColor(color);
@ -5161,18 +5518,15 @@ var spine;
color = this.color;
this.vertex(x, y, color);
};
ShapeRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
ShapeRenderer.prototype.line = function (x, y, x2, y2, color) {
if (color === void 0) { color = null; }
if (color2 === void 0) { color2 = null; }
this.check(ShapeType.Line, 2);
var vertices = this.mesh.getVertices();
var idx = this.vertexIndex;
if (color === null)
color = this.color;
if (color2 === null)
color2 = this.color;
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x2, y2, color);
};
ShapeRenderer.prototype.triangle = function (filled, x, y, x2, y2, x3, y3, color, color2, color3) {
if (color === void 0) { color = null; }
@ -5304,8 +5658,9 @@ var spine;
this.vertex(x2, y2, color);
}
};
ShapeRenderer.prototype.circle = function (filled, x, y, radius, segments, color) {
ShapeRenderer.prototype.circle = function (filled, x, y, radius, color, segments) {
if (color === void 0) { color = null; }
if (segments === void 0) { segments = 0; }
if (segments === 0)
segments = Math.max(1, (6 * spine.MathUtils.cbrt(radius)) | 0);
if (segments <= 0)
@ -5406,6 +5761,7 @@ var spine;
this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0;
this.gl.disable(this.gl.BLEND);
};
ShapeRenderer.prototype.check = function (shapeType, numVertices) {
if (!this.isDrawing)
@ -5591,8 +5947,7 @@ var spine;
shapes.setColor(this.boneOriginColor);
for (var i = 0, n = bones.length; i < n; i++) {
var bone = bones[i];
shapes.setColor(SkeletonDebugRenderer.GREEN);
shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, 8);
shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, SkeletonDebugRenderer.GREEN, 8);
}
}
shapes.end();
@ -5661,11 +6016,23 @@ var spine;
var webgl;
(function (webgl) {
var Vector3 = (function () {
function Vector3() {
function Vector3(x, y, z) {
if (x === void 0) { x = 0; }
if (y === void 0) { y = 0; }
if (z === void 0) { z = 0; }
this.x = 0;
this.y = 0;
this.z = 0;
this.x = x;
this.y = y;
this.z = z;
}
Vector3.prototype.setFrom = function (v) {
this.x = v.x;
this.y = v.y;
this.z = v.z;
return this;
};
Vector3.prototype.set = function (x, y, z) {
this.x = x;
this.y = y;

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

File diff suppressed because one or more lines are too long

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

@ -704,6 +704,11 @@ declare module spine {
g: number;
b: number;
a: number;
static WHITE: Color;
static RED: Color;
static GREEN: Color;
static BLUE: Color;
static MAGENTA: Color;
constructor(r?: number, g?: number, b?: number, a?: number);
set(r: number, g: number, b: number, a: number): void;
setFromColor(c: Color): void;
@ -888,6 +893,27 @@ declare module spine.webgl {
constructor(gl: WebGLRenderingContext);
}
}
declare module spine.webgl {
class OrthoCamera {
position: Vector3;
direction: Vector3;
up: Vector3;
near: number;
far: number;
zoom: number;
viewportWidth: number;
viewportHeight: number;
projectionView: Matrix4;
inverseProjectionView: Matrix4;
projection: Matrix4;
view: Matrix4;
private tmp;
constructor(viewportWidth: number, viewportHeight: number);
update(): void;
unproject(screenCoords: Vector3): Vector3;
setViewport(viewportWidth: number, viewportHeight: number): void;
}
}
declare module spine.webgl {
class GLTexture extends Texture implements Disposable {
private gl;
@ -902,6 +928,24 @@ declare module spine.webgl {
dispose(): void;
}
}
declare module spine.webgl {
class Input {
element: HTMLElement;
lastX: number;
lastY: number;
buttonDown: boolean;
private listeners;
constructor(element: HTMLElement);
private setupCallbacks(element);
addListener(listener: InputListener): void;
removeListener(listener: InputListener): void;
}
interface InputListener {
down(x: number, y: number): void;
up(x: number, y: number): void;
moved(x: number, y: number): void;
}
}
declare module spine.webgl {
const M00: number;
const M01: number;
@ -922,6 +966,10 @@ declare module spine.webgl {
class Matrix4 {
temp: Float32Array;
values: Float32Array;
private static xAxis;
private static yAxis;
private static zAxis;
private static tmpMatrix;
constructor();
set(values: ArrayLike<number>): Matrix4;
transpose(): Matrix4;
@ -935,6 +983,8 @@ declare module spine.webgl {
ortho(left: number, right: number, bottom: number, top: number, near: number, far: number): Matrix4;
multiply(matrix: Matrix4): Matrix4;
multiplyLeft(matrix: Matrix4): Matrix4;
lookAt(position: Vector3, direction: Vector3, up: Vector3): this;
static initTemps(): void;
}
}
declare module spine.webgl {
@ -992,10 +1042,10 @@ declare module spine.webgl {
}
}
declare module spine.webgl {
class PolygonBatcher {
class PolygonBatcher implements Disposable {
private gl;
private drawCalls;
private drawing;
private isDrawing;
private mesh;
private shader;
private lastTexture;
@ -1010,6 +1060,39 @@ declare module spine.webgl {
private flush();
end(): void;
getDrawCalls(): number;
dispose(): void;
}
}
declare module spine.webgl {
class SceneRenderer implements Disposable {
gl: WebGLRenderingContext;
canvas: HTMLCanvasElement;
camera: OrthoCamera;
private batcherShader;
private batcher;
private shapes;
private shapesShader;
private activeRenderer;
private skeletonRenderer;
private QUAD;
private QUAD_TRIANGLES;
private WHITE;
constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
begin(): void;
drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void;
quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void;
rect(filled: boolean, x: number, y: number, width: number, height: number, color?: Color): void;
rectLine(filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color?: Color): void;
polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): void;
curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
end(): void;
resize(): void;
private enableRenderer(renderer);
dispose(): void;
}
}
declare module spine.webgl {
@ -1062,19 +1145,22 @@ declare module spine.webgl {
private shader;
private vertexIndex;
private tmp;
private srcBlend;
private dstBlend;
constructor(gl: WebGLRenderingContext, maxVertices?: number);
begin(shader: Shader): void;
setBlendMode(srcBlend: number, dstBlend: number): void;
setColor(color: Color): void;
setColorWith(r: number, g: number, b: number, a: number): void;
point(x: number, y: number, color?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color): void;
triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void;
quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void;
rect(filled: boolean, x: number, y: number, width: number, height: number, color?: Color): void;
rectLine(filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color?: Color): void;
x(x: number, y: number, size: number): void;
polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
circle(filled: boolean, x: number, y: number, radius: number, segments: number, color?: Color): void;
circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): void;
curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
private vertex(x, y, color);
end(): void;
@ -1129,6 +1215,8 @@ declare module spine.webgl {
x: number;
y: number;
z: number;
constructor(x?: number, y?: number, z?: number);
setFrom(v: Vector3): Vector3;
set(x: number, y: number, z: number): Vector3;
add(v: Vector3): Vector3;
sub(v: Vector3): Vector3;

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

@ -3836,6 +3836,11 @@ var spine;
this.a = 1;
return this;
};
Color.WHITE = new Color(1, 1, 1, 1);
Color.RED = new Color(1, 0, 0, 1);
Color.GREEN = new Color(0, 1, 0, 1);
Color.BLUE = new Color(0, 0, 1, 1);
Color.MAGENTA = new Color(1, 0, 1, 1);
return Color;
}());
spine.Color = Color;
@ -4403,7 +4408,9 @@ var spine;
var AssetManager = (function (_super) {
__extends(AssetManager, _super);
function AssetManager(gl) {
_super.call(this, function (image) { return new spine.webgl.GLTexture(gl, image); });
_super.call(this, function (image) {
return new spine.webgl.GLTexture(gl, image);
});
}
return AssetManager;
}(spine.AssetManager));
@ -4411,6 +4418,60 @@ var spine;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var OrthoCamera = (function () {
function OrthoCamera(viewportWidth, viewportHeight) {
this.position = new webgl.Vector3(0, 0, 0);
this.direction = new webgl.Vector3(0, 0, -1);
this.up = new webgl.Vector3(0, 1, 0);
this.near = 0;
this.far = 100;
this.zoom = 1;
this.viewportWidth = 0;
this.viewportHeight = 0;
this.projectionView = new webgl.Matrix4();
this.inverseProjectionView = new webgl.Matrix4();
this.projection = new webgl.Matrix4();
this.view = new webgl.Matrix4();
this.tmp = new webgl.Vector3();
this.viewportWidth = viewportWidth;
this.viewportHeight = viewportHeight;
this.update();
}
OrthoCamera.prototype.update = function () {
var projection = this.projection;
var view = this.view;
var projectionView = this.projectionView;
var inverseProjectionView = this.inverseProjectionView;
var zoom = this.zoom, viewportWidth = this.viewportWidth, viewportHeight = this.viewportHeight;
projection.ortho(zoom * (-viewportWidth / 2), zoom * (viewportWidth / 2), zoom * (-viewportHeight / 2), zoom * (viewportHeight / 2), this.near, this.far);
view.lookAt(this.position, this.direction, this.up);
projectionView.set(projection.values);
projectionView.multiply(view);
inverseProjectionView.set(projectionView.values).invert();
};
OrthoCamera.prototype.unproject = function (screenCoords) {
var x = screenCoords.x, y = this.viewportHeight - screenCoords.y - 1;
var tmp = this.tmp;
tmp.x = (2 * x) / this.viewportWidth - 1;
tmp.y = (2 * y) / this.viewportHeight - 1;
tmp.z = (2 * screenCoords.z) - 1;
tmp.project(this.inverseProjectionView);
screenCoords.set(tmp.x, tmp.y, tmp.z);
return screenCoords;
};
OrthoCamera.prototype.setViewport = function (viewportWidth, viewportHeight) {
this.viewportWidth = viewportWidth;
this.viewportHeight = viewportHeight;
};
return OrthoCamera;
}());
webgl.OrthoCamera = OrthoCamera;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
@ -4469,6 +4530,80 @@ var spine;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var Input = (function () {
function Input(element) {
this.lastX = 0;
this.lastY = 0;
this.buttonDown = false;
this.listeners = new Array();
this.element = element;
this.setupCallbacks(element);
}
Input.prototype.setupCallbacks = function (element) {
var _this = this;
element.addEventListener("mousedown", function (ev) {
if (ev instanceof MouseEvent) {
var rect = element.getBoundingClientRect();
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
var listeners = _this.listeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i].down(x, y);
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
}
}, true);
element.addEventListener("mousemove", function (ev) {
if (ev instanceof MouseEvent) {
var rect = element.getBoundingClientRect();
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
var listeners = _this.listeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i].moved(x, y);
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
}
}, true);
element.addEventListener("mouseup", function (ev) {
if (ev instanceof MouseEvent) {
var rect = element.getBoundingClientRect();
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
var listeners = _this.listeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i].up(x, y);
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
}
}, true);
element.addEventListener(navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "DOMMouseScroll" : "mousewheel", function (ev) {
}, true);
};
Input.prototype.addListener = function (listener) {
this.listeners.push(listener);
};
Input.prototype.removeListener = function (listener) {
var idx = this.listeners.indexOf(listener);
if (idx > -1) {
this.listeners.splice(idx, 1);
}
};
return Input;
}());
webgl.Input = Input;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
@ -4726,6 +4861,43 @@ var spine;
t[webgl.M33] = m[webgl.M30] * v[webgl.M03] + m[webgl.M31] * v[webgl.M13] + m[webgl.M32] * v[webgl.M23] + m[webgl.M33] * v[webgl.M33];
return this.set(this.temp);
};
Matrix4.prototype.lookAt = function (position, direction, up) {
Matrix4.initTemps();
var xAxis = Matrix4.xAxis, yAxis = Matrix4.yAxis, zAxis = Matrix4.zAxis;
zAxis.setFrom(direction).normalize();
xAxis.setFrom(direction).normalize();
xAxis.cross(up).normalize();
yAxis.setFrom(xAxis).cross(zAxis).normalize();
this.identity();
var val = this.values;
val[webgl.M00] = xAxis.x;
val[webgl.M01] = xAxis.y;
val[webgl.M02] = xAxis.z;
val[webgl.M10] = yAxis.x;
val[webgl.M11] = yAxis.y;
val[webgl.M12] = yAxis.z;
val[webgl.M20] = -zAxis.x;
val[webgl.M21] = -zAxis.y;
val[webgl.M22] = -zAxis.z;
Matrix4.tmpMatrix.identity();
Matrix4.tmpMatrix.values[webgl.M03] = -position.x;
Matrix4.tmpMatrix.values[webgl.M13] = -position.y;
Matrix4.tmpMatrix.values[webgl.M23] = -position.z;
this.multiply(Matrix4.tmpMatrix);
return this;
};
Matrix4.initTemps = function () {
if (Matrix4.xAxis === null)
Matrix4.xAxis = new webgl.Vector3();
if (Matrix4.yAxis === null)
Matrix4.yAxis = new webgl.Vector3();
if (Matrix4.zAxis === null)
Matrix4.zAxis = new webgl.Vector3();
};
Matrix4.xAxis = null;
Matrix4.yAxis = null;
Matrix4.zAxis = null;
Matrix4.tmpMatrix = new Matrix4();
return Matrix4;
}());
webgl.Matrix4 = Matrix4;
@ -4902,7 +5074,7 @@ var spine;
var PolygonBatcher = (function () {
function PolygonBatcher(gl, maxVertices) {
if (maxVertices === void 0) { maxVertices = 10920; }
this.drawing = false;
this.isDrawing = false;
this.shader = null;
this.lastTexture = null;
this.verticesLength = 0;
@ -4916,12 +5088,12 @@ var spine;
}
PolygonBatcher.prototype.begin = function (shader) {
var gl = this.gl;
if (this.drawing)
if (this.isDrawing)
throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
this.drawCalls = 0;
this.shader = shader;
this.lastTexture = null;
this.drawing = true;
this.isDrawing = true;
gl.enable(gl.BLEND);
gl.blendFunc(this.srcBlend, this.dstBlend);
};
@ -4929,7 +5101,7 @@ var spine;
var gl = this.gl;
this.srcBlend = srcBlend;
this.dstBlend = dstBlend;
if (this.drawing) {
if (this.isDrawing) {
this.flush();
gl.blendFunc(this.srcBlend, this.dstBlend);
}
@ -4967,22 +5139,193 @@ var spine;
};
PolygonBatcher.prototype.end = function () {
var gl = this.gl;
if (!this.drawing)
if (!this.isDrawing)
throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
if (this.verticesLength > 0 || this.indicesLength > 0)
this.flush();
this.shader = null;
this.lastTexture = null;
this.drawing = false;
this.isDrawing = false;
gl.disable(gl.BLEND);
};
PolygonBatcher.prototype.getDrawCalls = function () { return this.drawCalls; };
PolygonBatcher.prototype.dispose = function () {
this.mesh.dispose();
};
return PolygonBatcher;
}());
webgl.PolygonBatcher = PolygonBatcher;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var SceneRenderer = (function () {
function SceneRenderer(canvas, gl) {
this.activeRenderer = null;
this.QUAD = [
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
];
this.QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
this.WHITE = new spine.Color(1, 1, 1, 1);
this.canvas = canvas;
this.gl = gl;
this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
this.batcherShader = webgl.Shader.newColoredTextured(gl);
this.batcher = new webgl.PolygonBatcher(gl);
this.shapesShader = webgl.Shader.newColored(gl);
this.shapes = new webgl.ShapeRenderer(gl);
this.skeletonRenderer = new webgl.SkeletonRenderer(gl);
}
SceneRenderer.prototype.begin = function () {
this.camera.update();
this.enableRenderer(this.batcher);
};
SceneRenderer.prototype.drawSkeleton = function (skeleton, premultipliedAlpha) {
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
this.enableRenderer(this.batcher);
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.batcher);
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;
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
};
SceneRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
if (color === void 0) { color = null; }
if (color2 === void 0) { color2 = null; }
this.enableRenderer(this.shapes);
this.shapes.line(x, y, x2, y2, color);
};
SceneRenderer.prototype.triangle = function (filled, x, y, x2, y2, x3, y3, color, color2, color3) {
if (color === void 0) { color = null; }
if (color2 === void 0) { color2 = null; }
if (color3 === void 0) { color3 = null; }
this.enableRenderer(this.shapes);
this.shapes.triangle(filled, x, y, x2, y2, x3, y3, color, color2, color3);
};
SceneRenderer.prototype.quad = function (filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4) {
if (color === void 0) { color = null; }
if (color2 === void 0) { color2 = null; }
if (color3 === void 0) { color3 = null; }
if (color4 === void 0) { color4 = null; }
this.enableRenderer(this.shapes);
this.shapes.quad(filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4);
};
SceneRenderer.prototype.rect = function (filled, x, y, width, height, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.shapes);
this.shapes.rect(filled, x, y, width, height, color);
};
SceneRenderer.prototype.rectLine = function (filled, x1, y1, x2, y2, width, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.shapes);
this.shapes.rectLine(filled, x1, y1, x2, y2, width, color);
};
SceneRenderer.prototype.polygon = function (polygonVertices, offset, count, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.shapes);
this.shapes.polygon(polygonVertices, offset, count, color);
};
SceneRenderer.prototype.circle = function (filled, x, y, radius, color, segments) {
if (color === void 0) { color = null; }
if (segments === void 0) { segments = 0; }
this.enableRenderer(this.shapes);
this.shapes.circle(filled, x, y, radius, color, segments);
};
SceneRenderer.prototype.curve = function (x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.shapes);
this.shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color);
};
SceneRenderer.prototype.end = function () {
if (this.activeRenderer === this.batcher)
this.batcher.end();
else if (this.activeRenderer === this.shapes)
this.shapes.end();
this.activeRenderer = null;
};
SceneRenderer.prototype.resize = function () {
var canvas = this.canvas;
var w = canvas.clientWidth;
var h = canvas.clientHeight;
if (canvas.width != w || canvas.height != h) {
canvas.width = w;
canvas.height = h;
}
this.camera.setViewport(w, h);
this.camera.update();
this.gl.viewport(0, 0, canvas.width, canvas.height);
};
SceneRenderer.prototype.enableRenderer = function (renderer) {
if (this.activeRenderer === renderer)
return;
this.end();
if (renderer instanceof webgl.PolygonBatcher) {
this.batcherShader.bind();
this.batcherShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher;
}
else {
this.shapesShader.bind();
this.shapesShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
this.shapes.begin(this.shapesShader);
this.activeRenderer = this.shapes;
}
};
SceneRenderer.prototype.dispose = function () {
this.batcher.dispose();
this.batcherShader.dispose();
this.shapes.dispose();
this.shapesShader.dispose();
};
return SceneRenderer;
}());
webgl.SceneRenderer = SceneRenderer;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
@ -5136,6 +5479,8 @@ var spine;
this.color = new spine.Color(1, 1, 1, 1);
this.vertexIndex = 0;
this.tmp = new spine.Vector2();
this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
if (maxVertices > 10920)
throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.gl = gl;
@ -5147,6 +5492,18 @@ var spine;
this.shader = shader;
this.vertexIndex = 0;
this.isDrawing = true;
var gl = this.gl;
gl.enable(gl.BLEND);
gl.blendFunc(this.srcBlend, this.dstBlend);
};
ShapeRenderer.prototype.setBlendMode = function (srcBlend, dstBlend) {
var gl = this.gl;
this.srcBlend = srcBlend;
this.dstBlend = dstBlend;
if (this.isDrawing) {
this.flush();
gl.blendFunc(this.srcBlend, this.dstBlend);
}
};
ShapeRenderer.prototype.setColor = function (color) {
this.color.setFromColor(color);
@ -5161,18 +5518,15 @@ var spine;
color = this.color;
this.vertex(x, y, color);
};
ShapeRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
ShapeRenderer.prototype.line = function (x, y, x2, y2, color) {
if (color === void 0) { color = null; }
if (color2 === void 0) { color2 = null; }
this.check(ShapeType.Line, 2);
var vertices = this.mesh.getVertices();
var idx = this.vertexIndex;
if (color === null)
color = this.color;
if (color2 === null)
color2 = this.color;
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x2, y2, color);
};
ShapeRenderer.prototype.triangle = function (filled, x, y, x2, y2, x3, y3, color, color2, color3) {
if (color === void 0) { color = null; }
@ -5304,8 +5658,9 @@ var spine;
this.vertex(x2, y2, color);
}
};
ShapeRenderer.prototype.circle = function (filled, x, y, radius, segments, color) {
ShapeRenderer.prototype.circle = function (filled, x, y, radius, color, segments) {
if (color === void 0) { color = null; }
if (segments === void 0) { segments = 0; }
if (segments === 0)
segments = Math.max(1, (6 * spine.MathUtils.cbrt(radius)) | 0);
if (segments <= 0)
@ -5406,6 +5761,7 @@ var spine;
this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0;
this.gl.disable(this.gl.BLEND);
};
ShapeRenderer.prototype.check = function (shapeType, numVertices) {
if (!this.isDrawing)
@ -5591,8 +5947,7 @@ var spine;
shapes.setColor(this.boneOriginColor);
for (var i = 0, n = bones.length; i < n; i++) {
var bone = bones[i];
shapes.setColor(SkeletonDebugRenderer.GREEN);
shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, 8);
shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, SkeletonDebugRenderer.GREEN, 8);
}
}
shapes.end();
@ -5661,11 +6016,23 @@ var spine;
var webgl;
(function (webgl) {
var Vector3 = (function () {
function Vector3() {
function Vector3(x, y, z) {
if (x === void 0) { x = 0; }
if (y === void 0) { y = 0; }
if (z === void 0) { z = 0; }
this.x = 0;
this.y = 0;
this.z = 0;
this.x = x;
this.y = y;
this.z = z;
}
Vector3.prototype.setFrom = function (v) {
this.x = v.x;
this.y = v.y;
this.z = v.z;
return this;
};
Vector3.prototype.set = function (x, y, z) {
this.x = x;
this.y = y;

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

File diff suppressed because one or more lines are too long

6
spine-ts/core/src/Utils.ts
View File

@ -39,6 +39,12 @@ module spine {
}
export class Color {
public static WHITE = new Color(1, 1, 1, 1);
public static RED = new Color(1, 0, 0, 1);
public static GREEN = new Color(0, 1, 0, 1);
public static BLUE = new Color(0, 0, 1, 1);
public static MAGENTA = new Color(1, 0, 1, 1);
constructor (public r: number = 0, public g: number = 0, public b: number = 0, public a: number = 0) {
}

103
spine-ts/webgl/example/test.html
View File

@ -8,55 +8,100 @@
</style>
<body>
<canvas id="canvas"></canvas>
<center><div id="info" style="color: #fff; position: fixed; top: 0; width: 100%"></div></center>
<script>
var canvas, gl, shader, renderer, mvp, lastFrameTime = Date.now() / 1000;
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() {
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 });
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
shader = spine.webgl.Shader.newColored(gl);
renderer = new spine.webgl.ShapeRenderer(gl);
mvp = new spine.webgl.Matrix4();
requestAnimationFrame(render);
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) {
renderer.camera.unproject(coords.set(x, y, 0));
var bone = skeleton.findBone(boneName);
temp.set(bone.worldX, bone.worldY, 0);
console.log(temp.x + ", " + temp.y + "; " + coords.x + ", " + coords.y);
if (temp.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));
/*target.worldToLocal(temp2.set(coords.x, coords.y));
target.x = temp2.x;
target.y = temp2.y;
console.log(temp2.x + ", " + temp2.y + "; " + coords.x + ", " + coords.y);
skeleton.updateWorldTransform();*/
skeleton.x = coords.x;
skeleton.y = coords.y;
}
}
})
assetManager.loadTexture("assets/spineboy.png");
assetManager.loadText("assets/spineboy.json");
assetManager.loadText("assets/spineboy.atlas");
requestAnimationFrame(loading);
}
function render() {
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.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;
resize();
renderer.resize();
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
shader.bind();
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
renderer.begin(shader);
renderer.setColorWith(1, 0, 0, 1);
// renderer.line(0, 0, canvas.width, canvas.height);
renderer.triangle(true, 100, 100, 200, 100, 150, 200, new spine.Color(1, 0, 0, 1), new spine.Color(0, 1, 0, 1), new spine.Color(0, 0, 1, 1));
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();
shader.unbind();
requestAnimationFrame(render);
}
function resize () {
var w = canvas.clientWidth;
var h = canvas.clientHeight;
if (canvas.width != w || canvas.height != h) {
canvas.width = w;
canvas.height = h;
}
mvp.ortho2d(0, 0, w, h);
gl.viewport(0, 0, canvas.width, canvas.height);
}
(function() {
init();
})();

4
spine-ts/webgl/src/AssetManager.ts
View File

@ -32,7 +32,9 @@
module spine.webgl {
export class AssetManager extends spine.AssetManager {
constructor (gl: WebGLRenderingContext) {
super((image: HTMLImageElement) => { return new spine.webgl.GLTexture(gl, image); });
super((image: HTMLImageElement) => {
return new spine.webgl.GLTexture(gl, image);
});
}
}
}

86
spine-ts/webgl/src/Camera.ts Normal file
View File

@ -0,0 +1,86 @@
/******************************************************************************
* Spine Runtimes Software License
* Version 2.5
*
* Copyright (c) 2013-2016, Esoteric Software
* All rights reserved.
*
* You are granted a perpetual, non-exclusive, non-sublicensable, and
* non-transferable license to use, install, execute, and perform the Spine
* Runtimes software and derivative works solely for personal or internal
* use. Without the written permission of Esoteric Software (see Section 2 of
* the Spine Software License Agreement), you may not (a) modify, translate,
* adapt, or develop new applications using the Spine Runtimes or otherwise
* create derivative works or improvements of the Spine Runtimes or (b) remove,
* delete, alter, or obscure any trademarks or any copyright, trademark, patent,
* or other intellectual property or proprietary rights notices on or in the
* Software, including any copy thereof. Redistributions in binary or source
* form must include this license and terms.
*
* THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
* EVENT SHALL ESOTERIC SOFTWARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS INTERRUPTION, OR LOSS OF
* USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
* IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
module spine.webgl {
export class OrthoCamera {
position = new Vector3(0, 0, 0);
direction = new Vector3(0, 0, -1);
up = new Vector3(0, 1, 0);
near = 0;
far = 100;
zoom = 1;
viewportWidth = 0;
viewportHeight = 0;
projectionView = new Matrix4();
inverseProjectionView = new Matrix4();
projection = new Matrix4();
view = new Matrix4();
private tmp = new Vector3();
constructor (viewportWidth: number, viewportHeight: number) {
this.viewportWidth = viewportWidth;
this.viewportHeight = viewportHeight;
this.update();
}
update () {
let projection = this.projection;
let view = this.view;
let projectionView = this.projectionView;
let inverseProjectionView = this.inverseProjectionView;
let zoom = this.zoom, viewportWidth = this.viewportWidth, viewportHeight = this.viewportHeight;
projection.ortho(zoom * (-viewportWidth / 2), zoom * (viewportWidth / 2),
zoom * (-viewportHeight / 2), zoom * (viewportHeight / 2),
this.near, this.far);
view.lookAt(this.position, this.direction, this.up);
projectionView.set(projection.values);
projectionView.multiply(view);
inverseProjectionView.set(projectionView.values).invert();
}
unproject (screenCoords: Vector3) {
let x = screenCoords.x, y = this.viewportHeight - screenCoords.y - 1;
let tmp = this.tmp;
tmp.x = (2 * x) / this.viewportWidth - 1;
tmp.y = (2 * y) / this.viewportHeight - 1;
tmp.z = (2 * screenCoords.z) - 1;
tmp.project(this.inverseProjectionView);
screenCoords.set(tmp.x, tmp.y, tmp.z);
return screenCoords;
}
setViewport(viewportWidth: number, viewportHeight: number) {
this.viewportWidth = viewportWidth;
this.viewportHeight = viewportHeight;
}
}
}

116
spine-ts/webgl/src/Input.ts Normal file
View File

@ -0,0 +1,116 @@
/******************************************************************************
* Spine Runtimes Software License
* Version 2.5
*
* Copyright (c) 2013-2016, Esoteric Software
* All rights reserved.
*
* You are granted a perpetual, non-exclusive, non-sublicensable, and
* non-transferable license to use, install, execute, and perform the Spine
* Runtimes software and derivative works solely for personal or internal
* use. Without the written permission of Esoteric Software (see Section 2 of
* the Spine Software License Agreement), you may not (a) modify, translate,
* adapt, or develop new applications using the Spine Runtimes or otherwise
* create derivative works or improvements of the Spine Runtimes or (b) remove,
* delete, alter, or obscure any trademarks or any copyright, trademark, patent,
* or other intellectual property or proprietary rights notices on or in the
* Software, including any copy thereof. Redistributions in binary or source
* form must include this license and terms.
*
* THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
* EVENT SHALL ESOTERIC SOFTWARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS INTERRUPTION, OR LOSS OF
* USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
* IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
module spine.webgl {
export class Input {
element: HTMLElement;
lastX = 0;
lastY = 0;
buttonDown = false;
private listeners = new Array<InputListener>();
constructor (element: HTMLElement) {
this.element = element;
this.setupCallbacks(element);
}
private setupCallbacks(element: HTMLElement) {
element.addEventListener("mousedown", (ev: UIEvent) => {
if (ev instanceof MouseEvent) {
let rect = element.getBoundingClientRect();
let x = ev.clientX - rect.left;
let y = ev.clientY - rect.top;
let listeners = this.listeners;
for (let i = 0; i < listeners.length; i++) {
listeners[i].down(x, y);
}
this.lastX = x;
this.lastY = y;
this.buttonDown = true;
}
}, true);
element.addEventListener("mousemove", (ev: UIEvent) => {
if (ev instanceof MouseEvent) {
let rect = element.getBoundingClientRect();
let x = ev.clientX - rect.left;
let y = ev.clientY - rect.top;
let listeners = this.listeners;
for (let i = 0; i < listeners.length; i++) {
listeners[i].moved(x, y);
}
this.lastX = x;
this.lastY = y;
this.buttonDown = true;
}
}, true);
element.addEventListener("mouseup", (ev: UIEvent) => {
if (ev instanceof MouseEvent) {
let rect = element.getBoundingClientRect();
let x = ev.clientX - rect.left;
let y = ev.clientY - rect.top;
let listeners = this.listeners;
for (let i = 0; i < listeners.length; i++) {
listeners[i].up(x, y);
}
this.lastX = x;
this.lastY = y;
this.buttonDown = true;
}
}, true);
element.addEventListener(navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "DOMMouseScroll" : "mousewheel", (ev: UIEvent) => {
}, true);
}
addListener(listener: InputListener) {
this.listeners.push(listener);
}
removeListener(listener: InputListener) {
let idx = this.listeners.indexOf(listener);
if (idx > -1) {
this.listeners.splice(idx, 1);
}
}
}
export interface InputListener {
down(x: number, y: number): void;
up(x: number, y: number): void;
moved(x: number, y: number): void;
}
}

39
spine-ts/webgl/src/Matrix4.ts
View File

@ -50,6 +50,11 @@ module spine.webgl {
export class Matrix4 {
temp: Float32Array = new Float32Array(16);
values: Float32Array = new Float32Array(16);
private static xAxis: Vector3 = null;
private static yAxis: Vector3 = null;
private static zAxis: Vector3 = null;
private static tmpMatrix = new Matrix4();
constructor () {
let v = this.values;
@ -299,5 +304,39 @@ module spine.webgl {
t[M33] = m[M30] * v[M03] + m[M31] * v[M13] + m[M32] * v[M23] + m[M33] * v[M33];
return this.set(this.temp);
}
lookAt (position: Vector3, direction: Vector3, up: Vector3) {
Matrix4.initTemps();
let xAxis = Matrix4.xAxis, yAxis = Matrix4.yAxis, zAxis = Matrix4.zAxis;
zAxis.setFrom(direction).normalize();
xAxis.setFrom(direction).normalize();
xAxis.cross(up).normalize();
yAxis.setFrom(xAxis).cross(zAxis).normalize();
this.identity();
let val = this.values;
val[M00] = xAxis.x;
val[M01] = xAxis.y;
val[M02] = xAxis.z;
val[M10] = yAxis.x;
val[M11] = yAxis.y;
val[M12] = yAxis.z;
val[M20] = -zAxis.x;
val[M21] = -zAxis.y;
val[M22] = -zAxis.z;
Matrix4.tmpMatrix.identity();
Matrix4.tmpMatrix.values[M03] = -position.x;
Matrix4.tmpMatrix.values[M13] = -position.y;
Matrix4.tmpMatrix.values[M23] = -position.z;
this.multiply(Matrix4.tmpMatrix)
return this;
}
static initTemps() {
if (Matrix4.xAxis === null) Matrix4.xAxis = new Vector3();
if (Matrix4.yAxis === null) Matrix4.yAxis = new Vector3();
if (Matrix4.zAxis === null) Matrix4.zAxis = new Vector3();
}
}
}

24
spine-ts/webgl/src/PolygonBatcher.ts
View File

@ -30,12 +30,12 @@
*****************************************************************************/
module spine.webgl {
export class PolygonBatcher {
export class PolygonBatcher implements Disposable {
private gl: WebGLRenderingContext;
private drawCalls: number;
private drawing = false;
private isDrawing = false;
private mesh: Mesh;
private shader: Shader = null;
private shader: Shader = null;
private lastTexture: GLTexture = null;
private verticesLength = 0;
private indicesLength = 0;
@ -45,16 +45,16 @@ module spine.webgl {
constructor (gl: WebGLRenderingContext, maxVertices: number = 10920) {
if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.gl = gl;
this.mesh = new Mesh(gl, [new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute()], maxVertices, maxVertices * 3);
this.mesh = new Mesh(gl, [new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute()], maxVertices, maxVertices * 3);
}
begin (shader: Shader) {
begin (shader: Shader) {
let gl = this.gl;
if (this.drawing) throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
if (this.isDrawing) throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
this.drawCalls = 0;
this.shader = shader;
this.lastTexture = null;
this.drawing = true;
this.isDrawing = true;
gl.enable(gl.BLEND);
gl.blendFunc(this.srcBlend, this.dstBlend);
@ -64,7 +64,7 @@ module spine.webgl {
let gl = this.gl;
this.srcBlend = srcBlend;
this.dstBlend = dstBlend;
if (this.drawing) {
if (this.isDrawing) {
this.flush();
gl.blendFunc(this.srcBlend, this.dstBlend);
}
@ -107,15 +107,19 @@ module spine.webgl {
end () {
let gl = this.gl;
if (!this.drawing) throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
if (!this.isDrawing) throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
if (this.verticesLength > 0 || this.indicesLength > 0) this.flush();
this.shader = null;
this.lastTexture = null;
this.drawing = false;
this.isDrawing = false;
gl.disable(gl.BLEND);
}
getDrawCalls () { return this.drawCalls; }
dispose () {
this.mesh.dispose();
}
}
}

195
spine-ts/webgl/src/SceneRenderer.ts Normal file
View File

@ -0,0 +1,195 @@
/******************************************************************************
* Spine Runtimes Software License
* Version 2.5
*
* Copyright (c) 2013-2016, Esoteric Software
* All rights reserved.
*
* You are granted a perpetual, non-exclusive, non-sublicensable, and
* non-transferable license to use, install, execute, and perform the Spine
* Runtimes software and derivative works solely for personal or internal
* use. Without the written permission of Esoteric Software (see Section 2 of
* the Spine Software License Agreement), you may not (a) modify, translate,
* adapt, or develop new applications using the Spine Runtimes or otherwise
* create derivative works or improvements of the Spine Runtimes or (b) remove,
* delete, alter, or obscure any trademarks or any copyright, trademark, patent,
* or other intellectual property or proprietary rights notices on or in the
* Software, including any copy thereof. Redistributions in binary or source
* form must include this license and terms.
*
* THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
* EVENT SHALL ESOTERIC SOFTWARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS INTERRUPTION, OR LOSS OF
* USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
* IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
module spine.webgl {
export class SceneRenderer implements Disposable {
gl: WebGLRenderingContext;
canvas: HTMLCanvasElement;
camera: OrthoCamera;
private batcherShader: Shader;
private batcher: PolygonBatcher;
private shapes: ShapeRenderer;
private shapesShader: Shader;
private activeRenderer: PolygonBatcher | ShapeRenderer = null;
private skeletonRenderer: SkeletonRenderer;
private QUAD = [
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
];
private QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
private WHITE = new Color(1, 1, 1, 1);
constructor (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) {
this.canvas = canvas;
this.gl = gl;
this.camera = new OrthoCamera(canvas.width, canvas.height);
this.batcherShader = Shader.newColoredTextured(gl);
this.batcher = new PolygonBatcher(gl);
this.shapesShader = Shader.newColored(gl);
this.shapes = new ShapeRenderer(gl);
this.skeletonRenderer = new SkeletonRenderer(gl);
}
begin () {
this.camera.update();
this.enableRenderer(this.batcher);
}
drawSkeleton (skeleton: Skeleton, premultipliedAlpha = false) {
this.enableRenderer(this.batcher);
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton);
}
drawTexture (texture: GLTexture, x: number, y: number, width: number, height: number, color: Color = null) {
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;
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
}
line (x: number, y: number, x2: number, y2: number, color: Color = null, color2: Color = null) {
this.enableRenderer(this.shapes);
this.shapes.line(x, y, x2, y2, color);
}
triangle (filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color: Color = null, color2: Color = null, color3: Color = null) {
this.enableRenderer(this.shapes);
this.shapes.triangle(filled, x, y, x2, y2, x3, y3, color, color2, color3);
}
quad (filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color: Color = null, color2: Color = null, color3: Color = null, color4: Color = null) {
this.enableRenderer(this.shapes);
this.shapes.quad(filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4);
}
rect (filled: boolean, x: number, y: number, width: number, height: number, color: Color = null) {
this.enableRenderer(this.shapes);
this.shapes.rect(filled, x, y, width, height, color);
}
rectLine (filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color: Color = null) {
this.enableRenderer(this.shapes);
this.shapes.rectLine(filled, x1, y1, x2, y2, width, color);
}
polygon (polygonVertices: ArrayLike<number>, offset: number, count: number, color: Color = null) {
this.enableRenderer(this.shapes);
this.shapes.polygon(polygonVertices, offset, count, color);
}
circle (filled: boolean, x: number, y: number, radius: number, color: Color = null, segments: number = 0) {
this.enableRenderer(this.shapes);
this.shapes.circle(filled, x, y, radius, color, segments);
}
curve (x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color: Color = null) {
this.enableRenderer(this.shapes);
this.shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color);
}
end () {
if (this.activeRenderer === this.batcher) this.batcher.end();
else if (this.activeRenderer === this.shapes) this.shapes.end();
this.activeRenderer = null;
}
resize () {
let canvas = this.canvas;
var w = canvas.clientWidth;
var h = canvas.clientHeight;
if (canvas.width != w || canvas.height != h) {
canvas.width = w;
canvas.height = h;
}
this.camera.setViewport(w, h);
this.camera.update();
this.gl.viewport(0, 0, canvas.width, canvas.height);
}
private enableRenderer(renderer: PolygonBatcher | ShapeRenderer) {
if (this.activeRenderer === renderer) return;
this.end();
if (renderer instanceof PolygonBatcher) {
this.batcherShader.bind();
this.batcherShader.setUniform4x4f(Shader.MVP_MATRIX, this.camera.projectionView.values);
this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher;
} else {
this.shapesShader.bind();
this.shapesShader.setUniform4x4f(Shader.MVP_MATRIX, this.camera.projectionView.values);
this.shapes.begin(this.shapesShader);
this.activeRenderer = this.shapes;
}
}
dispose () {
this.batcher.dispose();
this.batcherShader.dispose();
this.shapes.dispose();
this.shapesShader.dispose();
}
}
}

34
spine-ts/webgl/src/ShapeRenderer.ts
View File

@ -36,21 +36,37 @@ module spine.webgl {
private mesh: Mesh;
private shapeType = ShapeType.Filled;
private color = new Color(1, 1, 1, 1);
private shader: Shader;
private shader: Shader;
private vertexIndex = 0;
private tmp = new Vector2();
private srcBlend: number = WebGLRenderingContext.SRC_ALPHA;
private dstBlend: number = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
constructor (gl: WebGLRenderingContext, maxVertices: number = 10920) {
if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.gl = gl;
this.mesh = new Mesh(gl, [new Position2Attribute(), new ColorAttribute()], maxVertices, 0);
this.mesh = new Mesh(gl, [new Position2Attribute(), new ColorAttribute()], maxVertices, 0);
}
begin (shader: Shader) {
if (this.isDrawing) throw new Error("ShapeRenderer.begin() has already been called");
if (this.isDrawing) throw new Error("ShapeRenderer.begin() has already been called");
this.shader = shader;
this.vertexIndex = 0;
this.isDrawing = true;
let gl = this.gl;
gl.enable(gl.BLEND);
gl.blendFunc(this.srcBlend, this.dstBlend);
}
setBlendMode (srcBlend: number, dstBlend: number) {
let gl = this.gl;
this.srcBlend = srcBlend;
this.dstBlend = dstBlend;
if (this.isDrawing) {
this.flush();
gl.blendFunc(this.srcBlend, this.dstBlend);
}
}
setColor (color: Color) {
@ -67,14 +83,13 @@ module spine.webgl {
this.vertex(x, y, color);
}
line (x: number, y: number, x2: number, y2: number, color: Color = null, color2: Color = null) {
line (x: number, y: number, x2: number, y2: number, color: Color = null) {
this.check(ShapeType.Line, 2);
let vertices = this.mesh.getVertices();
let idx = this.vertexIndex;
if (color === null) color = this.color;
if (color2 === null) color2 = this.color;
if (color === null) color = this.color;
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x2, y2, color);
}
triangle (filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color: Color = null, color2: Color = null, color3: Color = null) {
@ -192,7 +207,7 @@ module spine.webgl {
}
}
circle (filled: boolean, x: number, y: number, radius: number, segments: number, color: Color = null) {
circle (filled: boolean, x: number, y: number, radius: number, color: Color = null, segments: number = 0) {
if (segments === 0) segments = Math.max(1, (6 * MathUtils.cbrt(radius)) | 0);
if (segments <= 0) throw new Error("segments must be > 0.");
if (color === null) color = this.color;
@ -302,6 +317,7 @@ module spine.webgl {
this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0;
this.gl.disable(this.gl.BLEND);
}
private check(shapeType: ShapeType, numVertices: number) {
@ -316,7 +332,7 @@ module spine.webgl {
}
dispose () {
this.mesh.dispose();
this.mesh.dispose();
}
}

5
spine-ts/webgl/src/SkeletonDebugRenderer.ts
View File

@ -195,9 +195,8 @@ module spine.webgl {
if (this.drawBones) {
shapes.setColor(this.boneOriginColor);
for (let i = 0, n = bones.length; i < n; i++) {
let bone = bones[i];
shapes.setColor(SkeletonDebugRenderer.GREEN);
shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, 8);
let bone = bones[i];
shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, SkeletonDebugRenderer.GREEN, 8);
}
}

13
spine-ts/webgl/src/Vector3.ts
View File

@ -35,6 +35,19 @@ module spine.webgl {
y = 0;
z = 0;
constructor (x: number = 0, y: number = 0, z: number = 0) {
this.x = x;
this.y = y;
this.z = z;
}
setFrom(v: Vector3): Vector3 {
this.x = v.x;
this.y = v.y;
this.z = v.z;
return this;
}
set (x: number, y: number, z: number): Vector3 {
this.x = x;
this.y = y;