UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 07:14:55 +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>
<script src="../../build/spine-webgl.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>
* { 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>
<input type="range" min="0" max="200" value ="50" id="animationmixingdemo-timeslider" style="color: #fff;"></input></br>
<div id="animationmixingdemo-timeslider"></div></br>
</div>
</center>
<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 skeleton, skeletonNoMix, state, stateNoMix, bounds;
var timeSlider;
var timeSlider, timeSliderLabel;
var lastFrameTime = Date.now() / 1000
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.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
@ -91,7 +93,8 @@ var animationMixingDemo = function(pathPrefix) {
var delta = now - lastFrameTime;
lastFrameTime = now;
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 size = bounds.size;

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

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

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

@ -1,10 +1,14 @@
<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="//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>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body>
<canvas id="meshesdemo-canvas"></canvas>
@ -20,7 +24,7 @@
<input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;" checked="true"></input>
<br>
<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>
</center>
<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);
timeLine = $("#meshesdemo-timeline");
var timeLineUpdate = function () {
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
if (isPlaying) playButton.click();
if (!isPlaying) {
var time = timeLine.val() / 100;
var time = timeLine.slider("value") / 100;
var animationDuration = state.getCurrent(0).animation.duration;
time = animationDuration * time;
state.update(time - playTime);
@ -72,11 +73,7 @@ var meshesDemo = function(pathPrefix) {
skeleton.updateWorldTransform();
playTime = time;
}
}
timeLine.on("input change", function () {
if (isPlaying) playButton.click();
timeLineUpdate();
});
}});
$("#meshesdemo-drawbonescheckbox").change(function() {
renderer.skeletonDebugRenderer.drawBones = this.checked;
@ -111,7 +108,7 @@ var meshesDemo = function(pathPrefix) {
while (playTime >= animationDuration) {
playTime -= animationDuration;
}
timeLine.val(playTime / animationDuration * 100);
timeLine.slider("value", (playTime / animationDuration * 100));
state.update(delta);
state.apply(skeleton);

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

@ -1,21 +1,25 @@
<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="//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>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
canvas { position: absolute; width: 100%; height: 100%; }
.slider { width: 50%; }
</style>
<body>
<canvas id="skeletonvsspritedemo-canvas"></canvas>
<div style="position: fixed; top: 0; width: 100%">
<center>
<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>
<input type="checkbox" id="skeletonvsspritedemo-atlascheckbox" style="color: #fff;"></input></br>
<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>
</div>
<script src="skeletonvssprite.js"></script>

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

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