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

[ts] New demos, tons of fixes

Browse Source
This commit is contained in:
badlogic 2016-08-30 09:46:06 +02:00
parent c20fc44cda
commit d2c4a2b1bc
45 changed files with 5470 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1005,16 +1005,25 @@ declare module spine.webgl {
lastX: number;
lastY: number;
buttonDown: boolean;
currTouch: Touch;
touchesPool: Pool<Touch>;
private listeners;
constructor(element: HTMLElement);
private setupCallbacks(element);
addListener(listener: InputListener): void;
removeListener(listener: InputListener): void;
}
class Touch {
identifier: number;
x: number;
y: number;
constructor(identifier: number, x: number, y: number);
}
interface InputListener {
down(x: number, y: number): void;
up(x: number, y: number): void;
moved(x: number, y: number): void;
dragged(x: number, y: number): void;
}
}
declare module spine.webgl {
@ -1270,13 +1279,12 @@ declare module spine.webgl {
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;
draw(shapes: ShapeRenderer, skeleton: Skeleton): void;
dispose(): void;
}
}
@ -1324,6 +1332,7 @@ declare module spine {
private assetManager;
private shader;
private batcher;
private shapes;
private debugShader;
private mvp;
private skeletonRenderer;

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

@ -4968,6 +4968,10 @@ var spine;
this.lastX = 0;
this.lastY = 0;
this.buttonDown = false;
this.currTouch = null;
this.touchesPool = new spine.Pool(function () {
return new spine.webgl.Touch(0, 0, 0);
});
this.listeners = new Array();
this.element = element;
this.setupCallbacks(element);
@ -4995,11 +4999,15 @@ var spine;
var y = ev.clientY - rect.top;
var listeners = _this.listeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i].moved(x, y);
if (_this.buttonDown) {
listeners[i].dragged(x, y);
}
else {
listeners[i].moved(x, y);
}
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
}
}, true);
element.addEventListener("mouseup", function (ev) {
@ -5013,11 +5021,97 @@ var spine;
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
_this.buttonDown = false;
}
}, true);
element.addEventListener(navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "DOMMouseScroll" : "mousewheel", function (ev) {
}, true);
element.addEventListener("touchstart", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
alert(JSON.stringify(touches));
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
_this.currTouch = _this.touchesPool.obtain();
_this.currTouch.identifier = touch.identifier;
_this.currTouch.x = x;
_this.currTouch.y = y;
break;
}
var listeners = _this.listeners;
for (var i_1 = 0; i_1 < listeners.length; i_1++) {
listeners[i_1].down(_this.currTouch.x, _this.currTouch.y);
}
_this.lastX = _this.currTouch.x;
_this.lastY = _this.currTouch.y;
_this.buttonDown = true;
ev.preventDefault();
}, false);
element.addEventListener("touchend", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners;
for (var i_2 = 0; i_2 < listeners.length; i_2++) {
listeners[i_2].up(x, y);
}
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchcancel", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners;
for (var i_3 = 0; i_3 < listeners.length; i_3++) {
listeners[i_3].up(x, y);
}
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchmove", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
var listeners = _this.listeners;
for (var i_4 = 0; i_4 < listeners.length; i_4++) {
listeners[i_4].dragged(x, y);
}
break;
}
}
ev.preventDefault();
}, false);
};
Input.prototype.addListener = function (listener) {
this.listeners.push(listener);
@ -5031,6 +5125,15 @@ var spine;
return Input;
}());
webgl.Input = Input;
var Touch = (function () {
function Touch(identifier, x, y) {
this.identifier = identifier;
this.x = x;
this.y = y;
}
return Touch;
}());
webgl.Touch = Touch;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
@ -5626,7 +5729,7 @@ var spine;
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapesShader, skeleton);
this.skeletonDebugRenderer.draw(this.shapes, skeleton);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
@ -5797,12 +5900,15 @@ var spine;
this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher;
}
else {
else if (renderer instanceof webgl.ShapeRenderer) {
this.shapesShader.bind();
this.shapesShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
this.shapes.begin(this.shapesShader);
this.activeRenderer = this.shapes;
}
else {
this.activeRenderer = this.skeletonDebugRenderer;
}
};
SceneRenderer.prototype.dispose = function () {
this.batcher.dispose();
@ -6250,6 +6356,7 @@ var spine;
if (!this.isDrawing)
throw new Error("ShapeRenderer.begin() has not been called");
this.flush();
this.gl.disable(this.gl.BLEND);
this.isDrawing = false;
};
ShapeRenderer.prototype.flush = function () {
@ -6258,7 +6365,6 @@ var spine;
this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0;
this.gl.disable(this.gl.BLEND);
};
ShapeRenderer.prototype.check = function (shapeType, numVertices) {
if (!this.isDrawing)
@ -6311,20 +6417,16 @@ var spine;
this.bounds = new spine.SkeletonBounds();
this.temp = new Array();
this.gl = gl;
this.shapes = new webgl.ShapeRenderer(gl);
}
SkeletonDebugRenderer.prototype.draw = function (shader, skeleton) {
SkeletonDebugRenderer.prototype.draw = function (shapes, 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;
shapes.setBlendMode(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
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)
@ -6333,12 +6435,8 @@ var spine;
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;
@ -6438,8 +6536,6 @@ var spine;
}
}
}
shapes.end();
shapes.begin(shader);
if (this.drawBones) {
shapes.setColor(this.boneOriginColor);
for (var i = 0, n = bones.length; i < n; i++) {
@ -6447,10 +6543,8 @@ var spine;
shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, SkeletonDebugRenderer.GREEN, 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);
@ -6655,6 +6749,7 @@ var spine;
this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
this.debugShader = spine.webgl.Shader.newColored(gl);
this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
this.shapes = new spine.webgl.ShapeRenderer(gl);
var assets = this.assetManager = new spine.webgl.AssetManager(gl);
assets.loadText(config.atlas);
assets.loadText(config.json);
@ -6769,11 +6864,14 @@ var spine;
shader.unbind();
if (this.config.debug) {
var shader_1 = this.debugShader;
var shapes = this.shapes;
var renderer = this.debugRenderer;
shader_1.bind();
shader_1.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
renderer.premultipliedAlpha = premultipliedAlpha;
renderer.draw(shader_1, skeleton);
shapes.begin(shader_1);
renderer.draw(shapes, skeleton);
shapes.end();
shader_1.unbind();
}
if (!this.paused)

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

File diff suppressed because one or more lines are too long

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

@ -935,16 +935,25 @@ declare module spine.webgl {
lastX: number;
lastY: number;
buttonDown: boolean;
currTouch: Touch;
touchesPool: Pool<Touch>;
private listeners;
constructor(element: HTMLElement);
private setupCallbacks(element);
addListener(listener: InputListener): void;
removeListener(listener: InputListener): void;
}
class Touch {
identifier: number;
x: number;
y: number;
constructor(identifier: number, x: number, y: number);
}
interface InputListener {
down(x: number, y: number): void;
up(x: number, y: number): void;
moved(x: number, y: number): void;
dragged(x: number, y: number): void;
}
}
declare module spine.webgl {
@ -1200,13 +1209,12 @@ declare module spine.webgl {
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;
draw(shapes: ShapeRenderer, skeleton: Skeleton): void;
dispose(): void;
}
}

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

