UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[webgl] Refactored WebGL demos. They reuse a preallocated set of canvases to limit the number of WebGL contexts required. At most 3 canvases can be visible at a time, so we preallocate 3 canvases, then dynamically attach them to placeholder divs based on their visibility. I'm a juggalo.

Browse Source
This commit is contained in:
badlogic 2017-09-14 15:47:51 +02:00
parent ff1a81bab3
commit 4fe53ac856
26 changed files with 347 additions and 438 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
<body> <body>
<center> <center>
<div id="canvas"></div> <div class="aspect"></div>
<div id="clipping-playbutton"></div> <div id="clipping-playbutton"></div>
<div id="clipping-timeline" class="slider"></div> <div id="clipping-timeline" class="slider"></div>
<input id="clipping-drawtriangles" type="checkbox"></input> Draw triangles <input id="clipping-drawtriangles" type="checkbox"></input> Draw triangles
@ -17,9 +17,7 @@
<script> <script>
spineDemos.init(); spineDemos.init();
var canvas = spineDemos.obtainCanvas(); spineDemos.addDemo(clippingDemo, document.getElementsByClassName("aspect")[0]);
document.getElementById("canvas").appendChild(canvas);
clippingDemo(canvas, spineDemos.setupRendering);
</script> </script>
</body> </body>

59
spine-ts/webgl/demos/clipping.js
View File

@ -1,7 +1,7 @@
var clippingDemo = function(canvas, loadingComplete, bgColor) { var clippingDemo = function(canvas, bgColor) {
var gl, renderer, assetManager; var gl, renderer, assetManager;
var skeleton, state, bounds; var skeleton, state, bounds;
var timeKeeper, loadingScreen; var timeKeeper;
var playButton, timeline, isPlaying = true, playTime = 0; var playButton, timeline, isPlaying = true, playTime = 0;
var DEMO_NAME = "ClippingDemo"; var DEMO_NAME = "ClippingDemo";
@ -18,41 +18,31 @@ var clippingDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas1.atlas"); assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
} }
function load () { function loadingComplete () {
timeKeeper.update(); var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
if (assetManager.isLoadingComplete(DEMO_NAME)) { return assetManager.get(DEMO_NAME, path);
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) { });
return assetManager.get(DEMO_NAME, path); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
}); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
var skeletonJson = new spine.SkeletonJson(atlasLoader); skeleton = new spine.Skeleton(skeletonData);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
skeleton = new spine.Skeleton(skeletonData); state.setAnimation(0, "portal", true);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); state.apply(skeleton);
state.setAnimation(0, "portal", true); skeleton.updateWorldTransform();
state.apply(skeleton); var offset = new spine.Vector2();
skeleton.updateWorldTransform(); bounds = new spine.Vector2();
var offset = new spine.Vector2(); skeleton.getBounds(offset, bounds, []);
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds, []);
renderer.camera.position.x = offset.x + bounds.x + 200; renderer.camera.position.x = offset.x + bounds.x + 200;
renderer.camera.position.y = offset.y + bounds.y / 2 + 100; renderer.camera.position.y = offset.y + bounds.y / 2 + 100;
renderer.skeletonDebugRenderer.drawMeshHull = false; renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false; renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupUI(); setupUI();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
} }
function setupUI() { function setupUI() {
@ -120,9 +110,10 @@ var clippingDemo = function(canvas, loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, false, ["root"]); renderer.drawSkeletonDebug(skeleton, false, ["root"]);
renderer.end(); renderer.end();
loadingScreen.draw(true);
} }
clippingDemo.loadingComplete = loadingComplete;
clippingDemo.render = render;
clippingDemo.DEMO_NAME = DEMO_NAME;
init(); init();
}; };

5
spine-ts/webgl/demos/demos.css
View File

