Merge remote-tracking branch 'origin/3.6-beta' into 3.6-beta

CHANGELOG.md

@@ -69,6 +69,25 @@
  * `AtasRegionAttacher` and `SpriteAttacher` are now part of `Example Modules`, to reflect that they are meant to be used as sample code rather than production.
  * In the unitypackage, the "spine-csharp" and "spine-unity" folders are now inside a "Spine" folder. This change will only affect fresh imports. Importing the unitypackage to update Spine-Unity in your project will update the appropriate files wherever you have moved them.
 
+## Java
+ * **Breaking changes**
+  * `Skeleton.getBounds` takes a scratch array as input so it doesn't have to allocate a new array on each invocation itself. Reduces GC activity.
+  * Removed `Bone.worldToLocalRotationX` and `Bone.worldToLocalRotationY`. Replaced by `Bone.worldToLocalRotation` (rotation given relative to x-axis, counter-clockwise, in degrees).
+  * Added `stride` parameter to `VertexAttachment.computeWorldVertices`.
+  * Removed `RegionAttachment.vertices` field. The vertices array is provided to `RegionAttachment.computeWorldVertices` by the API user now.
+  * Removed `RegionAttachment.updateWorldVertices`, added `RegionAttachment.computeWorldVertices`. The new method now computes the x/y positions of the 4 vertices of the corner and places them in the provided `worldVertices` array, starting at `offset`, then moving by `stride` array elements when advancing to the next vertex. This allows to directly compose the vertex buffer and avoids a copy. The computation of the full vertices, including vertex colors and texture coordinates, is now done by the backend's respective renderer.
+ * **Additions**  
+  * Added support for local and relative transform constraint calculation, including additional fields in `TransformConstraintData`
+  * Added `Bone.localToWorldRotation`(rotation given relative to x-axis, counter-clockwise, in degrees).  
+  * Added two color tinting support, including `TwoColorTimeline` and additional fields on `Slot` and `SlotData`.  
+  * Added `PointAttachment`, additional method `newPointAttachment` in `AttachmentLoader` interface.
+  * Added `ClippingAttachment`, additional method `newClippingAttachment` in `AttachmentLoader` interface.
+
+### libGDX
+ * Fixed renderer to work with 3.6 changes
+ * Added support for two color tinting. Use the new `TwoColorPolygonBatch` together with `SkeletonRenderer`
+ * Added support for clipping. See `SkeletonClipper`. Used automatically by `SkeletonRenderer`. Does not work when using a `SpriteBatch` with `SkeletonRenderer`. Use `PolygonSpriteBatch` or `TwoColorPolygonBatch` instead.
+
 ## Lua
  * **Breaking changes**
   * Removed `Bone:worldToLocalRotationX` and `Bone:worldToLocalRotationY`. Replaced by `Bone:worldToLocalRotation` (rotation given relative to x-axis, counter-clockwise, in degrees).

spine-as3/spine-as3/src/spine/animation/AnimationState.as

@@ -27,7 +27,6 @@
  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
  * POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
