[ts] Finished porting new AnimationState, works as intended

spine-libgdx/spine-libgdx-tests/src/com/esotericsoftware/spine/Sandbox.java

@@ -44,15 +44,15 @@ import com.badlogic.gdx.graphics.g2d.TextureAtlas;
  * runtimes.
  */
 public class Sandbox extends ApplicationAdapter {
-	static final String ATLAS = "../../examples/tank/export/tank.atlas";
+	static final String ATLAS = "../../examples/raptor/export/raptor.atlas";
-	static final String JSON = "../../examples/tank/export/tank.json";
+	static final String JSON = "../../examples/raptor/export/raptor.json";
-	static final float scale = 0.3f;
+	static final float scale = 0.5f;
-	static final float X = 400;
+	static final float X = 0;
-	static final float Y = 500;
+	static final float Y = 0;
-	static final String ANIMATION = "drive";
+	static final String ANIMATION = "walk";
-	static final float ANIMATION_OFFSET = 0.5f;
+	static final float ANIMATION_OFFSET = 0.0f;
-	static final boolean ANIMATION_UPDATE = false;
+	static final boolean ANIMATION_UPDATE = true;
-	static final boolean Y_DOWN = true;
+	static final boolean Y_DOWN = false;
 	static final boolean DRAW_DEBUG = false;
 	
 	OrthographicCamera camera;
@@ -85,7 +85,11 @@ public class Sandbox extends ApplicationAdapter {
 
 		AnimationStateData stateData = new AnimationStateData(skeletonData);
 		state = new AnimationState(stateData);
-		if (ANIMATION != null) state.setAnimation(0, ANIMATION, true);
+		if (ANIMATION != null) {
+			stateData.setMix("walk", "Jump", 0.5f);
+			state.setAnimation(0, ANIMATION, true);
+			state.addAnimation(0, "Jump", false, 0);
+		}
 		if (ANIMATION_OFFSET != 0) {
 			state.update(ANIMATION_OFFSET);
 			state.apply(skeleton);
@@ -97,7 +101,9 @@ public class Sandbox extends ApplicationAdapter {
 		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
 
 		if (ANIMATION_UPDATE) {
-			state.update(Gdx.graphics.getDeltaTime());
+			float delta = Gdx.graphics.getDeltaTime();
+			delta = 0.016f;
+			state.update(delta);
 			state.apply(skeleton);			
 		}
 		skeleton.updateWorldTransform();

spine-ts/build/spine-all.js

@@ -5286,7 +5286,7 @@ var spine;
 			return Math.sin(degrees * MathUtils.degRad);
 		};
 		MathUtils.signum = function (value) {
-			return value >= 0 ? 1 : -1;
+			return value > 0 ? 1 : value < 0 ? -1 : 0;
 		};
 		MathUtils.toInt = function (x) {
 			return x > 0 ? Math.floor(x) : Math.ceil(x);

spine-ts/build/spine-canvas.js

@@ -5286,7 +5286,7 @@ var spine;
 			return Math.sin(degrees * MathUtils.degRad);
 		};
 		MathUtils.signum = function (value) {
-			return value >= 0 ? 1 : -1;
+			return value > 0 ? 1 : value < 0 ? -1 : 0;
 		};
 		MathUtils.toInt = function (x) {
 			return x > 0 ? Math.floor(x) : Math.ceil(x);

spine-ts/build/spine-core.js

@@ -5109,7 +5109,7 @@ var spine;
 			return Math.sin(degrees * MathUtils.degRad);
 		};
 		MathUtils.signum = function (value) {
-			return value >= 0 ? 1 : -1;
+			return value > 0 ? 1 : value < 0 ? -1 : 0;
 		};
 		MathUtils.toInt = function (x) {
 			return x > 0 ? Math.floor(x) : Math.ceil(x);

spine-ts/build/spine-threejs.js

@@ -5109,7 +5109,7 @@ var spine;
 			return Math.sin(degrees * MathUtils.degRad);
 		};
 		MathUtils.signum = function (value) {
-			return value >= 0 ? 1 : -1;
+			return value > 0 ? 1 : value < 0 ? -1 : 0;
 		};
 		MathUtils.toInt = function (x) {
 			return x > 0 ? Math.floor(x) : Math.ceil(x);

spine-ts/build/spine-webgl.js

@@ -5109,7 +5109,7 @@ var spine;
 			return Math.sin(degrees * MathUtils.degRad);
 		};
 		MathUtils.signum = function (value) {
-			return value >= 0 ? 1 : -1;
+			return value > 0 ? 1 : value < 0 ? -1 : 0;
 		};
 		MathUtils.toInt = function (x) {
 			return x > 0 ? Math.floor(x) : Math.ceil(x);

spine-ts/build/spine-widget.js

@@ -5109,7 +5109,7 @@ var spine;
 			return Math.sin(degrees * MathUtils.degRad);
 		};
 		MathUtils.signum = function (value) {
-			return value >= 0 ? 1 : -1;
+			return value > 0 ? 1 : value < 0 ? -1 : 0;
 		};
 		MathUtils.toInt = function (x) {
 			return x > 0 ? Math.floor(x) : Math.ceil(x);

spine-ts/core/src/Utils.ts

@@ -143,7 +143,7 @@ module spine {
 		}
 
 		static signum (value: number): number {
-			return value >= 0 ? 1 : -1;
+			return value > 0 ? 1 : value < 0 ? -1 : 0;
 		}
 
 		static toInt (x: number) {

spine-ts/webgl/demos/skins.js

@@ -1,27 +1,27 @@
-var skinsDemo = function(loadingComplete, bgColor) {	
+var skinsDemo = function(loadingComplete, bgColor) {
 	var canvas, gl, renderer, input, assetManager;
-	var skeleton, state, offset, bounds;		
+	var skeleton, state, offset, bounds;
 	var timeKeeper, loadingScreen;
 	var playButton, timeLine, isPlaying = true, playTime = 0;
 	var randomizeSkins, lastSkinChange = Date.now() / 1000, clickAnim = 0;
 
 	var DEMO_NAME = "SkinsDemo";
 
-	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);		
+	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
 		canvas = document.getElementById("skins-canvas");
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });	
+		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);				
+		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = spineDemos.assetManager;
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };		
+		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
 		assetManager.loadTexture(DEMO_NAME, textureLoader, "heroes.png");
 		assetManager.loadText(DEMO_NAME, "heroes.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");		
+		assetManager.loadJson(DEMO_NAME, "demos.json");
 		input = new spine.webgl.Input(canvas);
-		timeKeeper = new spine.TimeKeeper();		
+		timeKeeper = new spine.TimeKeeper();
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
 		requestAnimationFrame(load);
 	}
@@ -30,7 +30,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
 		timeKeeper.update();
 		if (assetManager.isLoadingComplete(DEMO_NAME)) {
 			var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "heroes.atlas"), function(path) {
-				return assetManager.get(DEMO_NAME, path);		
+				return assetManager.get(DEMO_NAME, path);
 			});
 			var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 			var skeletonJson = new spine.SkeletonJson(atlasLoader);
