UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 07:14:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Added ShapeRenderer and SkeletonDebugRenderer, added to WebGL test

Browse Source
This commit is contained in:
badlogic 2016-08-23 14:11:45 +02:00
parent 8a1e1b5f50
commit ef4b04756c
25 changed files with 2494 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -552,6 +552,8 @@ declare module spine {
intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment;
intersectsSegmentPolygon(polygon: ArrayLike<number>, x1: number, y1: number, x2: number, y2: number): boolean;
getPolygon(boundingBox: BoundingBoxAttachment): ArrayLike<number>;
getWidth(): number;
getHeight(): number;
}
}
declare module spine {
@ -747,6 +749,7 @@ declare module spine {
static sinDeg(degrees: number): number;
static signum(value: number): number;
static toInt(x: number): number;
static cbrt(x: number): number;
}
class Utils {
static SUPPORTS_TYPED_ARRAYS: boolean;
@ -773,6 +776,8 @@ declare module spine {
y: number;
constructor(x?: number, y?: number);
set(x: number, y: number): Vector2;
length(): number;
normalize(): this;
}
}
declare module spine {
@ -809,6 +814,7 @@ declare module spine {
}
declare module spine {
class BoundingBoxAttachment extends VertexAttachment {
color: Color;
constructor(name: string);
}
}
@ -837,6 +843,7 @@ declare module spine {
lengths: Array<number>;
closed: boolean;
constantSpeed: boolean;
color: Color;
constructor(name: string);
}
}
@ -1115,6 +1122,69 @@ declare module spine.webgl {
static newColored(gl: WebGLRenderingContext): Shader;
}
}
declare module spine.webgl {
class ShapeRenderer implements Disposable {
private gl;
private isDrawing;
private mesh;
private shapeType;
private color;
private shader;
private vertexIndex;
private tmp;
constructor(gl: WebGLRenderingContext, maxVertices?: number);
begin(shader: Shader): 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;
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;
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;
private flush();
private check(shapeType, numVertices);
dispose(): void;
}
enum ShapeType {
Point,
Line,
Filled,
}
}
declare module spine.webgl {
class SkeletonDebugRenderer implements Disposable {
boneLineColor: Color;
boneOriginColor: Color;
attachmentLineColor: Color;
triangleLineColor: Color;
aabbColor: Color;
drawBones: boolean;
drawRegionAttachments: boolean;
drawBoundingBoxes: boolean;
drawMeshHull: boolean;
drawMeshTriangles: boolean;
drawPaths: boolean;
premultipliedAlpha: boolean;
scale: number;
boneWidth: number;
private gl;
private shapes;
private bounds;
private temp;
private static LIGHT_GRAY;
private static GREEN;
constructor(gl: WebGLRenderingContext);
draw(shader: Shader, skeleton: Skeleton): void;
dispose(): void;
}
}
declare module spine.webgl {
class SkeletonRenderer {
static QUAD_TRIANGLES: number[];

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

@ -2761,6 +2761,12 @@ var spine;
var index = this.boundingBoxes.indexOf(boundingBox);
return index == -1 ? null : this.polygons[index];
};
SkeletonBounds.prototype.getWidth = function () {
return this.maxX - this.minX;
};
SkeletonBounds.prototype.getHeight = function () {
return this.maxY - this.minY;
};
return SkeletonBounds;
}());
spine.SkeletonBounds = SkeletonBounds;
@ -3115,6 +3121,9 @@ var spine;
if (box == null)
return null;
this.readVertices(map, box, map.vertexCount << 1);
var color = this.getValue(map, "color", null);
if (color != null)
box.color.setFromString(color);
return box;
}
case "mesh":
@ -3153,6 +3162,9 @@ var spine;
for (var i = 0; i < map.lengths.length; i++)
lengths[i++] = map.lengths[i] * scale;
path.lengths = lengths;
var color = this.getValue(map, "color", null);
if (color != null)
path.color.setFromString(color);
return path;
}
}
@ -4025,6 +4037,10 @@ var spine;
MathUtils.toInt = function (x) {
return x > 0 ? Math.floor(x) : Math.ceil(x);
};
MathUtils.cbrt = function (x) {
var y = Math.pow(Math.abs(x), 1 / 3);
return x < 0 ? -y : y;
};
MathUtils.PI = 3.1415927;
MathUtils.PI2 = MathUtils.PI * 2;
MathUtils.radiansToDegrees = 180 / MathUtils.PI;
@ -4123,6 +4139,19 @@ var spine;
this.y = y;
return this;
};
Vector2.prototype.length = function () {
var x = this.x;
var y = this.y;
return Math.sqrt(x * x + y * y);
};
Vector2.prototype.normalize = function () {
var len = this.length();
if (len != 0) {
this.x /= len;
this.y /= len;
}
return this;
};
return Vector2;
}());
spine.Vector2 = Vector2;
@ -4231,6 +4260,7 @@ var spine;
__extends(BoundingBoxAttachment, _super);
function BoundingBoxAttachment(name) {
_super.call(this, name);
this.color = new spine.Color(1, 1, 1, 1);
}
return BoundingBoxAttachment;
}(spine.VertexAttachment));
@ -4374,6 +4404,7 @@ var spine;
_super.call(this, name);
this.closed = false;
this.constantSpeed = false;
this.color = new spine.Color(1, 1, 1, 1);
}
return PathAttachment;
}(spine.VertexAttachment));
@ -5172,7 +5203,7 @@ var spine;
this.indicesLength = indices.length;
};
Mesh.prototype.draw = function (shader, primitiveType) {
this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength);
this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength / this.elementsPerVertex);
};
Mesh.prototype.drawWithOffset = function (shader, primitiveType, offset, count) {
var gl = this.gl;
@ -5515,6 +5546,489 @@ var spine;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var ShapeRenderer = (function () {
function ShapeRenderer(gl, maxVertices) {
if (maxVertices === void 0) { maxVertices = 10920; }
this.isDrawing = false;
this.shapeType = ShapeType.Filled;
this.color = new spine.Color(1, 1, 1, 1);
this.vertexIndex = 0;
this.tmp = new spine.Vector2();
if (maxVertices > 10920)
throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.gl = gl;
this.mesh = new webgl.Mesh(gl, [new webgl.Position2Attribute(), new webgl.ColorAttribute()], maxVertices, 0);
}
ShapeRenderer.prototype.begin = function (shader) {
if (this.isDrawing)
throw new Error("ShapeRenderer.begin() has already been called");
this.shader = shader;
this.vertexIndex = 0;
this.isDrawing = true;
};
ShapeRenderer.prototype.setColor = function (color) {
this.color.setFromColor(color);
};
ShapeRenderer.prototype.setColorWith = function (r, g, b, a) {
this.color.set(r, g, b, a);
};
ShapeRenderer.prototype.point = function (x, y, color) {
if (color === void 0) { color = null; }
this.check(ShapeType.Point, 1);
if (color === null)
color = this.color;
this.vertex(x, y, color);
};
ShapeRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
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);
};
ShapeRenderer.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.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
var vertices = this.mesh.getVertices();
var idx = this.vertexIndex;
if (color === null)
color = this.color;
if (color2 === null)
color2 = this.color;
if (color3 === null)
color3 = this.color;
if (filled) {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x3, y3, color3);
}
else {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x2, y2, color);
this.vertex(x3, y3, color2);
this.vertex(x3, y3, color);
this.vertex(x, y, color2);
}
};
ShapeRenderer.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.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
var vertices = this.mesh.getVertices();
var idx = this.vertexIndex;
if (color === null)
color = this.color;
if (color2 === null)
color2 = this.color;
if (color3 === null)
color3 = this.color;
if (color4 === null)
color4 = this.color;
if (filled) {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x3, y3, color3);
this.vertex(x3, y3, color3);
this.vertex(x4, y4, color4);
this.vertex(x, y, color);
}
else {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x2, y2, color2);
this.vertex(x3, y3, color3);
this.vertex(x3, y3, color3);
this.vertex(x4, y4, color4);
this.vertex(x4, y4, color4);
this.vertex(x, y, color);
}
};
ShapeRenderer.prototype.rect = function (filled, x, y, width, height, color) {
if (color === void 0) { color = null; }
this.quad(filled, x, y, x + width, y, x + width, y + height, x, y + height, color, color, color, color);
};
ShapeRenderer.prototype.rectLine = function (filled, x1, y1, x2, y2, width, color) {
if (color === void 0) { color = null; }
this.check(filled ? ShapeType.Filled : ShapeType.Line, 8);
if (color === null)
color = this.color;
var t = this.tmp.set(y2 - y1, x1 - x2);
t.normalize();
width *= 0.5;
var tx = t.x * width;
var ty = t.y * width;
if (!filled) {
this.vertex(x1 + tx, y1 + ty, color);
this.vertex(x1 - tx, y1 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x2 - tx, y2 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x1 + tx, y1 + ty, color);
this.vertex(x2 - tx, y2 - ty, color);
this.vertex(x1 - tx, y1 - ty, color);
}
else {
this.vertex(x1 + tx, y1 + ty, color);
this.vertex(x1 - tx, y1 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x2 - tx, y2 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x1 - tx, y1 - ty, color);
}
};
ShapeRenderer.prototype.x = function (x, y, size) {
this.line(x - size, y - size, x + size, y + size);
this.line(x - size, y + size, x + size, y - size);
};
ShapeRenderer.prototype.polygon = function (polygonVertices, offset, count, color) {
if (color === void 0) { color = null; }
if (count < 3)
throw new Error("Polygon must contain at least 3 vertices");
this.check(ShapeType.Line, count * 2);
if (color === null)
color = this.color;
var vertices = this.mesh.getVertices();
var idx = this.vertexIndex;
offset <<= 1;
count <<= 1;
var firstX = polygonVertices[offset];
var firstY = polygonVertices[offset + 1];
var last = offset + count;
for (var i = offset, n = offset + count - 2; i < n; i += 2) {
var x1 = polygonVertices[i];
var y1 = polygonVertices[i + 1];
var x2 = 0;
var y2 = 0;
if (i + 2 >= last) {
x2 = firstX;
y2 = firstY;
}
else {
x2 = polygonVertices[i + 2];
y2 = polygonVertices[i + 3];
}
this.vertex(x1, y1, color);
this.vertex(x2, y2, color);
}
};
ShapeRenderer.prototype.circle = function (filled, x, y, radius, segments, color) {
if (color === void 0) { color = null; }
if (segments === 0)
segments = Math.max(1, (6 * spine.MathUtils.cbrt(radius)) | 0);
if (segments <= 0)
throw new Error("segments must be > 0.");
if (color === null)
color = this.color;
var angle = 2 * spine.MathUtils.PI / segments;
var cos = Math.cos(angle);
var sin = Math.sin(angle);
var cx = radius, cy = 0;
if (!filled) {
this.check(ShapeType.Line, segments * 2 + 2);
for (var i = 0; i < segments; i++) {
this.vertex(x + cx, y + cy, color);
var temp_1 = cx;
cx = cos * cx - sin * cy;
cy = sin * temp_1 + cos * cy;
this.vertex(x + cx, y + cy, color);
}
this.vertex(x + cx, y + cy, color);
}
else {
this.check(ShapeType.Filled, segments * 3 + 3);
segments--;
for (var i = 0; i < segments; i++) {
this.vertex(x, y, color);
this.vertex(x + cx, y + cy, color);
var temp_2 = cx;
cx = cos * cx - sin * cy;
cy = sin * temp_2 + cos * cy;
this.vertex(x + cx, y + cy, color);
}
this.vertex(x, y, color);
this.vertex(x + cx, y + cy, color);
}
var temp = cx;
cx = radius;
cy = 0;
this.vertex(x + cx, y + cy, color);
};
ShapeRenderer.prototype.curve = function (x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color) {
if (color === void 0) { color = null; }
this.check(ShapeType.Line, segments * 2 + 2);
if (color === null)
color = this.color;
var subdiv_step = 1 / segments;
var subdiv_step2 = subdiv_step * subdiv_step;
var subdiv_step3 = subdiv_step * subdiv_step * subdiv_step;
var pre1 = 3 * subdiv_step;
var pre2 = 3 * subdiv_step2;
var pre4 = 6 * subdiv_step2;
var pre5 = 6 * subdiv_step3;
var tmp1x = x1 - cx1 * 2 + cx2;
var tmp1y = y1 - cy1 * 2 + cy2;
var tmp2x = (cx1 - cx2) * 3 - x1 + x2;
var tmp2y = (cy1 - cy2) * 3 - y1 + y2;
var fx = x1;
var fy = y1;
var dfx = (cx1 - x1) * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3;
var dfy = (cy1 - y1) * pre1 + tmp1y * pre2 + tmp2y * subdiv_step3;
var ddfx = tmp1x * pre4 + tmp2x * pre5;
var ddfy = tmp1y * pre4 + tmp2y * pre5;
var dddfx = tmp2x * pre5;
var dddfy = tmp2y * pre5;
while (segments-- > 0) {
this.vertex(fx, fy, color);
fx += dfx;
fy += dfy;
dfx += ddfx;
dfy += ddfy;
ddfx += dddfx;
ddfy += dddfy;
this.vertex(fx, fy, color);
}
this.vertex(fx, fy, color);
this.vertex(x2, y2, color);
};
ShapeRenderer.prototype.vertex = function (x, y, color) {
var idx = this.vertexIndex;
var vertices = this.mesh.getVertices();
vertices[idx++] = x;
vertices[idx++] = y;
vertices[idx++] = color.r;
vertices[idx++] = color.g;
vertices[idx++] = color.b;
vertices[idx++] = color.a;
this.vertexIndex = idx;
};
ShapeRenderer.prototype.end = function () {
if (!this.isDrawing)
throw new Error("ShapeRenderer.begin() has not been called");
this.flush();
this.isDrawing = false;
};
ShapeRenderer.prototype.flush = function () {
if (this.vertexIndex == 0)
return;
this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0;
};
ShapeRenderer.prototype.check = function (shapeType, numVertices) {
if (!this.isDrawing)
throw new Error("ShapeRenderer.begin() has not been called");
if (this.shapeType == shapeType) {
if (this.mesh.maxVertices() - this.mesh.numVertices() < numVertices)
this.flush();
else
return;
}
else {
this.flush();
this.shapeType = shapeType;
}
};
ShapeRenderer.prototype.dispose = function () {
this.mesh.dispose();
};
return ShapeRenderer;
}());
webgl.ShapeRenderer = ShapeRenderer;
(function (ShapeType) {
ShapeType[ShapeType["Point"] = WebGLRenderingContext.POINTS] = "Point";
ShapeType[ShapeType["Line"] = WebGLRenderingContext.LINES] = "Line";
ShapeType[ShapeType["Filled"] = WebGLRenderingContext.TRIANGLES] = "Filled";
})(webgl.ShapeType || (webgl.ShapeType = {}));
var ShapeType = webgl.ShapeType;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var SkeletonDebugRenderer = (function () {
function SkeletonDebugRenderer(gl) {
this.boneLineColor = new spine.Color(1, 0, 0, 1);
this.boneOriginColor = new spine.Color(0, 1, 0, 1);
this.attachmentLineColor = new spine.Color(0, 0, 1, 0.5);
this.triangleLineColor = new spine.Color(1, 0.64, 0, 0.5);
this.aabbColor = new spine.Color(0, 1, 0, 0.5);
this.drawBones = true;
this.drawRegionAttachments = true;
this.drawBoundingBoxes = true;
this.drawMeshHull = true;
this.drawMeshTriangles = true;
this.drawPaths = true;
this.premultipliedAlpha = false;
this.scale = 1;
this.boneWidth = 2;
this.bounds = new spine.SkeletonBounds();
this.temp = new Array();
this.gl = gl;
this.shapes = new webgl.ShapeRenderer(gl);
}
SkeletonDebugRenderer.prototype.draw = function (shader, skeleton) {
var skeletonX = skeleton.x;
var skeletonY = skeleton.y;
var gl = this.gl;
gl.enable(gl.BLEND);
var srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
gl.blendFunc(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
var shapes = this.shapes;
var bones = skeleton.bones;
if (this.drawBones) {
shapes.setColor(this.boneLineColor);
shapes.begin(shader);
for (var i = 0, n = bones.length; i < n; i++) {
var bone = bones[i];
if (bone.parent == null)
continue;
var x = skeletonX + bone.data.length * bone.a + bone.worldX;
var y = skeletonY + bone.data.length * bone.c + bone.worldY;
shapes.rectLine(true, skeletonX + bone.worldX, skeletonY + bone.worldY, x, y, this.boneWidth * this.scale);
}
shapes.end();
shapes.begin(shader);
shapes.x(skeletonX, skeletonY, 4 * this.scale);
}
else
shapes.begin(shader);
if (this.drawRegionAttachments) {
shapes.setColor(this.attachmentLineColor);
var slots = skeleton.slots;
for (var i = 0, n = slots.length; i < n; i++) {
var slot = slots[i];
var attachment = slot.getAttachment();
if (attachment instanceof spine.RegionAttachment) {
var regionAttachment = attachment;
var vertices = regionAttachment.updateWorldVertices(slot, false);
shapes.line(vertices[spine.RegionAttachment.X1], vertices[spine.RegionAttachment.Y1], vertices[spine.RegionAttachment.X2], vertices[spine.RegionAttachment.Y2]);
shapes.line(vertices[spine.RegionAttachment.X2], vertices[spine.RegionAttachment.Y2], vertices[spine.RegionAttachment.X3], vertices[spine.RegionAttachment.Y3]);
shapes.line(vertices[spine.RegionAttachment.X3], vertices[spine.RegionAttachment.Y3], vertices[spine.RegionAttachment.X4], vertices[spine.RegionAttachment.Y4]);
shapes.line(vertices[spine.RegionAttachment.X4], vertices[spine.RegionAttachment.Y4], vertices[spine.RegionAttachment.X1], vertices[spine.RegionAttachment.Y1]);
}
}
}
if (this.drawMeshHull || this.drawMeshTriangles) {
var slots = skeleton.slots;
for (var i = 0, n = slots.length; i < n; i++) {
var slot = slots[i];
var attachment = slot.getAttachment();
if (!(attachment instanceof spine.MeshAttachment))
continue;
var mesh = attachment;
mesh.updateWorldVertices(slot, false);
var vertices = mesh.worldVertices;
var triangles = mesh.triangles;
var hullLength = mesh.hullLength;
if (this.drawMeshTriangles) {
shapes.setColor(this.triangleLineColor);
for (var ii = 0, nn = triangles.length; ii < nn; ii += 3) {
var v1 = triangles[ii] * 8, v2 = triangles[ii + 1] * 8, v3 = triangles[ii + 2] * 8;
shapes.triangle(false, vertices[v1], vertices[v1 + 1], vertices[v2], vertices[v2 + 1], vertices[v3], vertices[v3 + 1]);
}
}
if (this.drawMeshHull && hullLength > 0) {
shapes.setColor(this.attachmentLineColor);
hullLength = (hullLength >> 1) * 8;
var lastX = vertices[hullLength - 8], lastY = vertices[hullLength - 7];
for (var ii = 0, nn = hullLength; ii < nn; ii += 8) {
var x = vertices[ii], y = vertices[ii + 1];
shapes.line(x, y, lastX, lastY);
lastX = x;
lastY = y;
}
}
}
}
if (this.drawBoundingBoxes) {
var bounds = this.bounds;
bounds.update(skeleton, true);
shapes.setColor(this.aabbColor);
shapes.rect(false, bounds.minX, bounds.minY, bounds.getWidth(), bounds.getHeight());
var polygons = bounds.polygons;
var boxes = bounds.boundingBoxes;
for (var i = 0, n = polygons.length; i < n; i++) {
var polygon = polygons[i];
shapes.setColor(boxes[i].color);
shapes.polygon(polygon, 0, polygon.length);
}
}
if (this.drawPaths) {
var slots = skeleton.slots;
for (var i = 0, n = slots.length; i < n; i++) {
var slot = slots[i];
var attachment = slot.getAttachment();
if (!(attachment instanceof spine.PathAttachment))
continue;
var path = attachment;
var nn = path.worldVerticesLength;
var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
path.computeWorldVertices(slot, world);
var color = path.color;
var x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
if (path.closed) {
shapes.setColor(color);
var cx1 = world[0], cy1 = world[1], cx2 = world[nn - 2], cy2 = world[nn - 1];
x2 = world[nn - 4];
y2 = world[nn - 3];
shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
shapes.line(x1, y1, cx1, cy1);
shapes.line(x2, y2, cx2, cy2);
}
nn -= 4;
for (var ii = 4; ii < nn; ii += 6) {
var cx1 = world[ii], cy1 = world[ii + 1], cx2 = world[ii + 2], cy2 = world[ii + 3];
x2 = world[ii + 4];
y2 = world[ii + 5];
shapes.setColor(color);
shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
shapes.line(x1, y1, cx1, cy1);
shapes.line(x2, y2, cx2, cy2);
x1 = x2;
y1 = y2;
}
}
}
shapes.end();
shapes.begin(shader);
if (this.drawBones) {
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.end();
};
SkeletonDebugRenderer.prototype.dispose = function () {
this.shapes.dispose();
};
SkeletonDebugRenderer.LIGHT_GRAY = new spine.Color(192 / 255, 192 / 255, 192 / 255, 1);
SkeletonDebugRenderer.GREEN = new spine.Color(0, 1, 0, 1);
return SkeletonDebugRenderer;
}());
webgl.SkeletonDebugRenderer = SkeletonDebugRenderer;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {

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

File diff suppressed because one or more lines are too long

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

@ -486,6 +486,8 @@ declare module spine {
intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment;
intersectsSegmentPolygon(polygon: ArrayLike<number>, x1: number, y1: number, x2: number, y2: number): boolean;
getPolygon(boundingBox: BoundingBoxAttachment): ArrayLike<number>;
getWidth(): number;
getHeight(): number;
}
}
declare module spine {
@ -721,6 +723,7 @@ declare module spine {
static sinDeg(degrees: number): number;
static signum(value: number): number;
static toInt(x: number): number;
static cbrt(x: number): number;
}
class Utils {
static SUPPORTS_TYPED_ARRAYS: boolean;
@ -747,6 +750,8 @@ declare module spine {
y: number;
constructor(x?: number, y?: number);
set(x: number, y: number): Vector2;
length(): number;
normalize(): this;
}
}
declare module spine {
@ -783,6 +788,7 @@ declare module spine {
}
declare module spine {
class BoundingBoxAttachment extends VertexAttachment {
color: Color;
constructor(name: string);
}
}
@ -811,6 +817,7 @@ declare module spine {
lengths: Array<number>;
closed: boolean;
constantSpeed: boolean;
color: Color;
constructor(name: string);
}
}

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

@ -2519,6 +2519,12 @@ var spine;
var index = this.boundingBoxes.indexOf(boundingBox);
return index == -1 ? null : this.polygons[index];
};
SkeletonBounds.prototype.getWidth = function () {
return this.maxX - this.minX;
};
SkeletonBounds.prototype.getHeight = function () {
return this.maxY - this.minY;
};
return SkeletonBounds;
}());
spine.SkeletonBounds = SkeletonBounds;
@ -2873,6 +2879,9 @@ var spine;
if (box == null)
return null;
this.readVertices(map, box, map.vertexCount << 1);
var color = this.getValue(map, "color", null);
if (color != null)
box.color.setFromString(color);
return box;
}
case "mesh":
@ -2911,6 +2920,9 @@ var spine;
for (var i = 0; i < map.lengths.length; i++)
lengths[i++] = map.lengths[i] * scale;
path.lengths = lengths;
var color = this.getValue(map, "color", null);
if (color != null)
path.color.setFromString(color);
return path;
}
}
@ -3849,6 +3861,10 @@ var spine;
MathUtils.toInt = function (x) {
return x > 0 ? Math.floor(x) : Math.ceil(x);
};
MathUtils.cbrt = function (x) {
var y = Math.pow(Math.abs(x), 1 / 3);
return x < 0 ? -y : y;
};
MathUtils.PI = 3.1415927;
MathUtils.PI2 = MathUtils.PI * 2;
MathUtils.radiansToDegrees = 180 / MathUtils.PI;
@ -3947,6 +3963,19 @@ var spine;
this.y = y;
return this;
};
Vector2.prototype.length = function () {
var x = this.x;
var y = this.y;
return Math.sqrt(x * x + y * y);
};
Vector2.prototype.normalize = function () {
var len = this.length();
if (len != 0) {
this.x /= len;
this.y /= len;
}
return this;
};
return Vector2;
}());
spine.Vector2 = Vector2;
@ -4055,6 +4084,7 @@ var spine;
__extends(BoundingBoxAttachment, _super);
function BoundingBoxAttachment(name) {
_super.call(this, name);
this.color = new spine.Color(1, 1, 1, 1);
}
return BoundingBoxAttachment;
}(spine.VertexAttachment));
@ -4198,6 +4228,7 @@ var spine;
_super.call(this, name);
this.closed = false;
this.constantSpeed = false;
this.color = new spine.Color(1, 1, 1, 1);
}
return PathAttachment;
}(spine.VertexAttachment));

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

