[ts] Fixed dipping problem fix, added dipping problem repro

spine-ts/build/spine-all.js

@@ -1522,7 +1522,7 @@ var spine;
 			if (from == null)
 				return;
 			this.updateMixingFrom(from, delta);
-			if (entry.mixTime >= entry.mixDuration && from.mixingFrom != null && entry.mixTime > 0) {
+			if (entry.mixTime >= entry.mixDuration && from.mixingFrom == null && entry.mixTime > 0) {
 				entry.mixingFrom = null;
 				this.queue.end(from);
 				return;
@@ -1748,16 +1748,18 @@ var spine;
 				current.mixTime = 0;
 				var mixingFrom = from.mixingFrom;
 				if (mixingFrom != null && from.mixDuration > 0) {
-					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+					if (this.multipleMixing) {
-						current.mixingFrom = mixingFrom;
+						current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
-						mixingFrom.mixingFrom = from;
-						mixingFrom.mixTime = from.mixDuration - from.mixTime;
-						mixingFrom.mixDuration = from.mixDuration;
-						from.mixingFrom = null;
-						from = mixingFrom;
 					}
-					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					else {
-					if (!this.multipleMixing) {
+						if (from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+							current.mixingFrom = mixingFrom;
+							mixingFrom.mixingFrom = from;
+							mixingFrom.mixTime = from.mixDuration - from.mixTime;
+							mixingFrom.mixDuration = from.mixDuration;
+							from.mixingFrom = null;
+							from = mixingFrom;
+						}
 						from.mixAlpha = 0;
 						from.mixTime = 0;
 						from.mixDuration = 0;

spine-ts/build/spine-canvas.js

@@ -1522,7 +1522,7 @@ var spine;
 			if (from == null)
 				return;
 			this.updateMixingFrom(from, delta);
-			if (entry.mixTime >= entry.mixDuration && from.mixingFrom != null && entry.mixTime > 0) {
+			if (entry.mixTime >= entry.mixDuration && from.mixingFrom == null && entry.mixTime > 0) {
 				entry.mixingFrom = null;
 				this.queue.end(from);
 				return;
@@ -1748,16 +1748,18 @@ var spine;
 				current.mixTime = 0;
 				var mixingFrom = from.mixingFrom;
 				if (mixingFrom != null && from.mixDuration > 0) {
-					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+					if (this.multipleMixing) {
-						current.mixingFrom = mixingFrom;
+						current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
-						mixingFrom.mixingFrom = from;
-						mixingFrom.mixTime = from.mixDuration - from.mixTime;
-						mixingFrom.mixDuration = from.mixDuration;
-						from.mixingFrom = null;
-						from = mixingFrom;
 					}
-					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					else {
-					if (!this.multipleMixing) {
+						if (from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+							current.mixingFrom = mixingFrom;
+							mixingFrom.mixingFrom = from;
+							mixingFrom.mixTime = from.mixDuration - from.mixTime;
+							mixingFrom.mixDuration = from.mixDuration;
+							from.mixingFrom = null;
+							from = mixingFrom;
+						}
 						from.mixAlpha = 0;
 						from.mixTime = 0;
 						from.mixDuration = 0;

spine-ts/build/spine-core.js

@@ -1098,7 +1098,7 @@ var spine;
 			if (from == null)
 				return;
 			this.updateMixingFrom(from, delta);
-			if (entry.mixTime >= entry.mixDuration && from.mixingFrom != null && entry.mixTime > 0) {
+			if (entry.mixTime >= entry.mixDuration && from.mixingFrom == null && entry.mixTime > 0) {
 				entry.mixingFrom = null;
 				this.queue.end(from);
 				return;
@@ -1324,16 +1324,18 @@ var spine;
 				current.mixTime = 0;
 				var mixingFrom = from.mixingFrom;
 				if (mixingFrom != null && from.mixDuration > 0) {
-					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+					if (this.multipleMixing) {
-						current.mixingFrom = mixingFrom;
+						current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
-						mixingFrom.mixingFrom = from;
-						mixingFrom.mixTime = from.mixDuration - from.mixTime;
-						mixingFrom.mixDuration = from.mixDuration;
-						from.mixingFrom = null;
-						from = mixingFrom;
 					}
-					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					else {
-					if (!this.multipleMixing) {
+						if (from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+							current.mixingFrom = mixingFrom;
+							mixingFrom.mixingFrom = from;
+							mixingFrom.mixTime = from.mixDuration - from.mixTime;
+							mixingFrom.mixDuration = from.mixDuration;
+							from.mixingFrom = null;
+							from = mixingFrom;
+						}
 						from.mixAlpha = 0;
 						from.mixTime = 0;
 						from.mixDuration = 0;

spine-ts/build/spine-threejs.js

@@ -1098,7 +1098,7 @@ var spine;
 			if (from == null)
 				return;
 			this.updateMixingFrom(from, delta);
-			if (entry.mixTime >= entry.mixDuration && from.mixingFrom != null && entry.mixTime > 0) {
+			if (entry.mixTime >= entry.mixDuration && from.mixingFrom == null && entry.mixTime > 0) {
 				entry.mixingFrom = null;
 				this.queue.end(from);
 				return;
@@ -1324,16 +1324,18 @@ var spine;
 				current.mixTime = 0;
 				var mixingFrom = from.mixingFrom;
 				if (mixingFrom != null && from.mixDuration > 0) {
-					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+					if (this.multipleMixing) {
-						current.mixingFrom = mixingFrom;
+						current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
-						mixingFrom.mixingFrom = from;
-						mixingFrom.mixTime = from.mixDuration - from.mixTime;
-						mixingFrom.mixDuration = from.mixDuration;
-						from.mixingFrom = null;
-						from = mixingFrom;
 					}
-					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					else {
-					if (!this.multipleMixing) {
+						if (from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+							current.mixingFrom = mixingFrom;
+							mixingFrom.mixingFrom = from;
+							mixingFrom.mixTime = from.mixDuration - from.mixTime;
+							mixingFrom.mixDuration = from.mixDuration;
+							from.mixingFrom = null;
+							from = mixingFrom;
+						}
 						from.mixAlpha = 0;
 						from.mixTime = 0;
 						from.mixDuration = 0;

spine-ts/build/spine-webgl.js

@@ -1098,7 +1098,7 @@ var spine;
 			if (from == null)
 				return;
 			this.updateMixingFrom(from, delta);
-			if (entry.mixTime >= entry.mixDuration && from.mixingFrom != null && entry.mixTime > 0) {
+			if (entry.mixTime >= entry.mixDuration && from.mixingFrom == null && entry.mixTime > 0) {
 				entry.mixingFrom = null;
 				this.queue.end(from);
 				return;
@@ -1324,16 +1324,18 @@ var spine;
 				current.mixTime = 0;
 				var mixingFrom = from.mixingFrom;
 				if (mixingFrom != null && from.mixDuration > 0) {
-					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+					if (this.multipleMixing) {
-						current.mixingFrom = mixingFrom;
+						current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
-						mixingFrom.mixingFrom = from;
-						mixingFrom.mixTime = from.mixDuration - from.mixTime;
-						mixingFrom.mixDuration = from.mixDuration;
-						from.mixingFrom = null;
-						from = mixingFrom;
 					}
-					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					else {
-					if (!this.multipleMixing) {
+						if (from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+							current.mixingFrom = mixingFrom;
+							mixingFrom.mixingFrom = from;
+							mixingFrom.mixTime = from.mixDuration - from.mixTime;
+							mixingFrom.mixDuration = from.mixDuration;
+							from.mixingFrom = null;
+							from = mixingFrom;
+						}
 						from.mixAlpha = 0;
 						from.mixTime = 0;
 						from.mixDuration = 0;

spine-ts/build/spine-widget.js

@@ -1098,7 +1098,7 @@ var spine;
 			if (from == null)
 				return;
 			this.updateMixingFrom(from, delta);
-			if (entry.mixTime >= entry.mixDuration && from.mixingFrom != null && entry.mixTime > 0) {
+			if (entry.mixTime >= entry.mixDuration && from.mixingFrom == null && entry.mixTime > 0) {
 				entry.mixingFrom = null;
 				this.queue.end(from);
 				return;
@@ -1324,16 +1324,18 @@ var spine;
 				current.mixTime = 0;
 				var mixingFrom = from.mixingFrom;
 				if (mixingFrom != null && from.mixDuration > 0) {
-					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+					if (this.multipleMixing) {
-						current.mixingFrom = mixingFrom;
+						current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
-						mixingFrom.mixingFrom = from;
-						mixingFrom.mixTime = from.mixDuration - from.mixTime;
-						mixingFrom.mixDuration = from.mixDuration;
-						from.mixingFrom = null;
-						from = mixingFrom;
 					}
-					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					else {
-					if (!this.multipleMixing) {
+						if (from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+							current.mixingFrom = mixingFrom;
+							mixingFrom.mixingFrom = from;
+							mixingFrom.mixTime = from.mixDuration - from.mixTime;
+							mixingFrom.mixDuration = from.mixDuration;
+							from.mixingFrom = null;
+							from = mixingFrom;
+						}
 						from.mixAlpha = 0;
 						from.mixTime = 0;
 						from.mixDuration = 0;

spine-ts/core/src/AnimationState.ts

@@ -105,7 +105,7 @@ module spine {
 
 			this.updateMixingFrom(from, delta);
 
-			if (entry.mixTime >= entry.mixDuration && from.mixingFrom != null && entry.mixTime > 0) {
+			if (entry.mixTime >= entry.mixDuration && from.mixingFrom == null && entry.mixTime > 0) {
 				entry.mixingFrom = null;
 				this.queue.end(from);
 				return;
@@ -354,21 +354,21 @@ module spine {
 
 				let mixingFrom = from.mixingFrom;
 				if (mixingFrom != null && from.mixDuration > 0) {
-					// A mix was interrupted, mix from the closest animation.
+					if (this.multipleMixing) {
-					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+						// The interrupted mix will mix out from its current percentage to zero.
-						current.mixingFrom = mixingFrom;
+						current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
-						mixingFrom.mixingFrom = from;
+					} else {
-						mixingFrom.mixTime = from.mixDuration - from.mixTime;
+						// A mix was interrupted, mix from the closest animation.
-						mixingFrom.mixDuration = from.mixDuration;
+						if (from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
-						from.mixingFrom = null;
+							current.mixingFrom = mixingFrom;
-						from = mixingFrom;
+							mixingFrom.mixingFrom = from;
-					}
+							mixingFrom.mixTime = from.mixDuration - from.mixTime;
+							mixingFrom.mixDuration = from.mixDuration;
+							from.mixingFrom = null;
+							from = mixingFrom;
+						}
 
-					// The interrupted mix will mix out from its current percentage to zero.
+						// End the other animation after it is applied one last time.
-					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
-
-					// End the other animation after it is applied one last time.
-					if (!this.multipleMixing) {
 						from.mixAlpha = 0;
 						from.mixTime = 0;
 						from.mixDuration = 0;

spine-ts/webgl/example/assets/spineboy ikfeet.atlas

@@ -0,0 +1,195 @@
+
+spineboy ikfeet.png
+size: 1024,1024
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+eye_indifferent
+  rotate: false
+  xy: 550, 694
+  size: 93, 89
+  orig: 93, 89
+  offset: 0, 0
+  index: -1
+eye_surprised
+  rotate: false
+  xy: 834, 856
+  size: 93, 89
+  orig: 93, 89
+  offset: 0, 0
+  index: -1
+front_bracer
+  rotate: false
+  xy: 678, 774
+  size: 58, 80
+  orig: 58, 80
+  offset: 0, 0
+  index: -1
+front_fist_closed
+  rotate: true
+  xy: 466, 593
+  size: 75, 82
+  orig: 75, 82
+  offset: 0, 0
+  index: -1
+front_fist_open
+  rotate: false
+  xy: 550, 605
+  size: 86, 87
+  orig: 86, 87
+  offset: 0, 0
+  index: -1
+front_foot
+  rotate: false
+  xy: 550, 785
+  size: 126, 69
+  orig: 126, 69
+  offset: 0, 0
+  index: -1
+front_foot_bend1
+  rotate: true
+  xy: 375, 492
+  size: 128, 70
+  orig: 128, 70
+  offset: 0, 0
+  index: -1
+front_foot_bend2
+  rotate: true
+  xy: 275, 330
+  size: 108, 93
+  orig: 108, 93
+  offset: 0, 0
+  index: -1
+front_shin
+  rotate: false
+  xy: 466, 670
+  size: 82, 184
+  orig: 82, 184
+  offset: 0, 0
+  index: -1
+front_thigh
+  rotate: false
+  xy: 214, 208
+  size: 48, 112
+  orig: 48, 112
+  offset: 0, 0
+  index: -1
+front_upper_arm
+  rotate: false
+  xy: 214, 109
+  size: 54, 97
+  orig: 54, 97
+  offset: 0, 0
+  index: -1
+goggles
+  rotate: false
+  xy: 466, 856
+  size: 261, 166
+  orig: 261, 166
+  offset: 0, 0
+  index: -1
+gun
+  rotate: false
+  xy: 2, 117
+  size: 210, 203
+  orig: 210, 203
+  offset: 0, 0
+  index: -1
+head
+  rotate: false
+  xy: 2, 322
+  size: 271, 298
+  orig: 271, 298
+  offset: 0, 0
+  index: -1
+mouth_grind
+  rotate: false
+  xy: 929, 896
+  size: 93, 59
+  orig: 93, 59
+  offset: 0, 0
+  index: -1
+mouth_oooo
+  rotate: false
+  xy: 929, 835
+  size: 93, 59
+  orig: 93, 59
+  offset: 0, 0
+  index: -1
+mouth_smile
+  rotate: false
+  xy: 447, 532
+  size: 93, 59
+  orig: 93, 59
+  offset: 0, 0
+  index: -1
+muzzle
+  rotate: false
+  xy: 2, 622
+  size: 462, 400
+  orig: 462, 400
+  offset: 0, 0
+  index: -1
+neck
+  rotate: false
+  xy: 796, 819
+  size: 36, 41
+  orig: 36, 41
+  offset: 0, 0
+  index: -1
+rear_bracer
+  rotate: false
+  xy: 738, 788
+  size: 56, 72
+  orig: 56, 72
+  offset: 0, 0
+  index: -1
+rear_foot
+  rotate: true
+  xy: 2, 2
+  size: 113, 60
+  orig: 113, 60
+  offset: 0, 0
+  index: -1
+rear_foot_bend1
+  rotate: false
+  xy: 64, 49
+  size: 117, 66
+  orig: 117, 66
+  offset: 0, 0
+  index: -1
+rear_foot_bend2
+  rotate: false
+  xy: 729, 862
+  size: 103, 83
+  orig: 103, 83
+  offset: 0, 0
+  index: -1
+rear_shin
+  rotate: true
+  xy: 729, 947
+  size: 75, 178
+  orig: 75, 178
+  offset: 0, 0
+  index: -1
+rear_thigh
+  rotate: true
+  xy: 909, 957
+  size: 65, 104
+  orig: 65, 104
+  offset: 0, 0
+  index: -1
+rear_upper_arm
+  rotate: true
+  xy: 447, 483
+  size: 47, 87
+  orig: 47, 87
+  offset: 0, 0
+  index: -1
+torso
+  rotate: false
+  xy: 275, 440
+  size: 98, 180
+  orig: 98, 180
+  offset: 0, 0
+  index: -1

spine-ts/webgl/example/test.html

@@ -12,6 +12,10 @@
 </body>
 <script>
 
+var FILE = "spineboy ikfeet";
+var NUM_SKELETONS = 1;
+var SCALE = 0.6;
+
 var canvas, gl, renderer, input, assetManager;
 var skeletons = [];
 var timeKeeper;
@@ -28,9 +32,11 @@ function init() {
 	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("spineboy.png");
+
-	assetManager.loadText("spineboy.atlas");
+	assetManager.loadTexture(FILE + ".png");
-	assetManager.loadText("spineboy.json");
+	assetManager.loadText(FILE + ".atlas");
+	assetManager.loadText(FILE + ".json");
+
 	timeKeeper = new spine.TimeKeeper();
 	requestAnimationFrame(load);
 }
@@ -38,19 +44,31 @@ function init() {
 function load() {
 	timeKeeper.update();
 	if (assetManager.isLoadingComplete()) {
-		var atlas = new spine.TextureAtlas(assetManager.get("spineboy.atlas"), function(path) {
+		var atlas = new spine.TextureAtlas(assetManager.get(FILE + ".atlas"), function(path) {
 			return assetManager.get(path);
 		});
 		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		skeletonJson.scale = 0.01;
+		skeletonJson.scale = SCALE;
-		var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get("spineboy.json")));
+		var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get(FILE + ".json")));
 
-		for (var i = 0; i < 1000; i++) {
+		for (var i = 0; i < NUM_SKELETONS; i++) {
 			skeleton = new spine.Skeleton(skeletonData);
 			var stateData = new spine.AnimationStateData(skeleton.data);
 			state = new spine.AnimationState(stateData);
-			state.setAnimation(0, "walk", true);
+
+			var mixDuration = 0.8;
+			var stableDuration = 2;
+			stateData.defaultMix = mixDuration;
+
+			state.multipleMixing = false;
+			state.setAnimation(0, "idle", true);
+			state.addAnimation(0, "run", true, stableDuration);
+			state.addAnimation(0, "idle", true, mixDuration * 0.35);
+			state.addAnimation(0, "run", true, stableDuration);
+			state.addAnimation(0, "idle", true, mixDuration * 0.75);
+			state.addAnimation(0, "run", true, stableDuration);
+			state.addAnimation(0, "idle", true, mixDuration * 2);
 			state.apply(skeleton);
 			skeleton.x = Math.random() * 200 - Math.random() * 200;
 			skeleton.y = Math.random() * 200 - Math.random() * 200;