@@ -40,9 +40,9 @@ var skinsDemo = function(loadingComplete, bgColor) {
 			var stateData = new spine.AnimationStateData(skeleton.data);
 			stateData.defaultMix = 0.2;
 			stateData.setMix("roll", "run", 0);
-			stateData.setMix("jump", "run2", 0);						
+			stateData.setMix("jump", "run2", 0);
-			state = new spine.AnimationState(stateData);			
+			state = new spine.AnimationState(stateData);
-			setupAnimations(state);			
+			setupAnimations(state);
 			state.apply(skeleton);
 			skeleton.updateWorldTransform();
 			offset = new spine.Vector2();
@@ -113,7 +113,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
 	}
 
 	function setupUI() {
-		var list = $("#skins-skin");	
+		var list = $("#skins-skin");
 		for (var skin in skeleton.data.skins) {
 			skin = skeleton.data.skins[skin];
 			if (skin.name == "default") continue;
@@ -144,11 +144,11 @@ var skinsDemo = function(loadingComplete, bgColor) {
 		skeleton.setSlotsToSetupPose();
 		slot.setAttachment(weapon);
 	}
-	
+
 	function swingSword () {
-		state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0);				
+		state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0);
 	}
-	
+
 	function randomizeSkin () {
 		var result;
 		var count = 0;
@@ -161,7 +161,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
 		setSkin(result);
 		$("#skins-skin option").filter(function() {
 			return ($(this).text() == result.name);
-		}).prop("selected", true);		
+		}).prop("selected", true);
 	}
 
 	function randomizeAttachments () {
@@ -203,22 +203,22 @@ var skinsDemo = function(loadingComplete, bgColor) {
 		renderer.resize(spine.webgl.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
-		gl.clear(gl.COLOR_BUFFER_BIT);			
+		gl.clear(gl.COLOR_BUFFER_BIT);
 
 		state.update(delta);
 		state.apply(skeleton);
-		skeleton.updateWorldTransform();		
+		skeleton.updateWorldTransform();
 
-		renderer.begin();				
+		renderer.begin();
 		renderer.drawSkeleton(skeleton, true);
 		var texture = assetManager.get(DEMO_NAME, "heroes.png");
 		var width = bounds.x * 1.25;
 		var scale = width / texture.getImage().width;
 		var height = scale * texture.getImage().height;
-		renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height);		
+		renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height);
 		renderer.end();
 
-		loadingScreen.draw(true);		
+		loadingScreen.draw(true);
 	}
 
 	init();

