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

[ts] More demos

Browse Source
This commit is contained in:
badlogic 2016-08-26 16:19:31 +02:00
parent 830a2ad040
commit 4340e58518
17 changed files with 340 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1145,12 +1145,14 @@ declare module spine.webgl {
private shapesShader;
private activeRenderer;
private skeletonRenderer;
private skeletonDebugRenderer;
private QUAD;
private QUAD_TRIANGLES;
private WHITE;
constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
begin(): void;
drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean): 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;

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

@ -5610,6 +5610,7 @@ var spine;
this.shapesShader = webgl.Shader.newColored(gl);
this.shapes = new webgl.ShapeRenderer(gl);
this.skeletonRenderer = new webgl.SkeletonRenderer(gl);
this.skeletonDebugRenderer = new webgl.SkeletonDebugRenderer(gl);
}
SceneRenderer.prototype.begin = function () {
this.camera.update();
@ -5621,6 +5622,12 @@ var spine;
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton);
};
SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha) {
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapesShader, skeleton);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.batcher);
@ -5802,6 +5809,7 @@ var spine;
this.batcherShader.dispose();
this.shapes.dispose();
this.shapesShader.dispose();
this.skeletonDebugRenderer.dispose();
};
return SceneRenderer;
}());

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

File diff suppressed because one or more lines are too long

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

@ -1075,12 +1075,14 @@ declare module spine.webgl {
private shapesShader;
private activeRenderer;
private skeletonRenderer;
private skeletonDebugRenderer;
private QUAD;
private QUAD_TRIANGLES;
private WHITE;
constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
begin(): void;
drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean): 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;

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

@ -5187,6 +5187,7 @@ var spine;
this.shapesShader = webgl.Shader.newColored(gl);
this.shapes = new webgl.ShapeRenderer(gl);
this.skeletonRenderer = new webgl.SkeletonRenderer(gl);
this.skeletonDebugRenderer = new webgl.SkeletonDebugRenderer(gl);
}
SceneRenderer.prototype.begin = function () {
this.camera.update();
@ -5198,6 +5199,12 @@ var spine;
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton);
};
SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha) {
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapesShader, skeleton);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.batcher);
@ -5379,6 +5386,7 @@ var spine;
this.batcherShader.dispose();
this.shapes.dispose();
this.shapesShader.dispose();
this.skeletonDebugRenderer.dispose();
};
return SceneRenderer;
}());

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

File diff suppressed because one or more lines are too long

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

@ -1075,12 +1075,14 @@ declare module spine.webgl {
private shapesShader;
private activeRenderer;
private skeletonRenderer;
private skeletonDebugRenderer;
private QUAD;
private QUAD_TRIANGLES;
private WHITE;
constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
begin(): void;
drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean): 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;

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

@ -5187,6 +5187,7 @@ var spine;
this.shapesShader = webgl.Shader.newColored(gl);
this.shapes = new webgl.ShapeRenderer(gl);
this.skeletonRenderer = new webgl.SkeletonRenderer(gl);
this.skeletonDebugRenderer = new webgl.SkeletonDebugRenderer(gl);
}
SceneRenderer.prototype.begin = function () {
this.camera.update();
@ -5198,6 +5199,12 @@ var spine;
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton);
};
SceneRenderer.prototype.drawSkeletonDebug = function (skeleton, premultipliedAlpha) {
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapesShader, skeleton);
};
SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
if (color === void 0) { color = null; }
this.enableRenderer(this.batcher);
@ -5379,6 +5386,7 @@ var spine;
this.batcherShader.dispose();
this.shapes.dispose();
this.shapesShader.dispose();
this.skeletonDebugRenderer.dispose();
};
return SceneRenderer;
}());

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

File diff suppressed because one or more lines are too long

14
spine-ts/webgl/demos/animationmixing.html
View File

@ -1,16 +1,22 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
</style>
<body>
<canvas id="mixingdemo-canvas"></canvas>
<center><div id="info" style="color: #f00; position: fixed; top: 0; width: 100%"></div></center>
<script src="mixing.js"></script>
<canvas id="animationmixingdemo-canvas"></canvas>
<center>
<div style="color: #fff; position: fixed; top: 0; width: 100%">
<span style="color: #fff">Time Multiplier</span>
<input type="range" min="0" max="200" value ="50" id="animationmixingdemo-timeslider" style="color: #fff;"></input></br>
</div>
</center>
<script src="animationmixing.js"></script>
<script>
ikConstraintDemo();
animationMixingDemo();
</script>
</body>
</html>

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

