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

[ts] Refactored demos so we can load them sequentially

Browse Source
This commit is contained in:
badlogic 2016-08-30 12:07:33 +02:00
parent d5688bf999
commit 15c82b221a
30 changed files with 123 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1161,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;
@ -1275,6 +1275,7 @@ declare module spine.webgl {
drawMeshHull: boolean;
drawMeshTriangles: boolean;
drawPaths: boolean;
drawSkeletonXY: boolean;
premultipliedAlpha: boolean;
scale: number;
boneWidth: number;
@ -1284,7 +1285,7 @@ declare module spine.webgl {
private static LIGHT_GRAY;
private static GREEN;
constructor(gl: WebGLRenderingContext);
draw(shapes: ShapeRenderer, skeleton: Skeleton): void;
draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones?: Array<string>): void;
dispose(): void;
}
}

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

@ -5725,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.shapes, skeleton);
this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
@ -6411,6 +6412,7 @@ var spine;
this.drawMeshHull = true;
this.drawMeshTriangles = true;
this.drawPaths = true;
this.drawSkeletonXY = false;
this.premultipliedAlpha = false;
this.scale = 1;
this.boneWidth = 2;
@ -6418,7 +6420,8 @@ var spine;
this.temp = new Array();
this.gl = gl;
}
SkeletonDebugRenderer.prototype.draw = function (shapes, 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;
@ -6429,13 +6432,16 @@ var spine;
shapes.setColor(this.boneLineColor);
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.x(skeletonX, skeletonY, 4 * this.scale);
if (this.drawSkeletonXY)
shapes.x(skeletonX, skeletonY, 4 * this.scale);
}
if (this.drawRegionAttachments) {
shapes.setColor(this.attachmentLineColor);
@ -6540,6 +6546,8 @@ var spine;
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);
}
}

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

File diff suppressed because one or more lines are too long

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

@ -1091,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;
@ -1205,6 +1205,7 @@ declare module spine.webgl {
drawMeshHull: boolean;
drawMeshTriangles: boolean;
drawPaths: boolean;
drawSkeletonXY: boolean;
premultipliedAlpha: boolean;
scale: number;
boneWidth: number;
@ -1214,7 +1215,7 @@ declare module spine.webgl {
private static LIGHT_GRAY;
private static GREEN;
constructor(gl: WebGLRenderingContext);
draw(shapes: ShapeRenderer, skeleton: Skeleton): void;
draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones?: Array<string>): void;
dispose(): void;
}
}

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

@ -5302,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.shapes, skeleton);
this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
@ -5988,6 +5989,7 @@ var spine;
this.drawMeshHull = true;
this.drawMeshTriangles = true;
this.drawPaths = true;
this.drawSkeletonXY = false;
this.premultipliedAlpha = false;
this.scale = 1;
this.boneWidth = 2;
@ -5995,7 +5997,8 @@ var spine;
this.temp = new Array();
this.gl = gl;
}
SkeletonDebugRenderer.prototype.draw = function (shapes, 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;
@ -6006,13 +6009,16 @@ var spine;
shapes.setColor(this.boneLineColor);
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.x(skeletonX, skeletonY, 4 * this.scale);
if (this.drawSkeletonXY)
shapes.x(skeletonX, skeletonY, 4 * this.scale);
}
if (this.drawRegionAttachments) {
shapes.setColor(this.attachmentLineColor);
@ -6117,6 +6123,8 @@ var spine;
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);
}
}

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

File diff suppressed because one or more lines are too long

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

@ -1091,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;
@ -1205,6 +1205,7 @@ declare module spine.webgl {
drawMeshHull: boolean;
drawMeshTriangles: boolean;
drawPaths: boolean;
drawSkeletonXY: boolean;
premultipliedAlpha: boolean;
scale: number;
boneWidth: number;
@ -1214,7 +1215,7 @@ declare module spine.webgl {
private static LIGHT_GRAY;
private static GREEN;
constructor(gl: WebGLRenderingContext);
draw(shapes: ShapeRenderer, skeleton: Skeleton): void;
draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones?: Array<string>): void;
dispose(): void;
}
}

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

