diff --git a/spine-ts/webgl/demos/demos.js b/spine-ts/webgl/demos/demos.js
index 0dc753f47..97acf91ce 100644
--- a/spine-ts/webgl/demos/demos.js
+++ b/spine-ts/webgl/demos/demos.js
@@ -4,8 +4,9 @@ $(function () {
alert("Error: " + message + "\n" + "URL:" + url + "\nLine: " + lineNo);
}
+
+ spineDemos.init();
spineDemos.assetManager = new spine.SharedAssetManager("assets/");
- spineDemos.loadSliders();
var demos = [
spritesheetsDemo,
@@ -20,8 +21,11 @@ $(function () {
tankDemo,
transformsDemo,
];
+
+ var placeholders = document.getElementsByClassName("aspect");
+
for (var i = 0; i < demos.length; i++)
- demos[i](spineDemos.setupRendering);
+ spineDemos.addDemo(demos[i], placeholders[i]);
function resizeSliders () {
$(".slider").each(function () {
diff --git a/spine-ts/webgl/demos/hoverboard.html b/spine-ts/webgl/demos/hoverboard.html
index 6f8184ef1..8448c24ca 100644
--- a/spine-ts/webgl/demos/hoverboard.html
+++ b/spine-ts/webgl/demos/hoverboard.html
@@ -9,7 +9,7 @@
->
+
Display Bones
Aim
@@ -18,9 +18,7 @@
diff --git a/spine-ts/webgl/demos/hoverboard.js b/spine-ts/webgl/demos/hoverboard.js
index 56656c17a..8c54d5f5a 100644
--- a/spine-ts/webgl/demos/hoverboard.js
+++ b/spine-ts/webgl/demos/hoverboard.js
@@ -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_OUTER = new spine.Color(0.8, 0, 0, 0.8);
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");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
- loadingScreen = new spine.webgl.LoadingScreen(renderer);
- requestAnimationFrame(load);
}
- function load () {
- timeKeeper.update();
- if (assetManager.isLoadingComplete(DEMO_NAME)) {
- 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
- skeleton = new spine.Skeleton(skeletonData);
- state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
- state.setAnimation(0, "hoverboard", true);
- state.apply(skeleton);
- skeleton.updateWorldTransform();
- var offset = new spine.Vector2();
- bounds = new spine.Vector2();
- skeleton.getBounds(offset, bounds, []);
- for (var i = 0; i < controlBones.length; i++)
- hoverTargets.push(null);
+ function loadingComplete () {
+ 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
+ skeleton = new spine.Skeleton(skeletonData);
+ state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
+ state.setAnimation(0, "hoverboard", true);
+ state.apply(skeleton);
+ skeleton.updateWorldTransform();
+ var offset = new spine.Vector2();
+ bounds = new spine.Vector2();
+ skeleton.getBounds(offset, bounds, []);
+ for (var i = 0; i < controlBones.length; i++)
+ hoverTargets.push(null);
- renderer.camera.position.x = offset.x + bounds.x / 2;
- renderer.camera.position.y = offset.y + bounds.y / 2;
+ renderer.camera.position.x = offset.x + bounds.x / 2;
+ renderer.camera.position.y = offset.y + bounds.y / 2;
- renderer.skeletonDebugRenderer.drawMeshHull = false;
- renderer.skeletonDebugRenderer.drawMeshTriangles = false;
+ renderer.skeletonDebugRenderer.drawMeshHull = false;
+ renderer.skeletonDebugRenderer.drawMeshTriangles = false;
- setupUI();
- setupInput();
-
- loadingComplete(canvas, render);
- } else {
- loadingScreen.draw();
- requestAnimationFrame(load);
- }
+ setupUI();
+ setupInput();
}
function setupUI () {
@@ -180,9 +170,10 @@ var hoverboardDemo = function(canvas, loadingComplete, bgColor) {
}
renderer.end();
gl.lineWidth(1);
-
- loadingScreen.draw(true);
}
+ hoverboardDemo.loadingComplete = loadingComplete;
+ hoverboardDemo.render = render;
+ hoverboardDemo.DEMO_NAME = DEMO_NAME;
init();
};
\ No newline at end of file
diff --git a/spine-ts/webgl/demos/imagechanges.html b/spine-ts/webgl/demos/imagechanges.html
index f2d3cfc4a..dfb86255f 100644
--- a/spine-ts/webgl/demos/imagechanges.html
+++ b/spine-ts/webgl/demos/imagechanges.html
@@ -9,7 +9,7 @@
-
+
@@ -17,9 +17,7 @@
diff --git a/spine-ts/webgl/demos/imagechanges.js b/spine-ts/webgl/demos/imagechanges.js
index 0bb11cc76..e918027f4 100644
--- a/spine-ts/webgl/demos/imagechanges.js
+++ b/spine-ts/webgl/demos/imagechanges.js
@@ -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 canvas, gl, renderer, input, assetManager;
@@ -23,21 +23,12 @@ var imageChangesDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
- loadingScreen = new spine.webgl.LoadingScreen(renderer);
- requestAnimationFrame(load);
}
- function load () {
- timeKeeper.update();
- if (assetManager.isLoadingComplete(DEMO_NAME)) {
- skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]);
- skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
- setupUI();
- loadingComplete(canvas, render);
- } else {
- loadingScreen.draw();
- requestAnimationFrame(load);
- }
+ function loadingComplete () {
+ skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]);
+ skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
+ setupUI();
}
function setupUI() {
@@ -197,9 +188,10 @@ var imageChangesDemo = function(canvas, loadingComplete, bgColor) {
}
renderer.end();
-
- loadingScreen.draw(true);
}
+ imageChangesDemo.loadingComplete = loadingComplete;
+ imageChangesDemo.render = render;
+ imageChangesDemo.DEMO_NAME = DEMO_NAME;
init();
};
\ No newline at end of file
diff --git a/spine-ts/webgl/demos/meshes.html b/spine-ts/webgl/demos/meshes.html
index 026360e52..82b1b83d0 100644
--- a/spine-ts/webgl/demos/meshes.html
+++ b/spine-ts/webgl/demos/meshes.html
@@ -9,7 +9,7 @@
-
+
@@ -19,9 +19,7 @@
diff --git a/spine-ts/webgl/demos/meshes.js b/spine-ts/webgl/demos/meshes.js
index 36f6a09ad..eaecb5c1e 100644
--- a/spine-ts/webgl/demos/meshes.js
+++ b/spine-ts/webgl/demos/meshes.js
@@ -1,4 +1,4 @@
-var meshesDemo = function(canvas, loadingComplete, bgColor) {
+var meshesDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, bounds;
var timeKeeper, loadingScreen;
@@ -21,22 +21,14 @@ var meshesDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
- loadingScreen = new spine.webgl.LoadingScreen(renderer);
- requestAnimationFrame(load);
}
- function load () {
+ function loadingComplete () {
timeKeeper.update();
- if (assetManager.isLoadingComplete(DEMO_NAME)) {
- skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
- skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
- skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation");
- setupUI();
- loadingComplete(canvas, render);
- } else {
- loadingScreen.draw();
- requestAnimationFrame(load);
- }
+ skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
+ skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
+ skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation");
+ setupUI();
}
function setupUI() {
@@ -157,9 +149,10 @@ var meshesDemo = function(canvas, loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton);
renderer.end();
-
- loadingScreen.draw(true);
}
+ meshesDemo.loadingComplete = loadingComplete;
+ meshesDemo.render = render;
+ meshesDemo.DEMO_NAME = DEMO_NAME;
init();
};
\ No newline at end of file
diff --git a/spine-ts/webgl/demos/skins.html b/spine-ts/webgl/demos/skins.html
index 0c9b8ea28..ba37b70c9 100644
--- a/spine-ts/webgl/demos/skins.html
+++ b/spine-ts/webgl/demos/skins.html
@@ -9,7 +9,7 @@
-
+
@@ -18,9 +18,7 @@
diff --git a/spine-ts/webgl/demos/skins.js b/spine-ts/webgl/demos/skins.js
index a473f9383..d41a45282 100644
--- a/spine-ts/webgl/demos/skins.js
+++ b/spine-ts/webgl/demos/skins.js
@@ -1,4 +1,4 @@
-var skinsDemo = function(canvas, loadingComplete, bgColor) {
+var skinsDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen;
@@ -21,39 +21,30 @@ var skinsDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
- loadingScreen = new spine.webgl.LoadingScreen(renderer);
- requestAnimationFrame(load);
}
- function load () {
- timeKeeper.update();
- if (assetManager.isLoadingComplete(DEMO_NAME)) {
- 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").heroes);
- skeleton = new spine.Skeleton(skeletonData);
- skeleton.setSkinByName("Assassin");
- var stateData = new spine.AnimationStateData(skeleton.data);
- stateData.defaultMix = 0.2;
- stateData.setMix("roll", "run", 0);
- stateData.setMix("jump", "run2", 0);
- state = new spine.AnimationState(stateData);
- setupAnimations(state);
- state.apply(skeleton);
- skeleton.updateWorldTransform();
- offset = new spine.Vector2();
- bounds = new spine.Vector2();
- skeleton.getBounds(offset, bounds, []);
- setupUI();
- setupInput();
- loadingComplete(canvas, render);
- } else {
- loadingScreen.draw();
- requestAnimationFrame(load);
- }
+ function loadingComplete () {
+ 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").heroes);
+ skeleton = new spine.Skeleton(skeletonData);
+ skeleton.setSkinByName("Assassin");
+ var stateData = new spine.AnimationStateData(skeleton.data);
+ stateData.defaultMix = 0.2;
+ stateData.setMix("roll", "run", 0);
+ stateData.setMix("jump", "run2", 0);
+ state = new spine.AnimationState(stateData);
+ setupAnimations(state);
+ state.apply(skeleton);
+ skeleton.updateWorldTransform();
+ offset = new spine.Vector2();
+ bounds = new spine.Vector2();
+ skeleton.getBounds(offset, bounds, []);
+ setupUI();
+ setupInput();
}
function setupInput (){
@@ -213,9 +204,10 @@ var skinsDemo = function(canvas, loadingComplete, bgColor) {
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.end();
-
- loadingScreen.draw(true);
}
+ skinsDemo.loadingComplete = loadingComplete;
+ skinsDemo.render = render;
+ skinsDemo.DEMO_NAME = DEMO_NAME;
init();
};
\ No newline at end of file
diff --git a/spine-ts/webgl/demos/spritesheets.html b/spine-ts/webgl/demos/spritesheets.html
index d936c13ea..79ea89b82 100644
--- a/spine-ts/webgl/demos/spritesheets.html
+++ b/spine-ts/webgl/demos/spritesheets.html
@@ -9,7 +9,7 @@
-
+
Time multiplier
@@ -18,9 +18,7 @@ Time multiplier
diff --git a/spine-ts/webgl/demos/spritesheets.js b/spine-ts/webgl/demos/spritesheets.js
index 4d21705ee..7e8e416fc 100644
--- a/spine-ts/webgl/demos/spritesheets.js
+++ b/spine-ts/webgl/demos/spritesheets.js
@@ -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 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");
timeKeeper = new spine.TimeKeeper();
input = new spine.webgl.Input(canvas);
- loadingScreen = new spine.webgl.LoadingScreen(renderer);
- requestAnimationFrame(load);
}
- function load () {
- timeKeeper.update();
- if (assetManager.isLoadingComplete(DEMO_NAME)) {
- 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").raptor);
- skeleton = new spine.Skeleton(skeletonData);
- var stateData = new spine.AnimationStateData(skeleton.data);
- stateData.defaultMix = 0.5;
- stateData.setMix("jump", "walk", 0.3);
- animationState = new spine.AnimationState(stateData);
- animationState.setAnimation(0, "walk", true);
- animationState.apply(skeleton);
- skeleton.updateWorldTransform();
- offset = new spine.Vector2();
- bounds = new spine.Vector2();
- skeleton.getBounds(offset, bounds, []);
- skeleton.x -= 60;
+ function loadingComplete () {
+ 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").raptor);
+ skeleton = new spine.Skeleton(skeletonData);
+ var stateData = new spine.AnimationStateData(skeleton.data);
+ stateData.defaultMix = 0.5;
+ stateData.setMix("jump", "walk", 0.3);
+ animationState = new spine.AnimationState(stateData);
+ animationState.setAnimation(0, "walk", true);
+ animationState.apply(skeleton);
+ skeleton.updateWorldTransform();
+ offset = new spine.Vector2();
+ bounds = new spine.Vector2();
+ skeleton.getBounds(offset, bounds, []);
+ skeleton.x -= 60;
- skeletonSeq = new spine.Skeleton(skeletonData);
- walkAnim = skeletonSeq.data.findAnimation("walk");
- walkAnim.apply(skeletonSeq, 0, 0, true, null, 1, true, false);
- skeletonSeq.x += bounds.x + 150;
+ skeletonSeq = new spine.Skeleton(skeletonData);
+ walkAnim = skeletonSeq.data.findAnimation("walk");
+ walkAnim.apply(skeletonSeq, 0, 0, true, null, 1, true, false);
+ skeletonSeq.x += bounds.x + 150;
- viewportWidth = ((700 + bounds.x) - offset.x);
- viewportHeight = ((0 + bounds.y) - offset.y);
- resize();
- setupUI();
- setupInput();
+ viewportWidth = ((700 + bounds.x) - offset.x);
+ viewportHeight = ((0 + bounds.y) - offset.y);
+ resize();
+ setupUI();
+ setupInput();
- $("#spritesheets-overlay").removeClass("overlay-hide");
- $("#spritesheets-overlay").addClass("overlay");
- loadingComplete(canvas, render);
- } else {
- loadingScreen.draw();
- requestAnimationFrame(load);
- }
+ $("#spritesheets-overlay").removeClass("overlay-hide");
+ $("#spritesheets-overlay").addClass("overlay");
}
function setupUI () {
@@ -150,9 +141,10 @@ var spritesheetsDemo = function(canvas, loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeletonSeq, true);
renderer.end();
-
- loadingScreen.draw(true);
}
+ spritesheetsDemo.loadingComplete = loadingComplete;
+ spritesheetsDemo.render = render;
+ spritesheetsDemo.DEMO_NAME = DEMO_NAME;
init();
};
\ No newline at end of file
diff --git a/spine-ts/webgl/demos/stretchyman.html b/spine-ts/webgl/demos/stretchyman.html
index 8f9ef9030..9b5dcbffc 100644
--- a/spine-ts/webgl/demos/stretchyman.html
+++ b/spine-ts/webgl/demos/stretchyman.html
@@ -9,15 +9,13 @@
-
+
Display bones
diff --git a/spine-ts/webgl/demos/stretchyman.js b/spine-ts/webgl/demos/stretchyman.js
index 8bbe6cc34..459d6ff29 100644
--- a/spine-ts/webgl/demos/stretchyman.js
+++ b/spine-ts/webgl/demos/stretchyman.js
@@ -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_OUTER = new spine.Color(0.8, 0, 0, 0.8);
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.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
- loadingScreen = new spine.webgl.LoadingScreen(renderer);
- requestAnimationFrame(load);
}
- function load () {
- timeKeeper.update();
- if (assetManager.isLoadingComplete(DEMO_NAME)) {
- 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").stretchyman);
- skeleton = new spine.Skeleton(skeletonData);
- skeleton.setToSetupPose();
- skeleton.updateWorldTransform();
- var offset = new spine.Vector2();
- bounds = new spine.Vector2();
- skeleton.getBounds(offset, bounds, []);
- for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
- state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
- state.setAnimation(0, "idle", true);
+ function loadingComplete () {
+ 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").stretchyman);
+ skeleton = new spine.Skeleton(skeletonData);
+ skeleton.setToSetupPose();
+ skeleton.updateWorldTransform();
+ var offset = new spine.Vector2();
+ bounds = new spine.Vector2();
+ skeleton.getBounds(offset, bounds, []);
+ for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
+ 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.y = offset.y + bounds.y / 2;
+ renderer.camera.position.x = offset.x + bounds.x / 2;
+ renderer.camera.position.y = offset.y + bounds.y / 2;
- renderer.skeletonDebugRenderer.drawMeshHull = false;
- renderer.skeletonDebugRenderer.drawMeshTriangles = false;
+ renderer.skeletonDebugRenderer.drawMeshHull = false;
+ renderer.skeletonDebugRenderer.drawMeshTriangles = false;
- setupUI();
- setupInput();
-
- loadingComplete(canvas, render);
- } else {
- loadingScreen.draw();
- requestAnimationFrame(load);
- }
+ setupUI();
+ setupInput();
}
function setupUI() {
@@ -189,9 +179,10 @@ var stretchymanDemo = function(canvas, loadingComplete, bgColor) {
}
renderer.end();
gl.lineWidth(1);
-
- loadingScreen.draw(true);
}
+ stretchymanDemo.loadingComplete = loadingComplete;
+ stretchymanDemo.render = render;
+ stretchymanDemo.DEMO_NAME = DEMO_NAME;
init();
};
\ No newline at end of file
diff --git a/spine-ts/webgl/demos/tank.html b/spine-ts/webgl/demos/tank.html
index 02868ec7a..0c6c7d054 100644
--- a/spine-ts/webgl/demos/tank.html
+++ b/spine-ts/webgl/demos/tank.html
@@ -9,7 +9,7 @@
-
+
Display bones
@@ -17,9 +17,7 @@
diff --git a/spine-ts/webgl/demos/tank.js b/spine-ts/webgl/demos/tank.js
index e57822c46..86918d4a0 100644
--- a/spine-ts/webgl/demos/tank.js
+++ b/spine-ts/webgl/demos/tank.js
@@ -1,7 +1,7 @@
-var tankDemo = function(canvas, loadingComplete, bgColor) {
+var tankDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds;
- var timeKeeper, loadingScreen;
+ var timeKeeper;
var playButton, timeLine, isPlaying = true, playTime = 0;
var DEMO_NAME = "TankDemo";
@@ -19,41 +19,32 @@ var tankDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
- loadingScreen = new spine.webgl.LoadingScreen(renderer);
- requestAnimationFrame(load);
}
- function load () {
- timeKeeper.update();
- if (assetManager.isLoadingComplete(DEMO_NAME)) {
- 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").tank);
- skeleton = new spine.Skeleton(skeletonData);
- state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
- state.setAnimation(0, "drive", true);
- state.apply(skeleton);
- skeleton.updateWorldTransform();
- offset = new spine.Vector2();
- bounds = new spine.Vector2();
- offset.x = -1204.22;
- bounds.x = 1914.52;
- bounds.y = 965.78;
- // skeleton.getBounds(offset, bounds);
+ function loadingComplete () {
+ 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").tank);
+ skeleton = new spine.Skeleton(skeletonData);
+ state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
+ state.setAnimation(0, "drive", true);
+ state.apply(skeleton);
+ skeleton.updateWorldTransform();
+ offset = new spine.Vector2();
+ bounds = new spine.Vector2();
+ offset.x = -1204.22;
+ bounds.x = 1914.52;
+ bounds.y = 965.78;
+ // skeleton.getBounds(offset, bounds);
- renderer.skeletonDebugRenderer.drawRegionAttachments = false;
- renderer.skeletonDebugRenderer.drawMeshHull = false;
- renderer.skeletonDebugRenderer.drawMeshTriangles = false;
+ renderer.skeletonDebugRenderer.drawRegionAttachments = false;
+ renderer.skeletonDebugRenderer.drawMeshHull = false;
+ renderer.skeletonDebugRenderer.drawMeshTriangles = false;
- setupUI();
- loadingComplete(canvas, render);
- } else {
- loadingScreen.draw();
- requestAnimationFrame(load);
- }
+ setupUI();
}
function setupUI() {
@@ -121,9 +112,10 @@ var tankDemo = function(canvas, loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, true);
renderer.end();
-
- loadingScreen.draw(true);
}
+ tankDemo.loadingComplete = loadingComplete;
+ tankDemo.render = render;
+ tankDemo.DEMO_NAME = DEMO_NAME;
init();
};
\ No newline at end of file
diff --git a/spine-ts/webgl/demos/transforms.html b/spine-ts/webgl/demos/transforms.html
index 9a32b3304..9bc4d711b 100644
--- a/spine-ts/webgl/demos/transforms.html
+++ b/spine-ts/webgl/demos/transforms.html
@@ -9,7 +9,7 @@
-
+
Rotation offset
Translation mix
@@ -18,9 +18,7 @@ Translation mix
diff --git a/spine-ts/webgl/demos/transforms.js b/spine-ts/webgl/demos/transforms.js
index 43ea78895..8e984b2b0 100644
--- a/spine-ts/webgl/demos/transforms.js
+++ b/spine-ts/webgl/demos/transforms.js
@@ -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_OUTER = new spine.Color(0.8, 0, 0, 0.8);
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 skeleton, state, bounds;
- var timeKeeper, loadingScreen;
+ var timeKeeper;
var rotateHandle;
var target = null;
var hoverTargets = [null, null, null];
@@ -31,45 +31,35 @@ var transformsDemo = function(canvas, loadingComplete, bgColor) {
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
- loadingScreen = new spine.webgl.LoadingScreen(renderer);
- requestAnimationFrame(load);
}
- function load () {
- timeKeeper.update();
- if (assetManager.isLoadingComplete(DEMO_NAME)) {
- 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transforms);
- skeleton = new spine.Skeleton(skeletonData);
- skeleton.setToSetupPose();
- skeleton.updateWorldTransform();
- var offset = new spine.Vector2();
- bounds = new spine.Vector2();
- skeleton.getBounds(offset, bounds, []);
- state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
- skeleton.setToSetupPose();
- skeleton.updateWorldTransform();
- rotateHandle = skeleton.findBone("rotate-handle");
+ function loadingComplete () {
+ 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transforms);
+ skeleton = new spine.Skeleton(skeletonData);
+ skeleton.setToSetupPose();
+ skeleton.updateWorldTransform();
+ var offset = new spine.Vector2();
+ bounds = new spine.Vector2();
+ skeleton.getBounds(offset, bounds, []);
+ state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
+ skeleton.setToSetupPose();
+ skeleton.updateWorldTransform();
+ rotateHandle = skeleton.findBone("rotate-handle");
- renderer.camera.position.x = offset.x + bounds.x / 2;
- renderer.camera.position.y = offset.y + bounds.y / 2;
+ renderer.camera.position.x = offset.x + bounds.x / 2;
+ renderer.camera.position.y = offset.y + bounds.y / 2;
- renderer.skeletonDebugRenderer.drawRegionAttachments = false;
- renderer.skeletonDebugRenderer.drawMeshHull = false;
- renderer.skeletonDebugRenderer.drawMeshTriangles = false;
+ renderer.skeletonDebugRenderer.drawRegionAttachments = false;
+ renderer.skeletonDebugRenderer.drawMeshHull = false;
+ renderer.skeletonDebugRenderer.drawMeshTriangles = false;
- setupUI();
- setupInput();
-
- loadingComplete(canvas, render);
- } else {
- loadingScreen.draw();
- requestAnimationFrame(load);
- }
+ setupUI();
+ setupInput();
}
function setupUI() {
@@ -178,9 +168,10 @@ var transformsDemo = function(canvas, loadingComplete, bgColor) {
}
gl.lineWidth(1);
renderer.end();
-
- loadingScreen.draw(true);
}
+ transformsDemo.loadingComplete = loadingComplete;
+ transformsDemo.render = render;
+ transformsDemo.DEMO_NAME = DEMO_NAME;
init();
};
\ No newline at end of file
diff --git a/spine-ts/webgl/demos/transitions.html b/spine-ts/webgl/demos/transitions.html
index 471604b57..718d4a353 100644
--- a/spine-ts/webgl/demos/transitions.html
+++ b/spine-ts/webgl/demos/transitions.html
@@ -9,7 +9,7 @@
-
+
Time multiplier
@@ -17,9 +17,7 @@ Time multiplier
diff --git a/spine-ts/webgl/demos/transitions.js b/spine-ts/webgl/demos/transitions.js
index a482f2d9e..263391918 100644
--- a/spine-ts/webgl/demos/transitions.js
+++ b/spine-ts/webgl/demos/transitions.js
@@ -5,7 +5,6 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
var skeleton, skeletonNoMix, state, stateNoMix, bounds;
var timeSlider, timeSliderLabel;
var timeKeeper;
- var loadingScreen;
var DEMO_NAME = "TransitionsDemo";
@@ -29,34 +28,24 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
- loadingScreen = new spine.webgl.LoadingScreen(renderer);
-
- requestAnimationFrame(load);
}
- function load () {
- timeKeeper.update();
- if (assetManager.isLoadingComplete(DEMO_NAME)) {
- skeleton = loadSkeleton("spineboy");
- skeletonNoMix = new spine.Skeleton(skeleton.data);
- state = createState(0.25);
- state.multipleMixing = true;
- setAnimations(state, 0, 0);
- stateNoMix = createState(0);
- setAnimations(stateNoMix, -0.25, 0);
+ function loadingComplete () {
+ skeleton = loadSkeleton("spineboy");
+ skeletonNoMix = new spine.Skeleton(skeleton.data);
+ state = createState(0.25);
+ state.multipleMixing = true;
+ setAnimations(state, 0, 0);
+ stateNoMix = createState(0);
+ setAnimations(stateNoMix, -0.25, 0);
- state.apply(skeleton);
- skeleton.updateWorldTransform();
- bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
- skeleton.getBounds(bounds.offset, bounds.size, []);
- setupInput();
- $("#transitions-overlay").removeClass("overlay-hide");
- $("#transitions-overlay").addClass("overlay");
- loadingComplete(canvas, render);
- } else {
- loadingScreen.draw();
- requestAnimationFrame(load);
- }
+ state.apply(skeleton);
+ skeleton.updateWorldTransform();
+ bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
+ skeleton.getBounds(bounds.offset, bounds.size, []);
+ setupInput();
+ $("#transitions-overlay").removeClass("overlay-hide");
+ $("#transitions-overlay").addClass("overlay");
}
function setupInput() {
@@ -142,9 +131,10 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
skeletonNoMix.y = -100;
renderer.drawSkeleton(skeletonNoMix, true);
renderer.end();
-
- loadingScreen.draw(true);
}
+
+ transitionsDemo.loadingComplete = loadingComplete;
+ transitionsDemo.render = render;
+ transitionsDemo.DEMO_NAME = DEMO_NAME;
init();
- return render;
};
\ No newline at end of file
diff --git a/spine-ts/webgl/demos/utils.js b/spine-ts/webgl/demos/utils.js
index bfb1447f9..56b1a98d6 100644
--- a/spine-ts/webgl/demos/utils.js
+++ b/spine-ts/webgl/demos/utils.js
@@ -18,16 +18,36 @@ var spineDemos = {
for (var i = 0; i < demos.length; i++) {
var demo = demos[i];
var canvas = demo.canvas;
- var renderFunc = demo.renderFunc;
- if (demo.visible) {
- if (spineDemos.log) console.log("Rendering " + canvas.id);
- renderFunc();
+
+ if (!spineDemos.assetManager.isLoadingComplete(demo.DEMO_NAME)) {
+ if (demo.visible) {
+ 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) {
- const rect = demo.canvas.getBoundingClientRect();
+ const rect = demo.placeholder.getBoundingClientRect();
const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
@@ -36,41 +56,37 @@ var spineDemos = {
demo.visible = (vertInView && horInView);
}
- spineDemos.setupRendering = function (canvas, renderFunc) {
- 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) {
+ function createCanvases (numCanvases) {
for (var i = 0; i < numCanvases; i++) {
var canvas = document.createElement("canvas");
canvas.ctx = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
+ canvas.id = "canvas-" + i;
spineDemos.canvases.push(canvas);
}
}
- spineDemos.obtainCanvas = function () {
- return spineDemos.canvases.splice(0, 1)[0];
+ spineDemos.init = function () {
+ createCanvases(3);
+ loadSliders();
+ requestAnimationFrame(loop);
}
- spineDemos.freeCanvas = function (canvas) {
- canvases.push(canvas);
+ spineDemos.addDemo = function (demo, placeholder) {
+ 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() {
$(".slider").each(function () {
$(this).data("slider").resized();
diff --git a/spine-ts/webgl/demos/vine.html b/spine-ts/webgl/demos/vine.html
index df9b4b2a9..fada25492 100644
--- a/spine-ts/webgl/demos/vine.html
+++ b/spine-ts/webgl/demos/vine.html
@@ -9,7 +9,7 @@
-
+
Display bones & path
@@ -17,9 +17,7 @@
diff --git a/spine-ts/webgl/demos/vine.js b/spine-ts/webgl/demos/vine.js
index f0b4cdf65..6b0e61990 100644
--- a/spine-ts/webgl/demos/vine.js
+++ b/spine-ts/webgl/demos/vine.js
@@ -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_OUTER = new spine.Color(0.8, 0, 0, 0.8);
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 skeleton, state, bounds;
- var timeKeeper, loadingScreen;
+ var timeKeeper;
var target = null;
var hoverTargets = [null, null, null, null, null, null];
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.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
- loadingScreen = new spine.webgl.LoadingScreen(renderer);
- requestAnimationFrame(load);
}
- function load () {
- timeKeeper.update();
- if (assetManager.isLoadingComplete(DEMO_NAME)) {
- 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").vine);
- skeleton = new spine.Skeleton(skeletonData);
- skeleton.setToSetupPose();
- skeleton.updateWorldTransform();
- var offset = new spine.Vector2();
- bounds = new spine.Vector2();
- skeleton.getBounds(offset, bounds, []);
- state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
- state.setAnimation(0, "animation", true);
- state.apply(skeleton);
- skeleton.updateWorldTransform();
+ function loadingComplete () {
+ 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 skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").vine);
+ skeleton = new spine.Skeleton(skeletonData);
+ skeleton.setToSetupPose();
+ skeleton.updateWorldTransform();
+ var offset = new spine.Vector2();
+ bounds = new spine.Vector2();
+ skeleton.getBounds(offset, bounds, []);
+ state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
+ state.setAnimation(0, "animation", true);
+ state.apply(skeleton);
+ skeleton.updateWorldTransform();
- renderer.camera.position.x = offset.x + bounds.x / 2;
- renderer.camera.position.y = offset.y + bounds.y / 2;
+ renderer.camera.position.x = offset.x + bounds.x / 2;
+ renderer.camera.position.y = offset.y + bounds.y / 2;
- renderer.skeletonDebugRenderer.drawMeshHull = false;
- renderer.skeletonDebugRenderer.drawMeshTriangles = false;
+ renderer.skeletonDebugRenderer.drawMeshHull = false;
+ renderer.skeletonDebugRenderer.drawMeshTriangles = false;
- setupUI();
- setupInput();
-
- loadingComplete(canvas, render);
- } else {
- loadingScreen.draw();
- requestAnimationFrame(load);
- }
+ setupUI();
+ setupInput();
}
function setupUI() {
@@ -182,9 +172,10 @@ var vineDemo = function(canvas, loadingComplete, bgColor) {
}
gl.lineWidth(1);
renderer.end();
-
- loadingScreen.draw(true);
}
+ vineDemo.loadingComplete = loadingComplete;
+ vineDemo.render = render;
+ vineDemo.DEMO_NAME = DEMO_NAME;
init();
};
\ No newline at end of file