Home Explore Help
Sign In
archive
/
spine-runtimes
mirror of https://github.com/EsotericSoftware/spine-runtimes.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

[webgl] Refactored demos to use preallocated canvas & context

badlogic 8 years ago
parent
c6d7af8e96
commit
ff1a81bab3
23 changed files with 113 additions and 122 deletions
Unified View Show Diff Stats
  1. 7 5
      spine-ts/webgl/demos/clipping.html
  2. 3 9
      spine-ts/webgl/demos/clipping.js
  3. 5 2
      spine-ts/webgl/demos/hoverboard.html
  4. 4 9
      spine-ts/webgl/demos/hoverboard.js
  5. 5 3
      spine-ts/webgl/demos/imagechanges.html
  6. 2 7
      spine-ts/webgl/demos/imagechanges.js
  7. 5 3
      spine-ts/webgl/demos/meshes.html
  8. 2 8
      spine-ts/webgl/demos/meshes.js
  9. 5 2
      spine-ts/webgl/demos/skins.html
  10. 2 7
      spine-ts/webgl/demos/skins.js
  11. 6 4
      spine-ts/webgl/demos/spritesheets.html
  12. 2 7
      spine-ts/webgl/demos/spritesheets.js
  13. 5 2
      spine-ts/webgl/demos/stretchyman.html
  14. 2 7
      spine-ts/webgl/demos/stretchyman.js
  15. 5 3
      spine-ts/webgl/demos/tank.html
  16. 2 7
      spine-ts/webgl/demos/tank.js
  17. 7 5
      spine-ts/webgl/demos/transforms.html
  18. 2 7
      spine-ts/webgl/demos/transforms.js
  19. 5 3
      spine-ts/webgl/demos/transitions.html
  20. 3 7
      spine-ts/webgl/demos/transitions.js
  21. 26 4
      spine-ts/webgl/demos/utils.js
  22. 6 4
      spine-ts/webgl/demos/vine.html
  23. 2 7
      spine-ts/webgl/demos/vine.js

+ 7 - 5
spine-ts/webgl/demos/clipping.html
View File 

@@ -9,15 +9,17 @@
 
 <body>
 
 <body>
 
 
 
 <center>
 
 <center>
 
-<div class="aspect"><div><canvas id="clipping-canvas"></canvas></div></div>
 
+<div id="canvas"></div>
 
+<div id="clipping-playbutton"></div>
 
 <div id="clipping-timeline" class="slider"></div>
 
 <div id="clipping-timeline" class="slider"></div>
 
-<input id="clipping-playbutton" type="button" value="Pause"></input><br>
 
-<input id="clipping-drawtriangles" type="checkbox"></input> Draw triangles<br>
 
+<input id="clipping-drawtriangles" type="checkbox"></input> Draw triangles
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>
 
-spineDemos.loadSliders();
 
-clippingDemo(spineDemos.setupRendering);
 
+spineDemos.init();
 
+var canvas = spineDemos.obtainCanvas();
 
+document.getElementById("canvas").appendChild(canvas);
 
+clippingDemo(canvas, spineDemos.setupRendering);
 
 </script>
 
 </script>
 
 
 
 </body>
 
 </body>

+ 3 - 9
spine-ts/webgl/demos/clipping.js
View File 

@@ -1,5 +1,5 @@
 