@ -17,6 +17,11 @@ canvas {
height: 480px; height: 480px;
} }
.aspect {
width: 640px;
height: 480px;
}
.play { .play {
background: black; background: black;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23F2F2F2%27%20d%3D%27M30.185%2C15.5L12.556%2C24.8V6.201L30.185%2C15.5z%27%2F%3E%3C%2Fsvg%3E"); background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23F2F2F2%27%20d%3D%27M30.185%2C15.5L12.556%2C24.8V6.201L30.185%2C15.5z%27%2F%3E%3C%2Fsvg%3E");

22
spine-ts/webgl/demos/demos.html
View File

@ -30,7 +30,7 @@
<div> <div>
<h2 id="Spine-versus-sprites-sheets"><a href="#Spine-versus-sprite-sheets">Spine versus sprite sheets</a></h2> <h2 id="Spine-versus-sprites-sheets"><a href="#Spine-versus-sprite-sheets">Spine versus sprite sheets</a></h2>
<div> <div>
<div><canvas id="spritesheets-canvas"></canvas></div> <div class="aspect"></div>
<div class="resize"></div> <div class="resize"></div>
<div id="spritesheets-overlay" class="overlay-hide"> <div id="spritesheets-overlay" class="overlay-hide">
<div class="overlay-label" style="width:50%"><b>Spine</b><br><span class="hide-small">All animations, all frame rates<br></span><b>0.18 MB</b></div> <div class="overlay-label" style="width:50%"><b>Spine</b><br><span class="hide-small">All animations, all frame rates<br></span><b>0.18 MB</b></div>
@ -66,7 +66,7 @@
<div> <div>
<h2 id="Spine-with-frame-based-animation"><a href="#Spine-with-frame-based-animation">Spine with frame-based animation</a></h2> <h2 id="Spine-with-frame-based-animation"><a href="#Spine-with-frame-based-animation">Spine with frame-based animation</a></h2>
<div> <div>
<div><canvas id="imagechanges-canvas"></canvas></div> <div class="aspect"></div>
<table class="timeline layout"><tr> <table class="timeline layout"><tr>
<td><div id="imagechanges-playbutton" class="pause"></div></td> <td><div id="imagechanges-playbutton" class="pause"></div></td>
<td><div class="slider" id="imagechanges-timeline"></div></td> <td><div class="slider" id="imagechanges-timeline"></div></td>
@ -93,7 +93,7 @@
<div> <div>
<h2 id="Transitions-and-layering"><a href="#Transitions-and-layering">Transitions and layering</a></h2> <h2 id="Transitions-and-layering"><a href="#Transitions-and-layering">Transitions and layering</a></h2>
<div> <div>
<div><canvas id="transitions-canvas"></canvas></div> <div class="aspect"></div>
<div id="transitions-overlay" class="overlay-hide"> <div id="transitions-overlay" class="overlay-hide">
<div class="overlay-label" style="left:25%;"><b>Smooth</b></div> <div class="overlay-label" style="left:25%;"><b>Smooth</b></div>
<div class="overlay-label" style="right:30%;"><b>Abrupt</b></div> <div class="overlay-label" style="right:30%;"><b>Abrupt</b></div>
@ -124,7 +124,7 @@
<div> <div>
<h2 id="Mesh-deformations"><a href="#Mesh-deformations">Mesh deformation</a></h2> <h2 id="Mesh-deformations"><a href="#Mesh-deformations">Mesh deformation</a></h2>
<div> <div>
<div><canvas id="meshes-canvas"></canvas></div> <div class="aspect"></div>
<table class="timeline layout"><tr> <table class="timeline layout"><tr>
<td><div id="meshes-playbutton" class="pause"></div></td> <td><div id="meshes-playbutton" class="pause"></div></td>
<td><div class="slider" id="meshes-timeline"></div></td> <td><div class="slider" id="meshes-timeline"></div></td>
@ -166,7 +166,7 @@
<div> <div>
<h2 id="Skins"><a href="#Skins">Skins</a></h2> <h2 id="Skins"><a href="#Skins">Skins</a></h2>
<div> <div>
<div><canvas id="skins-canvas"></canvas></div> <div class="aspect"></div>
<div class="resize"></div> <div class="resize"></div>
</div> </div>
<div> <div>
@ -203,7 +203,7 @@
<div> <div>
<h2 id="Inverse-kinematics"><a href="#Inverse-kinematics">Inverse kinematics</a></h2> <h2 id="Inverse-kinematics"><a href="#Inverse-kinematics">Inverse kinematics</a></h2>
<div> <div>
<div><canvas id="hoverboard-canvas"></canvas></div> <div class="aspect"></div>
<div class="resize"></div> <div class="resize"></div>
</div> </div>
<div> <div>
@ -241,7 +241,7 @@
<div> <div>
<h2 id="Path-constraints"><a href="#Path-constraints">Path constraints</a></h2> <h2 id="Path-constraints"><a href="#Path-constraints">Path constraints</a></h2>
<div> <div>
<div><canvas id="vine-canvas"></canvas></div> <div class="aspect"></div>
<table class="timeline layout"><tr> <table class="timeline layout"><tr>
<td><div id="vine-playbutton" class="pause"></div></td> <td><div id="vine-playbutton" class="pause"></div></td>
<td><div class="slider" id="vine-timeline"></div></td> <td><div class="slider" id="vine-timeline"></div></td>
@ -265,7 +265,7 @@
</div> </div>
<div> <div>
<div> <div>
<div><canvas id="stretchyman-canvas"></canvas></div> <div class="aspect"></div>
<div class="resize"></div> <div class="resize"></div>
</div> </div>
<div> <div>
@ -289,7 +289,7 @@
<div> <div>
<h2 id="Clipping"><a href="#Clipping">Clipping</a></h2> <h2 id="Clipping"><a href="#Clipping">Clipping</a></h2>
<div> <div>
<div><canvas id="clipping-canvas"></canvas></div> <div class="aspect"></div>
<table class="timeline layout"><tr> <table class="timeline layout"><tr>
<td><div id="clipping-playbutton" class="pause"></div></td> <td><div id="clipping-playbutton" class="pause"></div></td>
<td><div class="slider" id="clipping-timeline"></div></td> <td><div class="slider" id="clipping-timeline"></div></td>
@ -316,7 +316,7 @@
<div> <div>
<h2 id="Transform-constraints"><a href="#Transform-constraints">Transform constraints</a></h2> <h2 id="Transform-constraints"><a href="#Transform-constraints">Transform constraints</a></h2>
<div> <div>
<div><canvas id="tank-canvas"></canvas></div> <div class="aspect"></div>
<table class="timeline layout"><tr> <table class="timeline layout"><tr>
<td><div id="tank-playbutton" class="pause"></div></td> <td><div id="tank-playbutton" class="pause"></div></td>
<td><div class="slider" id="tank-timeline"></div></td> <td><div class="slider" id="tank-timeline"></div></td>
@ -340,7 +340,7 @@
</div> </div>
<div> <div>
<div> <div>
<div><canvas id="transforms-canvas"></canvas></div> <div class="aspect"></div>
<div class="resize"></div> <div class="resize"></div>
</div> </div>
<div> <div>

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

@ -4,8 +4,9 @@ $(function () {
alert("Error: " + message + "\n" + "URL:" + url + "\nLine: " + lineNo); alert("Error: " + message + "\n" + "URL:" + url + "\nLine: " + lineNo);
} }
spineDemos.init();
spineDemos.assetManager = new spine.SharedAssetManager("assets/"); spineDemos.assetManager = new spine.SharedAssetManager("assets/");
spineDemos.loadSliders();
var demos = [ var demos = [
spritesheetsDemo, spritesheetsDemo,
@ -20,8 +21,11 @@ $(function () {
tankDemo, tankDemo,
transformsDemo, transformsDemo,
]; ];
var placeholders = document.getElementsByClassName("aspect");
for (var i = 0; i < demos.length; i++) for (var i = 0; i < demos.length; i++)
demos[i](spineDemos.setupRendering); spineDemos.addDemo(demos[i], placeholders[i]);
function resizeSliders () { function resizeSliders () {
$(".slider").each(function () { $(".slider").each(function () {

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

@ -9,7 +9,7 @@
<body> <body>
<center> <center>
<div id="canvas"></div>> <div class="aspect"></div>
<input id="hoverboard-drawbones" type="checkbox"></input> Display Bones<br> <input id="hoverboard-drawbones" type="checkbox"></input> Display Bones<br>
<input id="hoverboard-aim" type="checkbox"></input> Aim<br> <input id="hoverboard-aim" type="checkbox"></input> Aim<br>
<button id="hoverboard-shoot">Shoot</button> <button id="hoverboard-shoot">Shoot</button>
@ -18,9 +18,7 @@
<script> <script>
spineDemos.init(); spineDemos.init();
var canvas = spineDemos.obtainCanvas(); spineDemos.addDemo(hoverboardDemo, document.getElementsByClassName("aspect")[0]);
document.getElementById("canvas").appendChild(canvas);
hoverboardDemo(canvas, spineDemos.setupRendering);
</script> </script>
</body> </body>

63
spine-ts/webgl/demos/hoverboard.js
View File

@ -1,4 +1,4 @@
var hoverboardDemo = function(canvas, loadingComplete, bgColor) { var hoverboardDemo = function(canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); 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_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_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -29,44 +29,34 @@ var hoverboardDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas); input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
} }
function load () { function loadingComplete () {
timeKeeper.update(); var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
if (assetManager.isLoadingComplete(DEMO_NAME)) { return assetManager.get(DEMO_NAME, path);
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) { });
return assetManager.get(DEMO_NAME, path); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
}); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
var skeletonJson = new spine.SkeletonJson(atlasLoader); skeleton = new spine.Skeleton(skeletonData);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
skeleton = new spine.Skeleton(skeletonData); state.setAnimation(0, "hoverboard", true);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); state.apply(skeleton);
state.setAnimation(0, "hoverboard", true); skeleton.updateWorldTransform();
state.apply(skeleton); var offset = new spine.Vector2();
skeleton.updateWorldTransform(); bounds = new spine.Vector2();
var offset = new spine.Vector2(); skeleton.getBounds(offset, bounds, []);
bounds = new spine.Vector2(); for (var i = 0; i < controlBones.length; i++)
skeleton.getBounds(offset, bounds, []); hoverTargets.push(null);
for (var i = 0; i < controlBones.length; i++)
hoverTargets.push(null);
renderer.camera.position.x = offset.x + bounds.x / 2; renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2; renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.skeletonDebugRenderer.drawMeshHull = false; renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false; renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupUI(); setupUI();
setupInput(); setupInput();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
} }
function setupUI () { function setupUI () {
@ -180,9 +170,10 @@ var hoverboardDemo = function(canvas, loadingComplete, bgColor) {
} }
renderer.end(); renderer.end();
gl.lineWidth(1); gl.lineWidth(1);
loadingScreen.draw(true);
} }
hoverboardDemo.loadingComplete = loadingComplete;
hoverboardDemo.render = render;
hoverboardDemo.DEMO_NAME = DEMO_NAME;
init(); init();
}; };

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

