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

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
NathanSweet 2016-08-30 22:55:03 +02:00
commit 6c1d8c804e
74 changed files with 6533 additions and 5518 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
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 {
@ -1152,7 +1161,7 @@ declare module spine.webgl {
constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
begin(): void;
drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void;
drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void;
drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
@ -1266,17 +1275,17 @@ declare module spine.webgl {
drawMeshHull: boolean;
drawMeshTriangles: boolean;
drawPaths: boolean;
drawSkeletonXY: 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;
draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones?: Array<string>): void;
dispose(): void;
}
}
@ -1324,6 +1333,7 @@ declare module spine {
private assetManager;
private shader;
private batcher;
private shapes;
private debugShader;
private mvp;
private skeletonRenderer;

156
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;
@ -5622,11 +5725,12 @@ var spine;
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton);
};
SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha) {
SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha, ignoredBones) {
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
if (ignoredBones === void 0) { ignoredBones = null; }
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapesShader, skeleton);
this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
@ -5797,12 +5901,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 +6357,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 +6366,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)
@ -6305,40 +6412,37 @@ var spine;
this.drawMeshHull = true;
this.drawMeshTriangles = true;
this.drawPaths = true;
this.drawSkeletonXY = false;
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) {
SkeletonDebugRenderer.prototype.draw = function (shapes, skeleton, ignoredBones) {
if (ignoredBones === void 0) { ignoredBones = null; }
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 (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1)
continue;
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);
if (this.drawSkeletonXY)
shapes.x(skeletonX, skeletonY, 4 * this.scale);
}
else
shapes.begin(shader);
if (this.drawRegionAttachments) {
shapes.setColor(this.attachmentLineColor);
var slots = skeleton.slots;
@ -6438,19 +6542,17 @@ var spine;
}
}
}
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];
if (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1)
continue;
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 +6757,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 +6872,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

15
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 {
@ -1082,7 +1091,7 @@ declare module spine.webgl {
constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
begin(): void;
drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void;
drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void;
drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
@ -1196,17 +1205,17 @@ declare module spine.webgl {
drawMeshHull: boolean;
drawMeshTriangles: boolean;
drawPaths: boolean;
drawSkeletonXY: 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;
draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones?: Array<string>): void;
dispose(): void;
}
}

150
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;
@ -5199,11 +5302,12 @@ var spine;
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton);
};
SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha) {
SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha, ignoredBones) {
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
if (ignoredBones === void 0) { ignoredBones = null; }
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapesShader, skeleton);
this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
@ -5374,12 +5478,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 +5934,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 +5943,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)
@ -5882,40 +5989,37 @@ var spine;
this.drawMeshHull = true;
this.drawMeshTriangles = true;
this.drawPaths = true;
this.drawSkeletonXY = false;
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) {
SkeletonDebugRenderer.prototype.draw = function (shapes, skeleton, ignoredBones) {
if (ignoredBones === void 0) { ignoredBones = null; }
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 (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1)
continue;
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);
if (this.drawSkeletonXY)
shapes.x(skeletonX, skeletonY, 4 * this.scale);
}
else
shapes.begin(shader);
if (this.drawRegionAttachments) {
shapes.setColor(this.attachmentLineColor);
var slots = skeleton.slots;
@ -6015,19 +6119,17 @@ var spine;
}
}
}
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];
if (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1)
continue;
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

16
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 {
@ -1082,7 +1091,7 @@ declare module spine.webgl {
constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
begin(): void;
drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void;
drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void;
drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
@ -1196,17 +1205,17 @@ declare module spine.webgl {
drawMeshHull: boolean;
drawMeshTriangles: boolean;
drawPaths: boolean;
drawSkeletonXY: 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;
draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones?: Array<string>): void;
dispose(): void;
}
}
@ -1254,6 +1263,7 @@ declare module spine {
private assetManager;
private shader;
private batcher;
private shapes;
private debugShader;
private mvp;
private skeletonRenderer;

156
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;
@ -5199,11 +5302,12 @@ var spine;
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton);
};
SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha) {
SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha, ignoredBones) {
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
if (ignoredBones === void 0) { ignoredBones = null; }
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapesShader, skeleton);
this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
@ -5374,12 +5478,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 +5934,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 +5943,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)
@ -5882,40 +5989,37 @@ var spine;
this.drawMeshHull = true;
this.drawMeshTriangles = true;
this.drawPaths = true;
this.drawSkeletonXY = false;
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) {
SkeletonDebugRenderer.prototype.draw = function (shapes, skeleton, ignoredBones) {
if (ignoredBones === void 0) { ignoredBones = null; }
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 (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1)
continue;
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);
if (this.drawSkeletonXY)
shapes.x(skeletonX, skeletonY, 4 * this.scale);
}
else
shapes.begin(shader);
if (this.drawRegionAttachments) {
shapes.setColor(this.attachmentLineColor);
var slots = skeleton.slots;
@ -6015,19 +6119,17 @@ var spine;
}
}
}
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];
if (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1)
continue;
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 +6334,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 +6449,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.html
View File

@ -18,9 +18,10 @@
<div id="animationmixingdemo-timeslider"></div></br>
</div>
</center>
<script src="utils.js"></script>
<script src="animationmixing.js"></script>
<script>
animationMixingDemo();
animationMixingDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

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

@ -1,10 +1,10 @@
var animationMixingDemo = function(pathPrefix) {
var animationMixingDemo = function(pathPrefix, loadingComplete) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager;
var skeleton, skeletonNoMix, state, stateNoMix, bounds;
var timeSlider, timeSliderLabel;
var lastFrameTime = Date.now() / 1000
var lastFrameTime = Date.now() / 1000
function init () {
timeSlider = $("#animationmixingdemo-timeslider");
@ -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) { }
});
}
@ -44,8 +45,8 @@ var animationMixingDemo = function(pathPrefix) {
state.apply(skeleton);
skeleton.updateWorldTransform();
bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
skeleton.getBounds(bounds.offset, bounds.size);
requestAnimationFrame(render);
skeleton.getBounds(bounds.offset, bounds.size);
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
@ -120,10 +121,8 @@ var animationMixingDemo = function(pathPrefix) {
skeletonNoMix.updateWorldTransform();
skeletonNoMix.x = size.x;
renderer.drawSkeleton(skeletonNoMix);
renderer.end();
requestAnimationFrame(render);
renderer.end();
}
init();
return render;
};

141
spine-ts/webgl/demos/assets/alien.atlas
View File

