UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Fixed up demos to work with the terrible jquery-ui

Browse Source
This commit is contained in:
badlogic 2016-08-29 11:09:41 +02:00
parent 3af5290e23
commit c20fc44cda
8 changed files with 54 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,21 @@
<html> <html>
<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="//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="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * { margin: 0; padding: 0; }
body, html { height: 100% } body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; } canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style> </style>
<body> <body>
<canvas id="animationmixingdemo-canvas"></canvas> <canvas id="animationmixingdemo-canvas"></canvas>
<center> <center>
<div style="color: #fff; position: fixed; top: 0; width: 100%"> <div style="color: #fff; position: fixed; top: 0; width: 100%">
<span style="color: #fff">Time Multiplier</span> <span style="color: #fff">Time Multiplier</span>
<input type="range" min="0" max="200" value ="50" id="animationmixingdemo-timeslider" style="color: #fff;"></input></br> <div id="animationmixingdemo-timeslider"></div></br>
</div> </div>
</center> </center>
<script src="animationmixing.js"></script> <script src="animationmixing.js"></script>

9
spine-ts/webgl/demos/animationmixing.js
View File

@ -3,11 +3,13 @@ var animationMixingDemo = function(pathPrefix) {
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, skeletonNoMix, state, stateNoMix, bounds; var skeleton, skeletonNoMix, state, stateNoMix, bounds;
var timeSlider; var timeSlider, timeSliderLabel;
var lastFrameTime = Date.now() / 1000 var lastFrameTime = Date.now() / 1000
function init () { function init () {
timeSlider = document.getElementById("animationmixingdemo-timeslider"); timeSlider = $("#animationmixingdemo-timeslider");
timeSlider.slider({ range: "max", min: 0, max: 200, value: 50 });
timeSliderLabel = $("#animationmixingdemo-timeslider-label");
canvas = document.getElementById("animationmixingdemo-canvas"); canvas = document.getElementById("animationmixingdemo-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 });
@ -91,7 +93,8 @@ var animationMixingDemo = function(pathPrefix) {
var delta = now - lastFrameTime; var delta = now - lastFrameTime;
lastFrameTime = now; lastFrameTime = now;
if (delta > 0.032) delta = 0.032; if (delta > 0.032) delta = 0.032;
delta *= (timeSlider.value / 100); delta *= (timeSlider.slider("value") / 100);
if (timeSliderLabel) timeSliderLabel.text(timeSlider.slider("value") + "%");
var offset = bounds.offset; var offset = bounds.offset;
var size = bounds.size; var size = bounds.size;

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

@ -1,10 +1,14 @@
<html> <html>
<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="//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="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * { margin: 0; padding: 0; }
body, html { height: 100% } body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; } canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style> </style>
<body> <body>
<canvas id="imagesequencesdemo-canvas"></canvas> <canvas id="imagesequencesdemo-canvas"></canvas>
@ -12,7 +16,7 @@
<div style="color: #fff; position: fixed; top: 0; width: 100%"> <div style="color: #fff; position: fixed; top: 0; width: 100%">
<select id="imagesequencesdemo-active-skeleton"></select></br> <select id="imagesequencesdemo-active-skeleton"></select></br>
<input id="imagesequencesdemo-playbutton" type="button" value="Pause"></input> <input id="imagesequencesdemo-playbutton" type="button" value="Pause"></input>
<input id="imagesequencesdemo-timeline" type="range" min="0" max="100" value ="0" style="color: #fff; width: 50%"></input> <div id="imagesequencesdemo-timeline" class="slider"></div>
</div> </div>
</center> </center>
<script src="imagesequences.js"></script> <script src="imagesequences.js"></script>

15
spine-ts/webgl/demos/imagesequences.js
View File

@ -49,10 +49,11 @@ var imageSequencesDemo = function(pathPrefix) {
playButton.click(playButtonUpdate); playButton.click(playButtonUpdate);
timeLine = $("#imagesequencesdemo-timeline"); timeLine = $("#imagesequencesdemo-timeline");
var timeLineUpdate = function () { timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
if (isPlaying) playButton.click();
if (!isPlaying) { if (!isPlaying) {
var active = skeletons[activeSkeleton]; var active = skeletons[activeSkeleton];
var time = timeLine.val() / 100; var time = timeLine.slider("value") / 100;
var animationDuration = active.state.getCurrent(0).animation.duration; var animationDuration = active.state.getCurrent(0).animation.duration;
time = animationDuration * time; time = animationDuration * time;
active.state.update(time - active.playTime); active.state.update(time - active.playTime);
@ -60,11 +61,7 @@ var imageSequencesDemo = function(pathPrefix) {
active.skeleton.updateWorldTransform(); active.skeleton.updateWorldTransform();
active.playTime = time; active.playTime = time;
} }
} }});
timeLine.on("input change", function () {
if (isPlaying) playButton.click();
timeLineUpdate();
});
var list = $("#imagesequencesdemo-active-skeleton"); var list = $("#imagesequencesdemo-active-skeleton");
for (var skeletonName in skeletons) { for (var skeletonName in skeletons) {
@ -77,7 +74,7 @@ var imageSequencesDemo = function(pathPrefix) {
activeSkeleton = $("#imagesequencesdemo-active-skeleton option:selected").text(); activeSkeleton = $("#imagesequencesdemo-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.val(active.playTime / animationDuration * 100); timeLine.slider("value", (active.playTime / animationDuration * 100));
}) })
} }
@ -149,7 +146,7 @@ var imageSequencesDemo = function(pathPrefix) {
while (active.playTime >= animationDuration) { while (active.playTime >= animationDuration) {
active.playTime -= animationDuration; active.playTime -= animationDuration;
} }
timeLine.val(active.playTime / animationDuration * 100); timeLine.slider("value", (active.playTime / animationDuration * 100));
state.update(delta); state.update(delta);
state.apply(skeleton); state.apply(skeleton);

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

@ -1,10 +1,14 @@
<html> <html>
<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="//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="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * { margin: 0; padding: 0; }
body, html { height: 100% } body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; } canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style> </style>
<body> <body>
<canvas id="meshesdemo-canvas"></canvas> <canvas id="meshesdemo-canvas"></canvas>
@ -20,7 +24,7 @@
<input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;" checked="true"></input> <input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;" checked="true"></input>
<br> <br>
<input id="meshesdemo-playbutton" type="button" value="Pause"></input> <input id="meshesdemo-playbutton" type="button" value="Pause"></input>
<input id="meshesdemo-timeline" type="range" min="0" max="100" value ="0" style="color: #fff; width: 50%"></input> <div id="meshesdemo-timeline" class="slider"></input>
</div> </div>
</center> </center>
<script src="meshes.js"></script> <script src="meshes.js"></script>

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

@ -62,9 +62,10 @@ var meshesDemo = function(pathPrefix) {
playButton.click(playButtonUpdate); playButton.click(playButtonUpdate);
timeLine = $("#meshesdemo-timeline"); timeLine = $("#meshesdemo-timeline");
var timeLineUpdate = function () { timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
if (isPlaying) playButton.click();
if (!isPlaying) { if (!isPlaying) {
var time = timeLine.val() / 100; var time = timeLine.slider("value") / 100;
var animationDuration = state.getCurrent(0).animation.duration; var animationDuration = state.getCurrent(0).animation.duration;
time = animationDuration * time; time = animationDuration * time;
state.update(time - playTime); state.update(time - playTime);
@ -72,11 +73,7 @@ var meshesDemo = function(pathPrefix) {
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
playTime = time; playTime = time;
} }
} }});
timeLine.on("input change", function () {
if (isPlaying) playButton.click();
timeLineUpdate();
});
$("#meshesdemo-drawbonescheckbox").change(function() { $("#meshesdemo-drawbonescheckbox").change(function() {
renderer.skeletonDebugRenderer.drawBones = this.checked; renderer.skeletonDebugRenderer.drawBones = this.checked;
@ -111,7 +108,7 @@ var meshesDemo = function(pathPrefix) {
while (playTime >= animationDuration) { while (playTime >= animationDuration) {
playTime -= animationDuration; playTime -= animationDuration;
} }
timeLine.val(playTime / animationDuration * 100); timeLine.slider("value", (playTime / animationDuration * 100));
state.update(delta); state.update(delta);
state.apply(skeleton); state.apply(skeleton);

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

@ -1,21 +1,25 @@
<html> <html>
<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="//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="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * { margin: 0; padding: 0; }
body, html { height: 100% } body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; } canvas { position: absolute; width: 100%; height: 100%; }
.slider { width: 50%; }
</style> </style>
<body> <body>
<canvas id="skeletonvsspritedemo-canvas"></canvas> <canvas id="skeletonvsspritedemo-canvas"></canvas>
<div style="position: fixed; top: 0; width: 100%"> <div style="position: fixed; top: 0; width: 100%">
<center> <center>
<span style="color: #fff">Time Multiplier</span> <span style="color: #fff">Time Multiplier</span>
<input type="range" min="0" max="200" value ="100" id="skeletonvsspritedemo-timeslider" style="color: #fff;"></input></br> <div id="skeletonvsspritedemo-timeslider" class="slider"></div></br>
<span style="color: #fff">Show Atlas</span> <span style="color: #fff">Show Atlas</span>
<input type="checkbox" id="skeletonvsspritedemo-atlascheckbox" style="color: #fff;"></input></br> <input type="checkbox" id="skeletonvsspritedemo-atlascheckbox" style="color: #fff;"></input></br>
<input id="skeletonvsspritedemo-playbutton" type="button" value="Pause"></input> <input id="skeletonvsspritedemo-playbutton" type="button" value="Pause"></input>
<input id="skeletonvsspritedemo-timeline" type="range" min="0" max="100" value ="0" style="color: #fff; width: 50%"></input> <div id="skeletonvsspritedemo-timeline" class="slider"></div>
</center> </center>
</div> </div>
<script src="skeletonvssprite.js"></script> <script src="skeletonvssprite.js"></script>

25
spine-ts/webgl/demos/skeletonvssprite.js
View File

@ -9,13 +9,11 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
var viewportWidth, viewportHeight; var viewportWidth, viewportHeight;
var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30; var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30;
var lastFrameTime = Date.now() / 1000; var lastFrameTime = Date.now() / 1000;
var timeSlider, atlasCheckbox; var timeSlider, timeSliderLabel, atlasCheckbox;
var playButton, timeLine, isPlaying = true, playTime = 0; var playButton, timeLine, isPlaying = true, playTime = 0;
function init () { function init () {
if (pathPrefix === undefined) pathPrefix = ""; if (pathPrefix === undefined) pathPrefix = "";
timeSlider = document.getElementById("skeletonvsspritedemo-timeslider");
atlasCheckbox = document.getElementById("skeletonvsspritedemo-atlascheckbox");
canvas = document.getElementById("skeletonvsspritedemo-canvas"); canvas = document.getElementById("skeletonvsspritedemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
@ -81,9 +79,10 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
playButton.click(playButtonUpdate); playButton.click(playButtonUpdate);
timeLine = $("#skeletonvsspritedemo-timeline"); timeLine = $("#skeletonvsspritedemo-timeline");
var timeLineUpdate = function () { timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
if (isPlaying) playButton.click();
if (!isPlaying) { if (!isPlaying) {
var time = timeLine.val() / 100; var time = timeLine.slider("value") / 100;
var animationDuration = animationState.getCurrent(0).animation.duration; var animationDuration = animationState.getCurrent(0).animation.duration;
time = animationDuration * time; time = animationDuration * time;
animationState.update(time - playTime); animationState.update(time - playTime);
@ -94,11 +93,12 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
while (frameTime > animationDuration) frameTime -= animationDuration; while (frameTime > animationDuration) frameTime -= animationDuration;
currFrame = Math.min(frames.length - 1, (frameTime / (1 / FPS)) | 0); currFrame = Math.min(frames.length - 1, (frameTime / (1 / FPS)) | 0);
} }
} }});
timeLine.on("input change", function () {
if (isPlaying) playButton.click(); timeSlider = $("#skeletonvsspritedemo-timeslider");
timeLineUpdate(); timeSlider.slider({ range: "max", min: 0, max: 200, value: 50 });
}); timeSliderLabel = $("#skeletonvsspritedemo-timeslider-label");
atlasCheckbox = document.getElementById("skeletonvsspritedemo-atlascheckbox");
} }
function render () { function render () {
@ -107,7 +107,8 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
lastFrameTime = now; lastFrameTime = now;
if (delta > 0.032) delta = 0.032; if (delta > 0.032) delta = 0.032;
delta *= (timeSlider.value / 100); delta *= (timeSlider.slider("value") / 100);
if (timeSliderLabel) timeSliderLabel.text(timeSlider.slider("value") + "%");
if (!atlasCheckbox.checked) { if (!atlasCheckbox.checked) {
if (isPlaying) { if (isPlaying) {
@ -116,7 +117,7 @@ var skeletonVsSpriteDemo = function(pathPrefix) {
while (playTime >= animationDuration) { while (playTime >= animationDuration) {
playTime -= animationDuration; playTime -= animationDuration;
} }
timeLine.val(playTime / animationDuration * 100); timeLine.slider("value", (playTime / animationDuration * 100));
animationState.update(delta); animationState.update(delta);
animationState.apply(skeleton); animationState.apply(skeleton);