UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 01:36:02 +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);
function init () {
timeSlider = $("#animationmixingdemo-timeslider");
timeSlider.slider({ range: "max", min: 0, max: 200, value: 50 });
timeSlider = $("#animationmixingdemo-timeslider").data("slider");
timeSlider.set(0.5);
timeSliderLabel = $("#animationmixingdemo-timeslider-label");
canvas = document.getElementById("animationmixingdemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
@ -109,8 +109,8 @@ var animationMixingDemo = function(loadingComplete, bgColor) {
function render () {
timeKeeper.update();
var delta = timeKeeper.delta * (timeSlider.slider("value") / 100);
if (timeSliderLabel) timeSliderLabel.text(timeSlider.slider("value") + "%");
var delta = timeKeeper.delta * timeSlider.get();
if (timeSliderLabel) timeSliderLabel.text(Math.round(timeSlider.get() * 100) + "%");
var offset = bounds.offset;
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.addClass("pause");
timeLine = $("#imagesequencesdemo-timeline");
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
timeLine = $("#imagesequencesdemo-timeline").data("slider");
timeLine.changed = function (percent) {
if (isPlaying) playButton.click();
if (!isPlaying) {
var active = skeletons[activeSkeleton];
var time = timeLine.slider("value") / 100;
var animationDuration = active.state.getCurrent(0).animation.duration;
time = animationDuration * time;
var time = animationDuration * percent;
active.state.update(time - active.playTime);
active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform();
active.playTime = time;
}
}});
};
var list = $("#imagesequencesdemo-active-skeleton");
for (var skeletonName in skeletons) {
@ -83,7 +82,7 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
activeSkeleton = $("#imagesequencesdemo-active-skeleton option:selected").text();
var active = skeletons[activeSkeleton];
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) {
active.playTime -= animationDuration;
}
timeLine.slider("value", (active.playTime / animationDuration * 100));
timeLine.set(active.playTime / animationDuration);
state.update(delta);
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.addClass("pause");
timeLine = $("#meshesdemo-timeline");
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
timeLine = $("#meshesdemo-timeline").data("slider");
timeLine.changed = function (percent) {
if (isPlaying) playButton.click();
if (!isPlaying) {
var active = skeletons[activeSkeleton];
var time = timeLine.slider("value") / 100;
var animationDuration = active.state.getCurrent(0).animation.duration;
time = animationDuration * time;
var time = animationDuration * percent;
active.state.update(time - active.playTime);
active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform();
active.playTime = time;
}
}});
};
var list = $("#meshesdemo-active-skeleton");
for (var skeletonName in skeletons) {
@ -83,7 +82,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
activeSkeleton = $("#meshesdemo-active-skeleton option:selected").text();
var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration;
timeLine.slider("value", (active.playTime / animationDuration * 100));
timeLine.set(active.playTime / animationDuration);
})
renderer.skeletonDebugRenderer.drawBones = false;
@ -154,7 +153,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
while (active.playTime >= animationDuration) {
active.playTime -= animationDuration;
}
timeLine.slider("value", (active.playTime / animationDuration * 100));
timeLine.set(active.playTime / animationDuration);
state.update(delta);
state.apply(skeleton);

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

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

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

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

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

@ -13,7 +13,7 @@ var transformConstraintDemo = function(loadingComplete, bgColor) {
var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
var lastRotation = 0;
var rotationOffset, mix, lastOffset = 0, lastMix = 50;
var mix, lastOffset = 0, lastMix = 0.5;
var DEMO_NAME = "TransformConstraintDemo";
@ -75,24 +75,27 @@ var transformConstraintDemo = function(loadingComplete, bgColor) {
}
function setupUI() {
rotationOffset = $("#transformdemo-rotationoffset");
rotationOffset.slider({ range: "max", min: -180, max: 180, value: 0, slide: function () {
var val = rotationOffset.slider("value");
var rotationOffset = $("#transformdemo-rotationoffset").data("slider");
rotationOffset.changed = function (percent) {
var val = percent * 360 - 180;
var delta = val - lastOffset;
lastOffset = val;
skeleton.findTransformConstraint("wheel2").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");
translationMix.slider({ range: "max", min: 0, max: 100, value: 50, slide: function () {
var val = translationMix.slider("value");
var translationMix = $("#transformdemo-translationmix").data("slider");
translationMix.set(0.5);
translationMix.changed = function (percent) {
var val = percent;
var delta = val - lastMix;
lastMix = val;
skeleton.findTransformConstraint("wheel1").translateMix += delta / 100;
$("#transformdemo-translationmix-label").text(val + "%");
}});
skeleton.findTransformConstraint("wheel1").translateMix += delta;
$("#transformdemo-translationmix-label").text(Math.round(val * 100) + "%");
};
$("#transformdemo-translationmix-label").text("50%");
}
function setupInput() {
@ -165,7 +168,7 @@ var transformConstraintDemo = function(loadingComplete, bgColor) {
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]);
gl.lineWidth(2);

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

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