@ -1,153 +1,146 @@
alien.png
size: 1024,512
size: 512,512
format: RGBA8888
filter: Linear,Linear
repeat: none
back_foot
rotate: true
xy: 1016, 366
size: 8, 6
orig: 8, 6
rotate: false
xy: 145, 175
size: 5, 3
orig: 5, 3
offset: 0, 0
index: -1
back_shin
rotate: false
xy: 28, 2
size: 21, 24
orig: 21, 24
xy: 468, 437
size: 13, 14
orig: 13, 14
offset: 0, 0
index: -1
back_thigh
rotate: false
xy: 2, 2
size: 24, 24
orig: 24, 24
xy: 194, 237
size: 14, 14
orig: 14, 14
offset: 0, 0
index: -1
backarmor
rotate: false
xy: 933, 295
size: 81, 91
orig: 81, 91
xy: 2, 2
size: 49, 55
orig: 49, 55
offset: 0, 0
index: -1
blown_up_nck
rotate: false
xy: 2, 28
size: 77, 52
orig: 77, 52
xy: 97, 147
size: 46, 31
orig: 46, 31
offset: 0, 0
index: -1
body
rotate: true
xy: 781, 167
size: 98, 118
orig: 98, 118
rotate: false
xy: 97, 180
size: 59, 71
orig: 59, 71
offset: 0, 0
index: -1
burst01
rotate: false
xy: 788, 355
size: 143, 155
orig: 143, 155
xy: 380, 417
size: 86, 93
orig: 86, 93
offset: 0, 0
index: -1
burst02
rotate: false
xy: 630, 329
size: 156, 181
orig: 156, 181
xy: 2, 143
size: 93, 108
orig: 93, 108
offset: 0, 0
index: -1
front_foot
rotate: true
xy: 1016, 376
size: 10, 6
orig: 10, 6
rotate: false
xy: 455, 411
size: 6, 4
orig: 6, 4
offset: 0, 0
index: -1
front_lower_arm
rotate: true
xy: 81, 25
size: 55, 63
orig: 55, 63
rotate: false
xy: 468, 472
size: 33, 38
orig: 33, 38
offset: 0, 0
index: -1
front_shin
rotate: true
xy: 287, 55
size: 25, 28
orig: 25, 28
rotate: false
xy: 468, 453
size: 15, 17
orig: 15, 17
offset: 0, 0
index: -1
front_thigh
rotate: false
xy: 258, 53
size: 27, 27
orig: 27, 27
xy: 158, 216
size: 16, 16
orig: 16, 16
offset: 0, 0
index: -1
front_upper_arm
rotate: false
xy: 199, 52
size: 57, 28
orig: 57, 28
xy: 158, 234
size: 34, 17
orig: 34, 17
offset: 0, 0
index: -1
head
rotate: false
xy: 630, 191
size: 149, 136
orig: 149, 136
offset: 0, 0
index: -1
jaw
rotate: true
xy: 933, 388
size: 122, 86
orig: 122, 86
xy: 2, 59
size: 89, 82
orig: 89, 82
offset: 0, 0
index: -1
lower_back_arm
rotate: false
xy: 146, 34
size: 51, 46
orig: 51, 46
xy: 53, 30
size: 30, 27
orig: 30, 27
offset: 0, 0
index: -1
metaljaw
rotate: false
xy: 788, 267
size: 122, 86
orig: 122, 86
xy: 380, 363
size: 73, 52
orig: 73, 52
offset: 0, 0
index: -1
splat01
rotate: false
xy: 371, 258
size: 257, 252
orig: 257, 252
xy: 224, 359
size: 154, 151
orig: 154, 151
offset: 0, 0
index: -1
splat02
rotate: false
xy: 2, 254
size: 367, 256
orig: 367, 256
xy: 2, 357
size: 220, 153
orig: 220, 153
offset: 0, 0
index: -1
splat03
rotate: false
xy: 2, 82
size: 362, 170
orig: 362, 170
xy: 2, 253
size: 217, 102
orig: 217, 102
offset: 0, 0
index: -1
upper_back_arm
rotate: true
xy: 146, 2
size: 30, 43
orig: 30, 43
rotate: false
xy: 53, 2
size: 18, 26
orig: 18, 26
offset: 0, 0
index: -1

1502
spine-ts/webgl/demos/assets/alien.json
View File

File diff suppressed because one or more lines are too long

BIN
spine-ts/webgl/demos/assets/alien.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 296 KiB

After

Width:  |  Height:  |  Size: 126 KiB

236
spine-ts/webgl/demos/assets/dragon.atlas
View File

@ -1,279 +1,279 @@
dragon.png
size: 1024,1024
size: 512,512
format: RGBA8888
filter: Linear,Linear
repeat: none
L_front_leg
rotate: false
xy: 870, 881
size: 42, 29
orig: 42, 29
xy: 406, 182
size: 34, 23
orig: 34, 23
offset: 0, 0
index: -1
L_front_thigh
rotate: false
xy: 258, 761
size: 42, 36
orig: 42, 36
xy: 283, 154
size: 34, 29
orig: 34, 29
offset: 0, 0
index: -1
L_rear_leg
rotate: false
xy: 765, 859
size: 103, 89
orig: 103, 89
xy: 411, 355
size: 82, 71
orig: 82, 71
offset: 0, 0
index: -1
L_rear_thigh
rotate: false
xy: 156, 116
size: 46, 75
orig: 46, 75
xy: 469, 293
size: 36, 60
orig: 36, 60
offset: 0, 0
index: -1
L_wing01
rotate: false
xy: 100, 687
size: 96, 128
orig: 96, 128
xy: 163, 242
size: 76, 102
orig: 76, 102
offset: 0, 0
index: -1
L_wing02
rotate: false
xy: 2, 88
size: 90, 135
orig: 90, 135
xy: 104, 5
size: 72, 108
orig: 72, 108
offset: 0, 0
index: -1
L_wing03
rotate: false
xy: 114, 451
size: 93, 104
orig: 93, 104
xy: 241, 261
size: 74, 83
orig: 74, 83
offset: 0, 0
index: -1
L_wing04
rotate: false
xy: 104, 193
size: 94, 68
orig: 94, 68
xy: 286, 352
size: 75, 54
orig: 75, 54
offset: 0, 0
index: -1
L_wing05
rotate: false
xy: 907, 915
size: 109, 107
orig: 109, 107
xy: 178, 51
size: 87, 85
orig: 87, 85
offset: 0, 0
index: -1
L_wing06
rotate: false
xy: 2, 671
size: 96, 166
orig: 96, 166
xy: 2, 230
size: 77, 132
orig: 77, 132
offset: 0, 0
index: -1
L_wing07
rotate: false
xy: 114, 557
size: 80, 128
orig: 80, 128
xy: 175, 138
size: 64, 102
orig: 64, 102
offset: 0, 0
index: -1
L_wing08
rotate: false
xy: 104, 263
size: 82, 91
orig: 82, 91
xy: 317, 278
size: 66, 72
orig: 66, 72
offset: 0, 0
index: -1
L_wing09
rotate: false
xy: 2, 2
size: 102, 84
orig: 102, 84
xy: 385, 286
size: 82, 67
orig: 82, 67
offset: 0, 0
index: -1
R_front_leg
rotate: false
xy: 696, 873
size: 51, 45
orig: 51, 45
xy: 241, 147
size: 40, 36
orig: 40, 36
offset: 0, 0
index: -1
R_front_thigh
rotate: false
xy: 331, 842
size: 54, 54
orig: 54, 54
xy: 178, 6
size: 43, 43
orig: 43, 43
offset: 0, 0
index: -1
R_rear_leg
rotate: false
xy: 198, 763
size: 58, 50
orig: 58, 50
xy: 363, 366
size: 46, 40
orig: 46, 40
offset: 0, 0
index: -1
R_rear_thigh
rotate: false
xy: 213, 815
size: 46, 75
orig: 46, 75
xy: 369, 216
size: 36, 60
orig: 36, 60
offset: 0, 0
index: -1
R_wing01
rotate: false
xy: 2, 514
size: 110, 155
orig: 110, 155
xy: 2, 104
size: 88, 124
orig: 88, 124
offset: 0, 0
index: -1
R_wing02
rotate: false
xy: 2, 359
size: 102, 153
orig: 102, 153
xy: 92, 115
size: 81, 122
orig: 81, 122
offset: 0, 0
index: -1
R_wing03
rotate: false
xy: 254, 898
size: 136, 124
orig: 136, 124
xy: 204, 411
size: 109, 99
orig: 109, 99
offset: 0, 0
index: -1
R_wing04
rotate: false
xy: 765, 950
size: 140, 72
orig: 140, 72
xy: 84, 346
size: 112, 58
orig: 112, 58
offset: 0, 0
index: -1
R_wing05
rotate: false
xy: 392, 907
size: 126, 115
orig: 126, 115
xy: 2, 10
size: 100, 92
orig: 100, 92
offset: 0, 0
index: -1
R_wing06
rotate: false
xy: 2, 839
size: 100, 183
orig: 100, 183
xy: 2, 364
size: 80, 146
orig: 80, 146
offset: 0, 0
index: -1
R_wing07
rotate: false
xy: 2, 225
size: 100, 132
orig: 100, 132
xy: 81, 239
size: 80, 105
orig: 80, 105
offset: 0, 0
index: -1
R_wing08
rotate: false
xy: 520, 895
size: 117, 127
orig: 117, 127
xy: 315, 408
size: 94, 102
orig: 94, 102
offset: 0, 0
index: -1
R_wing09
rotate: false
xy: 639, 920
size: 124, 102
orig: 124, 102
xy: 411, 428
size: 99, 82
orig: 99, 82
offset: 0, 0
index: -1
back
rotate: false
xy: 106, 356
size: 95, 93
orig: 95, 93
xy: 241, 185
size: 76, 74
orig: 76, 74
offset: 0, 0
index: -1
chest
rotate: false
xy: 261, 835
size: 68, 61
orig: 68, 61
xy: 319, 164
size: 54, 49
orig: 54, 49
offset: 0, 0
index: -1
chin
rotate: false
xy: 104, 817
size: 107, 73
orig: 107, 73
xy: 198, 346
size: 86, 58
orig: 86, 58
offset: 0, 0
index: -1
front_toeA
rotate: false
xy: 311, 808
size: 15, 25
orig: 15, 25
xy: 495, 406
size: 12, 20
orig: 12, 20
offset: 0, 0
index: -1
front_toeB
rotate: false
xy: 914, 884
size: 28, 29
orig: 28, 29
xy: 447, 231
size: 22, 23
orig: 22, 23
offset: 0, 0
index: -1
head
rotate: false
xy: 104, 892
size: 148, 130
orig: 148, 130
xy: 84, 406
size: 118, 104
orig: 118, 104
offset: 0, 0
index: -1
rear-toe
rotate: false
xy: 639, 879
size: 55, 39
orig: 55, 39
xy: 223, 18
size: 44, 31
orig: 44, 31
offset: 0, 0
index: -1
tail01
rotate: false
xy: 94, 114
size: 60, 77
orig: 60, 77
xy: 319, 215
size: 48, 61
orig: 48, 61
offset: 0, 0
index: -1
tail02
rotate: false
xy: 198, 701
size: 48, 60
orig: 48, 60
xy: 407, 236
size: 38, 48
orig: 38, 48
offset: 0, 0
index: -1
tail03
rotate: false
xy: 248, 713
size: 37, 46
orig: 37, 46
xy: 375, 177
size: 29, 37
orig: 29, 37
offset: 0, 0
index: -1
tail04
rotate: false
xy: 870, 912
size: 28, 36
orig: 28, 36
xy: 447, 256
size: 22, 28
orig: 22, 28
offset: 0, 0
index: -1
tail05
rotate: false
xy: 944, 883
size: 26, 30
orig: 26, 30
xy: 447, 205
size: 21, 24
orig: 21, 24
offset: 0, 0
index: -1
tail06
rotate: false
xy: 261, 799
size: 48, 34
orig: 48, 34
xy: 407, 207
size: 38, 27
orig: 38, 27
offset: 0, 0
index: -1

