mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-21 01:36:02 +08:00
[ts] Moar demo love.
This commit is contained in:
NathanSweet
parent
e8227537ba
commit
65d0014827
@ -8,22 +8,43 @@ body, html {
|
||||
canvas {
|
||||
position: absolute; width: 100% ;height: 100%;
|
||||
}
|
||||
.slider {
|
||||
.slider {
|
||||
width: 50%;
|
||||
height: 15px;
|
||||
background: #222;
|
||||
border: 1px solid #c5c5c5;
|
||||
border-radius: 3px;
|
||||
text-align: left;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.slider, .slider.filled span {
|
||||
height: 15px;
|
||||
border: 1px solid #c5c5c5;
|
||||
}
|
||||
.slider div {
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 10px;
|
||||
height: 17px;
|
||||
background: white;
|
||||
border: #000 1px solid;
|
||||
border-radius: 2px
|
||||
transform: translateZ(0);
|
||||
}
|
||||
border-radius: 2px;
|
||||
z-index: 10;
|
||||
}
|
||||
.slider.filled {
|
||||
border: 0;
|
||||
}
|
||||
.slider.filled div {
|
||||
top: -1px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.slider.filled span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: #3ea9f5;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
z-index: 5;
|
||||
}
|
||||
.slider.filled span:last-child {
|
||||
background: #222;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
@ -12,7 +12,6 @@
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.loadSliders();
|
||||
ikConstraintDemo(spineDemos.setupRendering);
|
||||
</script>
|
||||
|
||||
|
||||
@ -17,7 +17,6 @@
|
||||
</center>
|
||||
|
||||
<script>
|
||||
spineDemos.loadSliders();
|
||||
skinsDemo(spineDemos.setupRendering);
|
||||
</script>
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<button id="spritesheetdemo-roar">Roar</button>
|
||||
<button id="spritesheetdemo-jump">Jump</button>
|
||||
<br>Time multiplier
|
||||
<div id="spritesheetdemo-timeslider" class="slider"></div></br>
|
||||
<div id="spritesheetdemo-timeslider" class="slider filled"></div>
|
||||
</div>
|
||||
</center>
|
||||
|
||||
|
||||
@ -82,7 +82,7 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
|
||||
function setupInput() {
|
||||
input.addListener({
|
||||
down: function(x, y) {
|
||||
animationState.setAnimation(0, (clickAnim++ % 2 == 0) ? "jump" : "roar", false);
|
||||
animationState.setAnimation(0, (clickAnim++ % 2 == 0) ? "roar" : "jump", false);
|
||||
animationState.addAnimation(0, "walk", true, 0);
|
||||
},
|
||||
up: function(x, y) { },
|
||||
|
||||
@ -10,9 +10,9 @@
|
||||
<center>
|
||||
<div style="position: fixed; top: 0; width: 100%">
|
||||
Rotation offset
|
||||
<div id="transformdemo-rotationoffset" class="slider"></div>
|
||||
<div id="transformdemo-rotationoffset" class="slider filled"></div>
|
||||
Translation mix
|
||||
<div id="transformdemo-translationmix" class="slider"></div>
|
||||
<div id="transformdemo-translationmix" class="slider filled"></div>
|
||||
</div>
|
||||
</center>
|
||||
|
||||
|
||||
@ -40,10 +40,10 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
||||
if (assetManager.isLoadingComplete(DEMO_NAME)) {
|
||||
skeleton = loadSkeleton("spineboy");
|
||||
skeletonNoMix = new spine.Skeleton(skeleton.data);
|
||||
state = createState(0.2);
|
||||
state = createState(0.25);
|
||||
setAnimations(state, 0);
|
||||
stateNoMix = createState(0.0);
|
||||
setAnimations(stateNoMix, -0.2);
|
||||
stateNoMix = createState(0);
|
||||
setAnimations(stateNoMix, -0.25);
|
||||
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
@ -70,26 +70,27 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
||||
|
||||
function createState(mix) {
|
||||
var stateData = new spine.AnimationStateData(skeleton.data);
|
||||
stateData.setMix("walk", "jump", mix);
|
||||
stateData.setMix("jump", "walk", mix);
|
||||
stateData.setMix("walk", "idle", mix);
|
||||
stateData.setMix("idle", "walk", mix);
|
||||
var state = new spine.AnimationState(stateData);
|
||||
stateData.defaultMix = mix;
|
||||
var state = new spine.AnimationState(stateData);
|
||||
return state;
|
||||
}
|
||||
|
||||
function setAnimations(state, delay) {
|
||||
state.addAnimation(0, "idle", false, delay);
|
||||
state.addAnimation(0, "walk", false, delay);
|
||||
state.addAnimation(0, "idle", false, delay);
|
||||
state.addAnimation(0, "walk", false, delay);
|
||||
state.addAnimation(0, "walk", false, 0);
|
||||
state.addAnimation(0, "jump", false, delay);
|
||||
state.addAnimation(0, "walk", false, delay).listener = {
|
||||
function setAnimations(state, mix) {
|
||||
state.addAnimation(0, "idle", true, 0.7);
|
||||
state.addAnimation(0, "walk", true, 0.7);
|
||||
state.addAnimation(0, "idle", true, 0.8);
|
||||
state.addAnimation(0, "run", true, 0.7);
|
||||
state.addAnimation(0, "idle", true, 0.8);
|
||||
state.addAnimation(0, "walk", true, 0.7);
|
||||
state.addAnimation(0, "run", true, 0.7);
|
||||
state.addAnimation(0, "jump", false, 0.7);
|
||||
state.addAnimation(0, "run", true, mix);
|
||||
state.addAnimation(0, "jump", true, 0.7);
|
||||
state.addAnimation(0, "run", true, mix).listener = {
|
||||
event: function (trackIndex, event) {},
|
||||
complete: function (trackIndex, loopCount) {},
|
||||
start: function (trackIndex) {
|
||||
setAnimations(state, delay);
|
||||
setAnimations(state, mix);
|
||||
},
|
||||
end: function (trackIndex) {}
|
||||
};
|
||||
@ -119,8 +120,8 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
||||
var offset = bounds.offset;
|
||||
var size = bounds.size;
|
||||
|
||||
renderer.camera.position.x = offset.x + size.x - 50;
|
||||
renderer.camera.position.y = offset.y + size.y / 2 - 50;
|
||||
renderer.camera.position.x = offset.x + size.x - 50;
|
||||
renderer.camera.position.y = offset.y + size.y / 2 - 40;
|
||||
renderer.camera.viewportWidth = size.x * 2.4;
|
||||
renderer.camera.viewportHeight = size.y * 1.2;
|
||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
||||
@ -132,13 +133,13 @@ var transitionsDemo = function(loadingComplete, bgColor) {
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
skeleton.x = 0;
|
||||
skeleton.x = -60;
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
|
||||
stateNoMix.update(delta);
|
||||
stateNoMix.apply(skeletonNoMix);
|
||||
skeletonNoMix.updateWorldTransform();
|
||||
skeletonNoMix.x = size.x;
|
||||
skeletonNoMix.x = size.x + 60;
|
||||
renderer.drawSkeleton(skeletonNoMix, true);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
@ -64,18 +64,34 @@ var spineDemos = {
|
||||
};
|
||||
|
||||
spineDemos.loadSliders = function () {
|
||||
$(window).resize(function() {
|
||||
$(".slider").each(function () {
|
||||
$(this).data("slider").resized();
|
||||
});
|
||||
});
|
||||
$(".slider").each(function () {
|
||||
var div = $(this), handle = $("<div/>").appendTo(div);
|
||||
var bg = div.hasClass("before") ? $("<span/>").appendTo(div) : null;
|
||||
var bg1, bg2;
|
||||
if (div.hasClass("filled")) {
|
||||
bg1 = $("<span/>").appendTo(div)[0].style;
|
||||
bg2 = $("<span/>").appendTo(div)[0].style;
|
||||
}
|
||||
var hw = handle.width(), value = 0, object, lastX;
|
||||
handle = handle[0];
|
||||
handle = handle[0].style;
|
||||
positionHandle(0);
|
||||
function positionHandle (percent) {
|
||||
var x = Math.round((div.width() - hw - 2) * percent);
|
||||
var w = div.width();
|
||||
var x = Math.round((w - hw - 3) * percent + 1);
|
||||
if (x != lastX) {
|
||||
handle.style.transform = "translateX(" + x + "px)";
|
||||
lastX = x;
|
||||
handle.transform = "translateX(" + x + "px)";
|
||||
if (bg1) {
|
||||
var w1 = x + hw / 2;
|
||||
bg1.width = w1 + "px";
|
||||
bg2.width = (w - w1) + "px";
|
||||
bg2.left = w1 + "px";
|
||||
}
|
||||
}
|
||||
if (bg) bg.css("width", x + hw / 2);
|
||||
value = percent;
|
||||
}
|
||||
function mouseEvent (e) {
|
||||
@ -95,7 +111,11 @@ var spineDemos = {
|
||||
});
|
||||
div.data("slider", object = {
|
||||
set: positionHandle,
|
||||
get: function () { return value; }
|
||||
get: function () { return value; },
|
||||
resized: function () {
|
||||
lastX = null;
|
||||
positionHandle(value);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -69,7 +69,7 @@ module spine.webgl {
|
||||
var logoHeight = this.logo.getImage().height;
|
||||
var spinnerWidth = this.spinner.getImage().width;
|
||||
var spinnerHeight = this.spinner.getImage().height;
|
||||
var margin = 15;
|
||||
var margin = 25;
|
||||
var height = logoHeight + margin + spinnerHeight;
|
||||
|
||||
renderer.begin();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user