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

[ts] New sliders.

Browse Source
This commit is contained in:
NathanSweet 2016-09-03 12:08:49 +02:00
parent 968b020888
commit e05eaef52f
7 changed files with 50 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,8 +12,8 @@ var animationMixingDemo = function(loadingComplete, bgColor) {
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"); timeSlider = $("#animationmixingdemo-timeslider").data("slider");
timeSlider.slider({ range: "max", min: 0, max: 200, value: 50 }); timeSlider.set(0.5);
timeSliderLabel = $("#animationmixingdemo-timeslider-label"); 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;
@ -109,8 +109,8 @@ var animationMixingDemo = function(loadingComplete, bgColor) {
function render () { function render () {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta * (timeSlider.slider("value") / 100); var delta = timeKeeper.delta * timeSlider.get();
if (timeSliderLabel) timeSliderLabel.text(timeSlider.slider("value") + "%"); if (timeSliderLabel) timeSliderLabel.text(Math.round(timeSlider.get() * 100) + "%");
var offset = bounds.offset; var offset = bounds.offset;
var size = bounds.size; var size = bounds.size;

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

@ -57,20 +57,19 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
playButton.click(playButtonUpdate); playButton.click(playButtonUpdate);
playButton.addClass("pause"); playButton.addClass("pause");
timeLine = $("#imagesequencesdemo-timeline"); timeLine = $("#imagesequencesdemo-timeline").data("slider");
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () { timeLine.changed = function (percent) {
if (isPlaying) playButton.click(); if (isPlaying) playButton.click();
if (!isPlaying) { if (!isPlaying) {
var active = skeletons[activeSkeleton]; var active = skeletons[activeSkeleton];
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; var time = animationDuration * percent;
active.state.update(time - active.playTime); active.state.update(time - active.playTime);
active.state.apply(active.skeleton); active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform(); active.skeleton.updateWorldTransform();
active.playTime = time; active.playTime = time;
} }
}}); };
var list = $("#imagesequencesdemo-active-skeleton"); var list = $("#imagesequencesdemo-active-skeleton");
for (var skeletonName in skeletons) { for (var skeletonName in skeletons) {
@ -83,7 +82,7 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
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.slider("value", (active.playTime / animationDuration * 100)); timeLine.set(active.playTime / animationDuration);
}) })
} }
@ -160,7 +159,7 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
while (active.playTime >= animationDuration) { while (active.playTime >= animationDuration) {
active.playTime -= animationDuration; active.playTime -= animationDuration;
} }
timeLine.slider("value", (active.playTime / animationDuration * 100)); timeLine.set(active.playTime / animationDuration);
state.update(delta); state.update(delta);
state.apply(skeleton); state.apply(skeleton);

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

@ -57,20 +57,19 @@ var meshesDemo = function(loadingComplete, bgColor) {
playButton.click(playButtonUpdate); playButton.click(playButtonUpdate);
playButton.addClass("pause"); playButton.addClass("pause");
timeLine = $("#meshesdemo-timeline"); timeLine = $("#meshesdemo-timeline").data("slider");
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () { timeLine.changed = function (percent) {
if (isPlaying) playButton.click(); if (isPlaying) playButton.click();
if (!isPlaying) { if (!isPlaying) {
var active = skeletons[activeSkeleton]; var active = skeletons[activeSkeleton];
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; var time = animationDuration * percent;
active.state.update(time - active.playTime); active.state.update(time - active.playTime);
active.state.apply(active.skeleton); active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform(); active.skeleton.updateWorldTransform();
active.playTime = time; active.playTime = time;
} }
}}); };
var list = $("#meshesdemo-active-skeleton"); var list = $("#meshesdemo-active-skeleton");
for (var skeletonName in skeletons) { for (var skeletonName in skeletons) {
@ -83,7 +82,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
activeSkeleton = $("#meshesdemo-active-skeleton option:selected").text(); activeSkeleton = $("#meshesdemo-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.slider("value", (active.playTime / animationDuration * 100)); timeLine.set(active.playTime / animationDuration);
}) })
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
@ -154,7 +153,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
while (active.playTime >= animationDuration) { while (active.playTime >= animationDuration) {
active.playTime -= animationDuration; active.playTime -= animationDuration;
} }
timeLine.slider("value", (active.playTime / animationDuration * 100)); timeLine.set(active.playTime / animationDuration);
state.update(delta); state.update(delta);
state.apply(skeleton); state.apply(skeleton);

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

@ -75,8 +75,8 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
} }
function setupUI() { function setupUI() {
timeSlider = $("#spritesheetdemo-timeslider"); timeSlider = $("#spritesheetdemo-timeslider").data("slider");
timeSlider.slider({ range: "max", min: 0, max: 200, value: 50 }); timeSlider.set(0.5);
timeSliderLabel = $("#spritesheetdemo-timeslider-label"); timeSliderLabel = $("#spritesheetdemo-timeslider-label");
} }
@ -113,8 +113,8 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
delta *= (timeSlider.slider("value") / 100); delta *= timeSlider.get();
if (timeSliderLabel) timeSliderLabel.text(timeSlider.slider("value") + "%"); if (timeSliderLabel) timeSliderLabel.text(Math.round(timeSlider.get() * 100) + "%");
var animationDuration = animationState.getCurrent(0).animation.duration; var animationDuration = animationState.getCurrent(0).animation.duration;
playTime += delta; playTime += delta;

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