@ -9,7 +9,7 @@
<body> <body>
<center> <center>
<div id="canvas"></div> <div class="aspect"></div>
<div id="imagechanges-timeline" class="slider"></div> <div id="imagechanges-timeline" class="slider"></div>
<input id="imagechanges-playbutton" type="button" value="Pause"></input><br> <input id="imagechanges-playbutton" type="button" value="Pause"></input><br>
<select id="imagechanges-skeleton" size="2"></select> <select id="imagechanges-skeleton" size="2"></select>
@ -17,9 +17,7 @@
<script> <script>
spineDemos.init(); spineDemos.init();
var canvas = spineDemos.obtainCanvas(); spineDemos.addDemo(imageChangesDemo, document.getElementsByClassName("aspect")[0]);
document.getElementById("canvas").appendChild(canvas);
imageChangesDemo(canvas, spineDemos.setupRendering);
</script> </script>
</body> </body>

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

@ -1,4 +1,4 @@
var imageChangesDemo = function(canvas, loadingComplete, bgColor) { var imageChangesDemo = function(canvas, bgColor) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1); var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
@ -23,21 +23,12 @@ var imageChangesDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas1.atlas"); assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
} }
function load () { function loadingComplete () {
timeKeeper.update(); skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]);
if (assetManager.isLoadingComplete(DEMO_NAME)) { skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]); setupUI();
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
setupUI();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
} }
function setupUI() { function setupUI() {
@ -197,9 +188,10 @@ var imageChangesDemo = function(canvas, loadingComplete, bgColor) {
} }
renderer.end(); renderer.end();
loadingScreen.draw(true);
} }
imageChangesDemo.loadingComplete = loadingComplete;
imageChangesDemo.render = render;
imageChangesDemo.DEMO_NAME = DEMO_NAME;
init(); init();
}; };

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