@ -5302,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.shapes, skeleton);
this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
@ -5988,6 +5989,7 @@ var spine;
this.drawMeshHull = true;
this.drawMeshTriangles = true;
this.drawPaths = true;
this.drawSkeletonXY = false;
this.premultipliedAlpha = false;
this.scale = 1;
this.boneWidth = 2;
@ -5995,7 +5997,8 @@ var spine;
this.temp = new Array();
this.gl = gl;
}
SkeletonDebugRenderer.prototype.draw = function (shapes, 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;
@ -6006,13 +6009,16 @@ var spine;
shapes.setColor(this.boneLineColor);
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.x(skeletonX, skeletonY, 4 * this.scale);
if (this.drawSkeletonXY)
shapes.x(skeletonX, skeletonY, 4 * this.scale);
}
if (this.drawRegionAttachments) {
shapes.setColor(this.attachmentLineColor);
@ -6117,6 +6123,8 @@ var spine;
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);
}
}

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>

14
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");
@ -45,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);
}
@ -121,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;
};

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>

9
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);
@ -68,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);
}
@ -92,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>

8
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);
}
@ -199,9 +199,7 @@ var imageSequencesDemo = function(pathPrefix) {
}
}
renderer.end();
requestAnimationFrame(render);
renderer.end();
}
init();

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

@ -16,21 +16,18 @@
<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>

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

@ -1,4 +1,4 @@
var meshesDemo = function(pathPrefix) {
var meshesDemo = function(pathPrefix, loadingComplete) {
var canvas, gl, renderer, input, assetManager;
var skeleton, bounds;
var lastFrameTime = Date.now() / 1000;
@ -13,6 +13,7 @@ var meshesDemo = function(pathPrefix) {
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager.loadTexture("assets/girl.png");
assetManager.loadText("assets/girl.json");
@ -32,7 +33,7 @@ var meshesDemo = function(pathPrefix) {
skeletons["green_girl"] = loadSkeleton("gree_girl", "animation");
skeletons["fanart"] = loadSkeleton("fanart_cut", "animation");
setupUI();
requestAnimationFrame(render);
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
@ -82,13 +83,8 @@ var meshesDemo = function(pathPrefix) {
$("#meshesdemo-drawbonescheckbox").click(function() {
renderer.skeletonDebugRenderer.drawBones = this.checked;
})
$("#meshesdemo-drawregionscheckbox").click(function() {
renderer.skeletonDebugRenderer.drawRegionAttachments = this.checked;
})
$("#meshesdemo-drawmeshhullcheckbox").click(function() {
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
})
$("#meshesdemo-drawmeshtrianglescheckbox").click(function() {
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
})
}
@ -160,9 +156,7 @@ var meshesDemo = function(pathPrefix) {
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>

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

@ -1,4 +1,4 @@
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);
@ -60,7 +60,7 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
viewportHeight = ((0 + bounds.y) - offset.y);
setupUI();
requestAnimationFrame(render);
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
@ -170,9 +170,7 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
}
}
}
renderer.end();
requestAnimationFrame(render);
renderer.end();
}
init();

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

@ -20,9 +20,10 @@
<div id="skinsdemo-timeline" class="slider"></input>
</div>
</center>
<script src="utils.js"></script>
<script src="skins.js"></script>
<script>
skinsDemo();
skinsDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

8
spine-ts/webgl/demos/skins.js
View File

