[ts][player] Made Player.setAnimation() public and added a loop parameter. See player example on how to manually trigger animations.

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

@@ -1402,7 +1402,7 @@ declare module spine.webgl {
 		static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean;
 		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean);
 		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
-		static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear;
+		static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear | TextureFilter.Linear;
 		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
 		update(useMipMaps: boolean): void;
 		restore(): void;
@@ -1947,13 +1947,13 @@ declare module spine {
 		private context;
 		private loadingScreen;
 		private assetManager;
-		private loaded;
-		private skeleton;
-		private animationState;
-		private time;
+		loaded: boolean;
+		skeleton: Skeleton;
+		animationState: AnimationState;
 		private paused;
 		private playTime;
 		private speed;
+		private time;
 		private animationViewports;
 		private currentViewport;
 		private previousViewport;
@@ -1977,7 +1977,7 @@ declare module spine {
 		setupInput(): void;
 		private play;
 		private pause;
-		setAnimation(animation: string): void;
+		setAnimation(animation: string, loop?: boolean): void;
 		private percentageToWorldUnit;
 		private calculateAnimationViewport;
 		stopRendering(): void;

spine-ts/build/spine-all.js

@@ -6,8 +6,6 @@ var __extends = (this && this.__extends) || (function () {
 		return extendStatics(d, b);
 	};
 	return function (d, b) {
-		if (typeof b !== "function" && b !== null)
-			throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
 		extendStatics(d, b);
 		function __() { this.constructor = d; }
 		d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -11660,10 +11658,10 @@ var spine;
 	var SpinePlayer = (function () {
 		function SpinePlayer(parent, config) {
 			this.config = config;
-			this.time = new spine.TimeKeeper();
 			this.paused = true;
 			this.playTime = 0;
 			this.speed = 1;
+			this.time = new spine.TimeKeeper();
 			this.animationViewports = {};
 			this.currentViewport = null;
 			this.previousViewport = null;
@@ -12371,7 +12369,8 @@ var spine;
 			this.playButton.classList.remove("spine-player-button-icon-pause");
 			this.playButton.classList.add("spine-player-button-icon-play");
 		};
-		SpinePlayer.prototype.setAnimation = function (animation) {
+		SpinePlayer.prototype.setAnimation = function (animation, loop) {
+			if (loop === void 0) { loop = true; }
 			this.previousViewport = this.currentViewport;
 			var animViewport = this.calculateAnimationViewport(animation);
 			var viewport = {
@@ -12424,7 +12423,7 @@ var spine;
 			this.viewportTransitionStart = performance.now();
 			this.animationState.clearTracks();
 			this.skeleton.setToSetupPose();
-			this.animationState.setAnimation(0, animation, true);
+			this.animationState.setAnimation(0, animation, loop);
 		};
 		SpinePlayer.prototype.percentageToWorldUnit = function (size, percentageOrAbsolute) {
 			if (typeof percentageOrAbsolute === "string") {

spine-ts/build/spine-canvas.js

@@ -6,8 +6,6 @@ var __extends = (this && this.__extends) || (function () {
 		return extendStatics(d, b);
 	};
 	return function (d, b) {
-		if (typeof b !== "function" && b !== null)
-			throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
 		extendStatics(d, b);
 		function __() { this.constructor = d; }
 		d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

spine-ts/build/spine-core.js

@@ -6,8 +6,6 @@ var __extends = (this && this.__extends) || (function () {
 		return extendStatics(d, b);
 	};
 	return function (d, b) {
-		if (typeof b !== "function" && b !== null)
-			throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
 		extendStatics(d, b);
 		function __() { this.constructor = d; }
 		d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

spine-ts/build/spine-player.d.ts

@@ -1371,7 +1371,7 @@ declare module spine.webgl {
 		static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean;
 		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean);
 		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
-		static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear;
+		static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear | TextureFilter.Linear;
 		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
 		update(useMipMaps: boolean): void;
 		restore(): void;
@@ -1851,13 +1851,13 @@ declare module spine {
 		private context;
 		private loadingScreen;
 		private assetManager;
-		private loaded;
-		private skeleton;
-		private animationState;
-		private time;
+		loaded: boolean;
+		skeleton: Skeleton;
+		animationState: AnimationState;
 		private paused;
 		private playTime;
 		private speed;
+		private time;
 		private animationViewports;
 		private currentViewport;
 		private previousViewport;
@@ -1881,7 +1881,7 @@ declare module spine {
 		setupInput(): void;
 		private play;
 		private pause;
-		setAnimation(animation: string): void;
+		setAnimation(animation: string, loop?: boolean): void;
 		private percentageToWorldUnit;
 		private calculateAnimationViewport;
 		stopRendering(): void;

spine-ts/build/spine-player.js

@@ -6,8 +6,6 @@ var __extends = (this && this.__extends) || (function () {
 		return extendStatics(d, b);
 	};
 	return function (d, b) {
-		if (typeof b !== "function" && b !== null)
-			throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
 		extendStatics(d, b);
 		function __() { this.constructor = d; }
 		d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -10971,10 +10969,10 @@ var spine;
 	var SpinePlayer = (function () {
 		function SpinePlayer(parent, config) {
 			this.config = config;
-			this.time = new spine.TimeKeeper();
 			this.paused = true;
 			this.playTime = 0;
 			this.speed = 1;
+			this.time = new spine.TimeKeeper();
 			this.animationViewports = {};
 			this.currentViewport = null;
 			this.previousViewport = null;
@@ -11682,7 +11680,8 @@ var spine;
 			this.playButton.classList.remove("spine-player-button-icon-pause");
 			this.playButton.classList.add("spine-player-button-icon-play");
 		};
-		SpinePlayer.prototype.setAnimation = function (animation) {
+		SpinePlayer.prototype.setAnimation = function (animation, loop) {
+			if (loop === void 0) { loop = true; }
 			this.previousViewport = this.currentViewport;
 			var animViewport = this.calculateAnimationViewport(animation);
 			var viewport = {
@@ -11735,7 +11734,7 @@ var spine;
 			this.viewportTransitionStart = performance.now();
 			this.animationState.clearTracks();
 			this.skeleton.setToSetupPose();
-			this.animationState.setAnimation(0, animation, true);
+			this.animationState.setAnimation(0, animation, loop);
 		};
 		SpinePlayer.prototype.percentageToWorldUnit = function (size, percentageOrAbsolute) {
 			if (typeof percentageOrAbsolute === "string") {

spine-ts/build/spine-threejs.js

@@ -6,8 +6,6 @@ var __extends = (this && this.__extends) || (function () {
 		return extendStatics(d, b);
 	};
 	return function (d, b) {
-		if (typeof b !== "function" && b !== null)
-			throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
 		extendStatics(d, b);
 		function __() { this.constructor = d; }
 		d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

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

@@ -1371,7 +1371,7 @@ declare module spine.webgl {
 		static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean;
 		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean);
 		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
-		static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear;
+		static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear | TextureFilter.Linear;
 		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
 		update(useMipMaps: boolean): void;
 		restore(): void;

spine-ts/build/spine-webgl.js

@@ -6,8 +6,6 @@ var __extends = (this && this.__extends) || (function () {
 		return extendStatics(d, b);
 	};
 	return function (d, b) {
-		if (typeof b !== "function" && b !== null)
-			throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
 		extendStatics(d, b);
 		function __() { this.constructor = d; }
 		d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

spine-ts/player/example/index.html

@@ -17,6 +17,11 @@ body {
 <body>
 	<div id="container" style="width: 640px; height: 380px;"></div>
 	<div id="container-raptor" style="width: 640px; height: 380px;"></div>
+	<div>
+		<button id="walk">Walk</button>
+		<button id="jump">Jump</button>
+		<button id="roar">Roar</button>
+	</div>
 </body>
 <script>
 	// Creates a new spine player. The debugRender option enables
@@ -30,19 +35,36 @@ body {
 		viewport: {
 			debugRender: true,
 		},
-		showControls: false,
+		showControls: true,
 	});
 
 	// Creates a new spine player with a transparent background,
 	// so content from the website shines through. Hides the controls.
-	new spine.SpinePlayer("container-raptor", {
+	// Instead, the user can control the animation via buttons.
+	var jsControlledPlayer = new spine.SpinePlayer("container-raptor", {
 		jsonUrl: "assets/raptor-pro.json",
 		atlasUrl: "assets/raptor-pma.atlas",
 		animation: "walk",
 		showControls: false,
 		premultipliedAlpha: true,
 		backgroundColor: "#00000000",
-		alpha: true
+		alpha: true,
+		defaultMix: 1,
+		success: (player) => {
+			// Register button click event handlers once the
+			// skeleton has been loaded successfully
+			document.getElementById("walk").addEventListener("click", event => {
+				jsControlledPlayer.setAnimation("walk", false); // set the walk animation to play once
+			});
+
+			document.getElementById("jump").addEventListener("click", event => {
+				jsControlledPlayer.setAnimation("jump", false); // set the jump animation to play once
+			});
+
+			document.getElementById("roar").addEventListener("click", event => {
+				jsControlledPlayer.setAnimation("roar", true); // set the jump animation to loop
+			});
+		}
 	});
 </script>
 </body>

spine-ts/player/src/Player.ts

@@ -304,14 +304,17 @@ module spine {
 		private loadingScreen: spine.webgl.LoadingScreen;
 		private assetManager: spine.webgl.AssetManager;
 
-		private loaded: boolean;
-		private skeleton: Skeleton;
-		private animationState: AnimationState;
-		private time = new TimeKeeper();
+		// Whether the skeleton was loaded
+		public loaded: boolean;
+		// The loaded skeleton
+		public skeleton: Skeleton;
+		// The animation state controlling the skeleton
+		public animationState: AnimationState;
+
 		private paused = true;
 		private playTime = 0;
 		private speed = 1;
-
+		private time = new TimeKeeper();
 		private animationViewports: Map<Viewport> = {}
 		private currentViewport: Viewport = null;
 		private previousViewport: Viewport = null;
@@ -1127,7 +1130,7 @@ module spine {
 			this.playButton.classList.add("spine-player-button-icon-play");
 		}
 
-		public setAnimation (animation: string) {
+		public setAnimation (animation: string, loop: boolean = true) {
 			// Determine viewport
 			this.previousViewport = this.currentViewport;
 			let animViewport = this.calculateAnimationViewport(animation);
@@ -1184,7 +1187,7 @@ module spine {
 
 			this.animationState.clearTracks();
 			this.skeleton.setToSetupPose();
-			this.animationState.setAnimation(0, animation, true);
+			this.animationState.setAnimation(0, animation, loop);
 		}
 
 		private percentageToWorldUnit(size: number, percentageOrAbsolute: string | number): number {