[ts] Various demo improvements.

spine-ts/webgl/demos/skins.html

@@ -10,7 +10,8 @@
 <center>
 <div style="position: fixed; top: 0; width: 100%">
 	<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>
 </center>

spine-ts/webgl/demos/skins.js

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

spine-ts/webgl/demos/spritesheet.html

@@ -9,7 +9,9 @@
 <canvas id="spritesheetdemo-canvas"></canvas>
 <center>
 <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>
 </center>

spine-ts/webgl/demos/spritesheet.js

@@ -81,7 +81,7 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
 
 	function setupInput() {
 		input.addListener({
-			down: function(x, y) { 
+			down: function(x, y) {
 				animationState.setAnimation(0, (clickAnim++ % 2 == 0) ? "jump" : "roar", false);
 				animationState.addAnimation(0, "walk", true, 0);
 			},
@@ -89,6 +89,14 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
 			moved: 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 () {

spine-ts/webgl/demos/tank.js

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