@ -4545,6 +4545,10 @@ var spine;
this.lastX = 0;
this.lastY = 0;
this.buttonDown = false;
this.currTouch = null;
this.touchesPool = new spine.Pool(function () {
return new spine.webgl.Touch(0, 0, 0);
});
this.listeners = new Array();
this.element = element;
this.setupCallbacks(element);
@ -4572,11 +4576,15 @@ var spine;
var y = ev.clientY - rect.top;
var listeners = _this.listeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i].moved(x, y);
if (_this.buttonDown) {
listeners[i].dragged(x, y);
}
else {
listeners[i].moved(x, y);
}
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
}
}, true);
element.addEventListener("mouseup", function (ev) {
@ -4590,11 +4598,97 @@ var spine;
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
_this.buttonDown = false;
}
}, true);
element.addEventListener(navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "DOMMouseScroll" : "mousewheel", function (ev) {
}, true);
element.addEventListener("touchstart", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
alert(JSON.stringify(touches));
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
_this.currTouch = _this.touchesPool.obtain();
_this.currTouch.identifier = touch.identifier;
_this.currTouch.x = x;
_this.currTouch.y = y;
break;
}
var listeners = _this.listeners;
for (var i_1 = 0; i_1 < listeners.length; i_1++) {
listeners[i_1].down(_this.currTouch.x, _this.currTouch.y);
}
_this.lastX = _this.currTouch.x;
_this.lastY = _this.currTouch.y;
_this.buttonDown = true;
ev.preventDefault();
}, false);
element.addEventListener("touchend", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners;
for (var i_2 = 0; i_2 < listeners.length; i_2++) {
listeners[i_2].up(x, y);
}
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchcancel", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners;
for (var i_3 = 0; i_3 < listeners.length; i_3++) {
listeners[i_3].up(x, y);
}
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchmove", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
var listeners = _this.listeners;
for (var i_4 = 0; i_4 < listeners.length; i_4++) {
listeners[i_4].dragged(x, y);
}
break;
}
}
ev.preventDefault();
}, false);
};
Input.prototype.addListener = function (listener) {
this.listeners.push(listener);
@ -4608,6 +4702,15 @@ var spine;
return Input;
}());
webgl.Input = Input;
var Touch = (function () {
function Touch(identifier, x, y) {
this.identifier = identifier;
this.x = x;
this.y = y;
}
return Touch;
}());
webgl.Touch = Touch;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
@ -5203,7 +5306,7 @@ var spine;
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapesShader, skeleton);
this.skeletonDebugRenderer.draw(this.shapes, skeleton);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
@ -5374,12 +5477,15 @@ var spine;
this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher;
}
else {
else if (renderer instanceof webgl.ShapeRenderer) {
this.shapesShader.bind();
this.shapesShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
this.shapes.begin(this.shapesShader);
this.activeRenderer = this.shapes;
}
else {
this.activeRenderer = this.skeletonDebugRenderer;
}
};
SceneRenderer.prototype.dispose = function () {
this.batcher.dispose();
@ -5827,6 +5933,7 @@ var spine;
if (!this.isDrawing)
throw new Error("ShapeRenderer.begin() has not been called");
this.flush();
this.gl.disable(this.gl.BLEND);
this.isDrawing = false;
};
ShapeRenderer.prototype.flush = function () {
@ -5835,7 +5942,6 @@ var spine;
this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0;
this.gl.disable(this.gl.BLEND);
};
ShapeRenderer.prototype.check = function (shapeType, numVertices) {
if (!this.isDrawing)
@ -5888,20 +5994,16 @@ var spine;
this.bounds = new spine.SkeletonBounds();
this.temp = new Array();
this.gl = gl;
this.shapes = new webgl.ShapeRenderer(gl);
}
SkeletonDebugRenderer.prototype.draw = function (shader, skeleton) {
SkeletonDebugRenderer.prototype.draw = function (shapes, 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;
shapes.setBlendMode(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
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)
@ -5910,12 +6012,8 @@ var spine;
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;
@ -6015,8 +6113,6 @@ var spine;
}
}
}
shapes.end();
shapes.begin(shader);
if (this.drawBones) {
shapes.setColor(this.boneOriginColor);
for (var i = 0, n = bones.length; i < n; i++) {
@ -6024,10 +6120,8 @@ var spine;
shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, SkeletonDebugRenderer.GREEN, 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);

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

File diff suppressed because one or more lines are too long

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

@ -935,16 +935,25 @@ declare module spine.webgl {
lastX: number;
lastY: number;
buttonDown: boolean;
currTouch: Touch;
touchesPool: Pool<Touch>;
private listeners;
constructor(element: HTMLElement);
private setupCallbacks(element);
addListener(listener: InputListener): void;
removeListener(listener: InputListener): void;
}
class Touch {
identifier: number;
x: number;
y: number;
constructor(identifier: number, x: number, y: number);
}
interface InputListener {
down(x: number, y: number): void;
up(x: number, y: number): void;
moved(x: number, y: number): void;
dragged(x: number, y: number): void;
}
}
declare module spine.webgl {
@ -1200,13 +1209,12 @@ declare module spine.webgl {
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;
draw(shapes: ShapeRenderer, skeleton: Skeleton): void;
dispose(): void;
}
}
@ -1254,6 +1262,7 @@ declare module spine {
private assetManager;
private shader;
private batcher;
private shapes;
private debugShader;
private mvp;
private skeletonRenderer;

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

@ -4545,6 +4545,10 @@ var spine;
this.lastX = 0;
this.lastY = 0;
this.buttonDown = false;
this.currTouch = null;
this.touchesPool = new spine.Pool(function () {
return new spine.webgl.Touch(0, 0, 0);
});
this.listeners = new Array();
this.element = element;
this.setupCallbacks(element);
@ -4572,11 +4576,15 @@ var spine;
var y = ev.clientY - rect.top;
var listeners = _this.listeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i].moved(x, y);
if (_this.buttonDown) {
listeners[i].dragged(x, y);
}
else {
listeners[i].moved(x, y);
}
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
}
}, true);
element.addEventListener("mouseup", function (ev) {
@ -4590,11 +4598,97 @@ var spine;
}
_this.lastX = x;
_this.lastY = y;
_this.buttonDown = true;
_this.buttonDown = false;
}
}, true);
element.addEventListener(navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "DOMMouseScroll" : "mousewheel", function (ev) {
}, true);
element.addEventListener("touchstart", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
alert(JSON.stringify(touches));
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
_this.currTouch = _this.touchesPool.obtain();
_this.currTouch.identifier = touch.identifier;
_this.currTouch.x = x;
_this.currTouch.y = y;
break;
}
var listeners = _this.listeners;
for (var i_1 = 0; i_1 < listeners.length; i_1++) {
listeners[i_1].down(_this.currTouch.x, _this.currTouch.y);
}
_this.lastX = _this.currTouch.x;
_this.lastY = _this.currTouch.y;
_this.buttonDown = true;
ev.preventDefault();
}, false);
element.addEventListener("touchend", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners;
for (var i_2 = 0; i_2 < listeners.length; i_2++) {
listeners[i_2].up(x, y);
}
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchcancel", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
_this.touchesPool.free(_this.currTouch);
_this.currTouch = null;
_this.buttonDown = false;
var listeners = _this.listeners;
for (var i_3 = 0; i_3 < listeners.length; i_3++) {
listeners[i_3].up(x, y);
}
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchmove", function (ev) {
if (_this.currTouch != null)
return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (_this.currTouch.identifier === touch.identifier) {
var rect = element.getBoundingClientRect();
var x = touch.clientX - rect.left;
var y = touch.clientY - rect.top;
var listeners = _this.listeners;
for (var i_4 = 0; i_4 < listeners.length; i_4++) {
listeners[i_4].dragged(x, y);
}
break;
}
}
ev.preventDefault();
}, false);
};
Input.prototype.addListener = function (listener) {
this.listeners.push(listener);
@ -4608,6 +4702,15 @@ var spine;
return Input;
}());
webgl.Input = Input;
var Touch = (function () {
function Touch(identifier, x, y) {
this.identifier = identifier;
this.x = x;
this.y = y;
}
return Touch;
}());
webgl.Touch = Touch;
})(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {}));
var spine;
@ -5203,7 +5306,7 @@ var spine;
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapesShader, skeleton);
this.skeletonDebugRenderer.draw(this.shapes, skeleton);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
@ -5374,12 +5477,15 @@ var spine;
this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher;
}
else {
else if (renderer instanceof webgl.ShapeRenderer) {
this.shapesShader.bind();
this.shapesShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
this.shapes.begin(this.shapesShader);
this.activeRenderer = this.shapes;
}
else {
this.activeRenderer = this.skeletonDebugRenderer;
}
};
SceneRenderer.prototype.dispose = function () {
this.batcher.dispose();
@ -5827,6 +5933,7 @@ var spine;
if (!this.isDrawing)
throw new Error("ShapeRenderer.begin() has not been called");
this.flush();
this.gl.disable(this.gl.BLEND);
this.isDrawing = false;
};
ShapeRenderer.prototype.flush = function () {
@ -5835,7 +5942,6 @@ var spine;
this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0;
this.gl.disable(this.gl.BLEND);
};
ShapeRenderer.prototype.check = function (shapeType, numVertices) {
if (!this.isDrawing)
@ -5888,20 +5994,16 @@ var spine;
this.bounds = new spine.SkeletonBounds();
this.temp = new Array();
this.gl = gl;
this.shapes = new webgl.ShapeRenderer(gl);
}
SkeletonDebugRenderer.prototype.draw = function (shader, skeleton) {
SkeletonDebugRenderer.prototype.draw = function (shapes, 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;
shapes.setBlendMode(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
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)
@ -5910,12 +6012,8 @@ var spine;
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;
@ -6015,8 +6113,6 @@ var spine;
}
}
}
shapes.end();
shapes.begin(shader);
if (this.drawBones) {
shapes.setColor(this.boneOriginColor);
for (var i = 0, n = bones.length; i < n; i++) {
@ -6024,10 +6120,8 @@ var spine;
shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, SkeletonDebugRenderer.GREEN, 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);
@ -6232,6 +6326,7 @@ var spine;
this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
this.debugShader = spine.webgl.Shader.newColored(gl);
this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
this.shapes = new spine.webgl.ShapeRenderer(gl);
var assets = this.assetManager = new spine.webgl.AssetManager(gl);
assets.loadText(config.atlas);
assets.loadText(config.json);
@ -6346,11 +6441,14 @@ var spine;
shader.unbind();
if (this.config.debug) {
var shader_1 = this.debugShader;
var shapes = this.shapes;
var renderer = this.debugRenderer;
shader_1.bind();
shader_1.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
renderer.premultipliedAlpha = premultipliedAlpha;
renderer.draw(shader_1, skeleton);
shapes.begin(shader_1);
renderer.draw(shapes, skeleton);
shapes.end();
shader_1.unbind();
}
if (!this.paused)

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

File diff suppressed because one or more lines are too long

3
spine-ts/webgl/demos/animationmixing.js
View File

@ -28,7 +28,8 @@ var animationMixingDemo = function(pathPrefix) {
stateNoMix.setAnimation(1, "shoot", false);
},
up: function(x, y) { },
moved: function(x, y) { }
moved: function(x, y) { },
dragged: function(x, y) { }
});
}

