UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Various demo improvements.

Browse Source
This commit is contained in:
NathanSweet 2016-09-04 17:14:12 +02:00
parent cf08ed3293
commit e8227537ba
5 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,8 @@
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div style="position: fixed; top: 0; width: 100%">
<select id="skinsdemo-active-skin"></select></br> <select id="skinsdemo-active-skin"></select></br>
<button id="skinsdemo-randomizeattachments" value="Random Skin">Random Attachments</button> <button id="skinsdemo-randomizeattachments">Random Attachments</button>
<button id="skinsdemo-swingsword">Swing Sword</button>
<div><input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input> Randomize skin</div> <div><input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input> Randomize skin</div>
</div> </div>
</center> </center>

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

@ -3,7 +3,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
var skeleton, state, offset, bounds; var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen;
var playButton, timeLine, isPlaying = true, playTime = 0; var playButton, timeLine, isPlaying = true, playTime = 0;
var randomizeSkins, lastSkinChange = Date.now() / 1000; var randomizeSkins, lastSkinChange = Date.now() / 1000, clickAnim = 0;
var DEMO_NAME = "SkinsDemo"; var DEMO_NAME = "SkinsDemo";
@ -61,7 +61,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
function setupInput (){ function setupInput (){
input.addListener({ input.addListener({
down: function(x, y) { down: function(x, y) {
state.setAnimation(5, Math.random() > 0.5 ? "meleeSwing1" : "meleeSwing2", false, 0); swingSword();
}, },
up: function(x, y) { }, up: function(x, y) { },
dragged: function(x, y) { }, dragged: function(x, y) { },
@ -133,10 +133,8 @@ var skinsDemo = function(loadingComplete, bgColor) {
randomizeSkins.checked = false; randomizeSkins.checked = false;
}); });
var randomAttachments = $("#skinsdemo-randomizeattachments"); $("#skinsdemo-randomizeattachments").click(randomizeAttachments);
randomAttachments.click(function() { $("#skinsdemo-swingsword").click(swingSword);
randomizeAttachments();
});
randomizeSkins = document.getElementById("skinsdemo-randomizeskins"); randomizeSkins = document.getElementById("skinsdemo-randomizeskins");
} }
@ -148,7 +146,11 @@ var skinsDemo = function(loadingComplete, bgColor) {
slot.setAttachment(weapon); slot.setAttachment(weapon);
} }
function randomizeSkin() { function swingSword () {
state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0);
}
function randomizeSkin () {
var result; var result;
var count = 0; var count = 0;
for (var skin in skeleton.data.skins) { for (var skin in skeleton.data.skins) {
@ -163,7 +165,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
}).prop("selected", true); }).prop("selected", true);
} }
function randomizeAttachments() { function randomizeAttachments () {
var skins = []; var skins = [];
for (var skin in skeleton.data.skins) { for (var skin in skeleton.data.skins) {
skin = skeleton.data.skins[skin]; skin = skeleton.data.skins[skin];

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

@ -9,7 +9,9 @@
<canvas id="spritesheetdemo-canvas"></canvas> <canvas id="spritesheetdemo-canvas"></canvas>
<center> <center>
<div style="position: fixed; top: 0; width: 100%"> <div style="position: fixed; top: 0; width: 100%">
Time multiplier <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"></div></br>
</div> </div>
</center> </center>

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

@ -81,7 +81,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) ? "jump" : "roar", false);
animationState.addAnimation(0, "walk", true, 0); animationState.addAnimation(0, "walk", true, 0);
}, },
@ -89,6 +89,14 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
moved: function(x, y) { }, moved: function(x, y) { },
dragged: function(x, y) { } dragged: function(x, y) { }
}); });
$("#spritesheetdemo-roar").click(function () {
animationState.setAnimation(0, "roar", false);
animationState.addAnimation(0, "walk", true, 0);
});
$("#spritesheetdemo-jump").click(function () {
animationState.setAnimation(0, "jump", false);
animationState.addAnimation(0, "walk", true, 0);
});
} }
function resize () { function resize () {

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

@ -86,10 +86,9 @@ var tankDemo = function(loadingComplete, bgColor) {
} }
}; };
var checkbox = $("#tankdemo-drawbones");
renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
checkbox.change(function() { $("#tankdemo-drawbones").change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked; renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked; renderer.skeletonDebugRenderer.drawBones = this.checked;
}); });