@ -1,4 +1,4 @@
var skinsDemo = function(pathPrefix) {
var skinsDemo = function(pathPrefix, loadingComplete) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds;
var lastFrameTime = Date.now() / 1000;
@ -36,7 +36,7 @@ var skinsDemo = function(pathPrefix) {
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
setupUI();
requestAnimationFrame(render);
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
@ -121,9 +121,7 @@ var skinsDemo = function(pathPrefix) {
var scale = width / texture.getImage().width;
var height = scale * texture.getImage().height;
renderer.drawTexture(texture, offset.x + bounds.x, offset.y + bounds.y / 2 - height / 2, width, height);
renderer.end();
requestAnimationFrame(render);
renderer.end();
}
init();

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

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

6
spine-ts/webgl/demos/tank.js
View File

@ -1,4 +1,4 @@
var tankDemo = function(pathPrefix) {
var tankDemo = function(pathPrefix, loadingComplete) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds;
var lastFrameTime = Date.now() / 1000;
@ -36,7 +36,7 @@ var tankDemo = function(pathPrefix) {
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
setupUI();
requestAnimationFrame(render);
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
@ -103,8 +103,6 @@ var tankDemo = function(pathPrefix) {
renderer.begin();
renderer.drawSkeleton(skeleton);
renderer.end();
requestAnimationFrame(render);
}
init();

6
spine-ts/webgl/demos/transformconstraint.html
View File

@ -16,13 +16,13 @@
<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>Rotation Mix</div><div id="transformdemo-rotationmix" class="slider"></div>
<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();
transformConstraintDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

24
spine-ts/webgl/demos/transformconstraint.js
View File

@ -1,4 +1,4 @@
var transformConstraintDemo = function(pathPrefix) {
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);
@ -76,7 +76,7 @@ var transformConstraintDemo = function(pathPrefix) {
setupUI();
requestAnimationFrame(render);
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
@ -88,16 +88,8 @@ var transformConstraintDemo = function(pathPrefix) {
lastOffset = val;
skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
$("#transformdemo-rotationoffset-label").text(val + "%");
}});
mix = $("#transformdemo-rotationmix");
mix.slider({ range: "max", min: 0, max: 100, value: 100, slide: function () {
var val = mix.slider("value");
skeleton.findTransformConstraint("wheel2").rotateMix = val / 100;
skeleton.findTransformConstraint("wheel3").rotateMix = val / 100;
$("#transformdemo-rotationmix-label").text(val + "%");
}});
$("#transformdemo-rotationoffset-label").text(val + "°");
}});
}
function render () {
@ -113,18 +105,16 @@ var transformConstraintDemo = function(pathPrefix) {
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton);
renderer.drawSkeletonDebug(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();
requestAnimationFrame(render);
renderer.end();
}
init();

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

@ -0,0 +1,10 @@
var spineDemos;
(function(spineDemos) {
spineDemos.setupRendering = function (canvas, renderFunc) {
function render() {
renderFunc();
requestAnimationFrame(render);
};
render();
}
})(spineDemos || (spineDemos = { }));

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

@ -24,9 +24,10 @@
<div id="vinedemo-timeline" class="slider"></div>
</div>
</center>
<script src="utils.js"></script>
<script src="vine.js"></script>
<script>
vineDemo();
vineDemo("", spineDemos.setupRendering);
</script>
</body>
</html>

8
spine-ts/webgl/demos/vine.js
View File

@ -1,4 +1,4 @@
var vineDemo = function(pathPrefix) {
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);
@ -82,7 +82,7 @@ var vineDemo = function(pathPrefix) {
setupUI();
requestAnimationFrame(render);
loadingComplete(canvas, render);
} else requestAnimationFrame(load);
}
@ -164,9 +164,7 @@ var vineDemo = function(pathPrefix) {
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
}
renderer.end();
requestAnimationFrame(render);
renderer.end();
}
init();

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

@ -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.shapes, skeleton);
this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
}
drawTexture (texture: GLTexture, x: number, y: number, width: number, height: number, color: Color = null) {

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

@ -42,6 +42,7 @@ module spine.webgl {
drawMeshHull = true;
drawMeshTriangles = true;
drawPaths = true;
drawSkeletonXY = false;
premultipliedAlpha = false;
scale = 1;
boneWidth = 2;
@ -56,7 +57,7 @@ module spine.webgl {
this.gl = gl;
}
draw (shapes: ShapeRenderer, skeleton: Skeleton) {
draw (shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones: Array<string> = null) {
let skeletonX = skeleton.x;
let skeletonY = skeleton.y;
let gl = this.gl;
@ -68,12 +69,13 @@ module spine.webgl {
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.x(skeletonX, skeletonY, 4 * this.scale);
if (this.drawSkeletonXY) shapes.x(skeletonX, skeletonY, 4 * this.scale);
}
if (this.drawRegionAttachments) {
@ -183,7 +185,8 @@ module spine.webgl {
if (this.drawBones) {
shapes.setColor(this.boneOriginColor);
for (let i = 0, n = bones.length; i < n; i++) {
let bone = bones[i];
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);
}
}