@ -9,7 +9,7 @@
<body> <body>
<center> <center>
<div id="canvas"></div> <div class="aspect"></div>
<div id="meshes-timeline" class="slider"></div> <div id="meshes-timeline" class="slider"></div>
<input id="meshes-playbutton" type="button" value="Pause"></input><br> <input id="meshes-playbutton" type="button" value="Pause"></input><br>
<select id="meshes-skeleton" size="3"></select><br> <select id="meshes-skeleton" size="3"></select><br>
@ -19,9 +19,7 @@
<script> <script>
spineDemos.init(); spineDemos.init();
var canvas = spineDemos.obtainCanvas(); spineDemos.addDemo(meshesDemo, document.getElementsByClassName("aspect")[0]);
document.getElementById("canvas").appendChild(canvas);
meshesDemo(canvas, spineDemos.setupRendering);
</script> </script>
</body> </body>

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

@ -1,4 +1,4 @@
var meshesDemo = function(canvas, loadingComplete, bgColor) { var meshesDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, bounds; var skeleton, bounds;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen;
@ -21,22 +21,14 @@ var meshesDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas2.atlas"); assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
} }
function load () { function loadingComplete () {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) { skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation"); skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
skeletons["Green Girl"] = loadSkeleton("greengirl", "animation"); skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation");
skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation"); setupUI();
setupUI();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
} }
function setupUI() { function setupUI() {
@ -157,9 +149,10 @@ var meshesDemo = function(canvas, loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton); renderer.drawSkeletonDebug(skeleton);
renderer.end(); renderer.end();
loadingScreen.draw(true);
} }
meshesDemo.loadingComplete = loadingComplete;
meshesDemo.render = render;
meshesDemo.DEMO_NAME = DEMO_NAME;
init(); init();
}; };

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

@ -9,7 +9,7 @@
<body> <body>
<center> <center>
<div id="canvas"></div> <div class="aspect"></div>
<select id="skins-skin"></select><br> <select id="skins-skin"></select><br>
<button id="skins-randomizeattachments">Random Attachments</button> <button id="skins-randomizeattachments">Random Attachments</button>
<button id="skins-swingsword">Swing Sword</button><br> <button id="skins-swingsword">Swing Sword</button><br>
@ -18,9 +18,7 @@
<script> <script>
spineDemos.init(); spineDemos.init();
var canvas = spineDemos.obtainCanvas(); spineDemos.addDemo(skinsDemo, document.getElementsByClassName("aspect")[0]);
document.getElementById("canvas").appendChild(canvas);
skinsDemo(canvas, spineDemos.setupRendering);
</script> </script>
</body> </body>

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

@ -1,4 +1,4 @@
var skinsDemo = function(canvas, loadingComplete, bgColor) { var skinsDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds; var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen;
@ -21,39 +21,30 @@ var skinsDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas); input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
} }
function load () { function loadingComplete () {
timeKeeper.update(); var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "heroes.atlas"), function(path) {
if (assetManager.isLoadingComplete(DEMO_NAME)) { return assetManager.get(DEMO_NAME, path);
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "heroes.atlas"), function(path) { });
return assetManager.get(DEMO_NAME, path); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
}); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").heroes);
var skeletonJson = new spine.SkeletonJson(atlasLoader); skeleton = new spine.Skeleton(skeletonData);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").heroes); skeleton.setSkinByName("Assassin");
skeleton = new spine.Skeleton(skeletonData); var stateData = new spine.AnimationStateData(skeleton.data);
skeleton.setSkinByName("Assassin"); stateData.defaultMix = 0.2;
var stateData = new spine.AnimationStateData(skeleton.data); stateData.setMix("roll", "run", 0);
stateData.defaultMix = 0.2; stateData.setMix("jump", "run2", 0);
stateData.setMix("roll", "run", 0); state = new spine.AnimationState(stateData);
stateData.setMix("jump", "run2", 0); setupAnimations(state);
state = new spine.AnimationState(stateData); state.apply(skeleton);
setupAnimations(state); skeleton.updateWorldTransform();
state.apply(skeleton); offset = new spine.Vector2();
skeleton.updateWorldTransform(); bounds = new spine.Vector2();
offset = new spine.Vector2(); skeleton.getBounds(offset, bounds, []);
bounds = new spine.Vector2(); setupUI();
skeleton.getBounds(offset, bounds, []); setupInput();
setupUI();
setupInput();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
} }
function setupInput (){ function setupInput (){
@ -213,9 +204,10 @@ var skinsDemo = function(canvas, loadingComplete, bgColor) {
var height = scale * texture.getImage().height; var height = scale * texture.getImage().height;
renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height); renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height);
renderer.end(); renderer.end();
loadingScreen.draw(true);
} }
skinsDemo.loadingComplete = loadingComplete;
skinsDemo.render = render;
skinsDemo.DEMO_NAME = DEMO_NAME;
init(); init();
}; };

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

@ -9,7 +9,7 @@
<body> <body>
<center> <center>
<div id="canvas"></div> <div class="aspect"></div>
<button id="spritesheets-roar">Roar</button> <button id="spritesheets-roar">Roar</button>
<button id="spritesheets-jump">Jump</button><br> <button id="spritesheets-jump">Jump</button><br>
Time multiplier Time multiplier
@ -18,9 +18,7 @@ Time multiplier
<script> <script>
spineDemos.init(); spineDemos.init();
var canvas = spineDemos.obtainCanvas(); spineDemos.addDemo(spritesheetsDemo, document.getElementsByClassName("aspect")[0]);
document.getElementById("canvas").appendChild(canvas);
spritesheetsDemo(canvas, spineDemos.setupRendering);
</script> </script>
</body> </body>

76
spine-ts/webgl/demos/spritesheets.js
View File