781
spine-ts/webgl/demos/assets/dragon.json
View File

File diff suppressed because one or more lines are too long

BIN
spine-ts/webgl/demos/assets/dragon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 268 KiB

After

Width:  |  Height:  |  Size: 177 KiB

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

@ -0,0 +1,363 @@
fanart_cut.png
size: 512,512
format: RGBA8888
filter: Linear,Linear
repeat: none
Layer 100
rotate: false
xy: 2, 2
size: 26, 33
orig: 26, 33
offset: 0, 0
index: -1
Layer 101
rotate: false
xy: 234, 411
size: 44, 20
orig: 44, 20
offset: 0, 0
index: -1
Layer 102
rotate: false
xy: 402, 457
size: 50, 27
orig: 50, 27
offset: 0, 0
index: -1
Layer 103
rotate: false
xy: 234, 433
size: 47, 77
orig: 47, 77
offset: 0, 0
index: -1
Layer 104
rotate: false
xy: 130, 367
size: 26, 35
orig: 26, 35
offset: 0, 0
index: -1
Layer 106
rotate: false
xy: 51, 203
size: 32, 44
orig: 32, 44
offset: 0, 0
index: -1
Layer 107
rotate: false
xy: 116, 404
size: 59, 106
orig: 59, 106
offset: 0, 0
index: -1
Layer 108
rotate: false
xy: 2, 249
size: 77, 78
orig: 77, 78
offset: 0, 0
index: -1
Layer 109
rotate: false
xy: 454, 457
size: 17, 27
orig: 17, 27
offset: 0, 0
index: -1
Layer 110
rotate: false
xy: 402, 486
size: 70, 24
orig: 70, 24
offset: 0, 0
index: -1
Layer 111
rotate: false
xy: 283, 458
size: 72, 52
orig: 72, 52
offset: 0, 0
index: -1
Layer 112
rotate: false
xy: 102, 360
size: 26, 39
orig: 26, 39
offset: 0, 0
index: -1
Layer 113
rotate: false
xy: 474, 483
size: 28, 27
orig: 28, 27
offset: 0, 0
index: -1
Layer 114
rotate: false
xy: 437, 433
size: 17, 22
orig: 17, 22
offset: 0, 0
index: -1
Layer 115
rotate: false
xy: 77, 98
size: 21, 21
orig: 21, 21
offset: 0, 0
index: -1
Layer 116
rotate: false
xy: 51, 164
size: 33, 37
orig: 33, 37
offset: 0, 0
index: -1
Layer 117
rotate: false
xy: 75, 136
size: 19, 26
orig: 19, 26
offset: 0, 0
index: -1
Layer 118
rotate: false
xy: 40, 121
size: 33, 41
orig: 33, 41
offset: 0, 0
index: -1
Layer 66
rotate: false
xy: 2, 329
size: 98, 70
orig: 98, 70
offset: 0, 0
index: -1
Layer 68
rotate: false
xy: 102, 329
size: 26, 29
orig: 26, 29
offset: 0, 0
index: -1
Layer 69
rotate: false
xy: 2, 37
size: 33, 49
orig: 33, 49
offset: 0, 0
index: -1
Layer 70
rotate: false
xy: 283, 434
size: 47, 22
orig: 47, 22
offset: 0, 0
index: -1
Layer 72
rotate: false
xy: 473, 460
size: 26, 21
orig: 26, 21
offset: 0, 0
index: -1
Layer 73
rotate: false
xy: 2, 88
size: 36, 75
orig: 36, 75
offset: 0, 0
index: -1
Layer 74
rotate: false
xy: 357, 455
size: 43, 55
orig: 43, 55
offset: 0, 0
index: -1
Layer 75
rotate: false
xy: 40, 92
size: 35, 27
orig: 35, 27
offset: 0, 0
index: -1
Layer 76
rotate: false
xy: 407, 443
size: 28, 12
orig: 28, 12
offset: 0, 0
index: -1
Layer 77
rotate: false
xy: 357, 431
size: 29, 22
orig: 29, 22
offset: 0, 0
index: -1
Layer 78
rotate: false
xy: 158, 364
size: 19, 38
orig: 19, 38
offset: 0, 0
index: -1
Layer 79
rotate: false
xy: 81, 258
size: 14, 69
orig: 14, 69
offset: 0, 0
index: -1
Layer 80
rotate: false
xy: 130, 331
size: 25, 34
orig: 25, 34
offset: 0, 0
index: -1
Layer 81
rotate: false
xy: 504, 502
size: 6, 8
orig: 6, 8
offset: 0, 0
index: -1
Layer 82
rotate: false
xy: 75, 121
size: 24, 13
orig: 24, 13
offset: 0, 0
index: -1
Layer 84
rotate: false
xy: 407, 428
size: 24, 13
orig: 24, 13
offset: 0, 0
index: -1
Layer 85
rotate: false
xy: 177, 405
size: 12, 10
orig: 12, 10
offset: 0, 0
index: -1
Layer 851
rotate: false
xy: 191, 405
size: 12, 10
orig: 12, 10
offset: 0, 0
index: -1
Layer 86
rotate: false
xy: 77, 92
size: 11, 4
orig: 11, 4
offset: 0, 0
index: -1
Layer 87
rotate: false
xy: 179, 376
size: 7, 8
orig: 7, 8
offset: 0, 0
index: -1
Layer 871
rotate: false
xy: 196, 395
size: 7, 8
orig: 7, 8
offset: 0, 0
index: -1
Layer 88
rotate: false
xy: 504, 495
size: 6, 5
orig: 6, 5
offset: 0, 0
index: -1
Layer 89
rotate: false
xy: 81, 249
size: 7, 7
orig: 7, 7
offset: 0, 0
index: -1
Layer 90
rotate: false
xy: 177, 417
size: 55, 93
orig: 55, 93
offset: 0, 0
index: -1
Layer 91
rotate: false
xy: 388, 429
size: 17, 24
orig: 17, 24
offset: 0, 0
index: -1
Layer 92
rotate: false
xy: 2, 401
size: 112, 109
orig: 112, 109
offset: 0, 0
index: -1
Layer 93
rotate: false
xy: 2, 165
size: 47, 82
orig: 47, 82
offset: 0, 0
index: -1
Layer 94
rotate: false
xy: 456, 436
size: 14, 19
orig: 14, 19
offset: 0, 0
index: -1
Layer 95
rotate: false
xy: 97, 292
size: 25, 35
orig: 25, 35
offset: 0, 0
index: -1
Layer 96
rotate: false
xy: 97, 260
size: 23, 30
orig: 23, 30
offset: 0, 0
index: -1
Layer 97
rotate: false
xy: 332, 430
size: 23, 26
orig: 23, 26
offset: 0, 0
index: -1
Layer 98
rotate: false
xy: 179, 386
size: 15, 17
orig: 15, 17
offset: 0, 0
index: -1
Layer 99
rotate: false
xy: 157, 333
size: 16, 29
orig: 16, 29
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: 124 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

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

