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

[webgl] Refactored demos to use preallocated canvas & context

Browse Source
This commit is contained in:
badlogic 2017-09-14 12:15:23 +02:00
parent c6d7af8e96
commit ff1a81bab3
23 changed files with 113 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

12
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 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); };

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

@ -9,7 +9,7 @@
<body>
<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-aim" type="checkbox"></input> Aim<br>
<button id="hoverboard-shoot">Shoot</button>
@ -17,7 +17,10 @@
</center>
<script>
hoverboardDemo(spineDemos.setupRendering);
spineDemos.init();
var canvas = spineDemos.obtainCanvas();
document.getElementById("canvas").appendChild(canvas);
hoverboardDemo(canvas, spineDemos.setupRendering);
</script>
</body>

13
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_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) {

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

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

9
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 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;

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

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

10
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 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;

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

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

9
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 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;

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

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

9
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 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;

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

@ -9,12 +9,15 @@
<body>
<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
</center>
<script>
stretchymanDemo(spineDemos.setupRendering);
spineDemos.init();
var canvas = spineDemos.obtainCanvas();
document.getElementById("canvas").appendChild(canvas);
stretchymanDemo(canvas, spineDemos.setupRendering);
</script>
</body>

9
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_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;

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

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

9
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 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;

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

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

9
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_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;

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

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

10
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 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;

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

@ -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 () {

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

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

9
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_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);