File diff suppressed because one or more lines are too long

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

@ -486,6 +486,8 @@ declare module spine {
intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment;
intersectsSegmentPolygon(polygon: ArrayLike<number>, x1: number, y1: number, x2: number, y2: number): boolean;
getPolygon(boundingBox: BoundingBoxAttachment): ArrayLike<number>;
getWidth(): number;
getHeight(): number;
}
}
declare module spine {
@ -721,6 +723,7 @@ declare module spine {
static sinDeg(degrees: number): number;
static signum(value: number): number;
static toInt(x: number): number;
static cbrt(x: number): number;
}
class Utils {
static SUPPORTS_TYPED_ARRAYS: boolean;
@ -747,6 +750,8 @@ declare module spine {
y: number;
constructor(x?: number, y?: number);
set(x: number, y: number): Vector2;
length(): number;
normalize(): this;
}
}
declare module spine {
@ -783,6 +788,7 @@ declare module spine {
}
declare module spine {
class BoundingBoxAttachment extends VertexAttachment {
color: Color;
constructor(name: string);
}
}
@ -811,6 +817,7 @@ declare module spine {
lengths: Array<number>;
closed: boolean;
constantSpeed: boolean;
color: Color;
constructor(name: string);
}
}

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

@ -2519,6 +2519,12 @@ var spine;
var index = this.boundingBoxes.indexOf(boundingBox);
return index == -1 ? null : this.polygons[index];
};
SkeletonBounds.prototype.getWidth = function () {
return this.maxX - this.minX;
};
SkeletonBounds.prototype.getHeight = function () {
return this.maxY - this.minY;
};
return SkeletonBounds;
}());
spine.SkeletonBounds = SkeletonBounds;
@ -2873,6 +2879,9 @@ var spine;
if (box == null)
return null;
this.readVertices(map, box, map.vertexCount << 1);
var color = this.getValue(map, "color", null);
if (color != null)
box.color.setFromString(color);
return box;
}
case "mesh":
@ -2911,6 +2920,9 @@ var spine;
for (var i = 0; i < map.lengths.length; i++)
lengths[i++] = map.lengths[i] * scale;
path.lengths = lengths;
var color = this.getValue(map, "color", null);
if (color != null)
path.color.setFromString(color);
return path;
}
}
@ -3849,6 +3861,10 @@ var spine;
MathUtils.toInt = function (x) {
return x > 0 ? Math.floor(x) : Math.ceil(x);
};
MathUtils.cbrt = function (x) {
var y = Math.pow(Math.abs(x), 1 / 3);
return x < 0 ? -y : y;
};
MathUtils.PI = 3.1415927;
MathUtils.PI2 = MathUtils.PI * 2;
MathUtils.radiansToDegrees = 180 / MathUtils.PI;
@ -3947,6 +3963,19 @@ var spine;
this.y = y;
return this;
};
Vector2.prototype.length = function () {
var x = this.x;
var y = this.y;
return Math.sqrt(x * x + y * y);
};
Vector2.prototype.normalize = function () {
var len = this.length();
if (len != 0) {
this.x /= len;
this.y /= len;
}
return this;
};
return Vector2;
}());
spine.Vector2 = Vector2;
@ -4055,6 +4084,7 @@ var spine;
__extends(BoundingBoxAttachment, _super);
function BoundingBoxAttachment(name) {
_super.call(this, name);
this.color = new spine.Color(1, 1, 1, 1);
}
return BoundingBoxAttachment;
}(spine.VertexAttachment));
@ -4198,6 +4228,7 @@ var spine;
_super.call(this, name);
this.closed = false;
this.constantSpeed = false;
this.color = new spine.Color(1, 1, 1, 1);
}
return PathAttachment;
}(spine.VertexAttachment));

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