255
spine-ts/webgl/demos/assets/raptor-walk.atlas
View File

@ -1,255 +0,0 @@
raptor-walk.png
size: 1024,1024
format: RGBA8888
filter: Linear,Linear
repeat: none
raptor-walk_0
rotate: false
xy: 2, 625
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_1
rotate: false
xy: 2, 327
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_2
rotate: false
xy: 309, 625
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_3
rotate: false
xy: 2, 29
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_4
rotate: false
xy: 309, 327
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_5
rotate: false
xy: 616, 625
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_6
rotate: false
xy: 309, 29
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_7
rotate: false
xy: 616, 327
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_8
rotate: false
xy: 616, 29
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk2.png
size: 1024,1024
format: RGBA8888
filter: Linear,Linear
repeat: none
raptor-walk_10
rotate: false
xy: 2, 327
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_11
rotate: false
xy: 309, 625
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_12
rotate: false
xy: 2, 29
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_13
rotate: false
xy: 309, 327
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_14
rotate: false
xy: 616, 625
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_15
rotate: false
xy: 309, 29
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_16
rotate: false
xy: 616, 327
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_17
rotate: false
xy: 616, 29
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_9
rotate: false
xy: 2, 625
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk3.png
size: 1024,1024
format: RGBA8888
filter: Linear,Linear
repeat: none
raptor-walk_18
rotate: false
xy: 2, 625
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_19
rotate: false
xy: 2, 327
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_20
rotate: false
xy: 309, 625
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_21
rotate: false
xy: 2, 29
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_22
rotate: false
xy: 309, 327
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_23
rotate: false
xy: 616, 625
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_24
rotate: false
xy: 309, 29
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_25
rotate: false
xy: 616, 327
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_26
rotate: false
xy: 616, 29
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk4.png
size: 1024,1024
format: RGBA8888
filter: Linear,Linear
repeat: none
raptor-walk_27
rotate: false
xy: 2, 625
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_28
rotate: false
xy: 2, 327
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_29
rotate: false
xy: 309, 625
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_30
rotate: false
xy: 2, 29
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_31
rotate: false
xy: 309, 327
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1
raptor-walk_32
rotate: false
xy: 616, 625
size: 305, 296
orig: 305, 296
offset: 0, 0
index: -1

BIN
spine-ts/webgl/demos/assets/raptor-walk.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 701 KiB

BIN
spine-ts/webgl/demos/assets/raptor-walk2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 729 KiB

BIN
spine-ts/webgl/demos/assets/raptor-walk3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 693 KiB

BIN
spine-ts/webgl/demos/assets/raptor-walk4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 492 KiB

178
spine-ts/webgl/demos/assets/spineboy.atlas
View File