-
 package spine.animation {
 	import spine.MathUtils;
 	import spine.Bone;
@@ -52,6 +51,7 @@ package spine.animation {
 		internal var queue : EventQueue;
 		internal var propertyIDs : Dictionary = new Dictionary();
 		internal var animationsChanged : Boolean;
+		public var multipleMixing : Boolean = false;
 		public var timeScale : Number = 1;
 		internal var trackEntryPool : Pool;
 
@@ -198,7 +198,9 @@ package spine.animation {
 			var timelineCount : int = from.animation.timelines.length;
 			var timelines : Vector.<Timeline> = from.animation.timelines;
 			var timelinesFirst : Vector.<Boolean> = from.timelinesFirst;
-			var alpha : Number = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast : Vector.<Boolean> = multipleMixing ? null : from.timelinesLast;
+			var alphaBase : Number = from.alpha * entry.mixAlpha;
+			var alphaMix : Number = alphaBase * (1 - mix);
 
 			var firstFrame : Boolean = from.timelinesRotation.length == 0;
 			if (firstFrame) from.timelinesRotation.length = timelineCount << 1;
@@ -207,6 +209,7 @@ package spine.animation {
 			for (var i : int = 0; i < timelineCount; i++) {
 				var timeline : Timeline = timelines[i];
 				var setupPose : Boolean = timelinesFirst[i];
+				var alpha : Number = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline is RotateTimeline)
 					applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -360,10 +363,30 @@ package spine.animation {
 				current.mixingFrom = from;
 				current.mixTime = 0;
 
-				from.timelinesRotation.length = 0;
+				var mixingFrom : TrackEntry = from.mixingFrom;
+				if (mixingFrom != null && from.mixDuration > 0) {
+					// A mix was interrupted, mix from the closest animation.
+					if (!multipleMixing && 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;
+					}
+	
+					// The interrupted mix will mix out from its current percentage to zero.
+					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+	
+					// End the other animation after it is applied one last time.
+					if (!multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
 
-				// If not completely mixed in, set mixAlpha so mixing out happens from current mix to zero.
-				if (from.mixingFrom != null && from.mixDuration > 0) current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+				from.timelinesRotation.length = 0;
 			}
 
 			queue.start(current);
@@ -524,6 +547,36 @@ package spine.animation {
 				entry = tracks[i];
 				if (entry != null) checkTimelinesFirst(entry);
 			}
+			
+			if (multipleMixing) return;
+
+			// Set timelinesLast for mixingFrom entries, from highest track to lowest that has mixingFrom.
+			for (var key2 : String in propertyIDs) {
+				delete propertyIDs[key2];
+			}
+			var lowestMixingFrom : int = n;
+			for (i = 0; i < n; i++) { // Find lowest track with a mixingFrom entry.
+				entry = tracks[i];
+				if (entry == null || entry.mixingFrom == null) continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) { // Find first non-null entry.
+				entry = tracks[i];
+				if (entry == null) continue;
+	
+				// Store properties for non-mixingFrom entry but don't set timelinesLast, which is only used for mixingFrom entries.
+				var timelines : Vector.<Timeline> = entry.animation.timelines;
+				for (var ii : int = 0, nn : int = entry.animation.timelines.length; ii < nn; ii++)
+					var id : String = timelines[ii].getPropertyId().toString();
+					propertyIDs[id] = id;
+	
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		}
 
 		private function setTimelinesFirst(entry : TrackEntry) : void {

spine-as3/spine-as3/src/spine/animation/TrackEntry.as

@@ -47,6 +47,7 @@ package spine.animation {
 		public var delay : Number, trackTime : Number, trackLast : Number, nextTrackLast : Number, trackEnd : Number, timeScale : Number;
 		public var alpha : Number, mixTime : Number, mixDuration : Number, mixAlpha : Number;
 		public var timelinesFirst : Vector.<Boolean> = new Vector.<Boolean>();
+		public var timelinesLast : Vector.<Boolean> = new Vector.<Boolean>();
 		public var timelinesRotation : Vector.<Number> = new Vector.<Number>();
 
 		public function TrackEntry() {
@@ -72,6 +73,7 @@ package spine.animation {
 			onComplete.listeners.length = 0;
 			onEvent.listeners.length = 0;
 			timelinesFirst.length = 0;
+			timelinesLast.length = 0;
 			timelinesRotation.length = 0;
 		}
 

spine-starling/spine-starling-example/src/spine/examples/Main.as

@@ -45,7 +45,7 @@ package spine.examples {
 			// example = TankExample;
 			// example = VineExample;
 			// example = StretchymanExample;
-			example = TwoColorExample;
+			// example = TwoColorExample;
 
 			_starling = new Starling(example, stage);
 			_starling.enableErrorChecking = true;

spine-ts/build/spine-all.d.ts

@@ -328,6 +328,7 @@ declare module spine {
 		queue: EventQueue;
 		propertyIDs: IntSet;
 		animationsChanged: boolean;
+		multipleMixing: boolean;
 		timeScale: number;
 		trackEntryPool: Pool<TrackEntry>;
 		constructor(data: AnimationStateData);
@@ -385,6 +386,7 @@ declare module spine {
 		mixDuration: number;
 		mixAlpha: number;
 		timelinesFirst: boolean[];
+		timelinesLast: boolean[];
 		timelinesRotation: number[];
 		reset(): void;
 		getAnimationTime(): number;

spine-ts/build/spine-all.js

@@ -1461,6 +1461,7 @@ var spine;
 			this.queue = new EventQueue(this);
 			this.propertyIDs = new spine.IntSet();
 			this.animationsChanged = false;
+			this.multipleMixing = false;
 			this.timeScale = 1;
 			this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
 			this.data = data;
@@ -1588,7 +1589,9 @@ var spine;
 			var timelineCount = from.animation.timelines.length;
 			var timelines = from.animation.timelines;
 			var timelinesFirst = from.timelinesFirst;
-			var alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			var alphaBase = from.alpha * entry.mixAlpha;
+			var alphaMix = alphaBase * (1 - mix);
 			var firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame)
 				spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -1596,6 +1599,7 @@ var spine;
 			for (var i = 0; i < timelineCount; i++) {
 				var timeline = timelines[i];
 				var setupPose = timelinesFirst[i];
+				var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof spine.RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -1736,9 +1740,24 @@ var spine;
 					this.queue.interrupt(from);
 				current.mixingFrom = from;
 				current.mixTime = 0;
-				from.timelinesRotation.length = 0;
-				if (from.mixingFrom != null && from.mixDuration > 0)
+				var mixingFrom = from.mixingFrom;
+				if (mixingFrom != null && from.mixDuration > 0) {
+					if (!this.multipleMixing && 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;
+					}
 					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+				from.timelinesRotation.length = 0;
 			}
 			this.queue.start(current);
 		};
@@ -1884,6 +1903,30 @@ var spine;
 				if (entry != null)
 					this.checkTimelinesFirst(entry);
 			}
+			if (this.multipleMixing)
+				return;
+			propertyIDs.clear();
+			var lowestMixingFrom = n;
+			for (i = 0; i < n; i++) {
+				var entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null)
+					continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) {
+				var entry = this.tracks[i];
+				if (entry == null)
+					continue;
+				var timelines = entry.animation.timelines;
+				for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		};
 		AnimationState.prototype.setTimelinesFirst = function (entry) {
 			if (entry.mixingFrom != null) {
@@ -1941,6 +1984,7 @@ var spine;
 	var TrackEntry = (function () {
 		function TrackEntry() {
 			this.timelinesFirst = new Array();
+			this.timelinesLast = new Array();
 			this.timelinesRotation = new Array();
 		}
 		TrackEntry.prototype.reset = function () {
@@ -1949,6 +1993,7 @@ var spine;
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		};
 		TrackEntry.prototype.getAnimationTime = function () {

spine-ts/build/spine-canvas.d.ts

@@ -328,6 +328,7 @@ declare module spine {
 		queue: EventQueue;
 		propertyIDs: IntSet;
 		animationsChanged: boolean;
+		multipleMixing: boolean;
 		timeScale: number;
 		trackEntryPool: Pool<TrackEntry>;
 		constructor(data: AnimationStateData);
@@ -385,6 +386,7 @@ declare module spine {
 		mixDuration: number;
 		mixAlpha: number;
 		timelinesFirst: boolean[];
+		timelinesLast: boolean[];
 		timelinesRotation: number[];
 		reset(): void;
 		getAnimationTime(): number;

spine-ts/build/spine-canvas.js

@@ -1461,6 +1461,7 @@ var spine;
 			this.queue = new EventQueue(this);
 			this.propertyIDs = new spine.IntSet();
 			this.animationsChanged = false;
+			this.multipleMixing = false;
 			this.timeScale = 1;
 			this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
 			this.data = data;
@@ -1588,7 +1589,9 @@ var spine;
 			var timelineCount = from.animation.timelines.length;
 			var timelines = from.animation.timelines;
 			var timelinesFirst = from.timelinesFirst;
-			var alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			var alphaBase = from.alpha * entry.mixAlpha;
+			var alphaMix = alphaBase * (1 - mix);
 			var firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame)
 				spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -1596,6 +1599,7 @@ var spine;
 			for (var i = 0; i < timelineCount; i++) {
 				var timeline = timelines[i];
 				var setupPose = timelinesFirst[i];
+				var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof spine.RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -1736,9 +1740,24 @@ var spine;
 					this.queue.interrupt(from);
 				current.mixingFrom = from;
 				current.mixTime = 0;
-				from.timelinesRotation.length = 0;
-				if (from.mixingFrom != null && from.mixDuration > 0)
+				var mixingFrom = from.mixingFrom;
+				if (mixingFrom != null && from.mixDuration > 0) {
+					if (!this.multipleMixing && 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;
+					}
 					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+				from.timelinesRotation.length = 0;
 			}
 			this.queue.start(current);
 		};
@@ -1884,6 +1903,30 @@ var spine;
 				if (entry != null)
 					this.checkTimelinesFirst(entry);
 			}
+			if (this.multipleMixing)
+				return;
+			propertyIDs.clear();
+			var lowestMixingFrom = n;
+			for (i = 0; i < n; i++) {
+				var entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null)
+					continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) {
+				var entry = this.tracks[i];
+				if (entry == null)
+					continue;
+				var timelines = entry.animation.timelines;
+				for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		};
 		AnimationState.prototype.setTimelinesFirst = function (entry) {
 			if (entry.mixingFrom != null) {
@@ -1941,6 +1984,7 @@ var spine;
 	var TrackEntry = (function () {
 		function TrackEntry() {
 			this.timelinesFirst = new Array();
+			this.timelinesLast = new Array();
 			this.timelinesRotation = new Array();
 		}
 		TrackEntry.prototype.reset = function () {
@@ -1949,6 +1993,7 @@ var spine;
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		};
 		TrackEntry.prototype.getAnimationTime = function () {

spine-ts/build/spine-core.d.ts

@@ -235,6 +235,7 @@ declare module spine {
 		queue: EventQueue;
 		propertyIDs: IntSet;
 		animationsChanged: boolean;
+		multipleMixing: boolean;
 		timeScale: number;
 		trackEntryPool: Pool<TrackEntry>;
 		constructor(data: AnimationStateData);
@@ -292,6 +293,7 @@ declare module spine {
 		mixDuration: number;
 		mixAlpha: number;
 		timelinesFirst: boolean[];
+		timelinesLast: boolean[];
 		timelinesRotation: number[];
 		reset(): void;
 		getAnimationTime(): number;

spine-ts/build/spine-core.js

@@ -1043,6 +1043,7 @@ var spine;
 			this.queue = new EventQueue(this);
 			this.propertyIDs = new spine.IntSet();
 			this.animationsChanged = false;
+			this.multipleMixing = false;
 			this.timeScale = 1;
 			this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
 			this.data = data;
@@ -1170,7 +1171,9 @@ var spine;
 			var timelineCount = from.animation.timelines.length;
 			var timelines = from.animation.timelines;
 			var timelinesFirst = from.timelinesFirst;
-			var alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			var alphaBase = from.alpha * entry.mixAlpha;
+			var alphaMix = alphaBase * (1 - mix);
 			var firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame)
 				spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -1178,6 +1181,7 @@ var spine;
 			for (var i = 0; i < timelineCount; i++) {
 				var timeline = timelines[i];
 				var setupPose = timelinesFirst[i];
+				var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof spine.RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -1318,9 +1322,24 @@ var spine;
 					this.queue.interrupt(from);
 				current.mixingFrom = from;
 				current.mixTime = 0;
-				from.timelinesRotation.length = 0;
-				if (from.mixingFrom != null && from.mixDuration > 0)
+				var mixingFrom = from.mixingFrom;
+				if (mixingFrom != null && from.mixDuration > 0) {
+					if (!this.multipleMixing && 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;
+					}
 					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+				from.timelinesRotation.length = 0;
 			}
 			this.queue.start(current);
 		};
@@ -1466,6 +1485,30 @@ var spine;
 				if (entry != null)
 					this.checkTimelinesFirst(entry);
 			}
+			if (this.multipleMixing)
+				return;
+			propertyIDs.clear();
+			var lowestMixingFrom = n;
+			for (i = 0; i < n; i++) {
+				var entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null)
+					continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) {
+				var entry = this.tracks[i];
+				if (entry == null)
+					continue;
+				var timelines = entry.animation.timelines;
+				for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		};
 		AnimationState.prototype.setTimelinesFirst = function (entry) {
 			if (entry.mixingFrom != null) {
@@ -1523,6 +1566,7 @@ var spine;
 	var TrackEntry = (function () {
 		function TrackEntry() {
 			this.timelinesFirst = new Array();
+			this.timelinesLast = new Array();
 			this.timelinesRotation = new Array();
 		}
 		TrackEntry.prototype.reset = function () {
@@ -1531,6 +1575,7 @@ var spine;
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		};
 		TrackEntry.prototype.getAnimationTime = function () {

spine-ts/build/spine-threejs.d.ts

@@ -235,6 +235,7 @@ declare module spine {
 		queue: EventQueue;
 		propertyIDs: IntSet;
 		animationsChanged: boolean;
+		multipleMixing: boolean;
 		timeScale: number;
 		trackEntryPool: Pool<TrackEntry>;
 		constructor(data: AnimationStateData);
@@ -292,6 +293,7 @@ declare module spine {
 		mixDuration: number;
 		mixAlpha: number;
 		timelinesFirst: boolean[];
+		timelinesLast: boolean[];
 		timelinesRotation: number[];
 		reset(): void;
 		getAnimationTime(): number;

spine-ts/build/spine-threejs.js

@@ -1043,6 +1043,7 @@ var spine;
 			this.queue = new EventQueue(this);
 			this.propertyIDs = new spine.IntSet();
 			this.animationsChanged = false;
+			this.multipleMixing = false;
 			this.timeScale = 1;
 			this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
 			this.data = data;
@@ -1170,7 +1171,9 @@ var spine;
 			var timelineCount = from.animation.timelines.length;
 			var timelines = from.animation.timelines;
 			var timelinesFirst = from.timelinesFirst;
-			var alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			var alphaBase = from.alpha * entry.mixAlpha;
+			var alphaMix = alphaBase * (1 - mix);
 			var firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame)
 				spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -1178,6 +1181,7 @@ var spine;
 			for (var i = 0; i < timelineCount; i++) {
 				var timeline = timelines[i];
 				var setupPose = timelinesFirst[i];
+				var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof spine.RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -1318,9 +1322,24 @@ var spine;
 					this.queue.interrupt(from);
 				current.mixingFrom = from;
 				current.mixTime = 0;
-				from.timelinesRotation.length = 0;
-				if (from.mixingFrom != null && from.mixDuration > 0)
+				var mixingFrom = from.mixingFrom;
+				if (mixingFrom != null && from.mixDuration > 0) {
+					if (!this.multipleMixing && 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;
+					}
 					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+				from.timelinesRotation.length = 0;
 			}
 			this.queue.start(current);
 		};
@@ -1466,6 +1485,30 @@ var spine;
 				if (entry != null)
 					this.checkTimelinesFirst(entry);
 			}
+			if (this.multipleMixing)
+				return;
+			propertyIDs.clear();
+			var lowestMixingFrom = n;
+			for (i = 0; i < n; i++) {
+				var entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null)
+					continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) {
+				var entry = this.tracks[i];
+				if (entry == null)
+					continue;
+				var timelines = entry.animation.timelines;
+				for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		};
 		AnimationState.prototype.setTimelinesFirst = function (entry) {
 			if (entry.mixingFrom != null) {
@@ -1523,6 +1566,7 @@ var spine;
 	var TrackEntry = (function () {
 		function TrackEntry() {
 			this.timelinesFirst = new Array();
+			this.timelinesLast = new Array();
 			this.timelinesRotation = new Array();
 		}
 		TrackEntry.prototype.reset = function () {
@@ -1531,6 +1575,7 @@ var spine;
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		};
 		TrackEntry.prototype.getAnimationTime = function () {

spine-ts/build/spine-webgl.d.ts

@@ -235,6 +235,7 @@ declare module spine {
 		queue: EventQueue;
 		propertyIDs: IntSet;
 		animationsChanged: boolean;
+		multipleMixing: boolean;
 		timeScale: number;
 		trackEntryPool: Pool<TrackEntry>;
 		constructor(data: AnimationStateData);
@@ -292,6 +293,7 @@ declare module spine {
 		mixDuration: number;
 		mixAlpha: number;
 		timelinesFirst: boolean[];
+		timelinesLast: boolean[];
 		timelinesRotation: number[];
 		reset(): void;
 		getAnimationTime(): number;

spine-ts/build/spine-webgl.js

@@ -1043,6 +1043,7 @@ var spine;
 			this.queue = new EventQueue(this);
 			this.propertyIDs = new spine.IntSet();
 			this.animationsChanged = false;
+			this.multipleMixing = false;
 			this.timeScale = 1;
 			this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
 			this.data = data;
@@ -1170,7 +1171,9 @@ var spine;
 			var timelineCount = from.animation.timelines.length;
 			var timelines = from.animation.timelines;
 			var timelinesFirst = from.timelinesFirst;
-			var alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			var alphaBase = from.alpha * entry.mixAlpha;
+			var alphaMix = alphaBase * (1 - mix);
 			var firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame)
 				spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -1178,6 +1181,7 @@ var spine;
 			for (var i = 0; i < timelineCount; i++) {
 				var timeline = timelines[i];
 				var setupPose = timelinesFirst[i];
+				var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof spine.RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -1318,9 +1322,24 @@ var spine;
 					this.queue.interrupt(from);
 				current.mixingFrom = from;
 				current.mixTime = 0;
-				from.timelinesRotation.length = 0;
-				if (from.mixingFrom != null && from.mixDuration > 0)
+				var mixingFrom = from.mixingFrom;
+				if (mixingFrom != null && from.mixDuration > 0) {
+					if (!this.multipleMixing && 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;
+					}
 					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+				from.timelinesRotation.length = 0;
 			}
 			this.queue.start(current);
 		};
@@ -1466,6 +1485,30 @@ var spine;
 				if (entry != null)
 					this.checkTimelinesFirst(entry);
 			}
+			if (this.multipleMixing)
+				return;
+			propertyIDs.clear();
+			var lowestMixingFrom = n;
+			for (i = 0; i < n; i++) {
+				var entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null)
+					continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) {
+				var entry = this.tracks[i];
+				if (entry == null)
+					continue;
+				var timelines = entry.animation.timelines;
+				for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		};
 		AnimationState.prototype.setTimelinesFirst = function (entry) {
 			if (entry.mixingFrom != null) {
@@ -1523,6 +1566,7 @@ var spine;
 	var TrackEntry = (function () {
 		function TrackEntry() {
 			this.timelinesFirst = new Array();
+			this.timelinesLast = new Array();
 			this.timelinesRotation = new Array();
 		}
 		TrackEntry.prototype.reset = function () {
@@ -1531,6 +1575,7 @@ var spine;
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		};
 		TrackEntry.prototype.getAnimationTime = function () {

spine-ts/build/spine-widget.d.ts

@@ -235,6 +235,7 @@ declare module spine {
 		queue: EventQueue;
 		propertyIDs: IntSet;
 		animationsChanged: boolean;
+		multipleMixing: boolean;
 		timeScale: number;
 		trackEntryPool: Pool<TrackEntry>;
 		constructor(data: AnimationStateData);
@@ -292,6 +293,7 @@ declare module spine {
 		mixDuration: number;
 		mixAlpha: number;
 		timelinesFirst: boolean[];
+		timelinesLast: boolean[];
 		timelinesRotation: number[];
 		reset(): void;
 		getAnimationTime(): number;

spine-ts/build/spine-widget.js

@@ -1043,6 +1043,7 @@ var spine;
 			this.queue = new EventQueue(this);
 			this.propertyIDs = new spine.IntSet();
 			this.animationsChanged = false;
+			this.multipleMixing = false;
 			this.timeScale = 1;
 			this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
 			this.data = data;
@@ -1170,7 +1171,9 @@ var spine;
 			var timelineCount = from.animation.timelines.length;
 			var timelines = from.animation.timelines;
 			var timelinesFirst = from.timelinesFirst;
-			var alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			var alphaBase = from.alpha * entry.mixAlpha;
+			var alphaMix = alphaBase * (1 - mix);
 			var firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame)
 				spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -1178,6 +1181,7 @@ var spine;
 			for (var i = 0; i < timelineCount; i++) {
 				var timeline = timelines[i];
 				var setupPose = timelinesFirst[i];
+				var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof spine.RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -1318,9 +1322,24 @@ var spine;
 					this.queue.interrupt(from);
 				current.mixingFrom = from;
 				current.mixTime = 0;
-				from.timelinesRotation.length = 0;
-				if (from.mixingFrom != null && from.mixDuration > 0)
+				var mixingFrom = from.mixingFrom;
+				if (mixingFrom != null && from.mixDuration > 0) {
+					if (!this.multipleMixing && 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;
+					}
 					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+				from.timelinesRotation.length = 0;
 			}
 			this.queue.start(current);
 		};
@@ -1466,6 +1485,30 @@ var spine;
 				if (entry != null)
 					this.checkTimelinesFirst(entry);
 			}
+			if (this.multipleMixing)
+				return;
+			propertyIDs.clear();
+			var lowestMixingFrom = n;
+			for (i = 0; i < n; i++) {
+				var entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null)
+					continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) {
+				var entry = this.tracks[i];
+				if (entry == null)
+					continue;
+				var timelines = entry.animation.timelines;
+				for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		};
 		AnimationState.prototype.setTimelinesFirst = function (entry) {
 			if (entry.mixingFrom != null) {
@@ -1523,6 +1566,7 @@ var spine;
 	var TrackEntry = (function () {
 		function TrackEntry() {
 			this.timelinesFirst = new Array();
+			this.timelinesLast = new Array();
 			this.timelinesRotation = new Array();
 		}
 		TrackEntry.prototype.reset = function () {
@@ -1531,6 +1575,7 @@ var spine;
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		};
 		TrackEntry.prototype.getAnimationTime = function () {

spine-ts/core/src/AnimationState.ts

@@ -39,6 +39,7 @@ module spine {
 		queue = new EventQueue(this);
 		propertyIDs = new IntSet();
 		animationsChanged = false;
+		multipleMixing = false;
 		timeScale = 1;
 
 		trackEntryPool = new Pool<TrackEntry>(() => new TrackEntry());
@@ -183,7 +184,9 @@ module spine {
 			let timelineCount = from.animation.timelines.length;
 			let timelines = from.animation.timelines;
 			let timelinesFirst = from.timelinesFirst;
-			let alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			let timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			let alphaBase = from.alpha * entry.mixAlpha;
+			let alphaMix = alphaBase * (1 - mix);
 
 			let firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame) Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -192,6 +195,7 @@ module spine {
 			for (let i = 0; i < timelineCount; i++) {
 				let timeline = timelines[i];
 				let setupPose = timelinesFirst[i];
+				let alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -348,10 +352,30 @@ module spine {
 				current.mixingFrom = from;
 				current.mixTime = 0;
 
-				from.timelinesRotation.length = 0;
+				let mixingFrom = from.mixingFrom;
+				if (mixingFrom != null && from.mixDuration > 0) {
+					// A mix was interrupted, mix from the closest animation.
+					if (!this.multipleMixing && 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;
+					}
+
+					// The interrupted mix will mix out from its current percentage to zero.
+					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;
+					}
+				}
 
-				// If not completely mixed in, set mixAlpha so mixing out happens from current mix to zero.
-				if (from.mixingFrom != null && from.mixDuration > 0) current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+				from.timelinesRotation.length = 0;
 			}
 
 			this.queue.start(current);
@@ -510,6 +534,33 @@ module spine {
 				let entry = this.tracks[i];
 				if (entry != null) this.checkTimelinesFirst(entry);
 			}
+
+			if (this.multipleMixing) return;
+
+			// Set timelinesLast for mixingFrom entries, from highest track to lowest that has mixingFrom.
+			propertyIDs.clear();
+			let lowestMixingFrom = n;
+			for (i = 0; i < n; i++) { // Find lowest track with a mixingFrom entry.
+				let entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null) continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) { // Find first non-null entry.
+				let entry = this.tracks[i];
+				if (entry == null) continue;
+
+				// Store properties for non-mixingFrom entry but don't set timelinesLast, which is only used for mixingFrom entries.
+				let timelines = entry.animation.timelines;
+				for (let ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		}
 
 		setTimelinesFirst (entry: TrackEntry) {
@@ -578,6 +629,7 @@ module spine {
 		delay: number; trackTime: number; trackLast: number; nextTrackLast: number; trackEnd: number; timeScale: number;
 		alpha: number; mixTime: number; mixDuration: number; mixAlpha: number;
 		timelinesFirst = new Array<boolean>();
+		timelinesLast = new Array<boolean>();
 		timelinesRotation = new Array<number>();
 
 		reset () {
@@ -586,6 +638,7 @@ module spine {
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		}
 

spine-ts/webgl/demos/hoverboard.js

@@ -50,7 +50,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
 			skeleton.updateWorldTransform();
 			var offset = new spine.Vector2();
 			bounds = new spine.Vector2();
-			skeleton.getBounds(offset, bounds);
+			skeleton.getBounds(offset, bounds, []);
 			for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
 
 			renderer.camera.position.x = offset.x + bounds.x / 2;
@@ -139,15 +139,8 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
 
 		renderer.begin();
 		renderer.drawSkeleton(skeleton, true);
-		renderer.drawSkeletonDebug(skeleton, false, ["root"]);
-		gl.lineWidth(2);
-		for (var i = 0; i < controlBones.length; i++) {
-			var bone = skeleton.findBone(controlBones[i]);
-			var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
-			var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
-			renderer.circle(true, bone.worldX, bone.worldY, 20, colorInner);
-			renderer.circle(false, bone.worldX, bone.worldY, 20, colorOuter);
-		}
+		// renderer.drawSkeletonDebug(skeleton, false, ["root"]);
+
 		renderer.end();
 		gl.lineWidth(1);
 

spine-ts/webgl/demos/imagechanges.js

@@ -1,8 +1,8 @@
 var imageChangesDemo = function(loadingComplete, bgColor) {
-	var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);	
+	var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
 
 	var canvas, gl, renderer, input, assetManager;
-	var skeleton, bounds;		
+	var skeleton, bounds;
 	var timeKeeper, loadingScreen;
 	var skeletons = {};
 	var activeSkeleton = "Alien";
@@ -15,18 +15,18 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 	function init () {
 		canvas = document.getElementById("imagechanges-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);
 		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, "atlas1.png");
 		assetManager.loadText(DEMO_NAME, "atlas1.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");		
-		timeKeeper = new spine.TimeKeeper();		
+		assetManager.loadJson(DEMO_NAME, "demos.json");
+		timeKeeper = new spine.TimeKeeper();
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
 		requestAnimationFrame(load);
-	}	
+	}
 
 	function load () {
 		timeKeeper.update();
@@ -34,7 +34,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 			skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
 			skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
 			setupUI();
-			loadingComplete(canvas, render);			
+			loadingComplete(canvas, render);
 		} else {
 			loadingScreen.draw();
 			requestAnimationFrame(load);
@@ -43,7 +43,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 
 	function setupUI() {
 		playButton = $("#imagechanges-playbutton");
-		var playButtonUpdate = function () {			
+		var playButtonUpdate = function () {
 			isPlaying = !isPlaying;
 			if (isPlaying)
 				playButton.addClass("pause").removeClass("play");
@@ -55,7 +55,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 
 		timeLine = $("#imagechanges-timeline").data("slider");
 		timeLine.changed = function (percent) {
-			if (isPlaying) playButton.click();		
+			if (isPlaying) playButton.click();
 			if (!isPlaying) {
 				var active = skeletons[activeSkeleton];
 				var animationDuration = active.state.getCurrent(0).animation.duration;
@@ -63,11 +63,11 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 				active.state.update(time - active.playTime);
 				active.state.apply(active.skeleton);
 				active.skeleton.updateWorldTransform();
-				active.playTime = time;				
+				active.playTime = time;
 			}
 		};
 
-		var list = $("#imagechanges-skeleton");	
+		var list = $("#imagechanges-skeleton");
 		for (var skeletonName in skeletons) {
 			var option = $("<option></option>");
 			option.attr("value", skeletonName).text(skeletonName);
@@ -84,7 +84,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 
 	function loadSkeleton(name, animation, sequenceSlots) {
 		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.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);
@@ -93,16 +93,16 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 		skeleton.setSkinByName("default");
 
 		var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
-		var anim = skeletonData.findAnimation(animation);		
+		var anim = skeletonData.findAnimation(animation);
 		state.setAnimation(0, animation, true);
 		if (name === "alien") {
-			state.update(anim.duration / 2.5);			
+			state.update(anim.duration / 2.5);
 		}
 		state.apply(skeleton);
-		skeleton.updateWorldTransform();			
+		skeleton.updateWorldTransform();
 		var offset = new spine.Vector2();
 		var size = new spine.Vector2();
-		skeleton.getBounds(offset, size);
+		skeleton.getBounds(offset, size, []);
 		if (name === "alien") {
 			state.update(-anim.duration / 2.5);
 		}
@@ -110,16 +110,16 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 		var regions = [];
 		for(var i = 0; i < sequenceSlots.length; i++) {
 			var slot = sequenceSlots[i];
-			var index = skeleton.findSlotIndex(slot);			
+			var index = skeleton.findSlotIndex(slot);
 			for (var name in skeleton.skin.attachments[index]) {
-				regions.push(skeleton.skin.attachments[index][name]);	
+				regions.push(skeleton.skin.attachments[index][name]);
 			}
 		}
 
 		return {
 			atlas: atlas,
-			skeleton: skeleton, 
-			state: state, 
+			skeleton: skeleton,
+			state: state,
 			playTime: 0,
 			bounds: {
 				offset: offset,
@@ -132,7 +132,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 
 	function render () {
 		timeKeeper.update();
-		var delta = timeKeeper.delta;	
+		var delta = timeKeeper.delta;
 
 		var active = skeletons[activeSkeleton];
 		var skeleton = active.skeleton;
@@ -159,7 +159,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 
 		if (isPlaying) {
 			var animationDuration = state.getCurrent(0).animation.duration;
-			active.playTime += delta;			
+			active.playTime += delta;
 			while (active.playTime >= animationDuration) {
 				active.playTime -= animationDuration;
 			}
@@ -170,15 +170,15 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 			skeleton.updateWorldTransform();
 		}
 
-		renderer.begin();				
+		renderer.begin();
 		renderer.drawSkeleton(skeleton, true);
 
 		var y = offsetY;
 		var slotsWidth = 0, slotsHeight = 0;
 		var slotSize = size.y / 3;
-		var maxSlotWidth = 0;	
+		var maxSlotWidth = 0;
 		var j = 0;
-		for (var i = 0; i < active.regions.length; i++) {			
+		for (var i = 0; i < active.regions.length; i++) {
 			var region = active.regions[i].region;
 			var scale = Math.min(slotSize / region.height, slotSize / region.width);
 			renderer.drawRegion(region, x,  y, region.width * scale, region.height * scale);
@@ -187,7 +187,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 			for (var ii = 0; ii < active.slots.length; ii++) {
 				var slotName = active.slots[ii];
 				var slotIndex = skeleton.findSlotIndex(slotName);
-				
+
 				for (var iii = 0; iii < skeleton.drawOrder.length; iii++) {
 					var slot = skeleton.drawOrder[iii];
 					if (slot.data.index == slotIndex) {
@@ -212,7 +212,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 				maxSlotWidth = 0;
 				y = offsetY;
 				j = 0;
-			}			
+			}
 		}
 
 		renderer.end();

spine-ts/webgl/demos/meshes.js

@@ -1,6 +1,6 @@
 var meshesDemo = function(loadingComplete, bgColor) {
 	var canvas, gl, renderer, input, assetManager;
-	var skeleton, bounds;		
+	var skeleton, bounds;
 	var timeKeeper, loadingScreen;
 	var skeletons = {};
 	var activeSkeleton = "Orange Girl";
@@ -13,19 +13,19 @@ var meshesDemo = function(loadingComplete, bgColor) {
 	function init () {
 		canvas = document.getElementById("meshes-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.skeletonDebugRenderer.drawRegionAttachments = false;
 		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, "atlas2.png");
 		assetManager.loadText(DEMO_NAME, "atlas2.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");	
-		timeKeeper = new spine.TimeKeeper();		
+		assetManager.loadJson(DEMO_NAME, "demos.json");
+		timeKeeper = new spine.TimeKeeper();
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
 		requestAnimationFrame(load);
-	}	
+	}
 
 	function load () {
 		timeKeeper.update();
@@ -43,7 +43,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 
 	function setupUI() {
 		playButton = $("#meshes-playbutton");
-		var playButtonUpdate = function () {			
+		var playButtonUpdate = function () {
 			isPlaying = !isPlaying;
 			if (isPlaying)
 				playButton.addClass("pause").removeClass("play");
@@ -55,7 +55,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 
 		timeLine = $("#meshes-timeline").data("slider");
 		timeLine.changed = function (percent) {
-			if (isPlaying) playButton.click();		
+			if (isPlaying) playButton.click();
 			if (!isPlaying) {
 				var active = skeletons[activeSkeleton];
 				var animationDuration = active.state.getCurrent(0).animation.duration;
@@ -63,11 +63,11 @@ var meshesDemo = function(loadingComplete, bgColor) {
 				active.state.update(time - active.playTime);
 				active.state.apply(active.skeleton);
 				active.skeleton.updateWorldTransform();
-				active.playTime = time;				
+				active.playTime = time;
 			}
 		};
 
-		var list = $("#meshes-skeleton");	
+		var list = $("#meshes-skeleton");
 		for (var skeletonName in skeletons) {
 			var option = $("<option></option>");
 			option.attr("value", skeletonName).text(skeletonName);
@@ -96,7 +96,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 
 	function loadSkeleton(name, animation, sequenceSlots) {
 		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.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);
@@ -107,26 +107,26 @@ var meshesDemo = function(loadingComplete, bgColor) {
 		var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
 		state.setAnimation(0, animation, true);
 		state.apply(skeleton);
-		skeleton.updateWorldTransform();			
+		skeleton.updateWorldTransform();
 		var offset = new spine.Vector2();
 		var size = new spine.Vector2();
-		skeleton.getBounds(offset, size);
+		skeleton.getBounds(offset, size, []);
 
 		return {
 			atlas: atlas,
-			skeleton: skeleton, 
-			state: state, 
+			skeleton: skeleton,
+			state: state,
 			playTime: 0,
 			bounds: {
 				offset: offset,
 				size: size
-			}			
+			}
 		};
 	}
 
 	function render () {
 		timeKeeper.update();
-		var delta = timeKeeper.delta;	
+		var delta = timeKeeper.delta;
 
 		var active = skeletons[activeSkeleton];
 		var skeleton = active.skeleton;
@@ -145,7 +145,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 
 		if (isPlaying) {
 			var animationDuration = state.getCurrent(0).animation.duration;
-			active.playTime += delta;			
+			active.playTime += delta;
 			while (active.playTime >= animationDuration) {
 				active.playTime -= animationDuration;
 			}
@@ -156,7 +156,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 			skeleton.updateWorldTransform();
 		}
 
-		renderer.begin();				
+		renderer.begin();
 		renderer.drawSkeleton(skeleton, true);
 		renderer.drawSkeletonDebug(skeleton);
 		renderer.end();

spine-ts/webgl/demos/skins.js

@@ -47,7 +47,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
 			skeleton.updateWorldTransform();
 			offset = new spine.Vector2();
 			bounds = new spine.Vector2();
-			skeleton.getBounds(offset, bounds);
+			skeleton.getBounds(offset, bounds, []);
 			setupUI();
 			setupInput();
 			loadingComplete(canvas, render);

spine-ts/webgl/demos/spritesheets.js

@@ -50,7 +50,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
 			skeleton.updateWorldTransform();
 			offset = new spine.Vector2();
 			bounds = new spine.Vector2();
-			skeleton.getBounds(offset, bounds);
+			skeleton.getBounds(offset, bounds, []);
 			skeleton.x -= 60;
 
 			skeletonSeq = new spine.Skeleton(skeletonData);

spine-ts/webgl/demos/stretchyman.js

@@ -5,7 +5,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
 	var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
 
 	var canvas, gl, renderer, input, assetManager;
-	var skeleton, bounds, state;		
+	var skeleton, bounds, state;
 	var timeKeeper, loadingScreen;
 	var target = null;
 	var hoverTargets = [];
@@ -14,7 +14,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
 		"front leg controller",
 		"back arm controller",
 		"front arm controller",
-		"head controller", 
+		"head controller",
 		"hip controller"
 	];
 	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
@@ -28,16 +28,16 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
 	function init () {
 		canvas = document.getElementById("stretchyman-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);
 		assetManager = spineDemos.assetManager;
 		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
-		input = new spine.webgl.Input(canvas);		
+		input = new spine.webgl.Input(canvas);
 		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
 		assetManager.loadText(DEMO_NAME, "atlas2.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");	
-		timeKeeper = new spine.TimeKeeper();		
+		assetManager.loadJson(DEMO_NAME, "demos.json");
+		timeKeeper = new spine.TimeKeeper();
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
 		requestAnimationFrame(load);
 	}
@@ -46,7 +46,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
 		timeKeeper.update();
 		if (assetManager.isLoadingComplete(DEMO_NAME)) {
 			var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.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);
@@ -56,10 +56,10 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
 			skeleton.updateWorldTransform();
 			var offset = new spine.Vector2();
 			bounds = new spine.Vector2();
-			skeleton.getBounds(offset, bounds);
+			skeleton.getBounds(offset, bounds, []);
 			for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
 			state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
-			state.setAnimation(0, "idle", true);									
+			state.setAnimation(0, "idle", true);
 
 			renderer.camera.position.x = offset.x + bounds.x / 2;
 			renderer.camera.position.y = offset.y + bounds.y / 2;
@@ -77,25 +77,25 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
 		}
 	}
 
-	function setupUI() {		
+	function setupUI() {
 		var checkbox = $("#stretchyman-drawbones");
 		renderer.skeletonDebugRenderer.drawPaths = false;
 		renderer.skeletonDebugRenderer.drawBones = false;
 		checkbox.change(function() {
 			renderer.skeletonDebugRenderer.drawPaths = this.checked;
-			renderer.skeletonDebugRenderer.drawBones = this.checked;			
+			renderer.skeletonDebugRenderer.drawBones = this.checked;
 		});
 	}
 
 	function setupInput (){
 		input.addListener({
 			down: function(x, y) {
-				for (var i = 0; i < controlBones.length; i++) {	
-					var bone = skeleton.findBone(controlBones[i]);				
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);				
+				for (var i = 0; i < controlBones.length; i++) {
+					var bone = skeleton.findBone(controlBones[i]);
+					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
 					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
 						target = bone;
-					}				
+					}
 				}
 			},
 			up: function(x, y) {
@@ -117,16 +117,16 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
 					}
 				}
 			},
-			moved: function (x, y) { 
-				for (var i = 0; i < controlBones.length; i++) {	
-					var bone = skeleton.findBone(controlBones[i]);				
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);				
+			moved: function (x, y) {
+				for (var i = 0; i < controlBones.length; i++) {
+					var bone = skeleton.findBone(controlBones[i]);
+					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
 					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
 						hoverTargets[i] = bone;
 					} else {
 						hoverTargets[i] = null;
 					}
-				}	
+				}
 			}
 		});
 	}
@@ -153,7 +153,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
 
 	function render () {
 		timeKeeper.update();
-		var delta = timeKeeper.delta;	
+		var delta = timeKeeper.delta;
 
 		state.update(delta);
 		state.apply(skeleton);
@@ -168,14 +168,14 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
 		var angle = Math.atan2(headControl.worldY - hipControl.worldY, headControl.worldX - hipControl.worldX) * spine.MathUtils.radDeg;
 		angle = (angle - 90) * 2.5;
 		head.rotation = head.data.rotation + Math.min(90, Math.abs(angle)) * Math.sign(angle);
-		skeleton.updateWorldTransform();	
+		skeleton.updateWorldTransform();
 
 		renderer.camera.viewportWidth = bounds.x * 1.2;
 		renderer.camera.viewportHeight = bounds.y * 1.2;
 		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);
 
 		renderer.begin();
 		renderer.drawSkeleton(skeleton, true);

spine-ts/webgl/demos/transforms.js

@@ -5,12 +5,12 @@ var transformsDemo = function(loadingComplete, bgColor) {
 	var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
 
 	var canvas, gl, renderer, input, assetManager;
-	var skeleton, state, bounds;		
-	var timeKeeper, loadingScreen;	
-	var rotateHandle;	
+	var skeleton, state, bounds;
+	var timeKeeper, loadingScreen;
+	var rotateHandle;
 	var target = null;
 	var hoverTargets = [null, null, null];
-	var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];	
+	var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
 	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
 	var lastRotation = 0;
 	var mix, lastOffset = 0, lastMix = 0.5;
@@ -22,16 +22,16 @@ var transformsDemo = function(loadingComplete, bgColor) {
 	function init () {
 		canvas = document.getElementById("transforms-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);
 		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, "atlas2.png");
 		assetManager.loadText(DEMO_NAME, "atlas2.atlas");
 		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);
 	}
@@ -40,7 +40,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
 		timeKeeper.update();
 		if (assetManager.isLoadingComplete(DEMO_NAME)) {
 			var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.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);
@@ -50,11 +50,11 @@ var transformsDemo = function(loadingComplete, bgColor) {
 			skeleton.updateWorldTransform();
 			var offset = new spine.Vector2();
 			bounds = new spine.Vector2();
-			skeleton.getBounds(offset, bounds);
+			skeleton.getBounds(offset, bounds, []);
 			state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
-			skeleton.setToSetupPose();			
+			skeleton.setToSetupPose();
 			skeleton.updateWorldTransform();
-			rotateHandle = skeleton.findBone("rotate-handle");		
+			rotateHandle = skeleton.findBone("rotate-handle");
 
 			renderer.camera.position.x = offset.x + bounds.x / 2;
 			renderer.camera.position.y = offset.y + bounds.y / 2;
@@ -62,7 +62,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
 			renderer.skeletonDebugRenderer.drawRegionAttachments = false;
 			renderer.skeletonDebugRenderer.drawMeshHull = false;
 			renderer.skeletonDebugRenderer.drawMeshTriangles = false;
-			
+
 			setupUI();
 			setupInput();
 
@@ -79,7 +79,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
 			var val = percent * 360 - 180;
 			var delta = val - lastOffset;
 			lastOffset = val;
-			skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;			
+			skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
 			skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
 			$("#transforms-rotationoffset-label").text(Math.round(val) + "°");
 		};
@@ -103,21 +103,21 @@ var transformsDemo = function(loadingComplete, bgColor) {
 			var wheel1 = skeleton.findBone("wheel1overlay");
 			var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
 			var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees;
-			if (v.y < 0) angle = 360 - angle;			
+			if (v.y < 0) angle = 360 - angle;
 			return angle;
 		}
 		input.addListener({
-			down: function(x, y) { 
+			down: function(x, y) {
 				renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
-				for (var i = 0; i < controlBones.length; i++) {	
-					var bone = skeleton.findBone(controlBones[i]);													
+				for (var i = 0; i < controlBones.length; i++) {
+					var bone = skeleton.findBone(controlBones[i]);
 					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
 						target = bone;
 						if (target === rotateHandle) lastRotation = getRotation(x, y);
-					}				
-				}				
+					}
+				}
 			},
-			up: function(x, y) { 
+			up: function(x, y) {
 				target = null;
 			},
 			dragged: function(x, y) {
@@ -140,10 +140,10 @@ var transformsDemo = function(loadingComplete, bgColor) {
 					}
 				}
 			 },
-			moved: function (x, y) { 
+			moved: function (x, y) {
 				renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
 				for (var i = 0; i < controlBones.length; i++) {
-					var bone = skeleton.findBone(controlBones[i]);													
+					var bone = skeleton.findBone(controlBones[i]);
 					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
 						hoverTargets[i] = bone;
 					} else {
@@ -171,12 +171,12 @@ var transformsDemo = function(loadingComplete, bgColor) {
 		renderer.drawSkeleton(skeleton, true);
 		renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]);
 		gl.lineWidth(2);
-		for (var i = 0; i < controlBones.length; i++) {		
+		for (var i = 0; i < controlBones.length; i++) {
 			var bone = skeleton.findBone(controlBones[i]);
 			var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
 			var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
-			renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);			
-			renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);			
+			renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
+			renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
 		}
 		gl.lineWidth(1);
 		renderer.end();

spine-ts/webgl/demos/transitions.js

@@ -1,5 +1,5 @@
 var transitionsDemo = function(loadingComplete, bgColor) {
-	var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);	
+	var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
 
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, skeletonNoMix, state, stateNoMix, bounds;
@@ -17,43 +17,44 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 		timeSliderLabel = $("#transitions-timeslider-label")[0];
 		canvas = document.getElementById("transitions-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);
 		assetManager = spineDemos.assetManager;
 		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
-		
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");		
+
+		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
 		assetManager.loadText(DEMO_NAME, "atlas1.atlas");
 		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);	
+		requestAnimationFrame(load);
 	}
 
 	function load () {
 		timeKeeper.update();
 		if (assetManager.isLoadingComplete(DEMO_NAME)) {
 			skeleton = loadSkeleton("spineboy");
-			skeletonNoMix = new spine.Skeleton(skeleton.data);					
+			skeletonNoMix = new spine.Skeleton(skeleton.data);
 			state = createState(0.25);
+			state.multipleMixing = true;
 			setAnimations(state, 0);
 			stateNoMix = createState(0);
 			setAnimations(stateNoMix, -0.25);
-			
+
 			state.apply(skeleton);
 			skeleton.updateWorldTransform();
 			bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
-			skeleton.getBounds(bounds.offset, bounds.size);
+			skeleton.getBounds(bounds.offset, bounds.size, []);
 			setupInput();
 			$("#transitions-overlay").removeClass("overlay-hide");
-			$("#transitions-overlay").addClass("overlay");	
-			loadingComplete(canvas, render);						
+			$("#transitions-overlay").addClass("overlay");
+			loadingComplete(canvas, render);
 		} else {
-			loadingScreen.draw();			
+			loadingScreen.draw();
 			requestAnimationFrame(load);
 		}
 	}
@@ -86,7 +87,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 		state.addAnimation(0, "run", true, mix);
 		state.addAnimation(0, "jump", true, 0.5);
 		state.addAnimation(0, "run", true, mix).listener = {
-			start: function (trackIndex) { 
+			start: function (trackIndex) {
 				setAnimations(state, mix);
 			}
 		};
@@ -94,7 +95,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 
 	function loadSkeleton(name) {
 		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.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);
@@ -111,7 +112,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 			var oldValue = timeSliderLabel.textContent;
 			var newValue = Math.round(timeSlider.get() * 100) + "%";
 			if (oldValue !== newValue) timeSliderLabel.textContent = newValue;
-		} 
+		}
 
 		var offset = bounds.offset;
 		var size = bounds.size;
@@ -123,7 +124,7 @@ var transitionsDemo = 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);
 
 		renderer.begin();
 		state.update(delta);

spine-ts/webgl/demos/vine.js

@@ -5,7 +5,7 @@ var vineDemo = function(loadingComplete, bgColor) {
 	var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
 
 	var canvas, gl, renderer, input, assetManager;
-	var skeleton, state, bounds;		
+	var skeleton, state, bounds;
 	var timeKeeper, loadingScreen;
 	var target = null;
 	var hoverTargets = [null, null, null, null, null, null];
@@ -20,16 +20,16 @@ var vineDemo = function(loadingComplete, bgColor) {
 	function init () {
 		canvas = document.getElementById("vine-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);
 		input = new spine.webgl.Input(canvas);
 		assetManager = spineDemos.assetManager;
 		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
 		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
 		assetManager.loadText(DEMO_NAME, "atlas2.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");		
-		timeKeeper = new spine.TimeKeeper();		
+		assetManager.loadJson(DEMO_NAME, "demos.json");
+		timeKeeper = new spine.TimeKeeper();
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
 		requestAnimationFrame(load);
 	}
@@ -38,7 +38,7 @@ var vineDemo = function(loadingComplete, bgColor) {
 		timeKeeper.update();
 		if (assetManager.isLoadingComplete(DEMO_NAME)) {
 			var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.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);
@@ -48,7 +48,7 @@ var vineDemo = function(loadingComplete, bgColor) {
 			skeleton.updateWorldTransform();
 			var offset = new spine.Vector2();
 			bounds = new spine.Vector2();
-			skeleton.getBounds(offset, bounds);
+			skeleton.getBounds(offset, bounds, []);
 			state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
 			state.setAnimation(0, "animation", true);
 			state.apply(skeleton);
@@ -65,14 +65,14 @@ var vineDemo = function(loadingComplete, bgColor) {
 
 			loadingComplete(canvas, render);
 		} else {
-			loadingScreen.draw(); 
+			loadingScreen.draw();
 			requestAnimationFrame(load);
 		}
 	}
 
 	function setupUI() {
 		playButton = $("#vine-playbutton");
-		var playButtonUpdate = function () {			
+		var playButtonUpdate = function () {
 			isPlaying = !isPlaying;
 			if (isPlaying)
 				playButton.addClass("pause").removeClass("play");
@@ -87,11 +87,11 @@ var vineDemo = function(loadingComplete, bgColor) {
 			if (isPlaying) playButton.click();
 			if (!isPlaying) {
 				var animationDuration = state.getCurrent(0).animation.duration;
-				time = animationDuration * percent;	
+				time = animationDuration * percent;
 				state.update(time - playTime);
 				state.apply(skeleton);
 				skeleton.updateWorldTransform();
-				playTime = time;		
+				playTime = time;
 			}
 		};
 
@@ -100,19 +100,19 @@ var vineDemo = function(loadingComplete, bgColor) {
 		var checkbox = $("#vine-drawbones");
 		checkbox.change(function() {
 			renderer.skeletonDebugRenderer.drawPaths = this.checked;
-			renderer.skeletonDebugRenderer.drawBones = this.checked;			
+			renderer.skeletonDebugRenderer.drawBones = this.checked;
 		});
 	}
 
 	function setupInput() {
 		input.addListener({
 			down: function(x, y) {
-				for (var i = 0; i < controlBones.length; i++) {	
-					var bone = skeleton.findBone(controlBones[i]);				
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);				
+				for (var i = 0; i < controlBones.length; i++) {
+					var bone = skeleton.findBone(controlBones[i]);
+					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
 					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
 						target = bone;
-					}				
+					}
 				}
 			},
 			up: function(x, y) {
@@ -132,15 +132,15 @@ var vineDemo = function(loadingComplete, bgColor) {
 				}
 			},
 			moved: function (x, y) {
-				for (var i = 0; i < controlBones.length; i++) {	
-					var bone = skeleton.findBone(controlBones[i]);				
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);				
+				for (var i = 0; i < controlBones.length; i++) {
+					var bone = skeleton.findBone(controlBones[i]);
+					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
 					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
 						hoverTargets[i] = bone;
 					} else {
 						hoverTargets[i] = null;
 					}
-				}				
+				}
 			}
 		});
 	}
@@ -151,14 +151,14 @@ var vineDemo = function(loadingComplete, bgColor) {
 
 		if (isPlaying) {
 			var animationDuration = state.getCurrent(0).animation.duration;
-			playTime += delta;			
+			playTime += delta;
 			while (playTime >= animationDuration) {
 				playTime -= animationDuration;
 			}
 			timeLine.set(playTime / animationDuration);
 
 			state.update(delta);
-			state.apply(skeleton);						
+			state.apply(skeleton);
 		}
 
 		skeleton.updateWorldTransform();
@@ -168,18 +168,18 @@ var vineDemo = 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);
 
-		renderer.begin();				
+		renderer.begin();
 		renderer.drawSkeleton(skeleton, true);
 		renderer.drawSkeletonDebug(skeleton);
 		gl.lineWidth(2);
-		for (var i = 0; i < controlBones.length; i++) {		
+		for (var i = 0; i < controlBones.length; i++) {
 			var bone = skeleton.findBone(controlBones[i]);
 			var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
 			var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
-			renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);			
-			renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);			
+			renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
+			renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
 		}
 		gl.lineWidth(1);
 		renderer.end();

spine-unity/Assets/Examples/Scripts/Sample Components/AtlasRegionAttacher.cs

@@ -29,11 +29,13 @@
  *****************************************************************************/
 
 using UnityEngine;
-using System.Collections;
+using System.Collections.Generic;
 using Spine;
 using Spine.Unity.Modules.AttachmentTools;
 
 namespace Spine.Unity.Modules {
+	/// <summary>
+	/// Example code for a component that replaces the default attachment of a slot with an image from a Spine atlas.</summary>
 	public class AtlasRegionAttacher : MonoBehaviour {
 
 		[System.Serializable]
@@ -45,8 +47,9 @@ namespace Spine.Unity.Modules {
 			public string region;
 		}
 
-		public AtlasAsset atlasAsset;
-		public SlotRegionPair[] attachments;
+		[SerializeField] protected AtlasAsset atlasAsset;
+		[SerializeField] protected bool inheritProperties = true;
+		[SerializeField] protected List<SlotRegionPair> attachments = new List<SlotRegionPair>();
 
 		Atlas atlas;
 
@@ -58,14 +61,55 @@ namespace Spine.Unity.Modules {
 			atlas = atlasAsset.GetAtlas();
 			float scale = skeletonRenderer.skeletonDataAsset.scale;
 
-			var enumerator = attachments.GetEnumerator();
-			while (enumerator.MoveNext()) {
-				var entry = (SlotRegionPair)enumerator.Current;
-
-				var slot = skeletonRenderer.skeleton.FindSlot(entry.slot);
+			foreach (var entry in attachments) {
+				var slot = skeletonRenderer.Skeleton.FindSlot(entry.slot);
 				var region = atlas.FindRegion(entry.region);
-				slot.Attachment = region.ToRegionAttachment(entry.region, scale);
+				ReplaceAttachment(slot, region, scale, inheritProperties);
+			}
+		}
+
+		static void ReplaceAttachment (Slot slot, AtlasRegion region, float scale, bool inheritProperties) {
+			var originalAttachment = slot.Attachment;
+
+			// Altas was empty
+			if (region == null) {
+				slot.Attachment = null;
+				return;
+			}
+
+			// Original was MeshAttachment
+			if (inheritProperties) {
+				var originalMeshAttachment = originalAttachment as MeshAttachment;
+				if (originalMeshAttachment != null) {
+					var newMeshAttachment = originalMeshAttachment.GetLinkedClone(); // Attach the region as a linked mesh to the original mesh.
+					newMeshAttachment.SetRegion(region);
+					slot.Attachment = newMeshAttachment;
+					return;
+				}
+			}
+
+			// Original was RegionAttachment or empty
+			{
+				var originalRegionAttachment = originalAttachment as RegionAttachment;
+				var newRegionAttachment = region.ToRegionAttachment(region.name, scale);
+				if (originalRegionAttachment != null && inheritProperties) {
+					newRegionAttachment.X = originalRegionAttachment.X;
+					newRegionAttachment.Y = originalRegionAttachment.Y;
+					newRegionAttachment.Rotation = originalRegionAttachment.Rotation;
+					newRegionAttachment.ScaleX = originalRegionAttachment.ScaleX;
+					newRegionAttachment.ScaleY = originalRegionAttachment.ScaleY;
+					newRegionAttachment.UpdateOffset();
+
+					newRegionAttachment.R = originalRegionAttachment.R;
+					newRegionAttachment.G = originalRegionAttachment.G;
+					newRegionAttachment.B = originalRegionAttachment.B;
+					newRegionAttachment.A = originalRegionAttachment.A;
+				}
+
+				slot.Attachment = newRegionAttachment;
+				return;
 			}
+
 		}
 
 	}