@ -1,94 +1,122 @@
var ikConstraintDemo = 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 animationMixingDemo = function(pathPrefix) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager;
var skeleton, bounds;
var lastFrameTime = Date.now() / 1000;
var target = null;
var boneName = "hip";
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
var skeleton, skeletonNoMix, state, stateNoMix, bounds;
var timeSlider;
var lastFrameTime = Date.now() / 1000
function init () {
canvas = document.getElementById("mixingdemo-canvas");
function init () {
timeSlider = document.getElementById("animationmixingdemo-timeslider");
canvas = document.getElementById("animationmixingdemo-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 = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager.loadTexture("assets/spineboy.png");
assetManager.loadText("assets/spineboy.json");
assetManager.loadText("assets/spineboy.atlas");
requestAnimationFrame(load);
input = new spine.webgl.Input(canvas);
input.addListener({
down: function(x, y) {
var bone = skeleton.findBone(boneName);
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;
}
down: function(x, y) {
state.setAnimation(1, "shoot", false);
stateNoMix.setAnimation(1, "shoot", false);
},
up: function(x, y) {
target = null;
},
moved: 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;
}
}
}
})
assetManager.loadTexture("assets/spineboy.png");
assetManager.loadText("assets/spineboy-mesh.json");
assetManager.loadText("assets/spineboy.atlas");
requestAnimationFrame(load);
}
up: function(x, y) { },
moved: function(x, y) { }
});
}
function load () {
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("assets/spineboy.atlas"), function(path) {
return assetManager.get("assets/" + path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/spineboy-mesh.json"));
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton = loadSkeleton("spineboy");
skeletonNoMix = new spine.Skeleton(skeleton.data);
state = createState(0.2);
setAnimations(state, 0);
stateNoMix = createState(0.0);
setAnimations(stateNoMix, -0.2);
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;
requestAnimationFrame(render);
bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
skeleton.getBounds(bounds.offset, bounds.size);
requestAnimationFrame(render);
} else requestAnimationFrame(load);
}
function createState(mix) {
var stateData = new spine.AnimationStateData(skeleton.data);
stateData.setMix("walk", "jump", mix);
stateData.setMix("jump", "walk", mix);
stateData.setMix("walk", "idle", mix);
stateData.setMix("idle", "walk", mix);
var state = new spine.AnimationState(stateData);
return state;
}
function setAnimations(state, delay) {
state.addAnimation(0, "idle", false, delay);
state.addAnimation(0, "walk", false, delay);
state.addAnimation(0, "idle", false, delay);
state.addAnimation(0, "walk", false, delay);
state.addAnimation(0, "walk", false, 0);
state.addAnimation(0, "jump", false, delay);
state.addAnimation(0, "walk", false, delay).listener = {
event: function (trackIndex, event) {},
complete: function (trackIndex, loopCount) {},
start: function (trackIndex) {
setAnimations(state, delay);
},
end: function (trackIndex) {}
};
}
function loadSkeleton(name) {
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");
return skeleton;
}
function render () {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
if (delta > 0.032) delta = 0.032;
delta *= (timeSlider.value / 100);
renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2;
var offset = bounds.offset;
var size = bounds.size;
renderer.camera.position.x = offset.x + size.x - 50;
renderer.camera.position.y = offset.y + size.y / 2;
renderer.camera.viewportWidth = size.x * 2.4;
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);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
renderer.begin();
skeleton.x = 0;
renderer.drawSkeleton(skeleton);
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);
stateNoMix.update(delta);
stateNoMix.apply(skeletonNoMix);
skeletonNoMix.updateWorldTransform();
skeletonNoMix.x = size.x;
renderer.drawSkeleton(skeletonNoMix);
renderer.end();
requestAnimationFrame(render);

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