@ -1,195 +1,195 @@
spineboy.png
size: 1024,1024
size: 512,512
format: RGBA8888
filter: Linear,Linear
repeat: none
eye_indifferent
rotate: false
xy: 550, 694
size: 93, 89
orig: 93, 89
xy: 140, 163
size: 47, 45
orig: 47, 45
offset: 0, 0
index: -1
eye_surprised
rotate: false
xy: 834, 856
size: 93, 89
orig: 93, 89
xy: 278, 335
size: 47, 45
orig: 47, 45
offset: 0, 0
index: -1
front_bracer
rotate: false
xy: 678, 774
size: 58, 80
orig: 58, 80
xy: 284, 293
size: 29, 40
orig: 29, 40
offset: 0, 0
index: -1
front_fist_closed
rotate: true
xy: 466, 593
size: 75, 82
orig: 75, 82
rotate: false
xy: 68, 4
size: 38, 41
orig: 38, 41
offset: 0, 0
index: -1
front_fist_open
rotate: false
xy: 550, 605
size: 86, 87
orig: 86, 87
xy: 109, 51
size: 43, 44
orig: 43, 44
offset: 0, 0
index: -1
front_foot
rotate: false
xy: 550, 785
size: 126, 69
orig: 126, 69
xy: 278, 382
size: 63, 35
orig: 63, 35
offset: 0, 0
index: -1
front_foot_bend1
rotate: true
xy: 375, 492
size: 128, 70
orig: 128, 70
rotate: false
xy: 2, 10
size: 64, 35
orig: 64, 35
offset: 0, 0
index: -1
front_foot_bend2
rotate: true
xy: 275, 330
size: 108, 93
orig: 108, 93
rotate: false
xy: 368, 455
size: 54, 47
orig: 54, 47
offset: 0, 0
index: -1
front_shin
rotate: false
xy: 466, 670
size: 82, 184
orig: 82, 184
xy: 235, 325
size: 41, 92
orig: 41, 92
offset: 0, 0
index: -1
front_thigh
rotate: false
xy: 214, 208
size: 48, 112
orig: 48, 112
xy: 478, 446
size: 24, 56
orig: 24, 56
offset: 0, 0
index: -1
front_upper_arm
rotate: false
xy: 214, 109
size: 54, 97
orig: 54, 97
xy: 144, 112
size: 27, 49
orig: 27, 49
offset: 0, 0
index: -1
goggles
rotate: false
xy: 466, 856
size: 261, 166
orig: 261, 166
xy: 235, 419
size: 131, 83
orig: 131, 83
offset: 0, 0
index: -1
gun
rotate: false
xy: 2, 117
size: 210, 203
orig: 210, 203
xy: 2, 47
size: 105, 102
orig: 105, 102
offset: 0, 0
index: -1
head
rotate: false
xy: 2, 322
size: 271, 298
orig: 271, 298
xy: 2, 151
size: 136, 149
orig: 136, 149
offset: 0, 0
index: -1
mouth_grind
rotate: false
xy: 929, 896
size: 93, 59
orig: 93, 59
xy: 429, 428
size: 47, 30
orig: 47, 30
offset: 0, 0
index: -1
mouth_oooo
rotate: false
xy: 929, 835
size: 93, 59
orig: 93, 59
xy: 235, 293
size: 47, 30
orig: 47, 30
offset: 0, 0
index: -1
mouth_smile
rotate: false
xy: 447, 532
size: 93, 59
orig: 93, 59
xy: 231, 229
size: 47, 30
orig: 47, 30
offset: 0, 0
index: -1
muzzle
rotate: false
xy: 2, 622
size: 462, 400
orig: 462, 400
xy: 2, 302
size: 231, 200
orig: 231, 200
offset: 0, 0
index: -1
neck
rotate: false
xy: 796, 819
size: 36, 41
orig: 36, 41
xy: 290, 270
size: 18, 21
orig: 18, 21
offset: 0, 0
index: -1
rear_bracer
rotate: false
xy: 738, 788
size: 56, 72
orig: 56, 72
xy: 343, 381
size: 28, 36
orig: 28, 36
offset: 0, 0
index: -1
rear_foot
rotate: true
xy: 2, 2
size: 113, 60
orig: 113, 60
rotate: false
xy: 231, 261
size: 57, 30
orig: 57, 30
offset: 0, 0
index: -1
rear_foot_bend1
rotate: false
xy: 64, 49
size: 117, 66
orig: 117, 66
xy: 368, 420
size: 59, 33
orig: 59, 33
offset: 0, 0
index: -1
rear_foot_bend2
rotate: false
xy: 729, 862
size: 103, 83
orig: 103, 83
xy: 424, 460
size: 52, 42
orig: 52, 42
offset: 0, 0
index: -1
rear_shin
rotate: true
xy: 729, 947
size: 75, 178
orig: 75, 178
rotate: false
xy: 191, 211
size: 38, 89
orig: 38, 89
offset: 0, 0
index: -1
rear_thigh
rotate: true
xy: 909, 957
size: 65, 104
orig: 65, 104
rotate: false
xy: 109, 97
size: 33, 52
orig: 33, 52
offset: 0, 0
index: -1
rear_upper_arm
rotate: true
xy: 447, 483
size: 47, 87
orig: 47, 87
rotate: false
xy: 373, 374
size: 24, 44
orig: 24, 44
offset: 0, 0
index: -1
torso
rotate: false
xy: 275, 440
size: 98, 180
orig: 98, 180
xy: 140, 210
size: 49, 90
orig: 49, 90
offset: 0, 0
index: -1

2413
spine-ts/webgl/demos/assets/spineboy.json
View File

File diff suppressed because one or more lines are too long

BIN
spine-ts/webgl/demos/assets/spineboy.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 593 KiB

After

Width:  |  Height:  |  Size: 165 KiB

41
spine-ts/webgl/demos/assets/stretchyman.atlas Normal file
View File

@ -0,0 +1,41 @@
stretchyman.png
size: 256,256
format: RGBA8888
filter: Linear,Linear
repeat: none
back arm
rotate: false
xy: 46, 106
size: 22, 61
orig: 22, 61
offset: 0, 0
index: -1
back leg
rotate: false
xy: 2, 2
size: 30, 95
orig: 30, 95
offset: 0, 0
index: -1
body
rotate: false
xy: 2, 99
size: 42, 136
orig: 42, 136
offset: 0, 0
index: -1
front arm
rotate: false
xy: 46, 169
size: 44, 66
orig: 44, 66
offset: 0, 0
index: -1
head
rotate: false
xy: 92, 204
size: 26, 31
orig: 26, 31
offset: 0, 0
index: -1

272
spine-ts/webgl/demos/assets/stretchyman.json Normal file
View File

File diff suppressed because one or more lines are too long

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

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

@ -0,0 +1,125 @@
tank.png
size: 512,512
format: RGBA8888
filter: Linear,Linear
repeat: none
images/antenna
rotate: false
xy: 2, 86
size: 6, 76
orig: 6, 76
offset: 0, 0
index: -1
images/cannon
rotate: false
xy: 2, 279
size: 233, 15
orig: 233, 15
offset: 0, 0
index: -1
images/cannonConnector
rotate: false
xy: 52, 227
size: 28, 34
orig: 28, 34
offset: 0, 0
index: -1
images/guntower
rotate: false
xy: 327, 438
size: 183, 72
orig: 183, 72
offset: 0, 0
index: -1
images/machinegun
rotate: false
xy: 2, 263
size: 83, 14
orig: 83, 14
offset: 0, 0
index: -1
images/machinegun-mount
rotate: false
xy: 87, 253
size: 18, 24
orig: 18, 24
offset: 0, 0
index: -1
images/rock
rotate: false
xy: 237, 280
size: 63, 14
orig: 63, 14
offset: 0, 0
index: -1
images/tankBottom
rotate: false
xy: 2, 354
size: 321, 69
orig: 321, 69
offset: 0, 0
index: -1
images/tankBottom-shadow
rotate: false
xy: 2, 425
size: 323, 85
orig: 323, 85
offset: 0, 0
index: -1
images/tankTop
rotate: false
xy: 2, 296
size: 352, 56
orig: 352, 56
offset: 0, 0
index: -1
images/tread
rotate: false
xy: 327, 428
size: 24, 8
orig: 24, 8
offset: 0, 0
index: -1
images/tread-inside
rotate: false
xy: 2, 77
size: 6, 7
orig: 6, 7
offset: 0, 0
index: -1
images/wheel-big
rotate: false
xy: 2, 213
size: 48, 48
orig: 48, 48
offset: 0, 0
index: -1
images/wheel-big-overlay
rotate: false
xy: 2, 164
size: 47, 47
orig: 47, 47
offset: 0, 0
index: -1
images/wheel-mid
rotate: false
xy: 10, 128
size: 34, 34
orig: 34, 34
offset: 0, 0
index: -1
images/wheel-mid-overlay
rotate: false
xy: 10, 92
size: 34, 34
orig: 34, 34
offset: 0, 0
index: -1
images/wheel-small
rotate: false
xy: 107, 259
size: 18, 18
orig: 18, 18
offset: 0, 0
index: -1

