diff --git a/spine-ts/webgl/demos/animationmixing.html b/spine-ts/webgl/demos/animationmixing.html index 38aac4bac..44d138037 100644 --- a/spine-ts/webgl/demos/animationmixing.html +++ b/spine-ts/webgl/demos/animationmixing.html @@ -1,17 +1,21 @@ + + +
Time Multiplier -
+

diff --git a/spine-ts/webgl/demos/animationmixing.js b/spine-ts/webgl/demos/animationmixing.js index bfd368c00..15968dc93 100644 --- a/spine-ts/webgl/demos/animationmixing.js +++ b/spine-ts/webgl/demos/animationmixing.js @@ -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; diff --git a/spine-ts/webgl/demos/imagesequences.html b/spine-ts/webgl/demos/imagesequences.html index 9d6027e13..004a29a35 100644 --- a/spine-ts/webgl/demos/imagesequences.html +++ b/spine-ts/webgl/demos/imagesequences.html @@ -1,10 +1,14 @@ + + + @@ -12,7 +16,7 @@

- +
diff --git a/spine-ts/webgl/demos/imagesequences.js b/spine-ts/webgl/demos/imagesequences.js index 41300a603..ef9ab7b83 100644 --- a/spine-ts/webgl/demos/imagesequences.js +++ b/spine-ts/webgl/demos/imagesequences.js @@ -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); diff --git a/spine-ts/webgl/demos/meshes.html b/spine-ts/webgl/demos/meshes.html index 9dd96d9fc..eddf1c7ce 100644 --- a/spine-ts/webgl/demos/meshes.html +++ b/spine-ts/webgl/demos/meshes.html @@ -1,10 +1,14 @@ + + + @@ -20,7 +24,7 @@
- +
diff --git a/spine-ts/webgl/demos/meshes.js b/spine-ts/webgl/demos/meshes.js index 9db805768..17b3dee1a 100644 --- a/spine-ts/webgl/demos/meshes.js +++ b/spine-ts/webgl/demos/meshes.js @@ -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); diff --git a/spine-ts/webgl/demos/skeletalvssprite.html b/spine-ts/webgl/demos/skeletalvssprite.html index 40a15db8d..007308678 100644 --- a/spine-ts/webgl/demos/skeletalvssprite.html +++ b/spine-ts/webgl/demos/skeletalvssprite.html @@ -1,21 +1,25 @@ + + +
Time Multiplier -
+

Show Atlas
- +
diff --git a/spine-ts/webgl/demos/skeletonvssprite.js b/spine-ts/webgl/demos/skeletonvssprite.js index bda54b6d2..83390a65a 100644 --- a/spine-ts/webgl/demos/skeletonvssprite.js +++ b/spine-ts/webgl/demos/skeletonvssprite.js @@ -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);