@ -1,4 +1,4 @@
var spritesheetsDemo = function(canvas, loadingComplete, bgColor) { var spritesheetsDemo = function(canvas, bgColor) {
var SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8); 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 FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8);
@ -27,50 +27,41 @@ var spritesheetsDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
input = new spine.webgl.Input(canvas); input = new spine.webgl.Input(canvas);
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
} }
function load () { function loadingComplete () {
timeKeeper.update(); skeletonAtlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
if (assetManager.isLoadingComplete(DEMO_NAME)) { return assetManager.get(DEMO_NAME, path);
skeletonAtlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) { });
return assetManager.get(DEMO_NAME, path); var atlasLoader = new spine.AtlasAttachmentLoader(skeletonAtlas);
}); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var atlasLoader = new spine.AtlasAttachmentLoader(skeletonAtlas); var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").raptor);
var skeletonJson = new spine.SkeletonJson(atlasLoader); skeleton = new spine.Skeleton(skeletonData);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").raptor); var stateData = new spine.AnimationStateData(skeleton.data);
skeleton = new spine.Skeleton(skeletonData); stateData.defaultMix = 0.5;
var stateData = new spine.AnimationStateData(skeleton.data); stateData.setMix("jump", "walk", 0.3);
stateData.defaultMix = 0.5; animationState = new spine.AnimationState(stateData);
stateData.setMix("jump", "walk", 0.3); animationState.setAnimation(0, "walk", true);
animationState = new spine.AnimationState(stateData); animationState.apply(skeleton);
animationState.setAnimation(0, "walk", true); skeleton.updateWorldTransform();
animationState.apply(skeleton); offset = new spine.Vector2();
skeleton.updateWorldTransform(); bounds = new spine.Vector2();
offset = new spine.Vector2(); skeleton.getBounds(offset, bounds, []);
bounds = new spine.Vector2(); skeleton.x -= 60;
skeleton.getBounds(offset, bounds, []);
skeleton.x -= 60;
skeletonSeq = new spine.Skeleton(skeletonData); skeletonSeq = new spine.Skeleton(skeletonData);
walkAnim = skeletonSeq.data.findAnimation("walk"); walkAnim = skeletonSeq.data.findAnimation("walk");
walkAnim.apply(skeletonSeq, 0, 0, true, null, 1, true, false); walkAnim.apply(skeletonSeq, 0, 0, true, null, 1, true, false);
skeletonSeq.x += bounds.x + 150; skeletonSeq.x += bounds.x + 150;
viewportWidth = ((700 + bounds.x) - offset.x); viewportWidth = ((700 + bounds.x) - offset.x);
viewportHeight = ((0 + bounds.y) - offset.y); viewportHeight = ((0 + bounds.y) - offset.y);
resize(); resize();
setupUI(); setupUI();
setupInput(); setupInput();
$("#spritesheets-overlay").removeClass("overlay-hide"); $("#spritesheets-overlay").removeClass("overlay-hide");
$("#spritesheets-overlay").addClass("overlay"); $("#spritesheets-overlay").addClass("overlay");
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
} }
function setupUI () { function setupUI () {
@ -150,9 +141,10 @@ var spritesheetsDemo = function(canvas, loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeletonSeq, true); renderer.drawSkeleton(skeletonSeq, true);
renderer.end(); renderer.end();
loadingScreen.draw(true);
} }
spritesheetsDemo.loadingComplete = loadingComplete;
spritesheetsDemo.render = render;
spritesheetsDemo.DEMO_NAME = DEMO_NAME;
init(); init();
}; };

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

@ -9,15 +9,13 @@
<body> <body>
<center> <center>
<div id="canvas"></div> <div class="aspect"></div>
<input id="stretchyman-drawbones" type="checkbox"></input> Display bones <input id="stretchyman-drawbones" type="checkbox"></input> Display bones
</center> </center>
<script> <script>
spineDemos.init(); spineDemos.init();
var canvas = spineDemos.obtainCanvas(); spineDemos.addDemo(stretchymanDemo, document.getElementsByClassName("aspect")[0]);
document.getElementById("canvas").appendChild(canvas);
stretchymanDemo(canvas, spineDemos.setupRendering);
</script> </script>
</body> </body>

61
spine-ts/webgl/demos/stretchyman.js
View File

@ -1,4 +1,4 @@
var stretchymanDemo = function(canvas, loadingComplete, bgColor) { var stretchymanDemo = function(canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); 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_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_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -37,43 +37,33 @@ var stretchymanDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas2.atlas"); assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
} }
function load () { function loadingComplete () {
timeKeeper.update(); var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
if (assetManager.isLoadingComplete(DEMO_NAME)) { return assetManager.get(DEMO_NAME, path);
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { });
return assetManager.get(DEMO_NAME, path); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
}); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").stretchyman);
var skeletonJson = new spine.SkeletonJson(atlasLoader); skeleton = new spine.Skeleton(skeletonData);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").stretchyman); skeleton.setToSetupPose();
skeleton = new spine.Skeleton(skeletonData); skeleton.updateWorldTransform();
skeleton.setToSetupPose(); var offset = new spine.Vector2();
skeleton.updateWorldTransform(); bounds = new spine.Vector2();
var offset = new spine.Vector2(); skeleton.getBounds(offset, bounds, []);
bounds = new spine.Vector2(); for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
skeleton.getBounds(offset, bounds, []); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null); state.setAnimation(0, "idle", true);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "idle", true);
renderer.camera.position.x = offset.x + bounds.x / 2; renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2; renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.skeletonDebugRenderer.drawMeshHull = false; renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false; renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupUI(); setupUI();
setupInput(); setupInput();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
} }
function setupUI() { function setupUI() {
@ -189,9 +179,10 @@ var stretchymanDemo = function(canvas, loadingComplete, bgColor) {
} }
renderer.end(); renderer.end();
gl.lineWidth(1); gl.lineWidth(1);
loadingScreen.draw(true);
} }
stretchymanDemo.loadingComplete = loadingComplete;
stretchymanDemo.render = render;
stretchymanDemo.DEMO_NAME = DEMO_NAME;
init(); init();
}; };

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