spine-ts/webgl/example/test.html

@@ -0,0 +1,81 @@
+<html>
+<script src="../../build/spine-webgl.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+<style>
+	* { margin: 0; padding: 0; }
+	body, html { height: 100% }
+	canvas { position: absolute; width: 100% ;height: 100%; }
+</style>
+<body>
+<canvas id="canvas"></canvas>
+</body>
+<script>
+
+var canvas, gl, renderer, input, assetManager;
+var skeleton, bounds, state;
+var timeKeeper;
+
+function init() {
+	canvas = document.getElementById("canvas");
+	canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+	gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
+
+	renderer = new spine.webgl.SceneRenderer(canvas, gl);
+	assetManager = new spine.webgl.AssetManager(gl, "assets/");
+	var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+	input = new spine.webgl.Input(canvas);
+	assetManager.loadTexture("raptor.png");
+	assetManager.loadText("raptor.atlas");
+	assetManager.loadText("raptor.json");
+	timeKeeper = new spine.TimeKeeper();
+	requestAnimationFrame(load);
+}
+
+function load() {
+	timeKeeper.update();
+	if (assetManager.isLoadingComplete()) {
+		var atlas = new spine.TextureAtlas(assetManager.get("raptor.atlas"), function(path) {
+			return assetManager.get(path);
+		});
+		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+		var skeletonJson = new spine.SkeletonJson(atlasLoader);
+		skeletonJson.scale = 0.5;
+		var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get("raptor.json")));
+		skeleton = new spine.Skeleton(skeletonData);
+		var stateData = new spine.AnimationStateData(skeleton.data);
+		state = new spine.AnimationState(stateData);
+		stateData.setMix("walk", "Jump", 0.5);
+		state.setAnimation(0, "walk", false);
+		state.addAnimation(0, "Jump", false, 0);
+		state.apply(skeleton);
+		skeleton.updateWorldTransform();
+
+		requestAnimationFrame(render);
+	} else {
+		requestAnimationFrame(load);
+	}
+}
+
+function render() {
+	timeKeeper.update();
+	var delta = timeKeeper.delta;
+	delta = 0.016;
+
+	state.update(delta);
+	state.apply(skeleton);
+	skeleton.updateWorldTransform();
+
+	gl.clearColor(0, 0, 0, 1);
+	gl.clear(gl.COLOR_BUFFER_BIT);
+
+	renderer.resize(spine.webgl.ResizeMode.Fit);
+	renderer.begin();
+	renderer.drawSkeleton(skeleton);
+	renderer.end();
+
+	requestAnimationFrame(render)
+}
+
+init();
+</script>
+</html>