@ -75,6 +75,7 @@ var ikConstraintDemo = function(pathPrefix) {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
if (delta > 0.032) delta = 0.032;
renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2;

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

@ -36,15 +36,20 @@ var imageSequencesDemo = function(pathPrefix) {
function setupUI() {
playButton = $("#imagesequencesdemo-playbutton");
playButtonUpdate = function () {
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying) playButton.val("Pause");
else playButton.val("Play");
if (isPlaying) {
playButton.val("Pause");
playButton.addClass("pause").removeClass("play");
} else {
playButton.val("Play");
playButton.addClass("play").removeClass("pause");
}
}
playButton.click(playButtonUpdate);
timeLine = $("#imagesequencesdemo-timeline");
timeLineUpdate = function () {
var timeLineUpdate = function () {
if (!isPlaying) {
var active = skeletons[activeSkeleton];
var time = timeLine.val() / 100;
@ -55,10 +60,11 @@ var imageSequencesDemo = function(pathPrefix) {
active.skeleton.updateWorldTransform();
active.playTime = time;
}
}
timeLine.change(timeLineUpdate);
timeLine.on("input", timeLineUpdate);
timeLine.click(function () { if (isPlaying) playButton.click();});
}
timeLine.on("input change", function () {
if (isPlaying) playButton.click();
timeLineUpdate();
});
var list = $("#imagesequencesdemo-active-skeleton");
for (var skeletonName in skeletons) {
@ -119,8 +125,8 @@ var imageSequencesDemo = function(pathPrefix) {
function render () {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
delta *= 0.5;
lastFrameTime = now;
if (delta > 0.032) delta = 0.032;
var active = skeletons[activeSkeleton];
var skeleton = active.skeleton;

31
spine-ts/webgl/demos/meshes.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>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
</style>
<body>
<canvas id="meshesdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<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-drawmeshtrianglescheckbox" style="color: #fff;" checked="true"></input>
<br>
<input id="meshesdemo-playbutton" type="button" value="Pause"></input>
<input id="meshesdemo-timeline" type="range" min="0" max="100" value ="0" style="color: #fff; width: 50%"></input>
</div>
</center>
<script src="meshes.js"></script>
<script>
meshesDemo();
</script>
</body>
</html>

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

@ -0,0 +1,130 @@
var meshesDemo = function(pathPrefix) {
var CIRCLE_INNER_COLOR = new spine.Color(0.8, 0, 0, 0.5);
var CIRCLE_OUTER_COLOR = new spine.Color(0.8, 0, 0, 0.8);
var canvas, gl, renderer, input, assetManager;
var skeleton, state, bounds;
var lastFrameTime = Date.now() / 1000;
var playButton, timeLine, isPlaying = true, playTime = 0;
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);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager.loadTexture("assets/raptor.png");
assetManager.loadText("assets/raptor.json");
assetManager.loadText("assets/raptor.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;
setupUI();
requestAnimationFrame(render);
} else requestAnimationFrame(load);
}
function setupUI() {
playButton = $("#meshesdemo-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 = $("#meshesdemo-timeline");
var timeLineUpdate = function () {
if (!isPlaying) {
var time = timeLine.val() / 100;
var animationDuration = state.getCurrent(0).animation.duration;
time = animationDuration * time;
state.update(time - playTime);
state.apply(skeleton);
skeleton.updateWorldTransform();
playTime = time;
}
}
timeLine.on("input change", function () {
if (isPlaying) playButton.click();
timeLineUpdate();
});
$("#meshesdemo-drawbonescheckbox").change(function() {
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
$("#meshesdemo-drawregionscheckbox").change(function() {
renderer.skeletonDebugRenderer.drawRegionAttachments = this.checked;
});
$("#meshesdemo-drawmeshhullcheckbox").change(function() {
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
});
$("#meshesdemo-drawmeshtrianglescheckbox").change(function() {
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
});
}
function render () {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
if (delta > 0.032) delta = 0.032;
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);
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
playTime += delta;
while (playTime >= animationDuration) {
playTime -= animationDuration;
}
timeLine.val(playTime / animationDuration * 100);
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
}
renderer.begin();
renderer.drawSkeleton(skeleton);
renderer.drawSkeletonDebug(skeleton);
renderer.end();
requestAnimationFrame(render);
}
init();
};

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

@ -68,15 +68,20 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
function setupUI() {
playButton = $("#skeletonvsspritedemo-playbutton");
playButtonUpdate = function () {
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying) playButton.val("Pause");
else playButton.val("Play");
if (isPlaying) {
playButton.val("Pause");
playButton.addClass("pause").removeClass("play");
} else {
playButton.val("Play");
playButton.addClass("play").removeClass("pause");
}
}
playButton.click(playButtonUpdate);
timeLine = $("#skeletonvsspritedemo-timeline");
timeLineUpdate = function () {
var timeLineUpdate = function () {
if (!isPlaying) {
var time = timeLine.val() / 100;
var animationDuration = animationState.getCurrent(0).animation.duration;
@ -89,10 +94,11 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
while (frameTime > animationDuration) frameTime -= animationDuration;
currFrame = Math.min(frames.length - 1, (frameTime / (1 / FPS)) | 0);
}
}
timeLine.change(timeLineUpdate);
timeLine.on("input", timeLineUpdate);
timeLine.click(function () { if (isPlaying) playButton.click();});
}
timeLine.on("input change", function () {
if (isPlaying) playButton.click();
timeLineUpdate();
});
}
function render () {
@ -144,17 +150,20 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
// 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;
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);
}

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

@ -40,6 +40,7 @@ module spine.webgl {
private shapesShader: Shader;
private activeRenderer: PolygonBatcher | ShapeRenderer = null;
private skeletonRenderer: SkeletonRenderer;
private skeletonDebugRenderer: SkeletonDebugRenderer;
private QUAD = [
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
@ -58,6 +59,7 @@ module spine.webgl {
this.shapesShader = Shader.newColored(gl);
this.shapes = new ShapeRenderer(gl);
this.skeletonRenderer = new SkeletonRenderer(gl);
this.skeletonDebugRenderer = new SkeletonDebugRenderer(gl);
}
begin () {
@ -71,6 +73,12 @@ module spine.webgl {
this.skeletonRenderer.draw(this.batcher, skeleton);
}
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha = false) {
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapesShader, skeleton);
}
drawTexture (texture: GLTexture, x: number, y: number, width: number, height: number, color: Color = null) {
this.enableRenderer(this.batcher);
if (color === null) color = this.WHITE;
@ -241,7 +249,8 @@ module spine.webgl {
this.batcher.dispose();
this.batcherShader.dispose();
this.shapes.dispose();
this.shapesShader.dispose();
this.shapesShader.dispose();
this.skeletonDebugRenderer.dispose();
}
}