@ -9,7 +9,7 @@
<body> <body>
<center> <center>
<div id="canvas"></div> <div class="aspect"></div>
<div id="tank-timeline" class="slider"></div> <div id="tank-timeline" class="slider"></div>
<input id="tank-playbutton" type="button" value="Pause"></input><br> <input id="tank-playbutton" type="button" value="Pause"></input><br>
<input id="tank-drawbones" type="checkbox"></input> Display bones <input id="tank-drawbones" type="checkbox"></input> Display bones
@ -17,9 +17,7 @@
<script> <script>
spineDemos.init(); spineDemos.init();
var canvas = spineDemos.obtainCanvas(); spineDemos.addDemo(tankDemo, document.getElementsByClassName("aspect")[0]);
document.getElementById("canvas").appendChild(canvas);
tankDemo(canvas, spineDemos.setupRendering);
</script> </script>
</body> </body>

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

@ -1,7 +1,7 @@
var tankDemo = function(canvas, loadingComplete, bgColor) { var tankDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds; var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen; var timeKeeper;
var playButton, timeLine, isPlaying = true, playTime = 0; var playButton, timeLine, isPlaying = true, playTime = 0;
var DEMO_NAME = "TankDemo"; var DEMO_NAME = "TankDemo";
@ -19,41 +19,32 @@ var tankDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas2.atlas"); assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
} }
function load () { function loadingComplete () {
timeKeeper.update(); var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
if (assetManager.isLoadingComplete(DEMO_NAME)) { return assetManager.get(DEMO_NAME, path);
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { });
return assetManager.get(DEMO_NAME, path); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
}); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").tank);
var skeletonJson = new spine.SkeletonJson(atlasLoader); skeleton = new spine.Skeleton(skeletonData);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").tank); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
skeleton = new spine.Skeleton(skeletonData); state.setAnimation(0, "drive", true);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); state.apply(skeleton);
state.setAnimation(0, "drive", true); skeleton.updateWorldTransform();
state.apply(skeleton); offset = new spine.Vector2();
skeleton.updateWorldTransform(); bounds = new spine.Vector2();
offset = new spine.Vector2(); offset.x = -1204.22;
bounds = new spine.Vector2(); bounds.x = 1914.52;
offset.x = -1204.22; bounds.y = 965.78;
bounds.x = 1914.52; // skeleton.getBounds(offset, bounds);
bounds.y = 965.78;
// skeleton.getBounds(offset, bounds);
renderer.skeletonDebugRenderer.drawRegionAttachments = false; renderer.skeletonDebugRenderer.drawRegionAttachments = false;
renderer.skeletonDebugRenderer.drawMeshHull = false; renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false; renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupUI(); setupUI();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
} }
function setupUI() { function setupUI() {
@ -121,9 +112,10 @@ var tankDemo = function(canvas, loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, true); renderer.drawSkeletonDebug(skeleton, true);
renderer.end(); renderer.end();
loadingScreen.draw(true);
} }
tankDemo.loadingComplete = loadingComplete;
tankDemo.render = render;
tankDemo.DEMO_NAME = DEMO_NAME;
init(); init();
}; };

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

@ -9,7 +9,7 @@
<body> <body>
<center> <center>
<div id="canvas"></div> <div class="aspect"></div>
Rotation offset Rotation offset
<div id="transforms-rotationoffset" class="slider filled"></div><br> <div id="transforms-rotationoffset" class="slider filled"></div><br>
Translation mix Translation mix
@ -18,9 +18,7 @@ Translation mix
<script> <script>
spineDemos.init(); spineDemos.init();
var canvas = spineDemos.obtainCanvas(); spineDemos.addDemo(transformsDemo, document.getElementsByClassName("aspect")[0]);
document.getElementById("canvas").appendChild(canvas);
transformsDemo(canvas, spineDemos.setupRendering);
</script> </script>
</body> </body>

67
spine-ts/webgl/demos/transforms.js
View File

@ -1,4 +1,4 @@
var transformsDemo = function(canvas, loadingComplete, bgColor) { var transformsDemo = function(canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); 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_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_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -6,7 +6,7 @@ var transformsDemo = function(canvas, loadingComplete, bgColor) {
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, state, bounds; var skeleton, state, bounds;
var timeKeeper, loadingScreen; var timeKeeper;
var rotateHandle; var rotateHandle;
var target = null; var target = null;
var hoverTargets = [null, null, null]; var hoverTargets = [null, null, null];
@ -31,45 +31,35 @@ var transformsDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas); input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
} }
function load () { function loadingComplete () {
timeKeeper.update(); var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
if (assetManager.isLoadingComplete(DEMO_NAME)) { return assetManager.get(DEMO_NAME, path);
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { });
return assetManager.get(DEMO_NAME, path); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
}); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transforms);
var skeletonJson = new spine.SkeletonJson(atlasLoader); skeleton = new spine.Skeleton(skeletonData);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transforms); skeleton.setToSetupPose();
skeleton = new spine.Skeleton(skeletonData); skeleton.updateWorldTransform();
skeleton.setToSetupPose(); var offset = new spine.Vector2();
skeleton.updateWorldTransform(); bounds = new spine.Vector2();
var offset = new spine.Vector2(); skeleton.getBounds(offset, bounds, []);
bounds = new spine.Vector2(); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
skeleton.getBounds(offset, bounds, []); skeleton.setToSetupPose();
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); skeleton.updateWorldTransform();
skeleton.setToSetupPose(); rotateHandle = skeleton.findBone("rotate-handle");
skeleton.updateWorldTransform();
rotateHandle = skeleton.findBone("rotate-handle");
renderer.camera.position.x = offset.x + bounds.x / 2; renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2; renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.skeletonDebugRenderer.drawRegionAttachments = false; renderer.skeletonDebugRenderer.drawRegionAttachments = false;
renderer.skeletonDebugRenderer.drawMeshHull = false; renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false; renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupUI(); setupUI();
setupInput(); setupInput();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
} }
function setupUI() { function setupUI() {
@ -178,9 +168,10 @@ var transformsDemo = function(canvas, loadingComplete, bgColor) {
} }
gl.lineWidth(1); gl.lineWidth(1);
renderer.end(); renderer.end();
loadingScreen.draw(true);
} }
transformsDemo.loadingComplete = loadingComplete;
transformsDemo.render = render;
transformsDemo.DEMO_NAME = DEMO_NAME;
init(); init();
}; };

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

