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] Moar demo love.

Browse Source
This commit is contained in:
NathanSweet 2016-09-04 23:22:47 +02:00
parent e8227537ba
commit 65d0014827
9 changed files with 82 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
spine-ts/webgl/demos/demos.css
View File

@ -10,20 +10,41 @@ canvas {
} }
.slider { .slider {
width: 50%; width: 50%;
height: 15px;
background: #222;
border: 1px solid #c5c5c5;
border-radius: 3px; border-radius: 3px;
text-align: left; text-align: left;
transform: translateZ(0); transform: translateZ(0);
} }
.slider, .slider.filled span {
height: 15px;
border: 1px solid #c5c5c5;
}
.slider div { .slider div {
position: relative; position: absolute;
top: -2px; top: -2px;
width: 10px; width: 10px;
height: 17px; height: 17px;
background: white; background: white;
border: #000 1px solid; border: #000 1px solid;
border-radius: 2px border-radius: 2px;
transform: translateZ(0); 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;
} }

1
spine-ts/webgl/demos/ikconstraint.html
View File

@ -12,7 +12,6 @@
</center> </center>
<script> <script>
spineDemos.loadSliders();
ikConstraintDemo(spineDemos.setupRendering); ikConstraintDemo(spineDemos.setupRendering);
</script> </script>

1
spine-ts/webgl/demos/skins.html
View File

@ -17,7 +17,6 @@
</center> </center>
<script> <script>
spineDemos.loadSliders();
skinsDemo(spineDemos.setupRendering); skinsDemo(spineDemos.setupRendering);
</script> </script>

2
spine-ts/webgl/demos/spritesheet.html
View File

@ -12,7 +12,7 @@
<button id="spritesheetdemo-roar">Roar</button> <button id="spritesheetdemo-roar">Roar</button>
<button id="spritesheetdemo-jump">Jump</button> <button id="spritesheetdemo-jump">Jump</button>
<br>Time multiplier <br>Time multiplier
<div id="spritesheetdemo-timeslider" class="slider"></div></br> <div id="spritesheetdemo-timeslider" class="slider filled"></div>
</div> </div>
</center> </center>

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