1900
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: 95 KiB

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

@ -0,0 +1,34 @@
transformConstraint.png
size: 256,256
format: RGBA8888
filter: Linear,Linear
repeat: none
images/wheel-big
rotate: false
xy: 2, 142
size: 96, 96
orig: 96, 96
offset: 0, 0
index: -1
images/wheel-big-overlay
rotate: false
xy: 2, 47
size: 93, 93
orig: 93, 93
offset: 0, 0
index: -1
images/wheel-mid
rotate: false
xy: 100, 170
size: 68, 68
orig: 68, 68
offset: 0, 0
index: -1
images/wheel-mid-overlay
rotate: false
xy: 170, 170
size: 68, 68
orig: 68, 68
offset: 0, 0
index: -1

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

@ -0,0 +1 @@
{"skeleton":{"hash":"tPmh6vxs0ZG3D3+Kg4d6EroS5Uc","spine":"3.4.02","width":566.2,"height":397.26},"bones":[{"name":"root","x":8.29,"y":-14.33},{"name":"wheel1overlay","parent":"root","x":-152.12,"y":220.65},{"name":"wheel1","parent":"wheel1overlay","length":93.7},{"name":"wheel2overlay","parent":"root","x":202.3,"y":91.97},{"name":"wheel2","parent":"wheel2overlay","length":67},{"name":"wheel3overlay","parent":"root","x":226.28,"y":312.42},{"name":"wheel3","parent":"wheel3overlay","length":67}],"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","x":354.42,"y":-128.67,"translateMix":0,"scaleMix":0,"shearMix":0},{"name":"wheel3","bones":["wheel3"],"target":"wheel1","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":{"bones":{"wheel1":{"rotate":[{"time":0,"angle":115.77}]}},"transform":{"wheel2":[{"time":0,"translateMix":0,"scaleMix":0,"shearMix":0}]}}}}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 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

3
spine-ts/webgl/demos/ikconstraint.html
View File

@ -8,9 +8,10 @@
<body>
<canvas id="ikdemo-canvas"></canvas>
<center><div id="info" style="color: #f00; position: fixed; top: 0; width: 100%"></div></center>
<script src="utils.js"></script>
<script src="ikconstraint.js"></script>
<script>
ikConstraintDemo();
ikConstraintDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

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

@ -1,4 +1,4 @@
var ikConstraintDemo = function(pathPrefix) {
var ikConstraintDemo = function(pathPrefix, loadingComplete) {
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);
@ -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");
@ -67,7 +68,7 @@ var ikConstraintDemo = function(pathPrefix) {
renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2;
requestAnimationFrame(render);
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
@ -91,10 +92,7 @@ var ikConstraintDemo = function(pathPrefix) {
var bone = skeleton.findBone(boneName);
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, CIRCLE_INNER_COLOR);
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, CIRCLE_OUTER_COLOR);
renderer.end();
requestAnimationFrame(render);
renderer.end();
}
init();
};

3
spine-ts/webgl/demos/imagesequences.html
View File

@ -19,9 +19,10 @@
<div id="imagesequencesdemo-timeline" class="slider"></div>
</div>
</center>
<script src="utils.js"></script>
<script src="imagesequences.js"></script>
<script>
imageSequencesDemo();
imageSequencesDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

19
spine-ts/webgl/demos/imagesequences.js
View File