@ -70,19 +70,18 @@ var tankDemo = function(loadingComplete, bgColor) {
playButton.click(playButtonUpdate); playButton.click(playButtonUpdate);
playButton.addClass("pause"); playButton.addClass("pause");
timeLine = $("#tankdemo-timeline"); timeLine = $("#tankdemo-timeline").data("slider");
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () { timeLine.changed = function (percent) {
if (isPlaying) playButton.click(); if (isPlaying) playButton.click();
if (!isPlaying) { if (!isPlaying) {
var time = timeLine.slider("value") / 100;
var animationDuration = state.getCurrent(0).animation.duration; var animationDuration = state.getCurrent(0).animation.duration;
time = animationDuration * time; var time = animationDuration * percent;
state.update(time - playTime); state.update(time - playTime);
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
playTime = time; playTime = time;
} }
}}); };
var checkbox = $("#tankdemo-drawbones"); var checkbox = $("#tankdemo-drawbones");
renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawPaths = false;
@ -100,10 +99,9 @@ var tankDemo = function(loadingComplete, bgColor) {
if (isPlaying) { if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration; var animationDuration = state.getCurrent(0).animation.duration;
playTime += delta; playTime += delta;
while (playTime >= animationDuration) { while (playTime >= animationDuration)
playTime -= animationDuration; playTime -= animationDuration;
} timeLine.set(playTime / animationDuration);
timeLine.slider("value", (playTime / animationDuration * 100));
state.update(delta); state.update(delta);
state.apply(skeleton); state.apply(skeleton);

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

@ -13,7 +13,7 @@ var transformConstraintDemo = function(loadingComplete, bgColor) {
var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"]; var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(); var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
var lastRotation = 0; var lastRotation = 0;
var rotationOffset, mix, lastOffset = 0, lastMix = 50; var mix, lastOffset = 0, lastMix = 0.5;
var DEMO_NAME = "TransformConstraintDemo"; var DEMO_NAME = "TransformConstraintDemo";
@ -75,24 +75,27 @@ var transformConstraintDemo = function(loadingComplete, bgColor) {
} }
function setupUI() { function setupUI() {
rotationOffset = $("#transformdemo-rotationoffset"); var rotationOffset = $("#transformdemo-rotationoffset").data("slider");
rotationOffset.slider({ range: "max", min: -180, max: 180, value: 0, slide: function () { rotationOffset.changed = function (percent) {
var val = rotationOffset.slider("value"); var val = percent * 360 - 180;
var delta = val - lastOffset; var delta = val - lastOffset;
lastOffset = val; lastOffset = val;
skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta; skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta; skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
$("#transformdemo-rotationoffset-label").text(val + "°"); $("#transformdemo-rotationoffset-label").text(Math.round(val) + "°");
}}); };
$("#transformdemo-rotationoffset-label").text("0°");
translationMix = $("#transformdemo-translationmix"); var translationMix = $("#transformdemo-translationmix").data("slider");
translationMix.slider({ range: "max", min: 0, max: 100, value: 50, slide: function () { translationMix.set(0.5);
var val = translationMix.slider("value"); translationMix.changed = function (percent) {
var val = percent;
var delta = val - lastMix; var delta = val - lastMix;
lastMix = val; lastMix = val;
skeleton.findTransformConstraint("wheel1").translateMix += delta / 100; skeleton.findTransformConstraint("wheel1").translateMix += delta;
$("#transformdemo-translationmix-label").text(val + "%"); $("#transformdemo-translationmix-label").text(Math.round(val * 100) + "%");
}}); };
$("#transformdemo-translationmix-label").text("50%");
} }
function setupInput() { function setupInput() {

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

@ -86,19 +86,18 @@ var vineDemo = function(loadingComplete, bgColor) {
playButton.click(playButtonUpdate); playButton.click(playButtonUpdate);
playButton.addClass("pause"); playButton.addClass("pause");
timeLine = $("#vinedemo-timeline"); timeLine = $("#vinedemo-timeline").data("slider");
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () { timeLine.changed = function (percent) {
if (isPlaying) playButton.click(); if (isPlaying) playButton.click();
if (!isPlaying) { if (!isPlaying) {
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 * percent;
state.update(time - playTime); state.update(time - playTime);
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
playTime = time; playTime = time;
} }
}}); };
renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
@ -160,7 +159,7 @@ var vineDemo = function(loadingComplete, bgColor) {
while (playTime >= animationDuration) { while (playTime >= animationDuration) {
playTime -= animationDuration; playTime -= animationDuration;
} }
timeLine.slider("value", (playTime / animationDuration * 100)); timeLine.set(playTime / animationDuration);
state.update(delta); state.update(delta);
state.apply(skeleton); state.apply(skeleton);