@ -82,7 +82,7 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
function setupInput() { function setupInput() {
input.addListener({ input.addListener({
down: function(x, y) { 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); animationState.addAnimation(0, "walk", true, 0);
}, },
up: function(x, y) { }, up: function(x, y) { },

4
spine-ts/webgl/demos/transformconstraint.html
View File

@ -10,9 +10,9 @@
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div style="position: fixed; top: 0; width: 100%">
Rotation offset Rotation offset
<div id="transformdemo-rotationoffset" class="slider"></div> <div id="transformdemo-rotationoffset" class="slider filled"></div>
Translation mix Translation mix
<div id="transformdemo-translationmix" class="slider"></div> <div id="transformdemo-translationmix" class="slider filled"></div>
</div> </div>
</center> </center>

39
spine-ts/webgl/demos/transitions.js
View File

@ -40,10 +40,10 @@ var transitionsDemo = function(loadingComplete, bgColor) {
if (assetManager.isLoadingComplete(DEMO_NAME)) { if (assetManager.isLoadingComplete(DEMO_NAME)) {
skeleton = loadSkeleton("spineboy"); skeleton = loadSkeleton("spineboy");
skeletonNoMix = new spine.Skeleton(skeleton.data); skeletonNoMix = new spine.Skeleton(skeleton.data);
state = createState(0.2); state = createState(0.25);
setAnimations(state, 0); setAnimations(state, 0);
stateNoMix = createState(0.0); stateNoMix = createState(0);
setAnimations(stateNoMix, -0.2); setAnimations(stateNoMix, -0.25);
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
@ -70,26 +70,27 @@ var transitionsDemo = function(loadingComplete, bgColor) {
function createState(mix) { function createState(mix) {
var stateData = new spine.AnimationStateData(skeleton.data); var stateData = new spine.AnimationStateData(skeleton.data);
stateData.setMix("walk", "jump", mix); stateData.defaultMix = mix;
stateData.setMix("jump", "walk", mix);
stateData.setMix("walk", "idle", mix);
stateData.setMix("idle", "walk", mix);
var state = new spine.AnimationState(stateData); var state = new spine.AnimationState(stateData);
return state; return state;
} }
function setAnimations(state, delay) { function setAnimations(state, mix) {
state.addAnimation(0, "idle", false, delay); state.addAnimation(0, "idle", true, 0.7);
state.addAnimation(0, "walk", false, delay); state.addAnimation(0, "walk", true, 0.7);
state.addAnimation(0, "idle", false, delay); state.addAnimation(0, "idle", true, 0.8);
state.addAnimation(0, "walk", false, delay); state.addAnimation(0, "run", true, 0.7);
state.addAnimation(0, "walk", false, 0); state.addAnimation(0, "idle", true, 0.8);
state.addAnimation(0, "jump", false, delay); state.addAnimation(0, "walk", true, 0.7);
state.addAnimation(0, "walk", false, delay).listener = { 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) {}, event: function (trackIndex, event) {},
complete: function (trackIndex, loopCount) {}, complete: function (trackIndex, loopCount) {},
start: function (trackIndex) { start: function (trackIndex) {
setAnimations(state, delay); setAnimations(state, mix);
}, },
end: function (trackIndex) {} end: function (trackIndex) {}
}; };
@ -120,7 +121,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
var size = bounds.size; var size = bounds.size;
renderer.camera.position.x = offset.x + size.x - 50; renderer.camera.position.x = offset.x + size.x - 50;
renderer.camera.position.y = offset.y + size.y / 2 - 50; renderer.camera.position.y = offset.y + size.y / 2 - 40;
renderer.camera.viewportWidth = size.x * 2.4; renderer.camera.viewportWidth = size.x * 2.4;
renderer.camera.viewportHeight = size.y * 1.2; renderer.camera.viewportHeight = size.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.webgl.ResizeMode.Fit);
@ -132,13 +133,13 @@ var transitionsDemo = function(loadingComplete, bgColor) {
state.update(delta); state.update(delta);
state.apply(skeleton); state.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
skeleton.x = 0; skeleton.x = -60;
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
stateNoMix.update(delta); stateNoMix.update(delta);
stateNoMix.apply(skeletonNoMix); stateNoMix.apply(skeletonNoMix);
skeletonNoMix.updateWorldTransform(); skeletonNoMix.updateWorldTransform();
skeletonNoMix.x = size.x; skeletonNoMix.x = size.x + 60;
renderer.drawSkeleton(skeletonNoMix, true); renderer.drawSkeleton(skeletonNoMix, true);
renderer.end(); renderer.end();
} }

40
spine-ts/webgl/demos/utils.js
View File

@ -64,18 +64,34 @@ var spineDemos = {
}; };
spineDemos.loadSliders = function () { spineDemos.loadSliders = function () {
$(window).resize(function() {
$(".slider").each(function () {
$(this).data("slider").resized();
});
});
$(".slider").each(function () { $(".slider").each(function () {
var div = $(this), handle = $("<div/>").appendTo(div); var div = $(this), handle = $("<div/>").appendTo(div);
var bg = div.hasClass("before") ? $("<span/>").appendTo(div) : null; var bg1, bg2;
var hw = handle.width(), value = 0, object, lastX; if (div.hasClass("filled")) {
handle = handle[0]; bg1 = $("<span/>").appendTo(div)[0].style;
function positionHandle (percent) { bg2 = $("<span/>").appendTo(div)[0].style;
var x = Math.round((div.width() - hw - 2) * percent); }
if (x != lastX) { var hw = handle.width(), value = 0, object, lastX;
handle.style.transform = "translateX(" + x + "px)"; handle = handle[0].style;
lastX = x; positionHandle(0);
function positionHandle (percent) {
var w = div.width();
var x = Math.round((w - hw - 3) * percent + 1);
if (x != lastX) {
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; value = percent;
} }
function mouseEvent (e) { function mouseEvent (e) {
@ -95,7 +111,11 @@ var spineDemos = {
}); });
div.data("slider", object = { div.data("slider", object = {
set: positionHandle, set: positionHandle,
get: function () { return value; } get: function () { return value; },
resized: function () {
lastX = null;
positionHandle(value);
}
}); });
}); });
} }

2
spine-ts/webgl/src/LoadingScreen.ts
View File

@ -69,7 +69,7 @@ module spine.webgl {
var logoHeight = this.logo.getImage().height; var logoHeight = this.logo.getImage().height;
var spinnerWidth = this.spinner.getImage().width; var spinnerWidth = this.spinner.getImage().width;
var spinnerHeight = this.spinner.getImage().height; var spinnerHeight = this.spinner.getImage().height;
var margin = 15; var margin = 25;
var height = logoHeight + margin + spinnerHeight; var height = logoHeight + margin + spinnerHeight;
renderer.begin(); renderer.begin();