UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 09:46:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Fixed demos to use new slider.

Browse Source
This commit is contained in:
NathanSweet 2016-09-03 16:31:54 +02:00
parent 35d8598fe3
commit 681fd1df58
24 changed files with 247 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
spine-ts/webgl/demos/animationmixing.html
View File

@ -1,27 +0,0 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body>
<canvas id="animationmixingdemo-canvas"></canvas>
<center>
<div style="color: #fff; position: fixed; top: 0; width: 100%">
<span style="color: #fff">Time Multiplier</span>
<div id="animationmixingdemo-timeslider"></div></br>
</div>
</center>
<script src="utils.js"></script>
<script src="animationmixing.js"></script>
<script>
animationMixingDemo(spineDemos.setupRendering);
</script>
</body>
</html>

29
spine-ts/webgl/demos/demos.css Normal file
View File

@ -0,0 +1,29 @@
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Tahoma;
font-size: 11pt;
}
canvas {
position: absolute; width: 100% ;height: 100%;
}
.slider {
width: 50%;
height: 15px;
background: #222;
border: 1px solid #c5c5c5;
border-radius: 3px;
text-align: left;
transform: translateZ(0);
}
.slider div {
position: relative;
top: -2px;
width: 10px;
height: 17px;
background: white;
border: #000 1px solid;
border-radius: 2px
transform: translateZ(0);
}

24
spine-ts/webgl/demos/framebyframe.html Normal file
View File

@ -0,0 +1,24 @@
<html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="frameByFrame.js"></script>
<body>
<canvas id="framebyframedemo-canvas"></canvas>
<center>
<div style="color: #fff; position: fixed; top: 0; width: 100%">
<select id="framebyframedemo-active-skeleton"></select></br>
<input id="framebyframedemo-playbutton" type="button" value="Pause"></input>
<div id="framebyframedemo-timeline" class="slider"></div>
</div>
</center>
<script>
spineDemos.loadSliders();
frameByFrameDemo(spineDemos.setupRendering);
</script>
</body>
</html>

16
spine-ts/webgl/demos/imagesequences.js → spine-ts/webgl/demos/framebyframe.js
View File