363
spine-ts/webgl/demos/assets/fanart_cut.atlas Normal file
View File

@ -0,0 +1,363 @@
fanart_cut.png
size: 1024,1024
format: RGBA8888
filter: Linear,Linear
repeat: none
Layer 100
rotate: false
xy: 744, 274
size: 86, 111
orig: 86, 111
offset: 0, 0
index: -1
Layer 101
rotate: false
xy: 519, 167
size: 148, 66
orig: 148, 66
offset: 0, 0
index: -1
Layer 102
rotate: false
xy: 768, 530
size: 167, 91
orig: 167, 91
offset: 0, 0
index: -1
Layer 103
rotate: false
xy: 260, 164
size: 158, 258
orig: 158, 258
offset: 0, 0
index: -1
Layer 104
rotate: false
xy: 881, 625
size: 87, 117
orig: 87, 117
offset: 0, 0
index: -1
Layer 106
rotate: false
xy: 916, 875
size: 106, 147
orig: 106, 147
offset: 0, 0
index: -1
Layer 107
rotate: false
xy: 376, 668
size: 196, 354
orig: 196, 354
offset: 0, 0
index: -1
Layer 108
rotate: false
xy: 2, 160
size: 256, 262
orig: 256, 262
offset: 0, 0
index: -1
Layer 109
rotate: false
xy: 390, 73
size: 55, 89
orig: 55, 89
offset: 0, 0
index: -1
Layer 110
rotate: false
xy: 2, 78
size: 233, 80
orig: 233, 80
offset: 0, 0
index: -1
Layer 111
rotate: false
xy: 380, 493
size: 241, 173
orig: 241, 173
offset: 0, 0
index: -1
Layer 112
rotate: false
xy: 916, 744
size: 86, 129
orig: 86, 129
offset: 0, 0
index: -1
Layer 113
rotate: false
xy: 295, 73
size: 93, 89
orig: 93, 89
offset: 0, 0
index: -1
Layer 114
rotate: false
xy: 162, 2
size: 57, 74
orig: 57, 74
offset: 0, 0
index: -1
Layer 115
rotate: false
xy: 221, 7
size: 72, 69
orig: 72, 69
offset: 0, 0
index: -1
Layer 116
rotate: false
xy: 768, 623
size: 111, 124
orig: 111, 124
offset: 0, 0
index: -1
Layer 117
rotate: false
xy: 524, 78
size: 63, 87
orig: 63, 87
offset: 0, 0
index: -1
Layer 118
rotate: false
xy: 653, 387
size: 111, 136
orig: 111, 136
offset: 0, 0
index: -1
Layer 66
rotate: false
xy: 2, 424
size: 327, 234
orig: 327, 234
offset: 0, 0
index: -1
Layer 68
rotate: false
xy: 820, 176
size: 87, 96
orig: 87, 96
offset: 0, 0
index: -1
Layer 69
rotate: false
xy: 541, 326
size: 110, 165
orig: 110, 165
offset: 0, 0
index: -1
Layer 70
rotate: false
xy: 2, 3
size: 158, 73
orig: 158, 73
offset: 0, 0
index: -1
Layer 72
rotate: false
xy: 447, 2
size: 86, 71
orig: 86, 71
offset: 0, 0
index: -1
Layer 73
rotate: false
xy: 420, 242
size: 119, 249
orig: 119, 249
offset: 0, 0
index: -1
Layer 74
rotate: false
xy: 623, 525
size: 143, 185
orig: 143, 185
offset: 0, 0
index: -1
Layer 75
rotate: false
xy: 541, 235
size: 115, 89
orig: 115, 89
offset: 0, 0
index: -1
Layer 76
rotate: false
xy: 820, 133
size: 92, 41
orig: 92, 41
offset: 0, 0
index: -1
Layer 77
rotate: false
xy: 420, 165
size: 97, 75
orig: 97, 75
offset: 0, 0
index: -1
Layer 78
rotate: false
xy: 755, 145
size: 63, 127
orig: 63, 127
offset: 0, 0
index: -1
Layer 79
rotate: false
xy: 331, 429
size: 47, 229
orig: 47, 229
offset: 0, 0
index: -1
Layer 80
rotate: false
xy: 669, 153
size: 84, 113
orig: 84, 113
offset: 0, 0
index: -1
Layer 81
rotate: false
xy: 720, 125
size: 21, 26
orig: 21, 26
offset: 0, 0
index: -1
Layer 82
rotate: false
xy: 638, 108
size: 80, 43
orig: 80, 43
offset: 0, 0
index: -1
Layer 84
rotate: false
xy: 295, 27
size: 81, 44
orig: 81, 44
offset: 0, 0
index: -1
Layer 85
rotate: false
xy: 574, 676
size: 42, 34
orig: 42, 34
offset: 0, 0
index: -1
Layer 851
rotate: false
xy: 378, 37
size: 42, 34
orig: 42, 34
offset: 0, 0
index: -1
Layer 86
rotate: false
xy: 970, 630
size: 37, 12
orig: 37, 12
offset: 0, 0
index: -1
Layer 87
rotate: false
xy: 380, 463
size: 24, 28
orig: 24, 28
offset: 0, 0
index: -1
Layer 871
rotate: false
xy: 623, 495
size: 24, 28
orig: 24, 28
offset: 0, 0
index: -1
Layer 88
rotate: false
xy: 589, 83
size: 20, 16
orig: 20, 16
offset: 0, 0
index: -1
Layer 89
rotate: false
xy: 295, 2
size: 24, 23
orig: 24, 23
offset: 0, 0
index: -1
Layer 90
rotate: false
xy: 574, 712
size: 182, 310
orig: 182, 310
offset: 0, 0
index: -1
Layer 91
rotate: false
xy: 237, 78
size: 56, 80
orig: 56, 80
offset: 0, 0
index: -1
Layer 92
rotate: false
xy: 2, 660
size: 372, 362
orig: 372, 362
offset: 0, 0
index: -1
Layer 93
rotate: false
xy: 758, 749
size: 156, 273
orig: 156, 273
offset: 0, 0
index: -1
Layer 94
rotate: false
xy: 589, 101
size: 47, 64
orig: 47, 64
offset: 0, 0
index: -1
Layer 95
rotate: false
xy: 658, 268
size: 84, 117
orig: 84, 117
offset: 0, 0
index: -1
Layer 96
rotate: false
xy: 937, 521
size: 78, 102
orig: 78, 102
offset: 0, 0
index: -1
Layer 97
rotate: false
xy: 447, 75
size: 75, 88
orig: 75, 88
offset: 0, 0
index: -1
Layer 98
rotate: false
xy: 535, 19
size: 49, 57
orig: 49, 57
offset: 0, 0
index: -1
Layer 99
rotate: false
xy: 970, 644
size: 52, 98
orig: 52, 98
offset: 0, 0
index: -1

1
spine-ts/webgl/demos/assets/fanart_cut.json Normal file
View File

File diff suppressed because one or more lines are too long

BIN
spine-ts/webgl/demos/assets/fanart_cut.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 967 KiB

258
spine-ts/webgl/demos/assets/girl.atlas Normal file
View File