-var clippingDemo = function(loadingComplete, bgColor) {
 
-	var canvas, gl, renderer, assetManager;
 
+var clippingDemo = function(canvas, loadingComplete, bgColor) {
 
+	var gl, renderer, assetManager;
 
 	var skeleton, state, bounds;
 
 	var skeleton, state, bounds;
 
 	var timeKeeper, loadingScreen;
 
 	var timeKeeper, loadingScreen;
 
 	var playButton, timeline, isPlaying = true, playTime = 0;
 
 	var playButton, timeline, isPlaying = true, playTime = 0;
 
@@ -9,14 +9,8 @@ var clippingDemo = function(loadingComplete, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 
 
 	function init () {
 
 	function init () {
 
-		canvas = document.getElementById("clipping-canvas");
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
-		if (!gl) {
 
-			alert('WebGL is unavailable.');
 
-			return;
 
-		}
 
-
 
+		gl = canvas.ctx.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		assetManager = spineDemos.assetManager;
 
 		assetManager = spineDemos.assetManager;
 
 		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
 
 		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };

+ 5 - 2
spine-ts/webgl/demos/hoverboard.html
View File 

@@ -9,7 +9,7 @@
 
 <body>
 
 <body>
 
 
 
 <center>
 
 <center>
 
-<div class="aspect"><div><canvas id="hoverboard-canvas"></canvas></div></div>
 
+<div id="canvas"></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>
 
@@ -17,7 +17,10 @@
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>
 
-hoverboardDemo(spineDemos.setupRendering);
 
+spineDemos.init();
 
+var canvas = spineDemos.obtainCanvas();
 
+document.getElementById("canvas").appendChild(canvas);
 
+hoverboardDemo(canvas, spineDemos.setupRendering);
 
 </script>
 
 </script>
 
 
 
 </body>
 
 </body>

+ 4 - 9
spine-ts/webgl/demos/hoverboard.js
View File 

@@ -1,10 +1,10 @@
 
-var hoverboardDemo = function(loadingComplete, bgColor) {
 
+var hoverboardDemo = function(canvas, loadingComplete, 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);
 
 	var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
 
 	var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
 
 
 
-	var canvas, gl, renderer, input, assetManager;
 
+	var gl, renderer, input, assetManager;
 
 	var skeleton, state, bounds;
 
 	var skeleton, state, bounds;
 
 	var timeKeeper, loadingScreen;
 
 	var timeKeeper, loadingScreen;
 
 	var target = null;
 
 	var target = null;
 
@@ -18,13 +18,8 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 
 
 	function init () {
 
 	function init () {
 
-		canvas = document.getElementById("hoverboard-canvas");
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
-		if (!gl) {
 
-			alert('WebGL is unavailable.');
 
-			return;
 
-		}
 
+		gl = canvas.ctx.gl;
 
 
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		assetManager = spineDemos.assetManager;
 
 		assetManager = spineDemos.assetManager;
 
@@ -114,7 +109,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
 
 				state.addAnimation(aimTrack, "aim", true, 0.4).mixDuration = 0.2;
 
 				state.addAnimation(aimTrack, "aim", true, 0.4).mixDuration = 0.2;
 
 		});
 
 		});
 
 	}
 
 	}
 
-	
+
 
 	function setupInput () {
 
 	function setupInput () {
 
 		input.addListener({
 
 		input.addListener({
 
 			down: function(x, y) {
 
 			down: function(x, y) {

+ 5 - 3
spine-ts/webgl/demos/imagechanges.html
View File 

@@ -9,15 +9,17 @@
 
 <body>
 
 <body>
 
 
 
 <center>
 
 <center>
 
-<div class="aspect"><div><canvas id="imagechanges-canvas"></canvas></div></div>
 
+<div id="canvas"></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>
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>
 
-spineDemos.loadSliders();
 
-imageChangesDemo(spineDemos.setupRendering);
 
+spineDemos.init();
 
+var canvas = spineDemos.obtainCanvas();
 
+document.getElementById("canvas").appendChild(canvas);
 
+imageChangesDemo(canvas, spineDemos.setupRendering);
 
 </script>
 
 </script>
 
 
 
 </body>
 
 </body>

+ 2 - 7
spine-ts/webgl/demos/imagechanges.js
View File 

@@ -1,4 +1,4 @@
 
-var imageChangesDemo = function(loadingComplete, bgColor) {
 
+var imageChangesDemo = function(canvas, loadingComplete, 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;
 
@@ -13,13 +13,8 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 
 
 	function init () {
 
 	function init () {
 
-		canvas = document.getElementById("imagechanges-canvas");
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
-		if (!gl) {
 
-			alert('WebGL is unavailable.');
 
-			return;
 
-		}
 
+		gl = canvas.ctx.gl;
 
 
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		assetManager = spineDemos.assetManager;
 
 		assetManager = spineDemos.assetManager;

+ 5 - 3
spine-ts/webgl/demos/meshes.html
View File 

@@ -9,7 +9,7 @@
 
 <body>
 
 <body>
 
 
 
 <center>
 
 <center>
 
-<div class="aspect"><div><canvas id="meshes-canvas"></canvas></div></div>
 
+<div id="canvas"></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>
 
@@ -18,8 +18,10 @@
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>
 
-spineDemos.loadSliders();
 
-meshesDemo(spineDemos.setupRendering);
 
+spineDemos.init();
 
+var canvas = spineDemos.obtainCanvas();
 
+document.getElementById("canvas").appendChild(canvas);
 
+meshesDemo(canvas, spineDemos.setupRendering);
 
 </script>
 
 </script>
 
 
 
 </body>
 
 </body>

+ 2 - 8
spine-ts/webgl/demos/meshes.js
View File 

@@ -1,4 +1,4 @@
 
-var meshesDemo = function(loadingComplete, bgColor) {
 
+var meshesDemo = function(canvas, loadingComplete, 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;
 
@@ -11,14 +11,8 @@ var meshesDemo = function(loadingComplete, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 
 
 	function init () {
 
 	function init () {
 
-		canvas = document.getElementById("meshes-canvas");
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
-		if (!gl) {
 
-			alert('WebGL is unavailable.');
 
-			return;
 
-		}
 
-
 
+		gl = canvas.ctx.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		renderer.skeletonDebugRenderer.drawRegionAttachments = false;
 
 		renderer.skeletonDebugRenderer.drawRegionAttachments = false;
 
 		assetManager = spineDemos.assetManager;
 
 		assetManager = spineDemos.assetManager;

+ 5 - 2
spine-ts/webgl/demos/skins.html
View File 

@@ -9,7 +9,7 @@
 
 <body>
 
 <body>
 
 
 
 <center>
 
 <center>
 
-<div class="aspect"><div><canvas id="skins-canvas"></canvas></div></div>
 
+<div id="canvas"></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>
 
@@ -17,7 +17,10 @@
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>
 
-skinsDemo(spineDemos.setupRendering);
 
+spineDemos.init();
 
+var canvas = spineDemos.obtainCanvas();
 
+document.getElementById("canvas").appendChild(canvas);
 
+skinsDemo(canvas, spineDemos.setupRendering);
 
 </script>
 
 </script>
 
 
 
 </body>
 
 </body>

+ 2 - 7
spine-ts/webgl/demos/skins.js
View File 

@@ -1,4 +1,4 @@
 
-var skinsDemo = function(loadingComplete, bgColor) {
 
+var skinsDemo = function(canvas, loadingComplete, 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;
 
@@ -10,13 +10,8 @@ var skinsDemo = function(loadingComplete, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 
 
 	function init () {
 
 	function init () {
 
-		canvas = document.getElementById("skins-canvas");
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
-		if (!gl) {
 
-			alert('WebGL is unavailable.');
 
-			return;
 
-		}
 
+		gl = canvas.ctx.gl;
 
 
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		assetManager = spineDemos.assetManager;
 
 		assetManager = spineDemos.assetManager;

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

@@ -9,16 +9,18 @@
 
 <body>
 
 <body>
 
 
 
 <center>
 
 <center>
 
-<div class="aspect"><div><canvas id="spritesheets-canvas"></canvas></div></div>
 
+<div id="canvas"></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
 
 <div id="spritesheets-timeslider" class="slider filled"></div>
 
 <div id="spritesheets-timeslider" class="slider filled"></div>
 
 </center>
 
 </center>
 
 
 
-<script>	
-spineDemos.loadSliders();
 
-spritesheetsDemo(spineDemos.setupRendering);
 
+<script>
 
+spineDemos.init();
 
+var canvas = spineDemos.obtainCanvas();
 
+document.getElementById("canvas").appendChild(canvas);
 
+spritesheetsDemo(canvas, spineDemos.setupRendering);
 
 </script>
 
 </script>
 
 
 
 </body>
 
 </body>

+ 2 - 7
spine-ts/webgl/demos/spritesheets.js
View File 

@@ -1,4 +1,4 @@
 
-var spritesheetsDemo = function(loadingComplete, bgColor) {
 
+var spritesheetsDemo = function(canvas, loadingComplete, 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);
 
 
 
@@ -16,13 +16,8 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 
 
 	function init () {
 
 	function init () {
 
-		canvas = document.getElementById("spritesheets-canvas");
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
-		if (!gl) {
 
-			alert('WebGL is unavailable.');
 
-			return;
 
-		}
 
+		gl = canvas.ctx.gl;
 
 
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		assetManager = spineDemos.assetManager;
 
 		assetManager = spineDemos.assetManager;

+ 5 - 2
spine-ts/webgl/demos/stretchyman.html
View File 

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

+ 2 - 7
spine-ts/webgl/demos/stretchyman.js
View File 

@@ -1,4 +1,4 @@
 
-var stretchymanDemo = function(loadingComplete, bgColor) {
 
+var stretchymanDemo = function(canvas, loadingComplete, 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);
 
@@ -26,13 +26,8 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 
 
 	function init () {
 
 	function init () {
 
-		canvas = document.getElementById("stretchyman-canvas");
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
-		if (!gl) {
 
-			alert('WebGL is unavailable.');
 
-			return;
 
-		}
 
+		gl = canvas.ctx.gl;
 
 
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		assetManager = spineDemos.assetManager;
 
 		assetManager = spineDemos.assetManager;

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

@@ -9,15 +9,17 @@
 
 <body>
 
 <body>
 
 
 
 <center>
 
 <center>
 
-<div class="aspect"><div><canvas id="tank-canvas"></canvas></div></div>
 
+<div id="canvas"></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
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>
 
-spineDemos.loadSliders();
 
-tankDemo(spineDemos.setupRendering);
 
+spineDemos.init();
 
+var canvas = spineDemos.obtainCanvas();
 
+document.getElementById("canvas").appendChild(canvas);
 
+tankDemo(canvas, spineDemos.setupRendering);
 
 </script>
 
 </script>
 
 
 
 </body>
 
 </body>

+ 2 - 7
spine-ts/webgl/demos/tank.js
View File 

@@ -1,4 +1,4 @@
 
-var tankDemo = function(loadingComplete, bgColor) {
 
+var tankDemo = function(canvas, loadingComplete, 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;
 
@@ -9,13 +9,8 @@ var tankDemo = function(loadingComplete, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 
 
 	function init () {
 
 	function init () {
 
-		canvas = document.getElementById("tank-canvas");
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
-		if (!gl) {
 
-			alert('WebGL is unavailable.');
 
-			return;
 
-		}
 
+		gl = canvas.ctx.gl;
 
 
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		assetManager = spineDemos.assetManager;
 
 		assetManager = spineDemos.assetManager;

+ 7 - 5
spine-ts/webgl/demos/transforms.html
View File 

@@ -9,16 +9,18 @@
 
 <body>
 
 <body>
 
 
 
 <center>
 
 <center>
 
-<div class="aspect"><div><canvas id="transforms-canvas"></canvas></div></div>
 
+<div id="canvas"></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
 
-<div id="transforms-translationmix" class="slider filled"></div>		
+<div id="transforms-translationmix" class="slider filled"></div>
 
 </center>
 
 </center>
 
 
 
-<script>	
-spineDemos.loadSliders();
 
-transformsDemo(spineDemos.setupRendering);
 
+<script>
 
+spineDemos.init();
 
+var canvas = spineDemos.obtainCanvas();
 
+document.getElementById("canvas").appendChild(canvas);
 
+transformsDemo(canvas, spineDemos.setupRendering);
 
 </script>
 
 </script>
 
 
 
 </body>
 
 </body>

+ 2 - 7
spine-ts/webgl/demos/transforms.js
View File 

@@ -1,4 +1,4 @@
 
-var transformsDemo = function(loadingComplete, bgColor) {
 
+var transformsDemo = function(canvas, loadingComplete, 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);
 
@@ -20,13 +20,8 @@ var transformsDemo = function(loadingComplete, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 
 
 	function init () {
 
 	function init () {
 
-		canvas = document.getElementById("transforms-canvas");
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
-		if (!gl) {
 
-			alert('WebGL is unavailable.');
 
-			return;
 
-		}
 
+		gl = canvas.ctx.gl;
 
 
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		assetManager = spineDemos.assetManager;
 
 		assetManager = spineDemos.assetManager;

+ 5 - 3
spine-ts/webgl/demos/transitions.html
View File 

@@ -9,15 +9,17 @@
 
 <body>
 
 <body>
 
 
 
 <center>
 
 <center>
 
-<div class="aspect"><div><canvas id="transitions-canvas"></canvas></div></div>
 
+<div id="canvas"></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>
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>
 
-spineDemos.loadSliders();
 
-transitionsDemo(spineDemos.setupRendering);
 
+spineDemos.init();
 
+var canvas = spineDemos.obtainCanvas();
 
+document.getElementById("canvas").appendChild(canvas);
 
+transitionsDemo(canvas, spineDemos.setupRendering);
 
 </script>
 
 </script>
 
 
 
 </body>
 
 </body>

+ 3 - 7
spine-ts/webgl/demos/transitions.js
View File 

@@ -1,4 +1,4 @@
 
-var transitionsDemo = function(loadingComplete, bgColor) {
 
+var transitionsDemo = function(canvas, loadingComplete, 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;
 
@@ -15,13 +15,9 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 
 		timeSlider = $("#transitions-timeslider").data("slider");
 
 		timeSlider = $("#transitions-timeslider").data("slider");
 
 		timeSlider.set(0.5);
 
 		timeSlider.set(0.5);
 
 		timeSliderLabel = $("#transitions-timeslider-label")[0];
 
 		timeSliderLabel = $("#transitions-timeslider-label")[0];
 
-		canvas = document.getElementById("transitions-canvas");
 
+
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
-		if (!gl) {
 
-			alert('WebGL is unavailable.');
 
-			return;
 
-		}
 
+		gl = canvas.ctx.gl;
 
 
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		assetManager = spineDemos.assetManager;
 
 		assetManager = spineDemos.assetManager;

+ 26 - 4
spine-ts/webgl/demos/utils.js
View File 

@@ -3,9 +3,10 @@ var spineDemos = {
 
 	HOVER_COLOR_OUTER: new spine.Color(1, 1, 1, 1),
 
 	HOVER_COLOR_OUTER: new spine.Color(1, 1, 1, 1),
 
 	NON_HOVER_COLOR_INNER: new spine.Color(0.478, 0, 0, 0.5),
 
 	NON_HOVER_COLOR_INNER: new spine.Color(0.478, 0, 0, 0.5),
 
 	NON_HOVER_COLOR_OUTER: new spine.Color(1, 0, 0, 0.8),
 
 	NON_HOVER_COLOR_OUTER: new spine.Color(1, 0, 0, 0.8),
 
-	assetManager: new spine.SharedAssetManager("http://esotericsoftware.com/demos/exports/"),
 
+	assetManager: new spine.SharedAssetManager("assets/"),
 
 	demos: [],
 
 	demos: [],
 
-	loopRunning: false
 
+	loopRunning: false,
 
+	canvases: []
 
 };
 
 };
 
 (function () {
 
 (function () {
 
 	var timeKeeper = new spine.TimeKeeper();
 
 	var timeKeeper = new spine.TimeKeeper();
 
@@ -13,7 +14,7 @@ var spineDemos = {
 
 		timeKeeper.update();
 
 		timeKeeper.update();
 
 		if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond);
 
 		if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond);
 
 		requestAnimationFrame(loop);
 
 		requestAnimationFrame(loop);
 
-		var demos = spineDemos.demos;		
+		var demos = spineDemos.demos;
 
 		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;
 
@@ -41,13 +42,34 @@ var spineDemos = {
 
 			checkElementVisible(demo);
 
 			checkElementVisible(demo);
 
 		});
 
 		});
 
 		checkElementVisible(demo);
 
 		checkElementVisible(demo);
 
-		if (!spineDemos.loopRunning) {			
+		if (!spineDemos.loopRunning) {
 
 			loop();
 
 			loop();
 
 			spineDemos.loopRunning = true;
 
 			spineDemos.loopRunning = true;
 
 		}
 
 		}
 
 		spineDemos.demos.push(demo);
 
 		spineDemos.demos.push(demo);
 
 	};
 
 	};
 
 
 
+	spineDemos.init = function () {
 
+		spineDemos.createCanvases(3);
 
+		spineDemos.loadSliders();
 
+	}
 
+
 
+	spineDemos.createCanvases = function (numCanvases) {
 
+		for (var i = 0; i < numCanvases; i++) {
 
+			var canvas = document.createElement("canvas");
 
+			canvas.ctx = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
 
+			spineDemos.canvases.push(canvas);
 
+		}
 
+	}
 
+
 
+	spineDemos.obtainCanvas = function () {
 
+		return spineDemos.canvases.splice(0, 1)[0];
 
+	}
 
+
 
+	spineDemos.freeCanvas = function (canvas) {
 
+		canvases.push(canvas);
 
+	}
 
+
 
 	spineDemos.loadSliders = function () {
 
 	spineDemos.loadSliders = function () {
 
 		$(window).resize(function() {
 
 		$(window).resize(function() {
 
 			$(".slider").each(function () {
 
 			$(".slider").each(function () {

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

@@ -9,15 +9,17 @@
 
 <body>
 
 <body>
 
 
 
 <center>
 
 <center>
 
-<div class="aspect"><div><canvas id="vine-canvas"></canvas></div></div>
 
+<div id="canvas"></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
 
 </center>
 
 </center>
 
 
 
-<script>	
-spineDemos.loadSliders();
 
-vineDemo(spineDemos.setupRendering);
 
+<script>
 
+spineDemos.init();
 
+var canvas = spineDemos.obtainCanvas();
 
+document.getElementById("canvas").appendChild(canvas);
 
+vineDemo(canvas, spineDemos.setupRendering);
 
 </script>
 
 </script>
 
 
 
 </body>
 
 </body>

+ 2 - 7
spine-ts/webgl/demos/vine.js
View File 

@@ -1,4 +1,4 @@
 
-var vineDemo = function(loadingComplete, bgColor) {
 
+var vineDemo = function(canvas, loadingComplete, 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);
 
@@ -18,13 +18,8 @@ var vineDemo = function(loadingComplete, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 
 
 	function init () {
 
 	function init () {
 
-		canvas = document.getElementById("vine-canvas");
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
-		if (!gl) {
 
-			alert('WebGL is unavailable.');
 
-			return;
 
-		}
 
+		gl = canvas.ctx.gl;
 
 
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 
 		input = new spine.webgl.Input(canvas);
 
 		input = new spine.webgl.Input(canvas);