@ -9,7 +9,7 @@
<body> <body>
<center> <center>
<div id="canvas"></div> <div class="aspect"></div>
Time multiplier Time multiplier
<div id="transitions-timeslider" class="slider filled"></div><br> <div id="transitions-timeslider" class="slider filled"></div><br>
<button id="transitions-die">Die</button> <button id="transitions-die">Die</button>
@ -17,9 +17,7 @@ Time multiplier
<script> <script>
spineDemos.init(); spineDemos.init();
var canvas = spineDemos.obtainCanvas(); spineDemos.addDemo(transitionsDemo, document.getElementsByClassName("aspect")[0]);
document.getElementById("canvas").appendChild(canvas);
transitionsDemo(canvas, spineDemos.setupRendering);
</script> </script>
</body> </body>

48
spine-ts/webgl/demos/transitions.js
View File

@ -5,7 +5,6 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
var skeleton, skeletonNoMix, state, stateNoMix, bounds; var skeleton, skeletonNoMix, state, stateNoMix, bounds;
var timeSlider, timeSliderLabel; var timeSlider, timeSliderLabel;
var timeKeeper; var timeKeeper;
var loadingScreen;
var DEMO_NAME = "TransitionsDemo"; var DEMO_NAME = "TransitionsDemo";
@ -29,34 +28,24 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
input = new spine.webgl.Input(canvas); input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
} }
function load () { function loadingComplete () {
timeKeeper.update(); skeleton = loadSkeleton("spineboy");
if (assetManager.isLoadingComplete(DEMO_NAME)) { skeletonNoMix = new spine.Skeleton(skeleton.data);
skeleton = loadSkeleton("spineboy"); state = createState(0.25);
skeletonNoMix = new spine.Skeleton(skeleton.data); state.multipleMixing = true;
state = createState(0.25); setAnimations(state, 0, 0);
state.multipleMixing = true; stateNoMix = createState(0);
setAnimations(state, 0, 0); setAnimations(stateNoMix, -0.25, 0);
stateNoMix = createState(0);
setAnimations(stateNoMix, -0.25, 0);
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
bounds = { offset: new spine.Vector2(), size: new spine.Vector2() }; bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
skeleton.getBounds(bounds.offset, bounds.size, []); skeleton.getBounds(bounds.offset, bounds.size, []);
setupInput(); setupInput();
$("#transitions-overlay").removeClass("overlay-hide"); $("#transitions-overlay").removeClass("overlay-hide");
$("#transitions-overlay").addClass("overlay"); $("#transitions-overlay").addClass("overlay");
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
} }
function setupInput() { function setupInput() {
@ -142,9 +131,10 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
skeletonNoMix.y = -100; skeletonNoMix.y = -100;
renderer.drawSkeleton(skeletonNoMix, true); renderer.drawSkeleton(skeletonNoMix, true);
renderer.end(); renderer.end();
loadingScreen.draw(true);
} }
transitionsDemo.loadingComplete = loadingComplete;
transitionsDemo.render = render;
transitionsDemo.DEMO_NAME = DEMO_NAME;
init(); init();
return render;
}; };

74
spine-ts/webgl/demos/utils.js
View File