@ -0,0 +1,258 @@
girl.png
size: 256,256
format: RGBA8888
filter: Linear,Linear
repeat: none
Layer 14
rotate: false
xy: 2, 162
size: 94, 92
orig: 94, 92
offset: 0, 0
index: -1
Layer 15
rotate: false
xy: 189, 129
size: 45, 50
orig: 45, 50
offset: 0, 0
index: -1
Layer 16
rotate: false
xy: 236, 130
size: 14, 16
orig: 14, 16
offset: 0, 0
index: -1
Layer 17
rotate: false
xy: 242, 115
size: 10, 13
orig: 10, 13
offset: 0, 0
index: -1
Layer 18
rotate: false
xy: 172, 58
size: 10, 7
orig: 10, 7
offset: 0, 0
index: -1
Layer 19
rotate: false
xy: 50, 54
size: 7, 4
orig: 7, 4
offset: 0, 0
index: -1
Layer 20
rotate: false
xy: 144, 170
size: 12, 10
orig: 12, 10
offset: 0, 0
index: -1
Layer 21
rotate: false
xy: 50, 10
size: 50, 40
orig: 50, 40
offset: 0, 0
index: -1
Layer 22
rotate: false
xy: 134, 60
size: 25, 41
orig: 25, 41
offset: 0, 0
index: -1
Layer 23
rotate: false
xy: 160, 135
size: 27, 45
orig: 27, 45
offset: 0, 0
index: -1
Layer 24
rotate: false
xy: 236, 166
size: 18, 17
orig: 18, 17
offset: 0, 0
index: -1
Layer 25
rotate: false
xy: 137, 2
size: 30, 15
orig: 30, 15
offset: 0, 0
index: -1
Layer 26
rotate: false
xy: 184, 57
size: 26, 15
orig: 26, 15
offset: 0, 0
index: -1
Layer 27
rotate: false
xy: 74, 52
size: 28, 41
orig: 28, 41
offset: 0, 0
index: -1
Layer 28
rotate: false
xy: 161, 67
size: 21, 38
orig: 21, 38
offset: 0, 0
index: -1
Layer 29
rotate: false
xy: 134, 41
size: 28, 17
orig: 28, 17
offset: 0, 0
index: -1
Layer 30
rotate: false
xy: 104, 41
size: 28, 39
orig: 28, 39
offset: 0, 0
index: -1
Layer 31
rotate: false
xy: 98, 170
size: 44, 84
orig: 44, 84
offset: 0, 0
index: -1
Layer 32
rotate: false
xy: 235, 185
size: 16, 24
orig: 16, 24
offset: 0, 0
index: -1
Layer 33
rotate: false
xy: 144, 182
size: 56, 72
orig: 56, 72
offset: 0, 0
index: -1
Layer 34
rotate: false
xy: 184, 74
size: 28, 26
orig: 28, 26
offset: 0, 0
index: -1
Layer 35
rotate: false
xy: 102, 4
size: 33, 35
orig: 33, 35
offset: 0, 0
index: -1
Layer 36
rotate: false
xy: 2, 7
size: 46, 51
orig: 46, 51
offset: 0, 0
index: -1
Layer 37
rotate: false
xy: 104, 82
size: 28, 86
orig: 28, 86
offset: 0, 0
index: -1
Layer 38
rotate: false
xy: 235, 211
size: 19, 43
orig: 19, 43
offset: 0, 0
index: -1
Layer 39
rotate: false
xy: 160, 107
size: 24, 26
orig: 24, 26
offset: 0, 0
index: -1
Layer 40
rotate: false
xy: 137, 19
size: 21, 20
orig: 21, 20
offset: 0, 0
index: -1
Layer 41
rotate: false
xy: 2, 60
size: 42, 100
orig: 42, 100
offset: 0, 0
index: -1
Layer 42
rotate: false
xy: 134, 103
size: 24, 65
orig: 24, 65
offset: 0, 0
index: -1
Layer 43
rotate: false
xy: 160, 19
size: 10, 20
orig: 10, 20
offset: 0, 0
index: -1
Layer 44
rotate: false
xy: 202, 181
size: 31, 73
orig: 31, 73
offset: 0, 0
index: -1
Layer 45
rotate: false
xy: 186, 102
size: 32, 25
orig: 32, 25
offset: 0, 0
index: -1
Layer 46
rotate: false
xy: 220, 108
size: 20, 19
orig: 20, 19
offset: 0, 0
index: -1
Layer 47
rotate: false
xy: 236, 148
size: 16, 16
orig: 16, 16
offset: 0, 0
index: -1
Layer 48
rotate: false
xy: 46, 60
size: 26, 33
orig: 26, 33
offset: 0, 0
index: -1
Layer 49
rotate: false
xy: 46, 95
size: 56, 65
orig: 56, 65
offset: 0, 0
index: -1

1
spine-ts/webgl/demos/assets/girl.json Normal file
View File

File diff suppressed because one or more lines are too long

BIN
spine-ts/webgl/demos/assets/girl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

1082
spine-ts/webgl/demos/assets/goblins-mesh.json Normal file
View File

File diff suppressed because it is too large Load Diff

293
spine-ts/webgl/demos/assets/goblins-pma.atlas Normal file
View File

@ -0,0 +1,293 @@
goblins-pma.png
size: 1024,128
format: RGBA8888
filter: Linear,Linear
repeat: none
dagger
rotate: true
xy: 372, 100
size: 26, 108
orig: 26, 108
offset: 0, 0
index: -1
goblin/eyes-closed
rotate: false
xy: 2, 7
size: 34, 12
orig: 34, 12
offset: 0, 0
index: -1
goblin/head
rotate: false
xy: 107, 36
size: 103, 66
orig: 103, 66
offset: 0, 0
index: -1
goblin/left-arm
rotate: false
xy: 901, 56
size: 37, 35
orig: 37, 35
offset: 0, 0
index: -1
goblin/left-foot
rotate: false
xy: 929, 95
size: 65, 31
orig: 65, 31
offset: 0, 0
index: -1
goblin/left-hand
rotate: false
xy: 452, 2
size: 36, 41
orig: 36, 41
offset: 0, 0
index: -1
goblin/left-lower-leg
rotate: true
xy: 713, 93
size: 33, 70
orig: 33, 70
offset: 0, 0
index: -1
goblin/left-shoulder
rotate: false
xy: 610, 44
size: 29, 44
orig: 29, 44
offset: 0, 0
index: -1
goblin/left-upper-leg
rotate: true
xy: 638, 93
size: 33, 73
orig: 33, 73
offset: 0, 0
index: -1
goblin/neck
rotate: false
xy: 490, 2
size: 36, 41
orig: 36, 41
offset: 0, 0
index: -1
goblin/pelvis
rotate: false
xy: 482, 45
size: 62, 43
orig: 62, 43
offset: 0, 0
index: -1
goblin/right-arm
rotate: true
xy: 690, 2
size: 23, 50
orig: 23, 50
offset: 0, 0
index: -1
goblin/right-foot
rotate: false
xy: 771, 58
size: 63, 33
orig: 63, 33
offset: 0, 0
index: -1
goblin/right-hand
rotate: false
xy: 940, 56
size: 36, 37
orig: 36, 37
offset: 0, 0
index: -1
goblin/right-lower-leg
rotate: true
xy: 482, 90
size: 36, 76
orig: 36, 76
offset: 0, 0
index: -1
goblin/right-shoulder
rotate: true
xy: 602, 3
size: 39, 45
orig: 39, 45
offset: 0, 0
index: -1
goblin/right-upper-leg
rotate: true
xy: 641, 57
size: 34, 63
orig: 34, 63
offset: 0, 0
index: -1
goblin/torso
rotate: true
xy: 212, 34
size: 68, 96
orig: 68, 96
offset: 0, 0
index: -1
goblin/undie-straps
rotate: false
xy: 380, 5
size: 55, 19
orig: 55, 19
offset: 0, 0
index: -1
goblin/undies
rotate: false
xy: 174, 5
size: 36, 29
orig: 36, 29
offset: 0, 0
index: -1
goblingirl/eyes-closed
rotate: false
xy: 269, 11
size: 37, 21
orig: 37, 21
offset: 0, 0
index: -1
goblingirl/head
rotate: false
xy: 2, 21
size: 103, 81
orig: 103, 81
offset: 0, 0
index: -1
goblingirl/left-arm
rotate: true
xy: 978, 56
size: 37, 35
orig: 37, 35
offset: 0, 0
index: -1
goblingirl/left-foot
rotate: false
xy: 107, 3
size: 65, 31
orig: 65, 31
offset: 0, 0
index: -1
goblingirl/left-hand
rotate: false
xy: 565, 2
size: 35, 40
orig: 35, 40
offset: 0, 0
index: -1
goblingirl/left-lower-leg
rotate: true
xy: 785, 93
size: 33, 70
orig: 33, 70
offset: 0, 0
index: -1
goblingirl/left-shoulder
rotate: true
xy: 690, 27
size: 28, 46
orig: 28, 46
offset: 0, 0
index: -1
goblingirl/left-upper-leg
rotate: true
xy: 857, 93
size: 33, 70
orig: 33, 70
offset: 0, 0
index: -1
goblingirl/neck
rotate: false
xy: 528, 2
size: 35, 41
orig: 35, 41
offset: 0, 0
index: -1
goblingirl/pelvis
rotate: false
xy: 546, 45
size: 62, 43
orig: 62, 43
offset: 0, 0
index: -1
goblingirl/right-arm
rotate: false
xy: 452, 48
size: 28, 50
orig: 28, 50
offset: 0, 0
index: -1
goblingirl/right-foot
rotate: false
xy: 836, 58
size: 63, 33
orig: 63, 33
offset: 0, 0
index: -1
goblingirl/right-hand
rotate: true
xy: 771, 20
size: 36, 37
orig: 36, 37
offset: 0, 0
index: -1
goblingirl/right-lower-leg
rotate: true
xy: 560, 90
size: 36, 76
orig: 36, 76
offset: 0, 0
index: -1
goblingirl/right-shoulder
rotate: false
xy: 649, 10
size: 39, 45
orig: 39, 45
offset: 0, 0
index: -1
goblingirl/right-upper-leg
rotate: true
xy: 706, 57
size: 34, 63
orig: 34, 63
offset: 0, 0
index: -1
goblingirl/torso
rotate: false
xy: 310, 2
size: 68, 96
orig: 68, 96
offset: 0, 0
index: -1
goblingirl/undie-straps
rotate: false
xy: 212, 13
size: 55, 19
orig: 55, 19
offset: 0, 0
index: -1
goblingirl/undies
rotate: false
xy: 810, 27
size: 36, 29
orig: 36, 29
offset: 0, 0
index: -1
shield
rotate: false
xy: 380, 26
size: 70, 72
orig: 70, 72
offset: 0, 0
index: -1
spear
rotate: true
xy: 2, 104
size: 22, 368
orig: 22, 368
offset: 0, 0
index: -1