File diff suppressed because one or more lines are too long

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

@ -486,6 +486,8 @@ declare module spine {
intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment;
intersectsSegmentPolygon(polygon: ArrayLike<number>, x1: number, y1: number, x2: number, y2: number): boolean;
getPolygon(boundingBox: BoundingBoxAttachment): ArrayLike<number>;
getWidth(): number;
getHeight(): number;
}
}
declare module spine {
@ -721,6 +723,7 @@ declare module spine {
static sinDeg(degrees: number): number;
static signum(value: number): number;
static toInt(x: number): number;
static cbrt(x: number): number;
}
class Utils {
static SUPPORTS_TYPED_ARRAYS: boolean;
@ -747,6 +750,8 @@ declare module spine {
y: number;
constructor(x?: number, y?: number);
set(x: number, y: number): Vector2;
length(): number;
normalize(): this;
}
}
declare module spine {
@ -783,6 +788,7 @@ declare module spine {
}
declare module spine {
class BoundingBoxAttachment extends VertexAttachment {
color: Color;
constructor(name: string);
}
}
@ -811,6 +817,7 @@ declare module spine {
lengths: Array<number>;
closed: boolean;
constantSpeed: boolean;
color: Color;
constructor(name: string);
}
}
@ -1045,6 +1052,69 @@ declare module spine.webgl {
static newColored(gl: WebGLRenderingContext): Shader;
}
}
declare module spine.webgl {
class ShapeRenderer implements Disposable {
private gl;
private isDrawing;
private mesh;
private shapeType;
private color;
private shader;
private vertexIndex;
private tmp;
constructor(gl: WebGLRenderingContext, maxVertices?: number);
begin(shader: Shader): 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;
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;
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;
private flush();
private check(shapeType, numVertices);
dispose(): void;
}
enum ShapeType {
Point,
Line,
Filled,
}
}
declare module spine.webgl {
class SkeletonDebugRenderer implements Disposable {
boneLineColor: Color;
boneOriginColor: Color;
attachmentLineColor: Color;
triangleLineColor: Color;
aabbColor: Color;
drawBones: boolean;
drawRegionAttachments: boolean;
drawBoundingBoxes: boolean;
drawMeshHull: boolean;
drawMeshTriangles: boolean;
drawPaths: boolean;
premultipliedAlpha: boolean;
scale: number;
boneWidth: number;
private gl;
private shapes;
private bounds;
private temp;
private static LIGHT_GRAY;
private static GREEN;
constructor(gl: WebGLRenderingContext);
draw(shader: Shader, skeleton: Skeleton): void;
dispose(): void;
}
}
declare module spine.webgl {
class SkeletonRenderer {
static QUAD_TRIANGLES: number[];

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

@ -2519,6 +2519,12 @@ var spine;
var index = this.boundingBoxes.indexOf(boundingBox);
return index == -1 ? null : this.polygons[index];
};
SkeletonBounds.prototype.getWidth = function () {
return this.maxX - this.minX;
};
SkeletonBounds.prototype.getHeight = function () {
return this.maxY - this.minY;
};
return SkeletonBounds;
}());
spine.SkeletonBounds = SkeletonBounds;
@ -2873,6 +2879,9 @@ var spine;
if (box == null)
return null;
this.readVertices(map, box, map.vertexCount << 1);
var color = this.getValue(map, "color", null);
if (color != null)
box.color.setFromString(color);
return box;
}
case "mesh":
@ -2911,6 +2920,9 @@ var spine;
for (var i = 0; i < map.lengths.length; i++)
lengths[i++] = map.lengths[i] * scale;
path.lengths = lengths;
var color = this.getValue(map, "color", null);
if (color != null)
path.color.setFromString(color);
return path;
}
}
@ -3849,6 +3861,10 @@ var spine;
MathUtils.toInt = function (x) {
return x > 0 ? Math.floor(x) : Math.ceil(x);
};
MathUtils.cbrt = function (x) {
var y = Math.pow(Math.abs(x), 1 / 3);
return x < 0 ? -y : y;
};
MathUtils.PI = 3.1415927;
MathUtils.PI2 = MathUtils.PI * 2;
MathUtils.radiansToDegrees = 180 / MathUtils.PI;
@ -3947,6 +3963,19 @@ var spine;
this.y = y;
return this;
};
Vector2.prototype.length = function () {
var x = this.x;
var y = this.y;
return Math.sqrt(x * x + y * y);
};
Vector2.prototype.normalize = function () {
var len = this.length();
if (len != 0) {
this.x /= len;
this.y /= len;
}
return this;
};
return Vector2;
}());
spine.Vector2 = Vector2;
@ -4055,6 +4084,7 @@ var spine;
__extends(BoundingBoxAttachment, _super);
function BoundingBoxAttachment(name) {
_super.call(this, name);
this.color = new spine.Color(1, 1, 1, 1);
}
return BoundingBoxAttachment;
}(spine.VertexAttachment));
@ -4198,6 +4228,7 @@ var spine;
_super.call(this, name);
this.closed = false;
this.constantSpeed = false;
this.color = new spine.Color(1, 1, 1, 1);
}
return PathAttachment;
}(spine.VertexAttachment));
@ -4751,7 +4782,7 @@ var spine;
this.indicesLength = indices.length;
};
Mesh.prototype.draw = function (shader, primitiveType) {
this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength);
this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength / this.elementsPerVertex);
};
Mesh.prototype.drawWithOffset = function (shader, primitiveType, offset, count) {
var gl = this.gl;
@ -5094,6 +5125,489 @@ var spine;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var ShapeRenderer = (function () {
function ShapeRenderer(gl, maxVertices) {
if (maxVertices === void 0) { maxVertices = 10920; }
this.isDrawing = false;
this.shapeType = ShapeType.Filled;
this.color = new spine.Color(1, 1, 1, 1);
this.vertexIndex = 0;
this.tmp = new spine.Vector2();
if (maxVertices > 10920)
throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.gl = gl;
this.mesh = new webgl.Mesh(gl, [new webgl.Position2Attribute(), new webgl.ColorAttribute()], maxVertices, 0);
}
ShapeRenderer.prototype.begin = function (shader) {
if (this.isDrawing)
throw new Error("ShapeRenderer.begin() has already been called");
this.shader = shader;
this.vertexIndex = 0;
this.isDrawing = true;
};
ShapeRenderer.prototype.setColor = function (color) {
this.color.setFromColor(color);
};
ShapeRenderer.prototype.setColorWith = function (r, g, b, a) {
this.color.set(r, g, b, a);
};
ShapeRenderer.prototype.point = function (x, y, color) {
if (color === void 0) { color = null; }
this.check(ShapeType.Point, 1);
if (color === null)
color = this.color;
this.vertex(x, y, color);
};
ShapeRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
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);
};
ShapeRenderer.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.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
var vertices = this.mesh.getVertices();
var idx = this.vertexIndex;
if (color === null)
color = this.color;
if (color2 === null)
color2 = this.color;
if (color3 === null)
color3 = this.color;
if (filled) {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x3, y3, color3);
}
else {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x2, y2, color);
this.vertex(x3, y3, color2);
this.vertex(x3, y3, color);
this.vertex(x, y, color2);
}
};
ShapeRenderer.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.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
var vertices = this.mesh.getVertices();
var idx = this.vertexIndex;
if (color === null)
color = this.color;
if (color2 === null)
color2 = this.color;
if (color3 === null)
color3 = this.color;
if (color4 === null)
color4 = this.color;
if (filled) {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x3, y3, color3);
this.vertex(x3, y3, color3);
this.vertex(x4, y4, color4);
this.vertex(x, y, color);
}
else {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x2, y2, color2);
this.vertex(x3, y3, color3);
this.vertex(x3, y3, color3);
this.vertex(x4, y4, color4);
this.vertex(x4, y4, color4);
this.vertex(x, y, color);
}
};
ShapeRenderer.prototype.rect = function (filled, x, y, width, height, color) {
if (color === void 0) { color = null; }
this.quad(filled, x, y, x + width, y, x + width, y + height, x, y + height, color, color, color, color);
};
ShapeRenderer.prototype.rectLine = function (filled, x1, y1, x2, y2, width, color) {
if (color === void 0) { color = null; }
this.check(filled ? ShapeType.Filled : ShapeType.Line, 8);
if (color === null)
color = this.color;
var t = this.tmp.set(y2 - y1, x1 - x2);
t.normalize();
width *= 0.5;
var tx = t.x * width;
var ty = t.y * width;
if (!filled) {
this.vertex(x1 + tx, y1 + ty, color);
this.vertex(x1 - tx, y1 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x2 - tx, y2 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x1 + tx, y1 + ty, color);
this.vertex(x2 - tx, y2 - ty, color);
this.vertex(x1 - tx, y1 - ty, color);
}
else {
this.vertex(x1 + tx, y1 + ty, color);
this.vertex(x1 - tx, y1 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x2 - tx, y2 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x1 - tx, y1 - ty, color);
}
};
ShapeRenderer.prototype.x = function (x, y, size) {
this.line(x - size, y - size, x + size, y + size);
this.line(x - size, y + size, x + size, y - size);
};
ShapeRenderer.prototype.polygon = function (polygonVertices, offset, count, color) {
if (color === void 0) { color = null; }
if (count < 3)
throw new Error("Polygon must contain at least 3 vertices");
this.check(ShapeType.Line, count * 2);
if (color === null)
color = this.color;
var vertices = this.mesh.getVertices();
var idx = this.vertexIndex;
offset <<= 1;
count <<= 1;
var firstX = polygonVertices[offset];
var firstY = polygonVertices[offset + 1];
var last = offset + count;
for (var i = offset, n = offset + count - 2; i < n; i += 2) {
var x1 = polygonVertices[i];
var y1 = polygonVertices[i + 1];
var x2 = 0;
var y2 = 0;
if (i + 2 >= last) {
x2 = firstX;
y2 = firstY;
}
else {
x2 = polygonVertices[i + 2];
y2 = polygonVertices[i + 3];
}
this.vertex(x1, y1, color);
this.vertex(x2, y2, color);
}
};
ShapeRenderer.prototype.circle = function (filled, x, y, radius, segments, color) {
if (color === void 0) { color = null; }
if (segments === 0)
segments = Math.max(1, (6 * spine.MathUtils.cbrt(radius)) | 0);
if (segments <= 0)
throw new Error("segments must be > 0.");
if (color === null)
color = this.color;
var angle = 2 * spine.MathUtils.PI / segments;
var cos = Math.cos(angle);
var sin = Math.sin(angle);
var cx = radius, cy = 0;
if (!filled) {
this.check(ShapeType.Line, segments * 2 + 2);
for (var i = 0; i < segments; i++) {
this.vertex(x + cx, y + cy, color);
var temp_1 = cx;
cx = cos * cx - sin * cy;
cy = sin * temp_1 + cos * cy;
this.vertex(x + cx, y + cy, color);
}
this.vertex(x + cx, y + cy, color);
}
else {
this.check(ShapeType.Filled, segments * 3 + 3);
segments--;
for (var i = 0; i < segments; i++) {
this.vertex(x, y, color);
this.vertex(x + cx, y + cy, color);
var temp_2 = cx;
cx = cos * cx - sin * cy;
cy = sin * temp_2 + cos * cy;
this.vertex(x + cx, y + cy, color);
}
this.vertex(x, y, color);
this.vertex(x + cx, y + cy, color);
}
var temp = cx;
cx = radius;
cy = 0;
this.vertex(x + cx, y + cy, color);
};
ShapeRenderer.prototype.curve = function (x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color) {
if (color === void 0) { color = null; }
this.check(ShapeType.Line, segments * 2 + 2);
if (color === null)
color = this.color;
var subdiv_step = 1 / segments;
var subdiv_step2 = subdiv_step * subdiv_step;
var subdiv_step3 = subdiv_step * subdiv_step * subdiv_step;
var pre1 = 3 * subdiv_step;
var pre2 = 3 * subdiv_step2;
var pre4 = 6 * subdiv_step2;
var pre5 = 6 * subdiv_step3;
var tmp1x = x1 - cx1 * 2 + cx2;
var tmp1y = y1 - cy1 * 2 + cy2;
var tmp2x = (cx1 - cx2) * 3 - x1 + x2;
var tmp2y = (cy1 - cy2) * 3 - y1 + y2;
var fx = x1;
var fy = y1;
var dfx = (cx1 - x1) * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3;
var dfy = (cy1 - y1) * pre1 + tmp1y * pre2 + tmp2y * subdiv_step3;
var ddfx = tmp1x * pre4 + tmp2x * pre5;
var ddfy = tmp1y * pre4 + tmp2y * pre5;
var dddfx = tmp2x * pre5;
var dddfy = tmp2y * pre5;
while (segments-- > 0) {
this.vertex(fx, fy, color);
fx += dfx;
fy += dfy;
dfx += ddfx;
dfy += ddfy;
ddfx += dddfx;
ddfy += dddfy;
this.vertex(fx, fy, color);
}
this.vertex(fx, fy, color);
this.vertex(x2, y2, color);
};
ShapeRenderer.prototype.vertex = function (x, y, color) {
var idx = this.vertexIndex;
var vertices = this.mesh.getVertices();
vertices[idx++] = x;
vertices[idx++] = y;
vertices[idx++] = color.r;
vertices[idx++] = color.g;
vertices[idx++] = color.b;
vertices[idx++] = color.a;
this.vertexIndex = idx;
};
ShapeRenderer.prototype.end = function () {
if (!this.isDrawing)
throw new Error("ShapeRenderer.begin() has not been called");
this.flush();
this.isDrawing = false;
};
ShapeRenderer.prototype.flush = function () {
if (this.vertexIndex == 0)
return;
this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0;
};
ShapeRenderer.prototype.check = function (shapeType, numVertices) {
if (!this.isDrawing)
throw new Error("ShapeRenderer.begin() has not been called");
if (this.shapeType == shapeType) {
if (this.mesh.maxVertices() - this.mesh.numVertices() < numVertices)
this.flush();
else
return;
}
else {
this.flush();
this.shapeType = shapeType;
}
};
ShapeRenderer.prototype.dispose = function () {
this.mesh.dispose();
};
return ShapeRenderer;
}());
webgl.ShapeRenderer = ShapeRenderer;
(function (ShapeType) {
ShapeType[ShapeType["Point"] = WebGLRenderingContext.POINTS] = "Point";
ShapeType[ShapeType["Line"] = WebGLRenderingContext.LINES] = "Line";
ShapeType[ShapeType["Filled"] = WebGLRenderingContext.TRIANGLES] = "Filled";
})(webgl.ShapeType || (webgl.ShapeType = {}));
var ShapeType = webgl.ShapeType;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var SkeletonDebugRenderer = (function () {
function SkeletonDebugRenderer(gl) {
this.boneLineColor = new spine.Color(1, 0, 0, 1);
this.boneOriginColor = new spine.Color(0, 1, 0, 1);
this.attachmentLineColor = new spine.Color(0, 0, 1, 0.5);
this.triangleLineColor = new spine.Color(1, 0.64, 0, 0.5);
this.aabbColor = new spine.Color(0, 1, 0, 0.5);
this.drawBones = true;
this.drawRegionAttachments = true;
this.drawBoundingBoxes = true;
this.drawMeshHull = true;
this.drawMeshTriangles = true;
this.drawPaths = true;
this.premultipliedAlpha = false;
this.scale = 1;
this.boneWidth = 2;
this.bounds = new spine.SkeletonBounds();
this.temp = new Array();
this.gl = gl;
this.shapes = new webgl.ShapeRenderer(gl);
}
SkeletonDebugRenderer.prototype.draw = function (shader, skeleton) {
var skeletonX = skeleton.x;
var skeletonY = skeleton.y;
var gl = this.gl;
gl.enable(gl.BLEND);
var srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
gl.blendFunc(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
var shapes = this.shapes;
var bones = skeleton.bones;
if (this.drawBones) {
shapes.setColor(this.boneLineColor);
shapes.begin(shader);
for (var i = 0, n = bones.length; i < n; i++) {
var bone = bones[i];
if (bone.parent == null)
continue;
var x = skeletonX + bone.data.length * bone.a + bone.worldX;
var y = skeletonY + bone.data.length * bone.c + bone.worldY;
shapes.rectLine(true, skeletonX + bone.worldX, skeletonY + bone.worldY, x, y, this.boneWidth * this.scale);
}
shapes.end();
shapes.begin(shader);
shapes.x(skeletonX, skeletonY, 4 * this.scale);
}
else
shapes.begin(shader);
if (this.drawRegionAttachments) {
shapes.setColor(this.attachmentLineColor);
var slots = skeleton.slots;
for (var i = 0, n = slots.length; i < n; i++) {
var slot = slots[i];
var attachment = slot.getAttachment();
if (attachment instanceof spine.RegionAttachment) {
var regionAttachment = attachment;
var vertices = regionAttachment.updateWorldVertices(slot, false);
shapes.line(vertices[spine.RegionAttachment.X1], vertices[spine.RegionAttachment.Y1], vertices[spine.RegionAttachment.X2], vertices[spine.RegionAttachment.Y2]);
shapes.line(vertices[spine.RegionAttachment.X2], vertices[spine.RegionAttachment.Y2], vertices[spine.RegionAttachment.X3], vertices[spine.RegionAttachment.Y3]);
shapes.line(vertices[spine.RegionAttachment.X3], vertices[spine.RegionAttachment.Y3], vertices[spine.RegionAttachment.X4], vertices[spine.RegionAttachment.Y4]);
shapes.line(vertices[spine.RegionAttachment.X4], vertices[spine.RegionAttachment.Y4], vertices[spine.RegionAttachment.X1], vertices[spine.RegionAttachment.Y1]);
}
}
}
if (this.drawMeshHull || this.drawMeshTriangles) {
var slots = skeleton.slots;
for (var i = 0, n = slots.length; i < n; i++) {
var slot = slots[i];
var attachment = slot.getAttachment();
if (!(attachment instanceof spine.MeshAttachment))
continue;
var mesh = attachment;
mesh.updateWorldVertices(slot, false);
var vertices = mesh.worldVertices;
var triangles = mesh.triangles;
var hullLength = mesh.hullLength;
if (this.drawMeshTriangles) {
shapes.setColor(this.triangleLineColor);
for (var ii = 0, nn = triangles.length; ii < nn; ii += 3) {
var v1 = triangles[ii] * 8, v2 = triangles[ii + 1] * 8, v3 = triangles[ii + 2] * 8;
shapes.triangle(false, vertices[v1], vertices[v1 + 1], vertices[v2], vertices[v2 + 1], vertices[v3], vertices[v3 + 1]);
}
}
if (this.drawMeshHull && hullLength > 0) {
shapes.setColor(this.attachmentLineColor);
hullLength = (hullLength >> 1) * 8;
var lastX = vertices[hullLength - 8], lastY = vertices[hullLength - 7];
for (var ii = 0, nn = hullLength; ii < nn; ii += 8) {
var x = vertices[ii], y = vertices[ii + 1];
shapes.line(x, y, lastX, lastY);
lastX = x;
lastY = y;
}
}
}
}
if (this.drawBoundingBoxes) {
var bounds = this.bounds;
bounds.update(skeleton, true);
shapes.setColor(this.aabbColor);
shapes.rect(false, bounds.minX, bounds.minY, bounds.getWidth(), bounds.getHeight());
var polygons = bounds.polygons;
var boxes = bounds.boundingBoxes;
for (var i = 0, n = polygons.length; i < n; i++) {
var polygon = polygons[i];
shapes.setColor(boxes[i].color);
shapes.polygon(polygon, 0, polygon.length);
}
}
if (this.drawPaths) {
var slots = skeleton.slots;
for (var i = 0, n = slots.length; i < n; i++) {
var slot = slots[i];
var attachment = slot.getAttachment();
if (!(attachment instanceof spine.PathAttachment))
continue;
var path = attachment;
var nn = path.worldVerticesLength;
var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
path.computeWorldVertices(slot, world);
var color = path.color;
var x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
if (path.closed) {
shapes.setColor(color);
var cx1 = world[0], cy1 = world[1], cx2 = world[nn - 2], cy2 = world[nn - 1];
x2 = world[nn - 4];
y2 = world[nn - 3];
shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
shapes.line(x1, y1, cx1, cy1);
shapes.line(x2, y2, cx2, cy2);
}
nn -= 4;
for (var ii = 4; ii < nn; ii += 6) {
var cx1 = world[ii], cy1 = world[ii + 1], cx2 = world[ii + 2], cy2 = world[ii + 3];
x2 = world[ii + 4];
y2 = world[ii + 5];
shapes.setColor(color);
shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
shapes.line(x1, y1, cx1, cy1);
shapes.line(x2, y2, cx2, cy2);
x1 = x2;
y1 = y2;
}
}
}
shapes.end();
shapes.begin(shader);
if (this.drawBones) {
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.end();
};
SkeletonDebugRenderer.prototype.dispose = function () {
this.shapes.dispose();
};
SkeletonDebugRenderer.LIGHT_GRAY = new spine.Color(192 / 255, 192 / 255, 192 / 255, 1);
SkeletonDebugRenderer.GREEN = new spine.Color(0, 1, 0, 1);
return SkeletonDebugRenderer;
}());
webgl.SkeletonDebugRenderer = SkeletonDebugRenderer;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {

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

File diff suppressed because one or more lines are too long

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

@ -486,6 +486,8 @@ declare module spine {
intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment;
intersectsSegmentPolygon(polygon: ArrayLike<number>, x1: number, y1: number, x2: number, y2: number): boolean;
getPolygon(boundingBox: BoundingBoxAttachment): ArrayLike<number>;
getWidth(): number;
getHeight(): number;
}
}
declare module spine {
@ -721,6 +723,7 @@ declare module spine {
static sinDeg(degrees: number): number;
static signum(value: number): number;
static toInt(x: number): number;
static cbrt(x: number): number;
}
class Utils {
static SUPPORTS_TYPED_ARRAYS: boolean;
@ -747,6 +750,8 @@ declare module spine {
y: number;
constructor(x?: number, y?: number);
set(x: number, y: number): Vector2;
length(): number;
normalize(): this;
}
}
declare module spine {
@ -783,6 +788,7 @@ declare module spine {
}
declare module spine {
class BoundingBoxAttachment extends VertexAttachment {
color: Color;
constructor(name: string);
}
}
@ -811,6 +817,7 @@ declare module spine {
lengths: Array<number>;
closed: boolean;
constantSpeed: boolean;
color: Color;
constructor(name: string);
}
}
@ -1045,6 +1052,69 @@ declare module spine.webgl {
static newColored(gl: WebGLRenderingContext): Shader;
}
}
declare module spine.webgl {
class ShapeRenderer implements Disposable {
private gl;
private isDrawing;
private mesh;
private shapeType;
private color;
private shader;
private vertexIndex;
private tmp;
constructor(gl: WebGLRenderingContext, maxVertices?: number);
begin(shader: Shader): 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;
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;
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;
private flush();
private check(shapeType, numVertices);
dispose(): void;
}
enum ShapeType {
Point,
Line,
Filled,
}
}
declare module spine.webgl {
class SkeletonDebugRenderer implements Disposable {
boneLineColor: Color;
boneOriginColor: Color;
attachmentLineColor: Color;
triangleLineColor: Color;
aabbColor: Color;
drawBones: boolean;
drawRegionAttachments: boolean;
drawBoundingBoxes: boolean;
drawMeshHull: boolean;
drawMeshTriangles: boolean;
drawPaths: boolean;
premultipliedAlpha: boolean;
scale: number;
boneWidth: number;
private gl;
private shapes;
private bounds;
private temp;
private static LIGHT_GRAY;
private static GREEN;
constructor(gl: WebGLRenderingContext);
draw(shader: Shader, skeleton: Skeleton): void;
dispose(): void;
}
}
declare module spine.webgl {
class SkeletonRenderer {
static QUAD_TRIANGLES: number[];

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

@ -2519,6 +2519,12 @@ var spine;
var index = this.boundingBoxes.indexOf(boundingBox);
return index == -1 ? null : this.polygons[index];
};
SkeletonBounds.prototype.getWidth = function () {
return this.maxX - this.minX;
};
SkeletonBounds.prototype.getHeight = function () {
return this.maxY - this.minY;
};
return SkeletonBounds;
}());
spine.SkeletonBounds = SkeletonBounds;
@ -2873,6 +2879,9 @@ var spine;
if (box == null)
return null;
this.readVertices(map, box, map.vertexCount << 1);
var color = this.getValue(map, "color", null);
if (color != null)
box.color.setFromString(color);
return box;
}
case "mesh":
@ -2911,6 +2920,9 @@ var spine;
for (var i = 0; i < map.lengths.length; i++)
lengths[i++] = map.lengths[i] * scale;
path.lengths = lengths;
var color = this.getValue(map, "color", null);
if (color != null)
path.color.setFromString(color);
return path;
}
}
@ -3849,6 +3861,10 @@ var spine;
MathUtils.toInt = function (x) {
return x > 0 ? Math.floor(x) : Math.ceil(x);
};
MathUtils.cbrt = function (x) {
var y = Math.pow(Math.abs(x), 1 / 3);
return x < 0 ? -y : y;
};
MathUtils.PI = 3.1415927;
MathUtils.PI2 = MathUtils.PI * 2;
MathUtils.radiansToDegrees = 180 / MathUtils.PI;
@ -3947,6 +3963,19 @@ var spine;
this.y = y;
return this;
};
Vector2.prototype.length = function () {
var x = this.x;
var y = this.y;
return Math.sqrt(x * x + y * y);
};
Vector2.prototype.normalize = function () {
var len = this.length();
if (len != 0) {
this.x /= len;
this.y /= len;
}
return this;
};
return Vector2;
}());
spine.Vector2 = Vector2;
@ -4055,6 +4084,7 @@ var spine;
__extends(BoundingBoxAttachment, _super);
function BoundingBoxAttachment(name) {
_super.call(this, name);
this.color = new spine.Color(1, 1, 1, 1);
}
return BoundingBoxAttachment;
}(spine.VertexAttachment));
@ -4198,6 +4228,7 @@ var spine;
_super.call(this, name);
this.closed = false;
this.constantSpeed = false;
this.color = new spine.Color(1, 1, 1, 1);
}
return PathAttachment;
}(spine.VertexAttachment));
@ -4751,7 +4782,7 @@ var spine;
this.indicesLength = indices.length;
};
Mesh.prototype.draw = function (shader, primitiveType) {
this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength);
this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength / this.elementsPerVertex);
};
Mesh.prototype.drawWithOffset = function (shader, primitiveType, offset, count) {
var gl = this.gl;
@ -5094,6 +5125,489 @@ var spine;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var ShapeRenderer = (function () {
function ShapeRenderer(gl, maxVertices) {
if (maxVertices === void 0) { maxVertices = 10920; }
this.isDrawing = false;
this.shapeType = ShapeType.Filled;
this.color = new spine.Color(1, 1, 1, 1);
this.vertexIndex = 0;
this.tmp = new spine.Vector2();
if (maxVertices > 10920)
throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.gl = gl;
this.mesh = new webgl.Mesh(gl, [new webgl.Position2Attribute(), new webgl.ColorAttribute()], maxVertices, 0);
}
ShapeRenderer.prototype.begin = function (shader) {
if (this.isDrawing)
throw new Error("ShapeRenderer.begin() has already been called");
this.shader = shader;
this.vertexIndex = 0;
this.isDrawing = true;
};
ShapeRenderer.prototype.setColor = function (color) {
this.color.setFromColor(color);
};
ShapeRenderer.prototype.setColorWith = function (r, g, b, a) {
this.color.set(r, g, b, a);
};
ShapeRenderer.prototype.point = function (x, y, color) {
if (color === void 0) { color = null; }
this.check(ShapeType.Point, 1);
if (color === null)
color = this.color;
this.vertex(x, y, color);
};
ShapeRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
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);
};
ShapeRenderer.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.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
var vertices = this.mesh.getVertices();
var idx = this.vertexIndex;
if (color === null)
color = this.color;
if (color2 === null)
color2 = this.color;
if (color3 === null)
color3 = this.color;
if (filled) {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x3, y3, color3);
}
else {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x2, y2, color);
this.vertex(x3, y3, color2);
this.vertex(x3, y3, color);
this.vertex(x, y, color2);
}
};
ShapeRenderer.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.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
var vertices = this.mesh.getVertices();
var idx = this.vertexIndex;
if (color === null)
color = this.color;
if (color2 === null)
color2 = this.color;
if (color3 === null)
color3 = this.color;
if (color4 === null)
color4 = this.color;
if (filled) {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x3, y3, color3);
this.vertex(x3, y3, color3);
this.vertex(x4, y4, color4);
this.vertex(x, y, color);
}
else {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x2, y2, color2);
this.vertex(x3, y3, color3);
this.vertex(x3, y3, color3);
this.vertex(x4, y4, color4);
this.vertex(x4, y4, color4);
this.vertex(x, y, color);
}
};
ShapeRenderer.prototype.rect = function (filled, x, y, width, height, color) {
if (color === void 0) { color = null; }
this.quad(filled, x, y, x + width, y, x + width, y + height, x, y + height, color, color, color, color);
};
ShapeRenderer.prototype.rectLine = function (filled, x1, y1, x2, y2, width, color) {
if (color === void 0) { color = null; }
this.check(filled ? ShapeType.Filled : ShapeType.Line, 8);
if (color === null)
color = this.color;
var t = this.tmp.set(y2 - y1, x1 - x2);
t.normalize();
width *= 0.5;
var tx = t.x * width;
var ty = t.y * width;
if (!filled) {
this.vertex(x1 + tx, y1 + ty, color);
this.vertex(x1 - tx, y1 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x2 - tx, y2 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x1 + tx, y1 + ty, color);
this.vertex(x2 - tx, y2 - ty, color);
this.vertex(x1 - tx, y1 - ty, color);
}
else {
this.vertex(x1 + tx, y1 + ty, color);
this.vertex(x1 - tx, y1 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x2 - tx, y2 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x1 - tx, y1 - ty, color);
}
};
ShapeRenderer.prototype.x = function (x, y, size) {
this.line(x - size, y - size, x + size, y + size);
this.line(x - size, y + size, x + size, y - size);
};
ShapeRenderer.prototype.polygon = function (polygonVertices, offset, count, color) {
if (color === void 0) { color = null; }
if (count < 3)
throw new Error("Polygon must contain at least 3 vertices");
this.check(ShapeType.Line, count * 2);
if (color === null)
color = this.color;
var vertices = this.mesh.getVertices();
var idx = this.vertexIndex;
offset <<= 1;
count <<= 1;
var firstX = polygonVertices[offset];
var firstY = polygonVertices[offset + 1];
var last = offset + count;
for (var i = offset, n = offset + count - 2; i < n; i += 2) {
var x1 = polygonVertices[i];
var y1 = polygonVertices[i + 1];
var x2 = 0;
var y2 = 0;
if (i + 2 >= last) {
x2 = firstX;
y2 = firstY;
}
else {
x2 = polygonVertices[i + 2];
y2 = polygonVertices[i + 3];
}
this.vertex(x1, y1, color);
this.vertex(x2, y2, color);
}
};
ShapeRenderer.prototype.circle = function (filled, x, y, radius, segments, color) {
if (color === void 0) { color = null; }
if (segments === 0)
segments = Math.max(1, (6 * spine.MathUtils.cbrt(radius)) | 0);
if (segments <= 0)
throw new Error("segments must be > 0.");
if (color === null)
color = this.color;
var angle = 2 * spine.MathUtils.PI / segments;
var cos = Math.cos(angle);
var sin = Math.sin(angle);
var cx = radius, cy = 0;
if (!filled) {
this.check(ShapeType.Line, segments * 2 + 2);
for (var i = 0; i < segments; i++) {
this.vertex(x + cx, y + cy, color);
var temp_1 = cx;
cx = cos * cx - sin * cy;
cy = sin * temp_1 + cos * cy;
this.vertex(x + cx, y + cy, color);
}
this.vertex(x + cx, y + cy, color);
}
else {
this.check(ShapeType.Filled, segments * 3 + 3);
segments--;
for (var i = 0; i < segments; i++) {
this.vertex(x, y, color);
this.vertex(x + cx, y + cy, color);
var temp_2 = cx;
cx = cos * cx - sin * cy;
cy = sin * temp_2 + cos * cy;
this.vertex(x + cx, y + cy, color);
}
this.vertex(x, y, color);
this.vertex(x + cx, y + cy, color);
}
var temp = cx;
cx = radius;
cy = 0;
this.vertex(x + cx, y + cy, color);
};
ShapeRenderer.prototype.curve = function (x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color) {
if (color === void 0) { color = null; }
this.check(ShapeType.Line, segments * 2 + 2);
if (color === null)
color = this.color;
var subdiv_step = 1 / segments;
var subdiv_step2 = subdiv_step * subdiv_step;
var subdiv_step3 = subdiv_step * subdiv_step * subdiv_step;
var pre1 = 3 * subdiv_step;
var pre2 = 3 * subdiv_step2;
var pre4 = 6 * subdiv_step2;
var pre5 = 6 * subdiv_step3;
var tmp1x = x1 - cx1 * 2 + cx2;
var tmp1y = y1 - cy1 * 2 + cy2;
var tmp2x = (cx1 - cx2) * 3 - x1 + x2;
var tmp2y = (cy1 - cy2) * 3 - y1 + y2;
var fx = x1;
var fy = y1;
var dfx = (cx1 - x1) * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3;
var dfy = (cy1 - y1) * pre1 + tmp1y * pre2 + tmp2y * subdiv_step3;
var ddfx = tmp1x * pre4 + tmp2x * pre5;
var ddfy = tmp1y * pre4 + tmp2y * pre5;
var dddfx = tmp2x * pre5;
var dddfy = tmp2y * pre5;
while (segments-- > 0) {
this.vertex(fx, fy, color);
fx += dfx;
fy += dfy;
dfx += ddfx;
dfy += ddfy;
ddfx += dddfx;
ddfy += dddfy;
this.vertex(fx, fy, color);
}
this.vertex(fx, fy, color);
this.vertex(x2, y2, color);
};
ShapeRenderer.prototype.vertex = function (x, y, color) {
var idx = this.vertexIndex;
var vertices = this.mesh.getVertices();
vertices[idx++] = x;
vertices[idx++] = y;
vertices[idx++] = color.r;
vertices[idx++] = color.g;
vertices[idx++] = color.b;
vertices[idx++] = color.a;
this.vertexIndex = idx;
};
ShapeRenderer.prototype.end = function () {
if (!this.isDrawing)
throw new Error("ShapeRenderer.begin() has not been called");
this.flush();
this.isDrawing = false;
};
ShapeRenderer.prototype.flush = function () {
if (this.vertexIndex == 0)
return;
this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0;
};
ShapeRenderer.prototype.check = function (shapeType, numVertices) {
if (!this.isDrawing)
throw new Error("ShapeRenderer.begin() has not been called");
if (this.shapeType == shapeType) {
if (this.mesh.maxVertices() - this.mesh.numVertices() < numVertices)
this.flush();
else
return;
}
else {
this.flush();
this.shapeType = shapeType;
}
};
ShapeRenderer.prototype.dispose = function () {
this.mesh.dispose();
};
return ShapeRenderer;
}());
webgl.ShapeRenderer = ShapeRenderer;
(function (ShapeType) {
ShapeType[ShapeType["Point"] = WebGLRenderingContext.POINTS] = "Point";
ShapeType[ShapeType["Line"] = WebGLRenderingContext.LINES] = "Line";
ShapeType[ShapeType["Filled"] = WebGLRenderingContext.TRIANGLES] = "Filled";
})(webgl.ShapeType || (webgl.ShapeType = {}));
var ShapeType = webgl.ShapeType;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {
var SkeletonDebugRenderer = (function () {
function SkeletonDebugRenderer(gl) {
this.boneLineColor = new spine.Color(1, 0, 0, 1);
this.boneOriginColor = new spine.Color(0, 1, 0, 1);
this.attachmentLineColor = new spine.Color(0, 0, 1, 0.5);
this.triangleLineColor = new spine.Color(1, 0.64, 0, 0.5);
this.aabbColor = new spine.Color(0, 1, 0, 0.5);
this.drawBones = true;
this.drawRegionAttachments = true;
this.drawBoundingBoxes = true;
this.drawMeshHull = true;
this.drawMeshTriangles = true;
this.drawPaths = true;
this.premultipliedAlpha = false;
this.scale = 1;
this.boneWidth = 2;
this.bounds = new spine.SkeletonBounds();
this.temp = new Array();
this.gl = gl;
this.shapes = new webgl.ShapeRenderer(gl);
}
SkeletonDebugRenderer.prototype.draw = function (shader, skeleton) {
var skeletonX = skeleton.x;
var skeletonY = skeleton.y;
var gl = this.gl;
gl.enable(gl.BLEND);
var srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
gl.blendFunc(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
var shapes = this.shapes;
var bones = skeleton.bones;
if (this.drawBones) {
shapes.setColor(this.boneLineColor);
shapes.begin(shader);
for (var i = 0, n = bones.length; i < n; i++) {
var bone = bones[i];
if (bone.parent == null)
continue;
var x = skeletonX + bone.data.length * bone.a + bone.worldX;
var y = skeletonY + bone.data.length * bone.c + bone.worldY;
shapes.rectLine(true, skeletonX + bone.worldX, skeletonY + bone.worldY, x, y, this.boneWidth * this.scale);
}
shapes.end();
shapes.begin(shader);
shapes.x(skeletonX, skeletonY, 4 * this.scale);
}
else
shapes.begin(shader);
if (this.drawRegionAttachments) {
shapes.setColor(this.attachmentLineColor);
var slots = skeleton.slots;
for (var i = 0, n = slots.length; i < n; i++) {
var slot = slots[i];
var attachment = slot.getAttachment();
if (attachment instanceof spine.RegionAttachment) {
var regionAttachment = attachment;
var vertices = regionAttachment.updateWorldVertices(slot, false);
shapes.line(vertices[spine.RegionAttachment.X1], vertices[spine.RegionAttachment.Y1], vertices[spine.RegionAttachment.X2], vertices[spine.RegionAttachment.Y2]);
shapes.line(vertices[spine.RegionAttachment.X2], vertices[spine.RegionAttachment.Y2], vertices[spine.RegionAttachment.X3], vertices[spine.RegionAttachment.Y3]);
shapes.line(vertices[spine.RegionAttachment.X3], vertices[spine.RegionAttachment.Y3], vertices[spine.RegionAttachment.X4], vertices[spine.RegionAttachment.Y4]);
shapes.line(vertices[spine.RegionAttachment.X4], vertices[spine.RegionAttachment.Y4], vertices[spine.RegionAttachment.X1], vertices[spine.RegionAttachment.Y1]);
}
}
}
if (this.drawMeshHull || this.drawMeshTriangles) {
var slots = skeleton.slots;
for (var i = 0, n = slots.length; i < n; i++) {
var slot = slots[i];
var attachment = slot.getAttachment();
if (!(attachment instanceof spine.MeshAttachment))
continue;
var mesh = attachment;
mesh.updateWorldVertices(slot, false);
var vertices = mesh.worldVertices;
var triangles = mesh.triangles;
var hullLength = mesh.hullLength;
if (this.drawMeshTriangles) {
shapes.setColor(this.triangleLineColor);
for (var ii = 0, nn = triangles.length; ii < nn; ii += 3) {
var v1 = triangles[ii] * 8, v2 = triangles[ii + 1] * 8, v3 = triangles[ii + 2] * 8;
shapes.triangle(false, vertices[v1], vertices[v1 + 1], vertices[v2], vertices[v2 + 1], vertices[v3], vertices[v3 + 1]);
}
}
if (this.drawMeshHull && hullLength > 0) {
shapes.setColor(this.attachmentLineColor);
hullLength = (hullLength >> 1) * 8;
var lastX = vertices[hullLength - 8], lastY = vertices[hullLength - 7];
for (var ii = 0, nn = hullLength; ii < nn; ii += 8) {
var x = vertices[ii], y = vertices[ii + 1];
shapes.line(x, y, lastX, lastY);
lastX = x;
lastY = y;
}
}
}
}
if (this.drawBoundingBoxes) {
var bounds = this.bounds;
bounds.update(skeleton, true);
shapes.setColor(this.aabbColor);
shapes.rect(false, bounds.minX, bounds.minY, bounds.getWidth(), bounds.getHeight());
var polygons = bounds.polygons;
var boxes = bounds.boundingBoxes;
for (var i = 0, n = polygons.length; i < n; i++) {
var polygon = polygons[i];
shapes.setColor(boxes[i].color);
shapes.polygon(polygon, 0, polygon.length);
}
}
if (this.drawPaths) {
var slots = skeleton.slots;
for (var i = 0, n = slots.length; i < n; i++) {
var slot = slots[i];
var attachment = slot.getAttachment();
if (!(attachment instanceof spine.PathAttachment))
continue;
var path = attachment;
var nn = path.worldVerticesLength;
var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
path.computeWorldVertices(slot, world);
var color = path.color;
var x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
if (path.closed) {
shapes.setColor(color);
var cx1 = world[0], cy1 = world[1], cx2 = world[nn - 2], cy2 = world[nn - 1];
x2 = world[nn - 4];
y2 = world[nn - 3];
shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
shapes.line(x1, y1, cx1, cy1);
shapes.line(x2, y2, cx2, cy2);
}
nn -= 4;
for (var ii = 4; ii < nn; ii += 6) {
var cx1 = world[ii], cy1 = world[ii + 1], cx2 = world[ii + 2], cy2 = world[ii + 3];
x2 = world[ii + 4];
y2 = world[ii + 5];
shapes.setColor(color);
shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
shapes.line(x1, y1, cx1, cy1);
shapes.line(x2, y2, cx2, cy2);
x1 = x2;
y1 = y2;
}
}
}
shapes.end();
shapes.begin(shader);
if (this.drawBones) {
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.end();
};
SkeletonDebugRenderer.prototype.dispose = function () {
this.shapes.dispose();
};
SkeletonDebugRenderer.LIGHT_GRAY = new spine.Color(192 / 255, 192 / 255, 192 / 255, 1);
SkeletonDebugRenderer.GREEN = new spine.Color(0, 1, 0, 1);
return SkeletonDebugRenderer;
}());
webgl.SkeletonDebugRenderer = SkeletonDebugRenderer;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
(function (spine) {
var webgl;
(function (webgl) {

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

File diff suppressed because one or more lines are too long

8
spine-ts/core/src/SkeletonBounds.ts
View File

@ -188,6 +188,14 @@ module spine {
let index = this.boundingBoxes.indexOf(boundingBox);
return index == -1 ? null : this.polygons[index];
}
getWidth () {
return this.maxX - this.minX;
}
getHeight () {
return this.maxY - this.minY;
}
}
}

5
spine-ts/core/src/SkeletonJson.ts
View File

@ -273,6 +273,8 @@ module spine {
let box = this.attachmentLoader.newBoundingBoxAttachment(skin, name);
if (box == null) return null;
this.readVertices(map, box, map.vertexCount << 1);
let color: string = this.getValue(map, "color", null);
if (color != null) box.color.setFromString(color);
return box;
}
case "mesh":
@ -314,6 +316,9 @@ module spine {
for (let i = 0; i < map.lengths.length; i++)
lengths[i++] = map.lengths[i] * scale;
path.lengths = lengths;
let color: string = this.getValue(map, "color", null);
if (color != null) path.color.setFromString(color);
return path;
}
}

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

@ -118,6 +118,11 @@ module spine {
static toInt (x: number) {
return x > 0 ? Math.floor(x) : Math.ceil(x);
}
static cbrt (x: number) {
var y = Math.pow(Math.abs(x), 1/3);
return x < 0 ? -y : y;
}
}
export class Utils {
@ -203,5 +208,20 @@ module spine {
this.y = y;
return this;
}
length () {
let x = this.x;
let y = this.y;
return Math.sqrt(x * x + y * y);
}
normalize () {
let len = this.length();
if (len != 0) {
this.x /= len;
this.y /= len;
}
return this;
}
}
}

2
spine-ts/core/src/attachments/BoundingBoxAttachment.ts
View File

@ -31,6 +31,8 @@
module spine {
export class BoundingBoxAttachment extends VertexAttachment {
color = new Color(1, 1, 1, 1);
constructor (name: string) {
super(name);
}

1
spine-ts/core/src/attachments/PathAttachment.ts
View File

@ -33,6 +33,7 @@ module spine {
export class PathAttachment extends VertexAttachment {
lengths: Array<number>;
closed = false; constantSpeed = false;
color = new Color(1, 1, 1, 1);
constructor (name: string) {
super(name);

18
spine-ts/webgl/example/index.html
View File

@ -26,8 +26,10 @@ var gl;
var mvp = new spine.webgl.Matrix4();
var assetManager;
var skeletonRenderer;
var debugRenderer;
var debugShader;
var skeletons = {};
var activeSkeleton = "bunny";
var activeSkeleton = "hero-mesh";
function init () {
// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
@ -43,6 +45,13 @@ function init () {
batcher = new spine.webgl.PolygonBatcher(gl);
mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
debugRenderer.drawRegionAttachments = false;
debugRenderer.drawBoundingBoxes = false;
debugRenderer.drawMeshHull = false;
debugRenderer.drawMeshTriangles = false;
debugRenderer.drawPaths = false;
debugShader = spine.webgl.Shader.newColored(gl);
assetManager = new spine.webgl.AssetManager(gl);
// Tell AssetManager to load the resources for each model, including the exported .json file, the .atlas file and the .png
@ -229,6 +238,13 @@ function render () {
shader.unbind();
// draw debug information
debugShader.bind();
debugShader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
debugRenderer.premultipliedAlpha = premultipliedAlpha;
debugRenderer.draw(debugShader, skeleton);
debugShader.unbind();
requestAnimationFrame(render);
}

65
spine-ts/webgl/example/test.html Normal file
View File

@ -0,0 +1,65 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
</style>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas, gl, shader, renderer, mvp, lastFrameTime = Date.now() / 1000;
function init() {
canvas = document.getElementById("canvas");
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
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);
}
function render() {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
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.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();
})();
</script>
</body>
</html>

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

@ -85,7 +85,7 @@ module spine.webgl {
}
draw (shader: Shader, primitiveType: number) {
this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0? this.indicesLength: this.verticesLength);
this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0? this.indicesLength: this.verticesLength / this.elementsPerVertex);
}
drawWithOffset (shader: Shader, primitiveType: number, offset: number, count: number) {

328
spine-ts/webgl/src/ShapeRenderer.ts Normal file
View File

@ -0,0 +1,328 @@
/******************************************************************************
* 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 ShapeRenderer implements Disposable {
private gl: WebGLRenderingContext;
private isDrawing = false;
private mesh: Mesh;
private shapeType = ShapeType.Filled;
private color = new Color(1, 1, 1, 1);
private shader: Shader;
private vertexIndex = 0;
private tmp = new Vector2();
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);
}
begin (shader: Shader) {
if (this.isDrawing) throw new Error("ShapeRenderer.begin() has already been called");
this.shader = shader;
this.vertexIndex = 0;
this.isDrawing = true;
}
setColor (color: Color) {
this.color.setFromColor(color);
}
setColorWith (r: number, g: number, b: number, a: number) {
this.color.set(r, g, b, a);
}
point (x: number, y: number, color: Color = null) {
this.check(ShapeType.Point, 1);
if (color === null) color = this.color;
this.vertex(x, y, color);
}
line (x: number, y: number, x2: number, y2: number, color: Color = null, color2: 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;
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
}
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.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
let vertices = this.mesh.getVertices();
let idx = this.vertexIndex;
if (color === null) color = this.color;
if (color2 === null) color2 = this.color;
if (color3 === null) color3 = this.color;
if (filled) {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x3, y3, color3);
} else {
this.vertex(x, y, color);
this.vertex(x2, y2, color2);
this.vertex(x2, y2, color);
this.vertex(x3, y3, color2);
this.vertex(x3, y3, color);
this.vertex(x, y, color2);
}
}
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.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
let vertices = this.mesh.getVertices();
let idx = this.vertexIndex;
if (color === null) color = this.color;
if (color2 === null) color2 = this.color;
if (color3 === null) color3 = this.color;
if (color4 === null) color4 = this.color;
if (filled) {
this.vertex(x, y, color); this.vertex(x2, y2, color2); this.vertex(x3, y3, color3);
this.vertex(x3, y3, color3); this.vertex(x4, y4, color4); this.vertex(x, y, color);
} else {
this.vertex(x, y, color); this.vertex(x2, y2, color2);
this.vertex(x2, y2, color2); this.vertex(x3, y3, color3);
this.vertex(x3, y3, color3); this.vertex(x4, y4, color4);
this.vertex(x4, y4, color4); this.vertex(x, y, color);
}
}
rect (filled: boolean, x: number, y: number, width: number, height: number, color: Color = null) {
this.quad(filled, x, y, x + width, y, x + width, y + height, x, y + height, color, color, color, color);
}
rectLine (filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color: Color = null) {
this.check(filled ? ShapeType.Filled : ShapeType.Line, 8);
if (color === null) color = this.color;
let t = this.tmp.set(y2 - y1, x1 - x2);
t.normalize();
width *= 0.5;
let tx = t.x * width;
let ty = t.y * width;
if (!filled) {
this.vertex(x1 + tx, y1 + ty, color);
this.vertex(x1 - tx, y1 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x2 - tx, y2 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x1 + tx, y1 + ty, color);
this.vertex(x2 - tx, y2 - ty, color);
this.vertex(x1 - tx, y1 - ty, color);
} else {
this.vertex(x1 + tx, y1 + ty, color);
this.vertex(x1 - tx, y1 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x2 - tx, y2 - ty, color);
this.vertex(x2 + tx, y2 + ty, color);
this.vertex(x1 - tx, y1 - ty, color);
}
}
x (x: number, y: number, size: number) {
this.line(x - size, y - size, x + size, y + size);
this.line(x - size, y + size, x + size, y - size);
}
polygon (polygonVertices: ArrayLike<number>, offset: number, count: number, color: Color = null) {
if (count < 3) throw new Error("Polygon must contain at least 3 vertices");
this.check(ShapeType.Line, count * 2);
if (color === null) color = this.color;
let vertices = this.mesh.getVertices();
let idx = this.vertexIndex;
offset <<= 1;
count <<= 1;
let firstX = polygonVertices[offset];
let firstY = polygonVertices[offset + 1];
let last = offset + count;
for (let i = offset, n = offset + count - 2; i < n; i += 2) {
let x1 = polygonVertices[i];
let y1 = polygonVertices[i+1];
let x2 = 0;
let y2 = 0;
if (i + 2 >= last) {
x2 = firstX;
y2 = firstY;
} else {
x2 = polygonVertices[i + 2];
y2 = polygonVertices[i + 3];
}
this.vertex(x1, y1, color);
this.vertex(x2, y2, color);
}
}
circle (filled: boolean, x: number, y: number, radius: number, segments: number, color: Color = null) {
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;
let angle = 2 * MathUtils.PI / segments;
let cos = Math.cos(angle);
let sin = Math.sin(angle);
let cx = radius, cy = 0;
if (!filled) {
this.check(ShapeType.Line, segments * 2 + 2);
for (let i = 0; i < segments; i++) {
this.vertex(x + cx, y + cy, color);
let temp = cx;
cx = cos * cx - sin * cy;
cy = sin * temp + cos * cy;
this.vertex(x + cx, y + cy, color);
}
// Ensure the last segment is identical to the first.
this.vertex(x + cx, y + cy, color);
} else {
this.check(ShapeType.Filled, segments * 3 + 3);
segments--;
for (let i = 0; i < segments; i++) {
this.vertex(x, y, color);
this.vertex(x + cx, y + cy, color);
let temp = cx;
cx = cos * cx - sin * cy;
cy = sin * temp + cos * cy;
this.vertex(x + cx, y + cy, color);
}
// Ensure the last segment is identical to the first.
this.vertex(x, y, color);
this.vertex(x + cx, y + cy, color);
}
let temp = cx;
cx = radius;
cy = 0;
this.vertex(x + cx, y + cy, color);
}
curve (x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color: Color = null) {
this.check(ShapeType.Line, segments * 2 + 2);
if (color === null) color = this.color;
// Algorithm from: http://www.antigrain.com/research/bezier_interpolation/index.html#PAGE_BEZIER_INTERPOLATION
let subdiv_step = 1 / segments;
let subdiv_step2 = subdiv_step * subdiv_step;
let subdiv_step3 = subdiv_step * subdiv_step * subdiv_step;
let pre1 = 3 * subdiv_step;
let pre2 = 3 * subdiv_step2;
let pre4 = 6 * subdiv_step2;
let pre5 = 6 * subdiv_step3;
let tmp1x = x1 - cx1 * 2 + cx2;
let tmp1y = y1 - cy1 * 2 + cy2;
let tmp2x = (cx1 - cx2) * 3 - x1 + x2;
let tmp2y = (cy1 - cy2) * 3 - y1 + y2;
let fx = x1;
let fy = y1;
let dfx = (cx1 - x1) * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3;
let dfy = (cy1 - y1) * pre1 + tmp1y * pre2 + tmp2y * subdiv_step3;
let ddfx = tmp1x * pre4 + tmp2x * pre5;
let ddfy = tmp1y * pre4 + tmp2y * pre5;
let dddfx = tmp2x * pre5;
let dddfy = tmp2y * pre5;
while (segments-- > 0) {
this.vertex(fx, fy, color);
fx += dfx;
fy += dfy;
dfx += ddfx;
dfy += ddfy;
ddfx += dddfx;
ddfy += dddfy;
this.vertex(fx, fy, color);
}
this.vertex(fx, fy, color);
this.vertex(x2, y2, color);
}
private vertex (x: number, y: number, color: Color) {
let idx = this.vertexIndex;
let vertices = this.mesh.getVertices();
vertices[idx++] = x;
vertices[idx++] = y;
vertices[idx++] = color.r;
vertices[idx++] = color.g;
vertices[idx++] = color.b;
vertices[idx++] = color.a;
this.vertexIndex = idx;
}
end () {
if (!this.isDrawing) throw new Error("ShapeRenderer.begin() has not been called");
this.flush();
this.isDrawing = false;
}
private flush () {
if (this.vertexIndex == 0) return;
this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0;
}
private check(shapeType: ShapeType, numVertices: number) {
if (!this.isDrawing) throw new Error("ShapeRenderer.begin() has not been called");
if (this.shapeType == shapeType) {
if (this.mesh.maxVertices() - this.mesh.numVertices() < numVertices) this.flush();
else return;
} else {
this.flush();
this.shapeType = shapeType;
}
}
dispose () {
this.mesh.dispose();
}
}
export enum ShapeType {
Point = WebGLRenderingContext.POINTS,
Line = WebGLRenderingContext.LINES,
Filled = WebGLRenderingContext.TRIANGLES
}
}

211
spine-ts/webgl/src/SkeletonDebugRenderer.ts Normal file
View File

@ -0,0 +1,211 @@
/******************************************************************************
* 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 SkeletonDebugRenderer implements Disposable {
boneLineColor = new Color(1, 0, 0, 1);
boneOriginColor = new Color(0, 1, 0, 1);
attachmentLineColor = new Color(0, 0, 1, 0.5);
triangleLineColor = new Color(1, 0.64, 0, 0.5);
aabbColor = new Color(0, 1, 0, 0.5);
drawBones = true;
drawRegionAttachments = true;
drawBoundingBoxes = true;
drawMeshHull = true;
drawMeshTriangles = true;
drawPaths = true;
premultipliedAlpha = false;
scale = 1;
boneWidth = 2;
private gl: WebGLRenderingContext;
private shapes: ShapeRenderer;
private bounds = new SkeletonBounds();
private temp = new Array<number>();
private static LIGHT_GRAY = new Color(192 / 255, 192 / 255, 192 / 255, 1);
private static GREEN = new Color(0, 1, 0, 1);
constructor (gl: WebGLRenderingContext) {
this.gl = gl;
this.shapes = new ShapeRenderer(gl);
}
draw (shader: Shader, skeleton: Skeleton) {
let skeletonX = skeleton.x;
let skeletonY = skeleton.y;
let gl = this.gl;
gl.enable(gl.BLEND);
let srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
gl.blendFunc(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
let shapes = this.shapes;
let bones = skeleton.bones;
if (this.drawBones) {
shapes.setColor(this.boneLineColor);
shapes.begin(shader);
for (let i = 0, n = bones.length; i < n; i++) {
let bone = bones[i];
if (bone.parent == null) continue;
let x = skeletonX + bone.data.length * bone.a + bone.worldX;
let y = skeletonY + bone.data.length * bone.c + bone.worldY;
shapes.rectLine(true, skeletonX + bone.worldX, skeletonY + bone.worldY, x, y, this.boneWidth * this.scale);
}
shapes.end();
shapes.begin(shader);
shapes.x(skeletonX, skeletonY, 4 * this.scale);
} else
shapes.begin(shader);
if (this.drawRegionAttachments) {
shapes.setColor(this.attachmentLineColor);
let slots = skeleton.slots;
for (let i = 0, n = slots.length; i < n; i++) {
let slot = slots[i];
let attachment = slot.getAttachment();
if (attachment instanceof RegionAttachment) {
let regionAttachment = <RegionAttachment>attachment;
let vertices = regionAttachment.updateWorldVertices(slot, false);
shapes.line(vertices[RegionAttachment.X1], vertices[RegionAttachment.Y1], vertices[RegionAttachment.X2], vertices[RegionAttachment.Y2]);
shapes.line(vertices[RegionAttachment.X2], vertices[RegionAttachment.Y2], vertices[RegionAttachment.X3], vertices[RegionAttachment.Y3]);
shapes.line(vertices[RegionAttachment.X3], vertices[RegionAttachment.Y3], vertices[RegionAttachment.X4], vertices[RegionAttachment.Y4]);
shapes.line(vertices[RegionAttachment.X4], vertices[RegionAttachment.Y4], vertices[RegionAttachment.X1], vertices[RegionAttachment.Y1]);
}
}
}
if (this.drawMeshHull || this.drawMeshTriangles) {
let slots = skeleton.slots;
for (let i = 0, n = slots.length; i < n; i++) {
let slot = slots[i];
let attachment = slot.getAttachment();
if (!(attachment instanceof MeshAttachment)) continue;
let mesh = <MeshAttachment>attachment;
mesh.updateWorldVertices(slot, false);
let vertices = mesh.worldVertices;
let triangles = mesh.triangles;
let hullLength = mesh.hullLength;
if (this.drawMeshTriangles) {
shapes.setColor(this.triangleLineColor);
for (let ii = 0, nn = triangles.length; ii < nn; ii += 3) {
let v1 = triangles[ii] * 8, v2 = triangles[ii + 1] * 8, v3 = triangles[ii + 2] * 8;
shapes.triangle(false, vertices[v1], vertices[v1 + 1], //
vertices[v2], vertices[v2 + 1], //
vertices[v3], vertices[v3 + 1] //
);
}
}
if (this.drawMeshHull && hullLength > 0) {
shapes.setColor(this.attachmentLineColor);
hullLength = (hullLength >> 1) * 8;
let lastX = vertices[hullLength - 8], lastY = vertices[hullLength - 7];
for (let ii = 0, nn = hullLength; ii < nn; ii += 8) {
let x = vertices[ii], y = vertices[ii + 1];
shapes.line(x, y, lastX, lastY);
lastX = x;
lastY = y;
}
}
}
}
if (this.drawBoundingBoxes) {
let bounds = this.bounds;
bounds.update(skeleton, true);
shapes.setColor(this.aabbColor);
shapes.rect(false, bounds.minX, bounds.minY, bounds.getWidth(), bounds.getHeight());
let polygons = bounds.polygons;
let boxes = bounds.boundingBoxes;
for (let i = 0, n = polygons.length; i < n; i++) {
let polygon = polygons[i];
shapes.setColor(boxes[i].color);
shapes.polygon(polygon, 0, polygon.length);
}
}
if (this.drawPaths) {
let slots = skeleton.slots;
for (let i = 0, n = slots.length; i < n; i++) {
let slot = slots[i];
let attachment = slot.getAttachment();
if (!(attachment instanceof PathAttachment)) continue;
let path = <PathAttachment>attachment;
let nn = path.worldVerticesLength;
let world = this.temp = Utils.setArraySize(this.temp, nn, 0);
path.computeWorldVertices(slot, world);
let color = path.color;
let x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
if (path.closed) {
shapes.setColor(color);
let cx1 = world[0], cy1 = world[1], cx2 = world[nn - 2], cy2 = world[nn - 1];
x2 = world[nn - 4];
y2 = world[nn - 3];
shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
shapes.line(x1, y1, cx1, cy1);
shapes.line(x2, y2, cx2, cy2);
}
nn -= 4;
for (let ii = 4; ii < nn; ii += 6) {
let cx1 = world[ii], cy1 = world[ii + 1], cx2 = world[ii + 2], cy2 = world[ii + 3];
x2 = world[ii + 4];
y2 = world[ii + 5];
shapes.setColor(color);
shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
shapes.line(x1, y1, cx1, cy1);
shapes.line(x2, y2, cx2, cy2);
x1 = x2;
y1 = y2;
}
}
}
shapes.end();
shapes.begin(shader);
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);
}
}
shapes.end();
}
dispose () {
this.shapes.dispose();
}
}
}