diff --git a/spine-ts/webgl/demos/clipping.html b/spine-ts/webgl/demos/clipping.html index a9f8952b7..6565d2d47 100644 --- a/spine-ts/webgl/demos/clipping.html +++ b/spine-ts/webgl/demos/clipping.html @@ -9,15 +9,17 @@
-
+
+
-
- Draw triangles
+ Draw triangles
diff --git a/spine-ts/webgl/demos/clipping.js b/spine-ts/webgl/demos/clipping.js index 55604db73..f35157097 100644 --- a/spine-ts/webgl/demos/clipping.js +++ b/spine-ts/webgl/demos/clipping.js @@ -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 timeKeeper, loadingScreen; 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); function init () { - canvas = document.getElementById("clipping-canvas"); 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); assetManager = spineDemos.assetManager; var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); }; diff --git a/spine-ts/webgl/demos/hoverboard.html b/spine-ts/webgl/demos/hoverboard.html index c7bc4e4bd..6f8184ef1 100644 --- a/spine-ts/webgl/demos/hoverboard.html +++ b/spine-ts/webgl/demos/hoverboard.html @@ -9,7 +9,7 @@
-
+
> Display Bones
Aim
@@ -17,7 +17,10 @@
diff --git a/spine-ts/webgl/demos/hoverboard.js b/spine-ts/webgl/demos/hoverboard.js index 23d9e3038..56656c17a 100644 --- a/spine-ts/webgl/demos/hoverboard.js +++ b/spine-ts/webgl/demos/hoverboard.js @@ -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_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_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 timeKeeper, loadingScreen; 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); function init () { - canvas = document.getElementById("hoverboard-canvas"); 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); assetManager = spineDemos.assetManager; @@ -114,7 +109,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) { state.addAnimation(aimTrack, "aim", true, 0.4).mixDuration = 0.2; }); } - + function setupInput () { input.addListener({ down: function(x, y) { diff --git a/spine-ts/webgl/demos/imagechanges.html b/spine-ts/webgl/demos/imagechanges.html index fdec4dcfc..f2d3cfc4a 100644 --- a/spine-ts/webgl/demos/imagechanges.html +++ b/spine-ts/webgl/demos/imagechanges.html @@ -9,15 +9,17 @@
-
+

diff --git a/spine-ts/webgl/demos/imagechanges.js b/spine-ts/webgl/demos/imagechanges.js index fabcbe6ab..0bb11cc76 100644 --- a/spine-ts/webgl/demos/imagechanges.js +++ b/spine-ts/webgl/demos/imagechanges.js @@ -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 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); function init () { - canvas = document.getElementById("imagechanges-canvas"); 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); assetManager = spineDemos.assetManager; diff --git a/spine-ts/webgl/demos/meshes.html b/spine-ts/webgl/demos/meshes.html index 748a1a76f..026360e52 100644 --- a/spine-ts/webgl/demos/meshes.html +++ b/spine-ts/webgl/demos/meshes.html @@ -9,7 +9,7 @@
-
+


@@ -18,8 +18,10 @@
diff --git a/spine-ts/webgl/demos/meshes.js b/spine-ts/webgl/demos/meshes.js index 898f248d4..36f6a09ad 100644 --- a/spine-ts/webgl/demos/meshes.js +++ b/spine-ts/webgl/demos/meshes.js @@ -1,4 +1,4 @@ -var meshesDemo = function(loadingComplete, bgColor) { +var meshesDemo = function(canvas, loadingComplete, bgColor) { var canvas, gl, renderer, input, assetManager; var skeleton, bounds; 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); function init () { - canvas = document.getElementById("meshes-canvas"); 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.skeletonDebugRenderer.drawRegionAttachments = false; assetManager = spineDemos.assetManager; diff --git a/spine-ts/webgl/demos/skins.html b/spine-ts/webgl/demos/skins.html index 8acdf8d41..0c9b8ea28 100644 --- a/spine-ts/webgl/demos/skins.html +++ b/spine-ts/webgl/demos/skins.html @@ -9,7 +9,7 @@
-
+


@@ -17,7 +17,10 @@
diff --git a/spine-ts/webgl/demos/skins.js b/spine-ts/webgl/demos/skins.js index 2c68faaf5..a473f9383 100644 --- a/spine-ts/webgl/demos/skins.js +++ b/spine-ts/webgl/demos/skins.js @@ -1,4 +1,4 @@ -var skinsDemo = function(loadingComplete, bgColor) { +var skinsDemo = function(canvas, loadingComplete, bgColor) { var canvas, gl, renderer, input, assetManager; var skeleton, state, offset, bounds; 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); function init () { - canvas = document.getElementById("skins-canvas"); 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); assetManager = spineDemos.assetManager; diff --git a/spine-ts/webgl/demos/spritesheets.html b/spine-ts/webgl/demos/spritesheets.html index c499bcb6a..d936c13ea 100644 --- a/spine-ts/webgl/demos/spritesheets.html +++ b/spine-ts/webgl/demos/spritesheets.html @@ -9,16 +9,18 @@
-
+

Time multiplier
- diff --git a/spine-ts/webgl/demos/spritesheets.js b/spine-ts/webgl/demos/spritesheets.js index 4e4cbd80f..4d21705ee 100644 --- a/spine-ts/webgl/demos/spritesheets.js +++ b/spine-ts/webgl/demos/spritesheets.js @@ -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 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); function init () { - canvas = document.getElementById("spritesheets-canvas"); 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); assetManager = spineDemos.assetManager; diff --git a/spine-ts/webgl/demos/stretchyman.html b/spine-ts/webgl/demos/stretchyman.html index f2d31ecab..8f9ef9030 100644 --- a/spine-ts/webgl/demos/stretchyman.html +++ b/spine-ts/webgl/demos/stretchyman.html @@ -9,12 +9,15 @@
-
+
Display bones
diff --git a/spine-ts/webgl/demos/stretchyman.js b/spine-ts/webgl/demos/stretchyman.js index 16dbc156f..8bbe6cc34 100644 --- a/spine-ts/webgl/demos/stretchyman.js +++ b/spine-ts/webgl/demos/stretchyman.js @@ -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_OUTER = new spine.Color(0.8, 0, 0, 0.8); 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); function init () { - canvas = document.getElementById("stretchyman-canvas"); 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); assetManager = spineDemos.assetManager; diff --git a/spine-ts/webgl/demos/tank.html b/spine-ts/webgl/demos/tank.html index 0c9c6d803..02868ec7a 100644 --- a/spine-ts/webgl/demos/tank.html +++ b/spine-ts/webgl/demos/tank.html @@ -9,15 +9,17 @@
-
+

Display bones
diff --git a/spine-ts/webgl/demos/tank.js b/spine-ts/webgl/demos/tank.js index 5cbeba3dc..e57822c46 100644 --- a/spine-ts/webgl/demos/tank.js +++ b/spine-ts/webgl/demos/tank.js @@ -1,4 +1,4 @@ -var tankDemo = function(loadingComplete, bgColor) { +var tankDemo = function(canvas, loadingComplete, bgColor) { var canvas, gl, renderer, input, assetManager; var skeleton, state, offset, bounds; 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); function init () { - canvas = document.getElementById("tank-canvas"); 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); assetManager = spineDemos.assetManager; diff --git a/spine-ts/webgl/demos/transforms.html b/spine-ts/webgl/demos/transforms.html index 6b2ec36ff..9a32b3304 100644 --- a/spine-ts/webgl/demos/transforms.html +++ b/spine-ts/webgl/demos/transforms.html @@ -9,16 +9,18 @@
-
+
Rotation offset

Translation mix -
+
- diff --git a/spine-ts/webgl/demos/transforms.js b/spine-ts/webgl/demos/transforms.js index fd999c6d7..43ea78895 100644 --- a/spine-ts/webgl/demos/transforms.js +++ b/spine-ts/webgl/demos/transforms.js @@ -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_OUTER = new spine.Color(0.8, 0, 0, 0.8); 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); function init () { - canvas = document.getElementById("transforms-canvas"); 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); assetManager = spineDemos.assetManager; diff --git a/spine-ts/webgl/demos/transitions.html b/spine-ts/webgl/demos/transitions.html index 9f173191f..471604b57 100644 --- a/spine-ts/webgl/demos/transitions.html +++ b/spine-ts/webgl/demos/transitions.html @@ -9,15 +9,17 @@
-
+
Time multiplier

diff --git a/spine-ts/webgl/demos/transitions.js b/spine-ts/webgl/demos/transitions.js index 0c653da0e..a482f2d9e 100644 --- a/spine-ts/webgl/demos/transitions.js +++ b/spine-ts/webgl/demos/transitions.js @@ -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 canvas, gl, renderer, input, assetManager; @@ -15,13 +15,9 @@ var transitionsDemo = function(loadingComplete, bgColor) { timeSlider = $("#transitions-timeslider").data("slider"); timeSlider.set(0.5); timeSliderLabel = $("#transitions-timeslider-label")[0]; - canvas = document.getElementById("transitions-canvas"); + 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); assetManager = spineDemos.assetManager; diff --git a/spine-ts/webgl/demos/utils.js b/spine-ts/webgl/demos/utils.js index 23289b135..bfb1447f9 100644 --- a/spine-ts/webgl/demos/utils.js +++ b/spine-ts/webgl/demos/utils.js @@ -3,9 +3,10 @@ var spineDemos = { 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_OUTER: new spine.Color(1, 0, 0, 0.8), - assetManager: new spine.SharedAssetManager("http://esotericsoftware.com/demos/exports/"), + assetManager: new spine.SharedAssetManager("assets/"), demos: [], - loopRunning: false + loopRunning: false, + canvases: [] }; (function () { var timeKeeper = new spine.TimeKeeper(); @@ -13,7 +14,7 @@ var spineDemos = { timeKeeper.update(); if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond); requestAnimationFrame(loop); - var demos = spineDemos.demos; + var demos = spineDemos.demos; for (var i = 0; i < demos.length; i++) { var demo = demos[i]; var canvas = demo.canvas; @@ -41,13 +42,34 @@ var spineDemos = { checkElementVisible(demo); }); checkElementVisible(demo); - if (!spineDemos.loopRunning) { + 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++) { + 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 () { $(window).resize(function() { $(".slider").each(function () { diff --git a/spine-ts/webgl/demos/vine.html b/spine-ts/webgl/demos/vine.html index 89c7af28b..df9b4b2a9 100644 --- a/spine-ts/webgl/demos/vine.html +++ b/spine-ts/webgl/demos/vine.html @@ -9,15 +9,17 @@
-
+

Display bones & path
- diff --git a/spine-ts/webgl/demos/vine.js b/spine-ts/webgl/demos/vine.js index 5f1029954..f0b4cdf65 100644 --- a/spine-ts/webgl/demos/vine.js +++ b/spine-ts/webgl/demos/vine.js @@ -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_OUTER = new spine.Color(0.8, 0, 0, 0.8); 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); function init () { - canvas = document.getElementById("vine-canvas"); 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); input = new spine.webgl.Input(canvas);