BIN
spine-ts/webgl/demos/assets/goblins-pma.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

258
spine-ts/webgl/demos/assets/gree_girl.atlas Normal file
View File

@ -0,0 +1,258 @@
gree_girl.png
size: 512,512
format: RGBA8888
filter: Linear,Linear
repeat: none
Layer 17
rotate: false
xy: 168, 406
size: 191, 104
orig: 191, 104
offset: 0, 0
index: -1
Layer 20
rotate: false
xy: 2, 185
size: 164, 325
orig: 164, 325
offset: 0, 0
index: -1
Layer 21
rotate: false
xy: 168, 216
size: 37, 48
orig: 37, 48
offset: 0, 0
index: -1
Layer 22
rotate: false
xy: 53, 13
size: 16, 33
orig: 16, 33
offset: 0, 0
index: -1
Layer 23
rotate: false
xy: 287, 288
size: 20, 20
orig: 20, 20
offset: 0, 0
index: -1
Layer 24
rotate: false
xy: 231, 276
size: 17, 32
orig: 17, 32
offset: 0, 0
index: -1
Layer 25
rotate: false
xy: 197, 189
size: 15, 25
orig: 15, 25
offset: 0, 0
index: -1
Layer 26
rotate: false
xy: 309, 284
size: 16, 23
orig: 16, 23
offset: 0, 0
index: -1
Layer 27
rotate: false
xy: 327, 286
size: 16, 22
orig: 16, 22
offset: 0, 0
index: -1
Layer 28
rotate: false
xy: 486, 427
size: 16, 26
orig: 16, 26
offset: 0, 0
index: -1
Layer 29
rotate: false
xy: 293, 310
size: 15, 26
orig: 15, 26
offset: 0, 0
index: -1
Layer 30
rotate: false
xy: 71, 17
size: 15, 29
orig: 15, 29
offset: 0, 0
index: -1
Layer 32
rotate: false
xy: 341, 367
size: 17, 37
orig: 17, 37
offset: 0, 0
index: -1
Layer 33
rotate: false
xy: 310, 309
size: 14, 27
orig: 14, 27
offset: 0, 0
index: -1
Layer 34
rotate: false
xy: 250, 279
size: 15, 29
orig: 15, 29
offset: 0, 0
index: -1
Layer 35
rotate: false
xy: 326, 310
size: 14, 26
orig: 14, 26
offset: 0, 0
index: -1
Layer 36
rotate: false
xy: 486, 455
size: 18, 27
orig: 18, 27
offset: 0, 0
index: -1
Layer 37
rotate: false
xy: 207, 230
size: 19, 34
orig: 19, 34
offset: 0, 0
index: -1
Layer 38
rotate: false
xy: 361, 424
size: 95, 86
orig: 95, 86
offset: 0, 0
index: -1
Layer 39
rotate: false
xy: 458, 428
size: 26, 54
orig: 26, 54
offset: 0, 0
index: -1
Layer 40
rotate: false
xy: 458, 484
size: 52, 26
orig: 52, 26
offset: 0, 0
index: -1
Layer 41
rotate: false
xy: 231, 310
size: 60, 24
orig: 60, 24
offset: 0, 0
index: -1
Layer 42
rotate: false
xy: 291, 357
size: 48, 47
orig: 48, 47
offset: 0, 0
index: -1
Layer 43
rotate: false
xy: 53, 2
size: 24, 9
orig: 24, 9
offset: 0, 0
index: -1
Layer 44
rotate: false
xy: 361, 415
size: 8, 7
orig: 8, 7
offset: 0, 0
index: -1
Layer 45
rotate: false
xy: 291, 338
size: 28, 17
orig: 28, 17
offset: 0, 0
index: -1
Layer 46
rotate: false
xy: 321, 338
size: 14, 17
orig: 14, 17
offset: 0, 0
index: -1
Layer 47
rotate: false
xy: 207, 216
size: 17, 12
orig: 17, 12
offset: 0, 0
index: -1
Layer 48
rotate: false
xy: 168, 188
size: 27, 26
orig: 27, 26
offset: 0, 0
index: -1
Layer 49
rotate: false
xy: 168, 266
size: 61, 68
orig: 61, 68
offset: 0, 0
index: -1
Layer 50
rotate: false
xy: 2, 10
size: 49, 36
orig: 49, 36
offset: 0, 0
index: -1
Layer 51
rotate: false
xy: 89, 60
size: 76, 52
orig: 76, 52
offset: 0, 0
index: -1
Layer 52
rotate: false
xy: 2, 48
size: 85, 135
orig: 85, 135
offset: 0, 0
index: -1
Layer 53
rotate: false
xy: 168, 336
size: 121, 68
orig: 121, 68
offset: 0, 0
index: -1
Layer 54
rotate: false
xy: 89, 114
size: 70, 69
orig: 70, 69
offset: 0, 0
index: -1
Layer 55
rotate: false
xy: 267, 282
size: 18, 26
orig: 18, 26
offset: 0, 0
index: -1

1
spine-ts/webgl/demos/assets/gree_girl.json Normal file
View File

File diff suppressed because one or more lines are too long

BIN
spine-ts/webgl/demos/assets/gree_girl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 147 KiB

125
spine-ts/webgl/demos/assets/tank.atlas Normal file
View File

@ -0,0 +1,125 @@
tank.png
size: 2048,1024
format: RGBA8888
filter: Linear,Linear
repeat: none
images/antenna
rotate: true
xy: 1295, 683
size: 22, 303
orig: 22, 303
offset: 0, 0
index: -1
images/cannon
rotate: false
xy: 2, 93
size: 931, 58
orig: 931, 58
offset: 0, 0
index: -1
images/cannonConnector
rotate: true
xy: 1676, 455
size: 112, 135
orig: 112, 135
offset: 0, 0
index: -1
images/guntower
rotate: false
xy: 1295, 707
size: 730, 289
orig: 730, 289
offset: 0, 0
index: -1
images/machinegun
rotate: false
xy: 2, 34
size: 331, 57
orig: 331, 57
offset: 0, 0
index: -1
images/machinegun-mount
rotate: false
xy: 1952, 609
size: 72, 96
orig: 72, 96
offset: 0, 0
index: -1
images/rock
rotate: false
xy: 935, 96
size: 252, 55
orig: 252, 55
offset: 0, 0
index: -1
images/tankBottom
rotate: false
xy: 2, 377
size: 1285, 276
orig: 1285, 276
offset: 0, 0
index: -1
images/tankBottom-shadow
rotate: false
xy: 2, 655
size: 1291, 341
orig: 1291, 341
offset: 0, 0
index: -1
images/tankTop
rotate: false
xy: 2, 153
size: 1407, 222
orig: 1407, 222
offset: 0, 0
index: -1
images/tread
rotate: false
xy: 2, 2
size: 96, 30
orig: 96, 30
offset: 0, 0
index: -1
images/tread-inside
rotate: false
xy: 335, 63
size: 25, 28
orig: 25, 28
offset: 0, 0
index: -1
images/wheel-big
rotate: false
xy: 1295, 490
size: 191, 191
orig: 191, 191
offset: 0, 0
index: -1
images/wheel-big-overlay
rotate: false
xy: 1488, 495
size: 186, 186
orig: 186, 186
offset: 0, 0
index: -1
images/wheel-mid
rotate: false
xy: 1676, 569
size: 136, 136
orig: 136, 136
offset: 0, 0
index: -1
images/wheel-mid-overlay
rotate: false
xy: 1814, 569
size: 136, 136
orig: 136, 136
offset: 0, 0
index: -1
images/wheel-small
rotate: false
xy: 1813, 496
size: 71, 71
orig: 71, 71
offset: 0, 0
index: -1

1899
spine-ts/webgl/demos/assets/tank.json Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
spine-ts/webgl/demos/assets/tank.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

34
spine-ts/webgl/demos/assets/transformConstraint.atlas Normal file
View File

@ -0,0 +1,34 @@
transformConstraint.png
size: 512,128
format: RGBA8888
filter: Linear,Linear
repeat: none
images/wheel-big
rotate: false
xy: 2, 2
size: 96, 96
orig: 96, 96
offset: 0, 0
index: -1
images/wheel-big-overlay
rotate: false
xy: 100, 5
size: 93, 93
orig: 93, 93
offset: 0, 0
index: -1
images/wheel-mid
rotate: false
xy: 195, 30
size: 68, 68
orig: 68, 68
offset: 0, 0
index: -1
images/wheel-mid-overlay
rotate: false
xy: 265, 30
size: 68, 68
orig: 68, 68
offset: 0, 0
index: -1

1
spine-ts/webgl/demos/assets/transformConstraint.json Normal file
View File