@ -1,4 +1,4 @@
var imageSequencesDemo = function(loadingComplete, bgColor) { var frameByFrameDemo = function(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;
@ -8,12 +8,12 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
var activeSkeleton = "Alien"; var activeSkeleton = "Alien";
var playButton, timeLine, isPlaying = true; var playButton, timeLine, isPlaying = true;
var DEMO_NAME = "ImageSequenceDemo"; var DEMO_NAME = "FrameByFrameDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1); if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () { function init () {
canvas = document.getElementById("imagesequencesdemo-canvas"); canvas = document.getElementById("framebyframedemo-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 }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -43,7 +43,7 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
} }
function setupUI() { function setupUI() {
playButton = $("#imagesequencesdemo-playbutton"); playButton = $("#framebyframedemo-playbutton");
var playButtonUpdate = function () { var playButtonUpdate = function () {
isPlaying = !isPlaying; isPlaying = !isPlaying;
if (isPlaying) { if (isPlaying) {
@ -57,7 +57,7 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
playButton.click(playButtonUpdate); playButton.click(playButtonUpdate);
playButton.addClass("pause"); playButton.addClass("pause");
timeLine = $("#imagesequencesdemo-timeline").data("slider"); timeLine = $("#framebyframedemo-timeline").data("slider");
timeLine.changed = function (percent) { timeLine.changed = function (percent) {
if (isPlaying) playButton.click(); if (isPlaying) playButton.click();
if (!isPlaying) { if (!isPlaying) {
@ -71,7 +71,7 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
} }
}; };
var list = $("#imagesequencesdemo-active-skeleton"); var list = $("#framebyframedemo-active-skeleton");
for (var skeletonName in skeletons) { for (var skeletonName in skeletons) {
var option = $("<option></option>"); var option = $("<option></option>");
option.attr("value", skeletonName).text(skeletonName); option.attr("value", skeletonName).text(skeletonName);
@ -79,7 +79,7 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
list.append(option); list.append(option);
} }
list.change(function() { list.change(function() {
activeSkeleton = $("#imagesequencesdemo-active-skeleton option:selected").text(); activeSkeleton = $("#framebyframedemo-active-skeleton option:selected").text();
var active = skeletons[activeSkeleton]; var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration; var animationDuration = active.state.getCurrent(0).animation.duration;
timeLine.set(active.playTime / animationDuration); timeLine.set(active.playTime / animationDuration);

23
spine-ts/webgl/demos/ikconstraint.html
View File

@ -1,23 +0,0 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
</style>
<body>
<canvas id="ikdemo-canvas"></canvas>
<center>
<div>Display Bones</div><input id="ikdemo-drawbones" type="checkbox"><input></div>
</center>
<script src="utils.js"></script>
<script src="ikconstraint.js"></script>
<script>
ikConstraintDemo(spineDemos.setupRendering);
</script>
</body>
</html>

20
spine-ts/webgl/demos/ikconstraints.html Normal file
View File

@ -0,0 +1,20 @@
<html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="ikconstraints.js"></script>
<body>
<canvas id="ikdemo-canvas"></canvas>
<center>
<div>Display Bones</div><input id="ikdemo-drawbones" type="checkbox"><input></div>
</center>
<script>
spineDemos.loadSliders();
ikConstraintsDemo(spineDemos.setupRendering);
</script>
</body>
</html>

5
spine-ts/webgl/demos/ikconstraint.js → spine-ts/webgl/demos/ikconstraints.js
View File

@ -1,4 +1,4 @@
var ikConstraintDemo = function(loadingComplete, bgColor) { var ikConstraintsDemo = function(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);
@ -13,12 +13,11 @@ var ikConstraintDemo = function(loadingComplete, bgColor) {
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
var isPlaying = true; var isPlaying = true;
var DEMO_NAME = "IkConstraintDemo"; var DEMO_NAME = "IkConstraintsDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () { function init () {
canvas = document.getElementById("ikdemo-canvas"); canvas = document.getElementById("ikdemo-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 }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });

28
spine-ts/webgl/demos/imagesequences.html
View File

@ -1,28 +0,0 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body>
<canvas id="imagesequencesdemo-canvas"></canvas>
<center>
<div style="color: #fff; position: fixed; top: 0; width: 100%">
<select id="imagesequencesdemo-active-skeleton"></select></br>
<input id="imagesequencesdemo-playbutton" type="button" value="Pause"></input>
<div id="imagesequencesdemo-timeline" class="slider"></div>
</div>
</center>
<script src="utils.js"></script>
<script src="imagesequences.js"></script>
<script>
imageSequencesDemo(spineDemos.setupRendering);
</script>
</body>
</html>

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

@ -1,33 +1,26 @@
<html> <html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="utils.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script src="meshes.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body> <body>
<canvas id="meshesdemo-canvas"></canvas> <canvas id="meshesdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div style="position: fixed; top: 0; width: 100%">
<select id="meshesdemo-active-skeleton"></select></br> <select id="meshesdemo-active-skeleton"></select></br>
<span style="color: #fff">Draw Bones</span> <div><input type="checkbox" id="meshesdemo-drawbonescheckbox" style="color: #fff;"></input> Draw bones</div>
<input type="checkbox" id="meshesdemo-drawbonescheckbox" style="color: #fff;"></input> <div><input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;"></input> Draw triangles</div>
<span style="color: #fff">Draw Triangles</span>
<input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;"></input>
<br>
<input id="meshesdemo-playbutton" type="button" value="Pause"></input> <input id="meshesdemo-playbutton" type="button" value="Pause"></input>
<div id="meshesdemo-timeline" class="slider"></input> <div id="meshesdemo-timeline" class="slider"></input>
</div> </div>
</center> </center>
<script src="utils.js"></script>
<script src="meshes.js"></script>
<script> <script>
meshesDemo(spineDemos.setupRendering); spineDemos.loadSliders();
meshesDemo(spineDemos.setupRendering);
</script> </script>
</body> </body>
</html> </html>

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

@ -8,7 +8,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
var DEMO_NAME = "MeshesDemo"; var DEMO_NAME = "MeshesDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1); if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () { function init () {
canvas = document.getElementById("meshesdemo-canvas"); canvas = document.getElementById("meshesdemo-canvas");
@ -35,7 +35,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
skeletons["Green Girl"] = loadSkeleton("greengirl", "animation"); skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation"); skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation");
setupUI(); setupUI();
loadingComplete(canvas, render); loadingComplete(canvas, render);
} else { } else {
loadingScreen.draw(); loadingScreen.draw();
requestAnimationFrame(load); requestAnimationFrame(load);

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

@ -1,28 +1,24 @@
<html> <html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="utils.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script src="skins.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body> <body>
<canvas id="skinsdemo-canvas"></canvas> <canvas id="skinsdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div style="position: fixed; top: 0; width: 100%">
<select id="skinsdemo-active-skin"></select></br> <select id="skinsdemo-active-skin"></select></br>
<button id="skinsdemo-randomizeattachments" value="Random Skin">Random Attachments</button> <button id="skinsdemo-randomizeattachments" value="Random Skin">Random Attachments</button>
<div>Randomize Skin</div><input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input></div> <div><input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input> Randomize skin</div>
</div> </div>
</center> </center>
<script src="utils.js"></script>
<script src="skins.js"></script>
<script> <script>
skinsDemo(spineDemos.setupRendering); spineDemos.loadSliders();
skinsDemo(spineDemos.setupRendering);
</script> </script>
</body> </body>
</html> </html>

32
spine-ts/webgl/demos/spritesheet.html
View File

@ -1,27 +1,23 @@
<html> <html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100%; height: 100%; }
.slider { width: 50%; }
</style>
<body>
<canvas id="spritesheetdemo-canvas"></canvas>
<div style="position: fixed; top: 0; width: 100%">
<center>
<span style="color: #fff">Time Multiplier</span>
<div id="spritesheetdemo-timeslider" class="slider"></div></br>
</center>
</div>
<script src="utils.js"></script> <script src="utils.js"></script>
<script src="spritesheet.js"></script> <script src="spritesheet.js"></script>
<body>
<canvas id="spritesheetdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
Time multiplier
<div id="spritesheetdemo-timeslider" class="slider"></div></br>
</div>
</center>
<script> <script>
spritesheetDemo(spineDemos.setupRendering); spineDemos.loadSliders();
spritesheetDemo(spineDemos.setupRendering);
</script> </script>
</body> </body>
</html> </html>

12
spine-ts/webgl/demos/spritesheet.js
View File

@ -13,7 +13,7 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
var DEMO_NAME = "SpritesheetDemo"; var DEMO_NAME = "SpritesheetDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1); if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () { function init () {
canvas = document.getElementById("spritesheetdemo-canvas"); canvas = document.getElementById("spritesheetdemo-canvas");
@ -61,12 +61,12 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
viewportWidth = ((700 + bounds.x) - offset.x); viewportWidth = ((700 + bounds.x) - offset.x);
viewportHeight = ((0 + bounds.y) - offset.y); viewportHeight = ((0 + bounds.y) - offset.y);
resize(); resize();
setupUI(); setupUI();
setupInput(); setupInput();
$("#spritesheetdemo-overlay").removeClass("overlay-hide"); $("#spritesheetdemo-overlay").removeClass("overlay-hide");
$("#spritesheetdemo-overlay").addClass("overlay"); $("#spritesheetdemo-overlay").addClass("overlay");
loadingComplete(canvas, render); loadingComplete(canvas, render);
} else { } else {
loadingScreen.draw(); loadingScreen.draw();
@ -77,7 +77,7 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
function setupUI() { function setupUI() {
timeSlider = $("#spritesheetdemo-timeslider").data("slider"); timeSlider = $("#spritesheetdemo-timeslider").data("slider");
timeSlider.set(0.5); timeSlider.set(0.5);
timeSliderLabel = $("#spritesheetdemo-timeslider-label"); timeSliderLabel = $("#spritesheetdemo-timeslider-label")[0];
} }
function setupInput() { function setupInput() {
@ -115,9 +115,9 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
delta *= timeSlider.get(); delta *= timeSlider.get();
if (timeSliderLabel) { if (timeSliderLabel) {
var oldValue = timeSliderLabel[0].textContent; var oldValue = timeSliderLabel.textContent;
var newValue = Math.round(timeSlider.get() * 100) + "%"; var newValue = Math.round(timeSlider.get() * 100) + "%";
if (oldValue !== newValue) timeSliderLabel[0].textContent = newValue; if (oldValue !== newValue) timeSliderLabel.textContent = newValue;
} }
var animationDuration = animationState.getCurrent(0).animation.duration; var animationDuration = animationState.getCurrent(0).animation.duration;

26
spine-ts/webgl/demos/stretchy.html
View File

@ -1,31 +1,21 @@
<html> <html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="utils.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script src="stretchy.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
div { color: #fff; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body> <body>
<canvas id="stretchydemo-canvas"></canvas> <canvas id="stretchydemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div style="position: fixed; top: 0; width: 100%">
<br> <div><input id="stretchydemo-drawbones" type="checkbox"></input> Display bones</div>
<div>Display Bones</div><input id="stretchydemo-drawbones" type="checkbox"></input>
</br>
<input id="stretchydemo-playbutton" type="button" value="Pause"></input>
<div id="stretchydemo-timeline" class="slider"></div>
</div> </div>
</center> </center>
<script src="utils.js"></script>
<script src="stretchy.js"></script>
<script> <script>
stretchyDemo(spineDemos.setupRendering); stretchyDemo(spineDemos.setupRendering);
</script> </script>
</body> </body>
</html> </html>

2
spine-ts/webgl/demos/stretchy.js
View File

@ -23,7 +23,7 @@ var stretchyDemo = function(loadingComplete, bgColor) {
var DEMO_NAME = "StretchyDemo"; var DEMO_NAME = "StretchyDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () { function init () {
canvas = document.getElementById("stretchydemo-canvas"); canvas = document.getElementById("stretchydemo-canvas");

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

@ -1,29 +1,24 @@
<html> <html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="utils.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script src="tank.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body> <body>
<canvas id="tankdemo-canvas"></canvas> <canvas id="tankdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div style="position: fixed; top: 0; width: 100%">
<div>Display Bones</div><input id="tankdemo-drawbones" type="checkbox"></input> <div><input id="tankdemo-drawbones" type="checkbox"></input> Display bones</div>
</br>
<input id="tankdemo-playbutton" type="button" value="Pause"></input> <input id="tankdemo-playbutton" type="button" value="Pause"></input>
<div id="tankdemo-timeline" class="slider"></input> <div id="tankdemo-timeline" class="slider"></input>
</div> </div>
</center> </center>
<script src="utils.js"></script>
<script src="tank.js"></script>
<script> <script>
tankDemo(spineDemos.setupRendering); spineDemos.loadSliders();
tankDemo(spineDemos.setupRendering);
</script> </script>
</body> </body>
</html> </html>

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

@ -6,7 +6,7 @@ var tankDemo = function(loadingComplete, bgColor) {
var DEMO_NAME = "TankDemo"; var DEMO_NAME = "TankDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1); if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () { function init () {
canvas = document.getElementById("tankdemo-canvas"); canvas = document.getElementById("tankdemo-canvas");

28
spine-ts/webgl/demos/transformconstraint.html
View File

@ -1,29 +1,25 @@
<html> <html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="utils.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script src="transformconstraint.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
div { color: #fff; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body> <body>
<canvas id="transformdemo-canvas"></canvas> <canvas id="transformdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div style="position: fixed; top: 0; width: 100%">
<div id="info"></div></br> Rotation offset
<div>Rotation Offset</div><div id="transformdemo-rotationoffset" class="slider"></div> <div id="transformdemo-rotationoffset" class="slider"></div>
<div>Translation Mix</div><div id="transformdemo-translationmix" class="slider"></div> Translation mix
<div id="transformdemo-translationmix" class="slider"></div>
</div> </div>
</center> </center>
<script src="utils.js"></script>
<script src="transformconstraint.js"></script>
<script> <script>
transformConstraintDemo(spineDemos.setupRendering); spineDemos.loadSliders();
transformConstraintDemo(spineDemos.setupRendering);
</script> </script>
</body> </body>
</html> </html>

2
spine-ts/webgl/demos/transformconstraint.js
View File

@ -17,7 +17,7 @@ var transformConstraintDemo = function(loadingComplete, bgColor) {
var DEMO_NAME = "TransformConstraintDemo"; var DEMO_NAME = "TransformConstraintDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1); if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () { function init () {
canvas = document.getElementById("transformdemo-canvas"); canvas = document.getElementById("transformdemo-canvas");

23
spine-ts/webgl/demos/transitions.html Normal file
View File

@ -0,0 +1,23 @@
<html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="transitions.js"></script>
<body>
<canvas id="transitions-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
Time multiplier
<div id="transitions-timeslider" class="slider"></div></br>
</div>
</center>
<script>
spineDemos.loadSliders();
transitions(spineDemos.setupRendering);
</script>
</body>
</html>

18
spine-ts/webgl/demos/animationmixing.js → spine-ts/webgl/demos/transitions.js
View File

@ -1,4 +1,4 @@
var animationMixingDemo = function(loadingComplete, bgColor) { var transitions = function(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;
@ -7,15 +7,15 @@ var animationMixingDemo = function(loadingComplete, bgColor) {
var timeKeeper; var timeKeeper;
var loadingScreen; var loadingScreen;
var DEMO_NAME = "AnimationMixingDemo"; var DEMO_NAME = "TransitionsDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1); if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () { function init () {
timeSlider = $("#animationmixingdemo-timeslider").data("slider"); timeSlider = $("#transitions-timeslider").data("slider");
timeSlider.set(0.5); timeSlider.set(0.5);
timeSliderLabel = $("#animationmixingdemo-timeslider-label"); timeSliderLabel = $("#transitions-timeslider-label")[0];
canvas = document.getElementById("animationmixingdemo-canvas"); 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 }); gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -50,8 +50,8 @@ var animationMixingDemo = function(loadingComplete, bgColor) {
bounds = { offset: new spine.Vector2(), size: new spine.Vector2() }; bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
skeleton.getBounds(bounds.offset, bounds.size); skeleton.getBounds(bounds.offset, bounds.size);
setupInput(); setupInput();
$("#animationmixingdemo-overlay").removeClass("overlay-hide"); $("#transitions-overlay").removeClass("overlay-hide");
$("#animationmixingdemo-overlay").addClass("overlay"); $("#transitions-overlay").addClass("overlay");
loadingComplete(canvas, render); loadingComplete(canvas, render);
} else { } else {
loadingScreen.draw(); loadingScreen.draw();
@ -111,9 +111,9 @@ var animationMixingDemo = function(loadingComplete, bgColor) {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta * timeSlider.get(); var delta = timeKeeper.delta * timeSlider.get();
if (timeSliderLabel) { if (timeSliderLabel) {
var oldValue = timeSliderLabel[0].textContent; var oldValue = timeSliderLabel.textContent;
var newValue = Math.round(timeSlider.get() * 100) + "%"; var newValue = Math.round(timeSlider.get() * 100) + "%";
if (oldValue !== newValue) timeSliderLabel[0].textContent = newValue; if (oldValue !== newValue) timeSliderLabel.textContent = newValue;
} }
var offset = bounds.offset; var offset = bounds.offset;

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

@ -1,15 +1,15 @@
var spineDemos; var spineDemos = {
(function(spineDemos) { HOVER_COLOR_INNER: new spine.Color(0.478, 0, 0, 0.25),
spineDemos.HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.25); HOVER_COLOR_OUTER: new spine.Color(1, 1, 1, 1),
spineDemos.HOVER_COLOR_OUTER = new spine.Color(1, 1, 1, 1); NON_HOVER_COLOR_INNER: new spine.Color(0.478, 0, 0, 0.5),
spineDemos.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),
spineDemos.NON_HOVER_COLOR_OUTER = new spine.Color(1, 0, 0, 0.8); assetManager: new spine.SharedAssetManager("http://esotericsoftware.com/demos/exports/"),
spineDemos.assetManager = new spine.SharedAssetManager("http://esotericsoftware.com/demos/exports/"); demos: [],
spineDemos.demos = []; loopRunning: false
spineDemos.loopRunning = false; };
(function() {
var timeKeeper = new spine.TimeKeeper(); var timeKeeper = new spine.TimeKeeper();
var loop = function() { function loop () {
timeKeeper.update(); timeKeeper.update();
if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond); if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond);
spineDemos.requestAnimationFrame(loop); spineDemos.requestAnimationFrame(loop);
@ -21,11 +21,11 @@ var spineDemos;
if (demo.visible) { if (demo.visible) {
if (spineDemos.log) console.log("Rendering " + canvas.id); if (spineDemos.log) console.log("Rendering " + canvas.id);
renderFunc(); renderFunc();
}; }
} }
} }
var setupLoop = function() { function setupLoop () {
if (!spineDemos.loopRunning) { if (!spineDemos.loopRunning) {
loop(); loop();
spineDemos.loopRunning = true; spineDemos.loopRunning = true;
@ -44,7 +44,7 @@ var spineDemos;
spineDemos.requestAnimationFrame = function(func) { spineDemos.requestAnimationFrame = function(func) {
requestAnimationFrame(func); requestAnimationFrame(func);
} };
spineDemos.checkElementVisible = function (demo) { spineDemos.checkElementVisible = function (demo) {
var rect = demo.canvas.getBoundingClientRect(); var rect = demo.canvas.getBoundingClientRect();
@ -61,5 +61,39 @@ var spineDemos;
stencil: false stencil: false
} }
return gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config); return gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
};
spineDemos.loadSliders = function () {
$(".slider").each(function () {
var div = $(this), handle = $("<div/>").appendTo(div);
var bg = div.hasClass("before") ? $("<span/>").appendTo(div) : null;
var hw = handle.width(), value = 0, object;
function positionHandle (percent) {
var x = (div.width() - hw - 2) * percent;
handle[0].style.left = x + "px";
if (bg) bg.css("width", x + hw / 2);
value = percent;
}
function mouseEvent (e) {
var x = e.pageX || e.originalEvent.touches[0].pageX;
var percent = Math.max(0, Math.min(1, (x - div.offset().left - hw / 2) / (div.width() - hw - 2)));
positionHandle(percent);
if (object.changed) object.changed(percent);
}
function clearEvents () {
$(document).off("mouseup.slider mousemove.slider touchmove.slider touchend.slider");
}
div.on("mousedown touchstart", function (e) {
mouseEvent(e);
e.preventDefault(); // Disable text selection.
$(document).on("mousemove.slider touchmove.slider", mouseEvent).on("mouseup.slider touchend.slider", clearEvents);
});
div.data("slider", object = {
set: positionHandle,
get: function () { return value; }
});
div[0].handle = handle;
div[0].positionHandle = positionHandle;
});
} }
})(spineDemos || (spineDemos = { })); })();

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

@ -1,30 +1,24 @@
<html> <html>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="utils.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script src="vine.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
div { color: #fff; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body> <body>
<canvas id="vinedemo-canvas"></canvas> <canvas id="vinedemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div style="position: fixed; top: 0; width: 100%">
<div>Display Bones & Path</div><input id="vinedemo-drawbones" type="checkbox"></input> <div><input id="vinedemo-drawbones" type="checkbox"></input>Display bones &amp; path</div>
</br>
<input id="vinedemo-playbutton" type="button" value="Pause"></input> <input id="vinedemo-playbutton" type="button" value="Pause"></input>
<div id="vinedemo-timeline" class="slider"></div> <div id="vinedemo-timeline" class="slider"></div>
</div> </div>
</center> </center>
<script src="utils.js"></script>
<script src="vine.js"></script>
<script> <script>
vineDemo(spineDemos.setupRendering); spineDemos.loadSliders();
vineDemo(spineDemos.setupRendering);
</script> </script>
</body> </body>
</html> </html>

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

@ -15,7 +15,7 @@ var vineDemo = function(loadingComplete, bgColor) {
var DEMO_NAME = "vineDemo"; var DEMO_NAME = "vineDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1); if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () { function init () {
canvas = document.getElementById("vinedemo-canvas"); canvas = document.getElementById("vinedemo-canvas");