@ -1,4 +1,4 @@
var imageSequencesDemo = function(pathPrefix) {
var imageSequencesDemo = function(pathPrefix, loadingComplete) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager;
@ -30,7 +30,7 @@ var imageSequencesDemo = function(pathPrefix) {
skeletons["alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
skeletons["dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
setupUI();
requestAnimationFrame(render);
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
@ -89,12 +89,19 @@ var imageSequencesDemo = function(pathPrefix) {
skeleton.setSkinByName("default");
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
var anim = skeletonData.findAnimation(animation);
state.setAnimation(0, animation, true);
if (name === "alien") {
state.update(anim.duration / 2);
}
state.apply(skeleton);
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
var size = new spine.Vector2();
skeleton.getBounds(offset, size);
if (name === "alien") {
state.update(-anim.duration / 2);
}
var regions = [];
for(var i = 0; i < sequenceSlots.length; i++) {
@ -133,8 +140,8 @@ var imageSequencesDemo = function(pathPrefix) {
renderer.camera.position.x = offset.x + size.x;
renderer.camera.position.y = offset.y + size.y / 2;
renderer.camera.viewportWidth = size.x * 2.2;
renderer.camera.viewportHeight = size.y * 1.2;
renderer.camera.viewportWidth = size.x * 2.4;
renderer.camera.viewportHeight = size.y * 1.4;
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(0.2, 0.2, 0.2, 1);
@ -199,9 +206,7 @@ var imageSequencesDemo = function(pathPrefix) {
}
}
renderer.end();
requestAnimationFrame(render);
renderer.end();
}
init();

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

@ -14,22 +14,20 @@
<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>
<input type="checkbox" id="meshesdemo-drawregionscheckbox" style="color: #fff;" checked="true"></input>
<span style="color: #fff">Draw Mesh Hull</span>
<input type="checkbox" id="meshesdemo-drawmeshhullcheckbox" style="color: #fff;" checked="true"></input>
<span style="color: #fff">Draw Mesh Triangles</span>
<input type="checkbox" id="meshesdemo-drawbonescheckbox" style="color: #fff;" checked="true"></input>
<span style="color: #fff">Draw Triangles</span>
<input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;" checked="true"></input>
<br>
<input id="meshesdemo-playbutton" type="button" value="Pause"></input>
<div id="meshesdemo-timeline" class="slider"></input>
</div>
</center>
<script src="utils.js"></script>
<script src="meshes.js"></script>
<script>
meshesDemo();
meshesDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

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

@ -1,49 +1,39 @@
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 meshesDemo = function(pathPrefix, loadingComplete) {
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);
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
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);
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
@ -57,70 +47,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() {
renderer.skeletonDebugRenderer.drawRegionAttachments = this.checked;
});
$("#meshesdemo-drawmeshhullcheckbox").change(function() {
})
$("#meshesdemo-drawmeshtrianglescheckbox").click(function() {
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
});
$("#meshesdemo-drawmeshtrianglescheckbox").change(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);
renderer.drawSkeletonDebug(skeleton);
renderer.end();
requestAnimationFrame(render);
renderer.end();
}
init();

5
spine-ts/webgl/demos/skeletalvssprite.html
View File

@ -22,9 +22,10 @@
<div id="skeletonvsspritedemo-timeline" class="slider"></div>
</center>
</div>
<script src="utils.js"></script>
<script src="skeletonvssprite.js"></script>
<script>
skeletonVsSpriteDemo();
<script>
skeletonVsSpriteDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

107
spine-ts/webgl/demos/skeletonvssprite.js
View File

@ -1,16 +1,17 @@
var skeletonVsSpriteDemo = function(pathPrefix) {
var skeletonVsSpriteDemo = function(pathPrefix, loadingComplete) {
var SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8);
var FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8);
var canvas, gl, renderer, input, assetManager;
var skeleton, animationState, offset, bounds;
var skeletonSeq, walkAnim, walkLastTime = 0, walkLastTimePrecise = 0;
var skeletonAtlas;
var frameAtlas;
var sequenceAtlas;
var viewportWidth, viewportHeight;
var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30;
var lastFrameTime = Date.now() / 1000;
var timeSlider, timeSliderLabel, atlasCheckbox;
var playButton, timeLine, isPlaying = true, playTime = 0;
var playButton, timeLine, isPlaying = true, playTime = 0, framePlaytime = 0;
function init () {
if (pathPrefix === undefined) pathPrefix = "";
@ -23,12 +24,8 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager.loadTexture("assets/raptor.png");
assetManager.loadText("assets/raptor.json");
assetManager.loadText("assets/raptor.atlas");
assetManager.loadText("assets/raptor-walk.atlas");
assetManager.loadTexture("assets/raptor-walk.png");
assetManager.loadTexture("assets/raptor-walk2.png");
assetManager.loadTexture("assets/raptor-walk3.png");
assetManager.loadTexture("assets/raptor-walk4.png");
assetManager.loadText("assets/raptor.atlas");
assetManager.loadTexture("assets/raptor-sequenceatlas.png");
requestAnimationFrame(load);
}
@ -37,6 +34,7 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
skeletonAtlas = new spine.TextureAtlas(assetManager.get("assets/raptor.atlas"), function(path) {
return assetManager.get("assets/" + path);
});
sequenceAtlas = assetManager.get("assets/raptor-sequenceatlas.png");
var atlasLoader = new spine.TextureAtlasAttachmentLoader(skeletonAtlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/raptor.json"));
@ -49,18 +47,16 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
frameAtlas = new spine.TextureAtlas(assetManager.get("assets/raptor-walk.atlas"), function(path) {
return assetManager.get("assets/" + path);
});
for (var i = 0; i < frameAtlas.regions.length - 1; i++) {
frames.push(frameAtlas.findRegion("raptor-walk_" + i));
}
frameScale = bounds.x / frames[0].width * 1.1;
skeletonSeq = new spine.Skeleton(skeletonData);
walkAnim = skeletonSeq.data.findAnimation("walk");
walkAnim.apply(skeletonSeq, 0, 0, true, null);
skeletonSeq.x += bounds.x + 150;
viewportWidth = ((700 + bounds.x) - offset.x);
viewportHeight = ((0 + bounds.y) - offset.y);
setupUI();
requestAnimationFrame(render);
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
@ -84,14 +80,21 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
if (!isPlaying) {
var time = timeLine.slider("value") / 100;
var animationDuration = animationState.getCurrent(0).animation.duration;
time = animationDuration * time;
animationState.update(time - playTime);
time = animationDuration * time;
var playDelta = time - playTime;
animationState.update(playDelta);
animationState.apply(skeleton);
skeleton.updateWorldTransform();
playTime = time;
frameTime = time;
while (frameTime > animationDuration) frameTime -= animationDuration;
currFrame = Math.min(frames.length - 1, (frameTime / (1 / FPS)) | 0);
walkLastTimePrecise += playDelta;
var sign = playDelta < 0 ? -1 : 1;
while (Math.abs(walkLastTimePrecise - walkLastTime) > 1 / FPS) {
var newWalkTime = walkLastTime + sign * 1 / FPS;
walkAnim.apply(skeletonSeq, walkLastTime, newWalkTime, true, null);
walkLastTime = newWalkTime;
}
skeletonSeq.updateWorldTransform();
}
}});
@ -118,14 +121,18 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
playTime -= animationDuration;
}
timeLine.slider("value", (playTime / animationDuration * 100));
animationState.update(delta);
animationState.apply(skeleton);
skeleton.updateWorldTransform();
frameTime += delta;
while (frameTime > animationDuration) frameTime -= animationDuration;
currFrame = Math.min(frames.length - 1, (frameTime / (1 / FPS)) | 0);
walkLastTimePrecise += delta;
while (walkLastTimePrecise - walkLastTime > 1 / FPS) {
var newWalkTime = walkLastTime + 1 / FPS;
walkAnim.apply(skeletonSeq, walkLastTime, newWalkTime, true, null);
walkLastTime = newWalkTime;
}
skeletonSeq.updateWorldTransform();
}
}
@ -139,40 +146,24 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
renderer.begin();
if (!atlasCheckbox.checked) {
var frame = frames[currFrame];
renderer.drawRegion(frame, 700, offset.y - 40, frame.width * frameScale, frame.height * frameScale);
var frame = frames[currFrame];
renderer.drawSkeleton(skeleton);
} else {
var skeletonAtlasSize = skeletonAtlas.pages[0].texture.getImage().width;
var frameAtlasSize = frameAtlas.pages[0].texture.getImage().width;
var halfSpaceWidth = viewportWidth / 2;
var halfSpaceHeight = viewportHeight;
var pageSize = halfSpaceWidth / 2;
// we only have one page for skeleton
var skeletonPageSize = pageSize * skeletonAtlasSize / frameAtlasSize;
renderer.rect(true, offset.x + halfSpaceWidth / 2 - skeletonPageSize / 2,
offset.y + halfSpaceHeight / 2 - skeletonPageSize / 2, skeletonPageSize, skeletonPageSize, spine.Color.WHITE);
renderer.drawTexture(skeletonAtlas.pages[0].texture, offset.x + halfSpaceWidth / 2 - skeletonPageSize / 2,
offset.y + halfSpaceHeight / 2 - skeletonPageSize / 2, skeletonPageSize, skeletonPageSize);
renderer.rect(false, offset.x + halfSpaceWidth / 2 - skeletonPageSize / 2,
offset.y + halfSpaceHeight / 2 - skeletonPageSize / 2, skeletonPageSize, skeletonPageSize, SKELETON_ATLAS_COLOR);
var x = offset.x + halfSpaceWidth + 150;
var y = offset.y + halfSpaceHeight / 2;
var i = 0;
for (var row = 0; row < frameAtlas.pages.length / 2; row++) {
for (var col = 0; col < 2; col++) {
var page = frameAtlas.pages[i++];
renderer.rect(true, x + col * pageSize, y - row * pageSize, pageSize, pageSize, spine.Color.WHITE);
renderer.drawTexture(page.texture, x + col * pageSize, y - row * pageSize, pageSize, pageSize);
renderer.rect(false, x + col * pageSize, y - row * pageSize, pageSize, pageSize, FRAME_ATLAS_COLOR);
}
}
renderer.drawSkeleton(skeletonSeq);
} else {
var atlasTexture = skeletonAtlas.pages[0].texture;
var atlasSize = atlasTexture.getImage().width;
renderer.rect(true, offset.x + bounds.x / 2 - atlasSize / 2,
offset.y + bounds.y / 2 - atlasSize / 2, atlasSize, atlasSize, spine.Color.WHITE);
renderer.drawTexture(atlasTexture, offset.x + bounds.x / 2 - atlasSize / 2,
offset.y + bounds.y / 2 - atlasSize / 2, atlasSize, atlasSize);
renderer.rect(false, offset.x + bounds.x / 2 - atlasSize / 2,
offset.y + bounds.y / 2 - atlasSize / 2, atlasSize, atlasSize, spine.Color.RED);
var seqAtlasSize = atlasSize * 2;
renderer.drawTexture(sequenceAtlas, offset.x + bounds.x / 2 + bounds.x - seqAtlasSize / 2 + 211,
offset.y + bounds.y / 2 - seqAtlasSize / 2, seqAtlasSize, seqAtlasSize);
}
renderer.end();
requestAnimationFrame(render);
renderer.end();
}
init();

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

@ -0,0 +1,29 @@
<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="utils.js"></script>
<script src="skins.js"></script>
<script>
skinsDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

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