@ -18,16 +18,36 @@ var spineDemos = {
for (var i = 0; i < demos.length; i++) { for (var i = 0; i < demos.length; i++) {
var demo = demos[i]; var demo = demos[i];
var canvas = demo.canvas; var canvas = demo.canvas;
var renderFunc = demo.renderFunc;
if (demo.visible) { if (!spineDemos.assetManager.isLoadingComplete(demo.DEMO_NAME)) {
if (spineDemos.log) console.log("Rendering " + canvas.id); if (demo.visible) {
renderFunc(); if (canvas.parentElement != demo.placeholder) {
$(canvas).detach();
demo.placeholder.appendChild(canvas);
}
demo.loadingScreen.draw();
}
} else {
if (!demo.loaded) {
demo.loadingComplete();
demo.loaded = true;
}
if (demo.visible) {
if (canvas.parentElement != demo.placeholder) {
$(canvas).detach();
demo.placeholder.appendChild(canvas);
}
if (spineDemos.log) console.log("Rendering " + canvas.id);
demo.render();
demo.loadingScreen.draw(true);
}
} }
} }
} }
function checkElementVisible(demo) { function checkElementVisible(demo) {
const rect = demo.canvas.getBoundingClientRect(); const rect = demo.placeholder.getBoundingClientRect();
const windowHeight = (window.innerHeight || document.documentElement.clientHeight); const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
const windowWidth = (window.innerWidth || document.documentElement.clientWidth); const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0); const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
@ -36,41 +56,37 @@ var spineDemos = {
demo.visible = (vertInView && horInView); demo.visible = (vertInView && horInView);
} }
spineDemos.setupRendering = function (canvas, renderFunc) { function createCanvases (numCanvases) {
var demo = {canvas: canvas, renderFunc: renderFunc, visible: false};
$(window).on('DOMContentLoaded load resize scroll', function() {
checkElementVisible(demo);
});
checkElementVisible(demo);
if (!spineDemos.loopRunning) {
loop();
spineDemos.loopRunning = true;
}
spineDemos.demos.push(demo);
};
spineDemos.init = function () {
spineDemos.createCanvases(3);
spineDemos.loadSliders();
}
spineDemos.createCanvases = function (numCanvases) {
for (var i = 0; i < numCanvases; i++) { for (var i = 0; i < numCanvases; i++) {
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
canvas.ctx = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); canvas.ctx = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
canvas.id = "canvas-" + i;
spineDemos.canvases.push(canvas); spineDemos.canvases.push(canvas);
} }
} }
spineDemos.obtainCanvas = function () { spineDemos.init = function () {
return spineDemos.canvases.splice(0, 1)[0]; createCanvases(3);
loadSliders();
requestAnimationFrame(loop);
} }
spineDemos.freeCanvas = function (canvas) { spineDemos.addDemo = function (demo, placeholder) {
canvases.push(canvas); var canvas = spineDemos.canvases[spineDemos.demos.length % spineDemos.canvases.length];
demo(canvas);
demo.placeholder = placeholder;
demo.canvas = canvas;
demo.visible = false;
var renderer = new spine.webgl.SceneRenderer(canvas, canvas.ctx.gl);
demo.loadingScreen = new spine.webgl.LoadingScreen(renderer);
$(window).on('DOMContentLoaded load resize scroll', function() {
checkElementVisible(demo);
});
checkElementVisible(demo);
spineDemos.demos.push(demo);
} }
spineDemos.loadSliders = function () { loadSliders = function () {
$(window).resize(function() { $(window).resize(function() {
$(".slider").each(function () { $(".slider").each(function () {
$(this).data("slider").resized(); $(this).data("slider").resized();

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

@ -9,7 +9,7 @@
<body> <body>
<center> <center>
<div id="canvas"></div> <div class="aspect"></div>
<div id="vine-timeline" class="slider"></div> <div id="vine-timeline" class="slider"></div>
<input id="vine-playbutton" type="button" value="Pause"></input><br> <input id="vine-playbutton" type="button" value="Pause"></input><br>
<input id="vine-drawbones" type="checkbox"></input> Display bones &amp; path <input id="vine-drawbones" type="checkbox"></input> Display bones &amp; path
@ -17,9 +17,7 @@
<script> <script>
spineDemos.init(); spineDemos.init();
var canvas = spineDemos.obtainCanvas(); spineDemos.addDemo(vineDemo, document.getElementsByClassName("aspect")[0]);
document.getElementById("canvas").appendChild(canvas);
vineDemo(canvas, spineDemos.setupRendering);
</script> </script>
</body> </body>

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

@ -1,4 +1,4 @@
var vineDemo = function(canvas, loadingComplete, bgColor) { var vineDemo = function(canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); 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_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_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -6,7 +6,7 @@ var vineDemo = function(canvas, loadingComplete, bgColor) {
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, state, bounds; var skeleton, state, bounds;
var timeKeeper, loadingScreen; var timeKeeper;
var target = null; var target = null;
var hoverTargets = [null, null, null, null, null, null]; var hoverTargets = [null, null, null, null, null, null];
var controlBones = ["base", "vine-control1", "vine-control2", "vine-control3", "vine-control4"]; var controlBones = ["base", "vine-control1", "vine-control2", "vine-control3", "vine-control4"];
@ -29,44 +29,34 @@ var vineDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas2.atlas"); assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
} }
function load () { function loadingComplete () {
timeKeeper.update(); var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
if (assetManager.isLoadingComplete(DEMO_NAME)) { return assetManager.get(DEMO_NAME, path);
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) { });
return assetManager.get(DEMO_NAME, path); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
}); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").vine);
var skeletonJson = new spine.SkeletonJson(atlasLoader); skeleton = new spine.Skeleton(skeletonData);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").vine); skeleton.setToSetupPose();
skeleton = new spine.Skeleton(skeletonData); skeleton.updateWorldTransform();
skeleton.setToSetupPose(); var offset = new spine.Vector2();
skeleton.updateWorldTransform(); bounds = new spine.Vector2();
var offset = new spine.Vector2(); skeleton.getBounds(offset, bounds, []);
bounds = new spine.Vector2(); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
skeleton.getBounds(offset, bounds, []); state.setAnimation(0, "animation", true);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); state.apply(skeleton);
state.setAnimation(0, "animation", true); skeleton.updateWorldTransform();
state.apply(skeleton);
skeleton.updateWorldTransform();
renderer.camera.position.x = offset.x + bounds.x / 2; renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2; renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.skeletonDebugRenderer.drawMeshHull = false; renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false; renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupUI(); setupUI();
setupInput(); setupInput();
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
}
} }
function setupUI() { function setupUI() {
@ -182,9 +172,10 @@ var vineDemo = function(canvas, loadingComplete, bgColor) {
} }
gl.lineWidth(1); gl.lineWidth(1);
renderer.end(); renderer.end();
loadingScreen.draw(true);
} }
vineDemo.loadingComplete = loadingComplete;
vineDemo.render = render;
vineDemo.DEMO_NAME = DEMO_NAME;
init(); init();
}; };