[ts] Moar demo love.

spine-ts/webgl/demos/demos.css

@@ -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;
+}

spine-ts/webgl/demos/ikconstraint.html

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

spine-ts/webgl/demos/skins.html

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

spine-ts/webgl/demos/spritesheet.html

@@ -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>
 

spine-ts/webgl/demos/spritesheet.js

@@ -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) { },

spine-ts/webgl/demos/transformconstraint.html

@@ -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>
 

spine-ts/webgl/demos/transitions.js

@@ -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();		
 	}

spine-ts/webgl/demos/utils.js

@@ -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);
+				}
 			});
 		});
 	}

spine-ts/webgl/src/LoadingScreen.ts

@@ -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();