@ -0,0 +1 @@
{"skeleton":{"hash":"hGDUmkXy2AdrPeqXVmkIQqfIAyU","spine":"3.4.02","width":566.2,"height":397.26},"bones":[{"name":"root"},{"name":"wheel1overlay","parent":"root","x":-152.12,"y":220.65},{"name":"wheel1","parent":"wheel1overlay"},{"name":"wheel2overlay","parent":"root","x":202.3,"y":91.97},{"name":"wheel2","parent":"wheel2overlay"},{"name":"wheel3overlay","parent":"root","x":226.28,"y":312.42},{"name":"wheel3","parent":"wheel3overlay"}],"slots":[{"name":"images/wheel-big","bone":"wheel1","attachment":"images/wheel-big"},{"name":"images/wheel-mid","bone":"wheel3","attachment":"images/wheel-mid"},{"name":"images/wheel-mid2","bone":"wheel2","attachment":"images/wheel-mid"},{"name":"images/wheel-big-overlay","bone":"wheel1overlay","attachment":"images/wheel-big-overlay","blend":"multiply"},{"name":"images/wheel-mid-overlay","bone":"wheel2overlay","attachment":"images/wheel-mid-overlay","blend":"multiply"},{"name":"images/wheel-mid-overlay2","bone":"wheel3overlay","attachment":"images/wheel-mid-overlay","blend":"multiply"}],"transform":[{"name":"wheel2","bones":["wheel2"],"target":"wheel1","rotation":73.5,"x":354.42,"y":-128.67,"translateMix":0,"scaleMix":0,"shearMix":0},{"name":"wheel3","bones":["wheel3"],"target":"wheel1","rotation":-28.7,"x":378.4,"y":91.77,"translateMix":0,"scaleMix":0,"shearMix":0}],"skins":{"default":{"images/wheel-big":{"images/wheel-big":{"width":191,"height":191}},"images/wheel-big-overlay":{"images/wheel-big-overlay":{"width":186,"height":186}},"images/wheel-mid":{"images/wheel-mid":{"width":136,"height":136}},"images/wheel-mid-overlay":{"images/wheel-mid-overlay":{"width":136,"height":136}},"images/wheel-mid-overlay2":{"images/wheel-mid-overlay":{"width":136,"height":136}},"images/wheel-mid2":{"images/wheel-mid":{"width":136,"height":136}}}},"animations":{"animation":{}}}

BIN
spine-ts/webgl/demos/assets/transformConstraint.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

13
spine-ts/webgl/demos/assets/vine.atlas Normal file
View File

@ -0,0 +1,13 @@
vine.png
size: 64,512
format: RGBA8888
filter: Linear,Linear
repeat: none
vine
rotate: false
xy: 2, 2
size: 34, 481
orig: 34, 481
offset: 0, 0
index: -1

1
spine-ts/webgl/demos/assets/vine.json Normal file
View File

File diff suppressed because one or more lines are too long

BIN
spine-ts/webgl/demos/assets/vine.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

5
spine-ts/webgl/demos/ikconstraint.js
View File

@ -29,7 +29,7 @@ var ikConstraintDemo = function(pathPrefix) {
up: function(x, y) {
target = null;
},
moved: function(x, y) {
dragged: function(x, y) {
if (target != null) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (target.parent !== null) {
@ -41,7 +41,8 @@ var ikConstraintDemo = function(pathPrefix) {
target.y = coords.y - skeleton.y;
}
}
}
},
moved: function (x, y) { }
})
assetManager.loadTexture("assets/spineboy.png");
assetManager.loadText("assets/spineboy-mesh.json");

1
spine-ts/webgl/demos/meshes.html
View File

@ -14,6 +14,7 @@
<canvas id="meshesdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<select id="meshesdemo-active-skeleton"></select></br>
<span style="color: #fff">Draw Bones</span>
<input type="checkbox" id="meshesdemo-drawbonescheckbox" style="color: #fff;" checked="true"></input>
<span style="color: #fff">Draw Regions</span>

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

@ -1,49 +1,38 @@
var meshesDemo = function(pathPrefix) {
var CIRCLE_INNER_COLOR = new spine.Color(0.8, 0, 0, 0.5);
var CIRCLE_OUTER_COLOR = new spine.Color(0.8, 0, 0, 0.8);
var canvas, gl, renderer, input, assetManager;
var skeleton, state, bounds;
var lastFrameTime = Date.now() / 1000;
var playButton, timeLine, isPlaying = true, playTime = 0;
var skeleton, bounds;
var lastFrameTime = Date.now() / 1000;
var skeletons = {};
var activeSkeleton = "girl";
var playButton, timeLine, isPlaying = true;
function init () {
if (pathPrefix === undefined) pathPrefix = "";
canvas = document.getElementById("meshesdemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager.loadTexture("assets/raptor.png");
assetManager.loadText("assets/raptor.json");
assetManager.loadText("assets/raptor.atlas");
assetManager.loadTexture("assets/girl.png");
assetManager.loadText("assets/girl.json");
assetManager.loadText("assets/girl.atlas");
assetManager.loadTexture("assets/gree_girl.png");
assetManager.loadText("assets/gree_girl.json");
assetManager.loadText("assets/gree_girl.atlas");
assetManager.loadTexture("assets/fanart_cut.png");
assetManager.loadText("assets/fanart_cut.json");
assetManager.loadText("assets/fanart_cut.atlas");
requestAnimationFrame(load);
}
}
function load () {
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("assets/raptor.atlas"), function(path) {
return assetManager.get("assets/" + path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/raptor.json"));
skeleton = new spine.Skeleton(skeletonData);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "walk", true);
state.apply(skeleton);
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2;
skeletons["girl"] = loadSkeleton("girl", "animation");
skeletons["green_girl"] = loadSkeleton("gree_girl", "animation");
skeletons["fanart"] = loadSkeleton("fanart_cut", "animation");
setupUI();
requestAnimationFrame(render);
requestAnimationFrame(render);
} else requestAnimationFrame(load);
}
@ -57,63 +46,116 @@ var meshesDemo = function(pathPrefix) {
} else {
playButton.val("Play");
playButton.addClass("play").removeClass("pause");
}
}
}
playButton.click(playButtonUpdate);
timeLine = $("#meshesdemo-timeline");
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
if (isPlaying) playButton.click();
if (!isPlaying) {
if (isPlaying) playButton.click();
if (!isPlaying) {
var active = skeletons[activeSkeleton];
var time = timeLine.slider("value") / 100;
var animationDuration = state.getCurrent(0).animation.duration;
time = animationDuration * time;
state.update(time - playTime);
state.apply(skeleton);
skeleton.updateWorldTransform();
playTime = time;
var animationDuration = active.state.getCurrent(0).animation.duration;
time = animationDuration * time;
active.state.update(time - active.playTime);
active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform();
active.playTime = time;
}
}});
}});
$("#meshesdemo-drawbonescheckbox").change(function() {
var list = $("#meshesdemo-active-skeleton");
for (var skeletonName in skeletons) {
var option = $("<option></option>");
option.attr("value", skeletonName).text(skeletonName);
if (skeletonName === activeSkeleton) option.attr("selected", "selected");
list.append(option);
}
list.change(function() {
activeSkeleton = $("#meshesdemo-active-skeleton option:selected").text();
var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration;
timeLine.slider("value", (active.playTime / animationDuration * 100));
})
$("#meshesdemo-drawbonescheckbox").click(function() {
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
$("#meshesdemo-drawregionscheckbox").change(function() {
})
$("#meshesdemo-drawregionscheckbox").click(function() {
renderer.skeletonDebugRenderer.drawRegionAttachments = this.checked;
});
$("#meshesdemo-drawmeshhullcheckbox").change(function() {
})
$("#meshesdemo-drawmeshhullcheckbox").click(function() {
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
});
$("#meshesdemo-drawmeshtrianglescheckbox").change(function() {
})
$("#meshesdemo-drawmeshtrianglescheckbox").click(function() {
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
})
}
function loadSkeleton(name, animation, sequenceSlots) {
var atlas = new spine.TextureAtlas(assetManager.get("assets/" + name + ".atlas"), function(path) {
return assetManager.get("assets/" + path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json"));
var skeleton = new spine.Skeleton(skeletonData);
skeleton.setSkinByName("default");
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
state.setAnimation(0, animation, true);
state.apply(skeleton);
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
var size = new spine.Vector2();
skeleton.getBounds(offset, size);
return {
atlas: atlas,
skeleton: skeleton,
state: state,
playTime: 0,
bounds: {
offset: offset,
size: size
}
};
}
function render () {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
if (delta > 0.032) delta = 0.032;
lastFrameTime = now;
if (delta > 0.032) delta = 0.032;
renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2;
var active = skeletons[activeSkeleton];
var skeleton = active.skeleton;
var state = active.state;
var offset = active.bounds.offset;
var size = active.bounds.size;
renderer.camera.position.x = offset.x + size.x / 2;
renderer.camera.position.y = offset.y + size.y / 2;
renderer.camera.viewportWidth = size.x * 1.2;
renderer.camera.viewportHeight = size.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
playTime += delta;
while (playTime >= animationDuration) {
playTime -= animationDuration;
active.playTime += delta;
while (active.playTime >= animationDuration) {
active.playTime -= animationDuration;
}
timeLine.slider("value", (playTime / animationDuration * 100));
timeLine.slider("value", (active.playTime / animationDuration * 100));
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
}
skeleton.updateWorldTransform();
}
renderer.begin();
renderer.drawSkeleton(skeleton);

28
spine-ts/webgl/demos/skins.html Normal file
View File

@ -0,0 +1,28 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body>
<canvas id="skinsdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<select id="skinsdemo-active-skin"></select></br>
<br>
<input id="skinsdemo-playbutton" type="button" value="Pause"></input>
<div id="skinsdemo-timeline" class="slider"></input>
</div>
</center>
<script src="skins.js"></script>
<script>
skinsDemo();
</script>
</body>
</html>

130
spine-ts/webgl/demos/skins.js Normal file
View File

@ -0,0 +1,130 @@
var skinsDemo = function(pathPrefix) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds;
var lastFrameTime = Date.now() / 1000;
var playButton, timeLine, isPlaying = true, playTime = 0;
function init () {
if (pathPrefix === undefined) pathPrefix = "";
canvas = document.getElementById("skinsdemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager.loadTexture("assets/goblins-pma.png");
assetManager.loadText("assets/goblins-mesh.json");
assetManager.loadText("assets/goblins-pma.atlas");
requestAnimationFrame(load);
}
function load () {
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("assets/goblins-pma.atlas"), function(path) {
return assetManager.get("assets/" + path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/goblins-mesh.json"));
skeleton = new spine.Skeleton(skeletonData);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "walk", true);
state.apply(skeleton);
skeleton.updateWorldTransform();
offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
setupUI();
requestAnimationFrame(render);
} else requestAnimationFrame(load);
}
function setupUI() {
playButton = $("#skinsdemo-playbutton");
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying) {
playButton.val("Pause");
playButton.addClass("pause").removeClass("play");
} else {
playButton.val("Play");
playButton.addClass("play").removeClass("pause");
}
}
playButton.click(playButtonUpdate);
timeLine = $("#skinsdemo-timeline");
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
if (isPlaying) playButton.click();
if (!isPlaying) {
var time = timeLine.slider("value") / 100;
var animationDuration = state.getCurrent(0).animation.duration;
time = animationDuration * time;
state.update(time - playTime);
state.apply(skeleton);
skeleton.updateWorldTransform();
playTime = time;
}
}});
var list = $("#skinsdemo-active-skin");
for (var skin in skeleton.data.skins) {
skin = skeleton.data.skins[skin];
var option = $("<option></option>");
option.attr("value", skin.name).text(skin.name);
if (skin.name === "goblin") {
option.attr("selected", "selected");
skeleton.setSkinByName("goblin");
}
list.append(option);
}
list.change(function() {
activeSkin = $("#skinsdemo-active-skin option:selected").text();
skeleton.setSkinByName(activeSkin);
skeleton.setSlotsToSetupPose();
});
}
function render () {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
if (delta > 0.032) delta = 0.032;
renderer.camera.position.x = offset.x + bounds.x;
renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.camera.viewportWidth = bounds.x * 2.2;
renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
playTime += delta;
while (playTime >= animationDuration) {
playTime -= animationDuration;
}
timeLine.slider("value", (playTime / animationDuration * 100));
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
}
renderer.begin();
renderer.drawSkeleton(skeleton, true);
var texture = assetManager.get("assets/goblins-pma.png");
var width = bounds.x * 1.3;
var scale = width / texture.getImage().width;
var height = scale * texture.getImage().height;
renderer.drawTexture(texture, offset.x + bounds.x, offset.y + bounds.y / 2 - height / 2, width, height);
renderer.end();
requestAnimationFrame(render);
}
init();
};