@ -0,0 +1,128 @@
var skinsDemo = function(pathPrefix, loadingComplete) {
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();
loadingComplete(canvas, 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();
}
init();
};

31
spine-ts/webgl/demos/stretchy.html Normal file
View File

@ -0,0 +1,31 @@
<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="stretchydemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<br>
<div>Display Bones</div><input id="stretchydemo-drawbones" type="checkbox" checked="true"></input>
</br>
<input id="stretchydemo-playbutton" type="button" value="Pause"></input>
<div id="stretchydemo-timeline" class="slider"></div>
</div>
</center>
<script src="utils.js"></script>
<script src="stretchy.js"></script>
<script>
stretchyDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

140
spine-ts/webgl/demos/stretchy.js Normal file
View File

@ -0,0 +1,140 @@
var stretchyDemo = function(pathPrefix, loadingComplete) {
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, bounds;
var lastFrameTime = Date.now() / 1000;
var target = null;
var kneeFront, kneeBack;
var controlBones = ["front leg controller", "back leg controller", "hip"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
var kneePos = new spine.Vector2();
var playButton, timeLine, spacing, isPlaying = true, playTime = 0;
function init () {
canvas = document.getElementById("stretchydemo-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/stretchyman.png");
assetManager.loadText("assets/stretchyman.json");
assetManager.loadText("assets/stretchyman.atlas");
requestAnimationFrame(load);
}
function load () {
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("assets/stretchyman.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/stretchyman.json"));
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
kneeFront = skeleton.findBone("front leg middle");
kneeBack = skeleton.findBone("back leg middle");
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();
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
function setupUI() {
var checkbox = $("#stretchydemo-drawbones");
checkbox.change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
}
function centerKnee(kneeBone, hipBone, footBone) {
temp.set(footBone.worldX + skeleton.x, footBone.worldY + skeleton.y, 0)
.sub(temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0));
temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0);
temp.scale(0.5).add(temp3);
kneeBone.parent.worldToLocal(kneePos.set(temp.x, temp.y));
kneeBone.x = kneePos.x;
kneeBone.y = kneePos.y;
}
function render () {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
if (delta > 0.032) delta = 0.032;
skeleton.updateWorldTransform();
centerKnee(kneeBack, skeleton.findBone("back leg root"), skeleton.findBone("back leg controller"));
centerKnee(kneeFront, skeleton.findBone("front leg root"), skeleton.findBone("front leg controller"));
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, false, ["root", "front leg middle", "back leg middle"]);
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();
}
init();
};

28
spine-ts/webgl/demos/tank.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="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="utils.js"></script>
<script src="tank.js"></script>
<script>
tankDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

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

@ -0,0 +1,109 @@
var tankDemo = function(pathPrefix, loadingComplete) {
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();
loadingComplete(canvas, 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();
}
init();
};

28
spine-ts/webgl/demos/transformconstraint.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; }
div { color: #fff; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body>
<canvas id="transformdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<div id="info"></div></br>
<div>Rotation Offset</div><div id="transformdemo-rotationoffset" class="slider"></div>
</div>
</center>
<script src="utils.js"></script>
<script src="transformconstraint.js"></script>
<script>
transformConstraintDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

121
spine-ts/webgl/demos/transformconstraint.js Normal file
View File

@ -0,0 +1,121 @@
var transformConstraintDemo = function(pathPrefix, loadingComplete) {
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 wheel1;
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
var lastRotation = 0;
var rotationOffset, mix, lastOffset = 0;
function init () {
canvas = document.getElementById("transformdemo-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);
var getRotation = function(x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees;
if (v.y < 0) angle = 360 - angle;
return angle;
}
input.addListener({
down: function(x, y) {
lastRotation = getRotation(x, y);
},
up: function(x, y) { },
dragged: function(x, y) {
var rotation = getRotation(x, y);
var delta = rotation - lastRotation;
wheel1.rotation += delta;
lastRotation = rotation;
},
moved: function (x, y) { }
})
assetManager.loadTexture("assets/transformConstraint.png");
assetManager.loadText("assets/transformConstraint.json");
assetManager.loadText("assets/transformConstraint.atlas");
requestAnimationFrame(load);
}
function load () {
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("assets/transformConstraint.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/transformConstraint.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));
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
wheel1 = skeleton.findBone("wheel1");
renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupUI();
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
function setupUI() {
rotationOffset = $("#transformdemo-rotationoffset");
rotationOffset.slider({ range: "max", min: -180, max: 180, value: 0, slide: function () {
var val = rotationOffset.slider("value");
var delta = val - lastOffset;
lastOffset = val;
skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
$("#transformdemo-rotationoffset-label").text(val + "°");
}});
}
function render () {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
if (delta > 0.032) delta = 0.032;
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, false, ["root"]);
var bone = wheel1;
var colorInner = bone === target ? COLOR_INNER_SELECTED : COLOR_INNER;
var colorOuter = bone === target ? COLOR_OUTER_SELECTED : COLOR_OUTER;
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
renderer.end();
}
init();
};

33
spine-ts/webgl/demos/utils.js Normal file
View File

@ -0,0 +1,33 @@
var spineDemos;
(function(spineDemos) {
spineDemos.setupRendering = function (canvas, renderFunc) {
var isVisible = false;
function render () {
renderFunc();
if (isVisible) requestAnimationFrame(render);
};
function viewportCheck () {
var old = isVisible
isVisible = spineDemos.isElementInViewport(canvas);
if (isVisible && old != isVisible) requestAnimationFrame(render);
}
window.addEventListener("DOMContentLoaded", viewportCheck, false);
window.addEventListener("load", viewportCheck, false);
window.addEventListener("resize", viewportCheck, false);
window.addEventListener("scroll", viewportCheck, false);
viewportCheck();
requestAnimationFrame(render);
};
spineDemos.isElementInViewport = function (canvas) {
var rect = canvas.getBoundingClientRect();
var x = 0, y = 0;
var width = (window.innerHeight || document.documentElement.clientHeight);
var height = (window.innerWidth || document.documentElement.clientWidth);
return rect.left < x + width && rect.right > x && rect.top < y + height && rect.bottom > y;
};
})(spineDemos || (spineDemos = { }));

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

@ -0,0 +1,33 @@
<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="utils.js"></script>
<script src="vine.js"></script>
<script>
vineDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

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

@ -0,0 +1,171 @@
var vineDemo = function(pathPrefix, loadingComplete) {
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();
loadingComplete(canvas, 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();
}
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;
}
}

12
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 = [
@ -73,10 +73,10 @@ module spine.webgl {
this.skeletonRenderer.draw(this.batcher, skeleton);
}
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha = false) {
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha = false, ignoredBones: Array<string> = null) {
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapesShader, skeleton);
this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
}
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) {

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

@ -42,48 +42,41 @@ module spine.webgl {
drawMeshHull = true;
drawMeshTriangles = true;
drawPaths = true;
drawSkeletonXY = false;
premultipliedAlpha = false;
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, ignoredBones: Array<string> = null) {
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 (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1) continue;
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.drawSkeletonXY) shapes.x(skeletonX, skeletonY, 4 * this.scale);
}
if (this.drawRegionAttachments) {
shapes.setColor(this.attachmentLineColor);
@ -187,24 +180,19 @@ module spine.webgl {
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];
let bone = bones[i];
if (ignoredBones && ignoredBones.indexOf(bone.data.name) > -1) continue;
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();
}