27
spine-ts/webgl/demos/tank.html Normal file
View File

@ -0,0 +1,27 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body>
<canvas id="tankdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<br>
<input id="tankdemo-playbutton" type="button" value="Pause"></input>
<div id="tankdemo-timeline" class="slider"></input>
</div>
</center>
<script src="tank.js"></script>
<script>
tankDemo();
</script>
</body>
</html>

111
spine-ts/webgl/demos/tank.js Normal file
View File

@ -0,0 +1,111 @@
var tankDemo = function(pathPrefix) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds;
var lastFrameTime = Date.now() / 1000;
var playButton, timeLine, isPlaying = true, playTime = 0;
function init () {
if (pathPrefix === undefined) pathPrefix = "";
canvas = document.getElementById("tankdemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager.loadTexture("assets/tank.png");
assetManager.loadText("assets/tank.json");
assetManager.loadText("assets/tank.atlas");
requestAnimationFrame(load);
}
function load () {
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("assets/tank.atlas"), function(path) {
return assetManager.get("assets/" + path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/tank.json"));
skeleton = new spine.Skeleton(skeletonData);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "drive", true);
state.apply(skeleton);
skeleton.updateWorldTransform();
offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
setupUI();
requestAnimationFrame(render);
} else requestAnimationFrame(load);
}
function setupUI() {
playButton = $("#tankdemo-playbutton");
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying) {
playButton.val("Pause");
playButton.addClass("pause").removeClass("play");
} else {
playButton.val("Play");
playButton.addClass("play").removeClass("pause");
}
}
playButton.click(playButtonUpdate);
timeLine = $("#tankdemo-timeline");
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
if (isPlaying) playButton.click();
if (!isPlaying) {
var time = timeLine.slider("value") / 100;
var animationDuration = state.getCurrent(0).animation.duration;
time = animationDuration * time;
state.update(time - playTime);
state.apply(skeleton);
skeleton.updateWorldTransform();
playTime = time;
}
}});
}
function render () {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
if (delta > 0.032) delta = 0.032;
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
playTime += delta;
while (playTime >= animationDuration) {
playTime -= animationDuration;
}
timeLine.slider("value", (playTime / animationDuration * 100));
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
}
offset.x = skeleton.findBone("tankRoot").worldX;
offset.y = skeleton.findBone("tankRoot").worldY;
renderer.camera.position.x = offset.x - 300;
renderer.camera.position.y = offset.y + 200;
renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton);
renderer.end();
requestAnimationFrame(render);
}
init();
};

32
spine-ts/webgl/demos/vine.html Normal file
View File

@ -0,0 +1,32 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
div { color: #fff; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body>
<canvas id="vinedemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<div id="info"></div></br>
<div>Spacing</div><div id="vinedemo-spacing" class="slider"></div>
<br>
<div>Display Bones & Path</div><input id="vinedemo-drawbones" type="checkbox" checked="true"></input>
</br>
<input id="vinedemo-playbutton" type="button" value="Pause"></input>
<div id="vinedemo-timeline" class="slider"></div>
</div>
</center>
<script src="vine.js"></script>
<script>
vineDemo();
</script>
</body>
</html>

175
spine-ts/webgl/demos/vine.js Normal file
View File

@ -0,0 +1,175 @@
var vineDemo = function(pathPrefix) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager;
var skeleton, state, bounds;
var lastFrameTime = Date.now() / 1000;
var target = null;
var controlBones = ["vine-control1", "vine-control2", "vine-control3", "vine-control4"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
var playButton, timeLine, spacing, isPlaying = true, playTime = 0;
function init () {
canvas = document.getElementById("vinedemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
input = new spine.webgl.Input(canvas);
input.addListener({
down: function(x, y) {
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 20) {
target = bone;
}
}
},
up: function(x, y) {
target = null;
},
dragged: function(x, y) {
if (target != null) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (target.parent !== null) {
target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
target.x = temp2.x;
target.y = temp2.y;
} else {
target.x = coords.x - skeleton.x;
target.y = coords.y - skeleton.y;
}
}
},
moved: function (x, y) { }
})
assetManager.loadTexture("assets/vine.png");
assetManager.loadText("assets/vine.json");
assetManager.loadText("assets/vine.atlas");
requestAnimationFrame(load);
}
function load () {
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("assets/vine.atlas"), function(path) {
return assetManager.get("assets/" + path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/vine.json"));
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "animation", true);
state.apply(skeleton);
skeleton.updateWorldTransform();
renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupUI();
requestAnimationFrame(render);
} else requestAnimationFrame(load);
}
function setupUI() {
playButton = $("#vinedemo-playbutton");
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying) {
playButton.val("Pause");
playButton.addClass("pause").removeClass("play");
} else {
playButton.val("Play");
playButton.addClass("play").removeClass("pause");
}
}
playButton.click(playButtonUpdate);
timeLine = $("#vinedemo-timeline");
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
if (isPlaying) playButton.click();
if (!isPlaying) {
var time = timeLine.slider("value") / 100;
var animationDuration = state.getCurrent(0).animation.duration;
time = animationDuration * time;
state.update(time - playTime);
state.apply(skeleton);
skeleton.updateWorldTransform();
playTime = time;
}
}});
spacing = $("#vinedemo-spacing");
spacing.slider({ range: "max", min: -100, max: 100, value: 0, slide: function () {
skeleton.findPathConstraint("vine-path").spacing = spacing.slider("value");
$("#vinedemo-spacing-label").text(skeleton.findPathConstraint("vine-path").spacing + "%");
}});
var checkbox = $("#vinedemo-drawbones");
checkbox.change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
}
function render () {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
if (delta > 0.032) delta = 0.032;
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
playTime += delta;
while (playTime >= animationDuration) {
playTime -= animationDuration;
}
timeLine.slider("value", (playTime / animationDuration * 100));
state.update(delta);
state.apply(skeleton);
}
skeleton.updateWorldTransform();
renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton);
renderer.drawSkeletonDebug(skeleton);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
var colorInner = bone === target ? COLOR_INNER_SELECTED : COLOR_INNER;
var colorOuter = bone === target ? COLOR_OUTER_SELECTED : COLOR_OUTER;
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
}
renderer.end();
requestAnimationFrame(render);
$("#info").text(JSON.stringify(input.currTouch));
}
init();
};

119
spine-ts/webgl/src/Input.ts
View File

@ -34,7 +34,11 @@ module spine.webgl {
element: HTMLElement;
lastX = 0;
lastY = 0;
buttonDown = false;
buttonDown = false;
currTouch: Touch = null;
touchesPool = new Pool<spine.webgl.Touch>(() => {
return new spine.webgl.Touch(0, 0, 0);
});
private listeners = new Array<InputListener>();
constructor (element: HTMLElement) {
@ -67,12 +71,15 @@ module spine.webgl {
let listeners = this.listeners;
for (let i = 0; i < listeners.length; i++) {
listeners[i].moved(x, y);
if (this.buttonDown) {
listeners[i].dragged(x, y);
} else {
listeners[i].moved(x, y);
}
}
this.lastX = x;
this.lastY = y;
this.buttonDown = true;
this.lastY = y;
}
}, true);
element.addEventListener("mouseup", (ev: UIEvent) => {
@ -88,12 +95,102 @@ module spine.webgl {
this.lastX = x;
this.lastY = y;
this.buttonDown = true;
this.buttonDown = false;
}
}, true);
element.addEventListener(navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "DOMMouseScroll" : "mousewheel", (ev: UIEvent) => {
element.addEventListener("touchstart", (ev: TouchEvent) => {
if (this.currTouch != null) return;
}, true);
var touches = ev.changedTouches;
alert(JSON.stringify(touches));
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
let rect = element.getBoundingClientRect();
let x = touch.clientX - rect.left;
let y = touch.clientY - rect.top;
this.currTouch = this.touchesPool.obtain();
this.currTouch.identifier = touch.identifier;
this.currTouch.x = x;
this.currTouch.y = y;
break;
}
let listeners = this.listeners;
for (let i = 0; i < listeners.length; i++) {
listeners[i].down(this.currTouch.x, this.currTouch.y);
}
this.lastX = this.currTouch.x;
this.lastY = this.currTouch.y;
this.buttonDown = true;
ev.preventDefault();
}, false);
element.addEventListener("touchend", (ev: TouchEvent) => {
if (this.currTouch != null) return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (this.currTouch.identifier === touch.identifier) {
let rect = element.getBoundingClientRect();
let x = touch.clientX - rect.left;
let y = touch.clientY - rect.top;
this.touchesPool.free(this.currTouch);
this.currTouch = null;
this.buttonDown = false;
let listeners = this.listeners;
for (let i = 0; i < listeners.length; i++) {
listeners[i].up(x, y);
}
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchcancel", (ev: TouchEvent) => {
if (this.currTouch != null) return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (this.currTouch.identifier === touch.identifier) {
let rect = element.getBoundingClientRect();
let x = touch.clientX - rect.left;
let y = touch.clientY - rect.top;
this.touchesPool.free(this.currTouch);
this.currTouch = null;
this.buttonDown = false;
let listeners = this.listeners;
for (let i = 0; i < listeners.length; i++) {
listeners[i].up(x, y);
}
break;
}
}
ev.preventDefault();
}, false);
element.addEventListener("touchmove", (ev: TouchEvent) => {
if (this.currTouch != null) return;
var touches = ev.changedTouches;
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (this.currTouch.identifier === touch.identifier) {
let rect = element.getBoundingClientRect();
let x = touch.clientX - rect.left;
let y = touch.clientY - rect.top;
let listeners = this.listeners;
for (let i = 0; i < listeners.length; i++) {
listeners[i].dragged(x, y);
}
break;
}
}
ev.preventDefault();
}, false);
}
addListener(listener: InputListener) {
@ -108,9 +205,15 @@ module spine.webgl {
}
}
export class Touch {
constructor(public identifier: number, public x: number, public y: number) {
}
}
export interface InputListener {
down(x: number, y: number): void;
up(x: number, y: number): void;
moved(x: number, y: number): void;
moved(x: number, y: number): void;
dragged(x: number, y: number): void;
}
}

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

@ -38,7 +38,7 @@ module spine.webgl {
private batcher: PolygonBatcher;
private shapes: ShapeRenderer;
private shapesShader: Shader;
private activeRenderer: PolygonBatcher | ShapeRenderer = null;
private activeRenderer: PolygonBatcher | ShapeRenderer | SkeletonDebugRenderer = null;
private skeletonRenderer: SkeletonRenderer;
private skeletonDebugRenderer: SkeletonDebugRenderer;
private QUAD = [
@ -76,7 +76,7 @@ module spine.webgl {
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha = false) {
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapesShader, skeleton);
this.skeletonDebugRenderer.draw(this.shapes, skeleton);
}
drawTexture (texture: GLTexture, x: number, y: number, width: number, height: number, color: Color = null) {
@ -229,7 +229,7 @@ module spine.webgl {
this.camera.update();
}
private enableRenderer(renderer: PolygonBatcher | ShapeRenderer) {
private enableRenderer(renderer: PolygonBatcher | ShapeRenderer | SkeletonDebugRenderer) {
if (this.activeRenderer === renderer) return;
this.end();
if (renderer instanceof PolygonBatcher) {
@ -237,11 +237,13 @@ module spine.webgl {
this.batcherShader.setUniform4x4f(Shader.MVP_MATRIX, this.camera.projectionView.values);
this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher;
} else {
} else if (renderer instanceof ShapeRenderer) {
this.shapesShader.bind();
this.shapesShader.setUniform4x4f(Shader.MVP_MATRIX, this.camera.projectionView.values);
this.shapes.begin(this.shapesShader);
this.activeRenderer = this.shapes;
} else {
this.activeRenderer = this.skeletonDebugRenderer;
}
}

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

@ -309,6 +309,7 @@ module spine.webgl {
end () {
if (!this.isDrawing) throw new Error("ShapeRenderer.begin() has not been called");
this.flush();
this.gl.disable(this.gl.BLEND);
this.isDrawing = false;
}
@ -316,8 +317,7 @@ module spine.webgl {
if (this.vertexIndex == 0) return;
this.mesh.setVerticesLength(this.vertexIndex);
this.mesh.draw(this.shader, this.shapeType);
this.vertexIndex = 0;
this.gl.disable(this.gl.BLEND);
this.vertexIndex = 0;
}
private check(shapeType: ShapeType, numVertices: number) {

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

@ -46,44 +46,35 @@ module spine.webgl {
scale = 1;
boneWidth = 2;
private gl: WebGLRenderingContext;
private shapes: ShapeRenderer;
private gl: WebGLRenderingContext;
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);
this.gl = gl;
}
draw (shader: Shader, skeleton: Skeleton) {
draw (shapes: ShapeRenderer, skeleton: Skeleton) {
let skeletonX = skeleton.x;
let skeletonY = skeleton.y;
let gl = this.gl;
gl.enable(gl.BLEND);
let gl = this.gl;
let srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
gl.blendFunc(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
let shapes = this.shapes;
shapes.setBlendMode(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
let bones = skeleton.bones;
if (this.drawBones) {
shapes.setColor(this.boneLineColor);
shapes.begin(shader);
shapes.setColor(this.boneLineColor);
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);
@ -187,10 +178,7 @@ module spine.webgl {
y1 = y2;
}
}
}
shapes.end();
shapes.begin(shader);
}
if (this.drawBones) {
shapes.setColor(this.boneOriginColor);
@ -198,13 +186,10 @@ module spine.webgl {
let bone = bones[i];
shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, SkeletonDebugRenderer.GREEN, 8);
}
}
shapes.end();
}
}
dispose () {
this.shapes.dispose();
dispose () {
}
}
}

7
spine-ts/widget/src/Widget.ts
View File

@ -41,6 +41,7 @@ module spine {
private assetManager: spine.webgl.AssetManager;
private shader: spine.webgl.Shader;
private batcher: spine.webgl.PolygonBatcher;
private shapes: spine.webgl.ShapeRenderer;
private debugShader: spine.webgl.Shader;
private mvp = new spine.webgl.Matrix4();
private skeletonRenderer: spine.webgl.SkeletonRenderer;
@ -75,6 +76,7 @@ module spine {
this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
this.debugShader = spine.webgl.Shader.newColored(gl);
this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
this.shapes = new spine.webgl.ShapeRenderer(gl);
let assets = this.assetManager = new spine.webgl.AssetManager(gl);
assets.loadText(config.atlas);
@ -186,11 +188,14 @@ module spine {
// Draw debug information if requested via config
if (this.config.debug) {
let shader = this.debugShader;
let shapes = this.shapes;
let renderer = this.debugRenderer;
shader.bind();
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
renderer.premultipliedAlpha = premultipliedAlpha;
renderer.draw(shader, skeleton);
shapes.begin(shader);
renderer.draw(shapes, skeleton);
shapes.end();
shader.unbind();
}