[ts] Remove old namespaces, dev build

Previously, we'd export to global objects called spine.canvas, spine.webgl, spine.threejs. Going forward, all Spine APIs will be hosted by the global spine object when the runtime is used straight from the bundled .js files in the build/ folder. This is a minor change with a simple fix on the user side, i.e. replace spine.canvas. with spine.

spine-ts/README.md

@@ -29,7 +29,7 @@ spine-ts works with data exported from Spine 4.0.xx.
 
 The spine-ts WebGL and Player backends support all Spine features.
 
-spine-ts Canvas does not support mesh attachments, clipping attachments, or color tinting. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting `spine.canvas.SkeletonRenderer.useTriangleRendering` to true. Note that this experimental mesh rendering is slow and render with artifacts on some browsers.
+spine-ts Canvas does not support mesh attachments, clipping attachments, or color tinting. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting `spine.SkeletonRenderer.useTriangleRendering` to true. Note that this experimental mesh rendering is slow and render with artifacts on some browsers.
 
 spine-ts THREE.JS does not support two color tinting or blend modes. The THREE.JS backend provides `SkeletonMesh.zOffset` to avoid z-fighting. Adjust to your near/far plane settings.
 

spine-ts/package.json

@@ -3,12 +3,18 @@
   "version": "4.0.1",
   "description": "The official Spine Runtimes for the web.",
   "scripts": {
-    "build": "rm -rf build && npm run build:core && npm run build:canvas && npm run build:webgl && npm run build:player && npm run build:threejs",
-    "build:core": "npx esbuild --bundle spine-core/src/index.ts --tsconfig=spine-core/tsconfig.json --minify --sourcemap --outfile=build/spine-core.js --format=iife --global-name=\"spine\"",
-    "build:canvas": "npx esbuild --bundle spine-canvas/src/index.ts --tsconfig=spine-canvas/tsconfig.json --minify --sourcemap --outfile=build/spine-canvas.js --format=iife --global-name=\"spine\"",
-    "build:webgl": "npx esbuild --bundle spine-webgl/src/index.ts --tsconfig=spine-webgl/tsconfig.json --minify --sourcemap --outfile=build/spine-webgl.js --format=iife --global-name=\"spine\"",
-    "build:player": "npx esbuild --bundle spine-player/src/index.ts --tsconfig=spine-player/tsconfig.json --minify --sourcemap --outfile=build/spine-player.js --format=iife --global-name=\"spine\"",
-    "build:threejs": "npx esbuild --bundle spine-threejs/src/index.ts --tsconfig=spine-threejs/tsconfig.json --minify --sourcemap --outfile=build/spine-threejs.js --external:three --format=iife --global-name=\"spine\""
+    "build": "rm -rf build && concurrently \"npm run build:core\" \"npm run build:canvas\" \"npm run build:webgl\" \"npm run build:player\" \"npm run build:threejs\"",
+    "build:modules": "tsc -b -clean && tsc -b",
+    "build:core": "npx esbuild --bundle spine-core/src/index.ts --tsconfig=spine-core/tsconfig.json  --sourcemap --outfile=build/spine-core.js --format=iife --global-name=\"spine\"",
+    "build:canvas": "npx esbuild --bundle spine-canvas/src/index.ts --tsconfig=spine-canvas/tsconfig.json  --sourcemap --outfile=build/spine-canvas.js --format=iife --global-name=\"spine\"",
+    "build:webgl": "npx esbuild --bundle spine-webgl/src/index.ts --tsconfig=spine-webgl/tsconfig.json  --sourcemap --outfile=build/spine-webgl.js --format=iife --global-name=\"spine\"",
+    "build:player": "npx esbuild --bundle spine-player/src/index.ts --tsconfig=spine-player/tsconfig.json  --sourcemap --outfile=build/spine-player.js --format=iife --global-name=\"spine\"",
+    "build:threejs": "npx esbuild --bundle spine-threejs/src/index.ts --tsconfig=spine-threejs/tsconfig.json  --sourcemap --outfile=build/spine-threejs.js --external:three --format=iife --global-name=\"spine\"",
+    "dev": "concurrently \"npx live-server --no-browser\" \"npm run dev:canvas\" \"npm run dev:webgl\" \"npm run dev:player\" \"npm run dev:threejs\"",
+    "dev:canvas": "npm run build:canvas -- --watch",
+    "dev:webgl": "npm run build:webgl -- --watch",
+    "dev:player": "npm run build:player -- --watch",
+    "dev:threejs": "npm run build:threejs -- --watch"
   },
   "repository": {
     "type": "git",
@@ -38,11 +44,10 @@
     "spine-webgl"
   ],
   "devDependencies": {
-    "@rollup/plugin-typescript": "^8.2.5",
+    "concurrently": "^6.2.1",
     "esbuild": "^0.12.22",
+    "live-server": "^1.2.1",
     "npx": "^10.2.2",
-    "rollup": "^2.56.3",
-    "rollup-plugin-dts": "^3.0.2",
     "typescript": "^4.3.5"
   }
 }

spine-ts/spine-canvas/example/index.html

@@ -2,166 +2,180 @@
 <script src="../../build/spine-canvas.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <style>
-	* { margin: 0; padding: 0; }
-	body, html { height: 100% }
-	canvas { position: absolute; width: 100% ;height: 100%; }
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	body,
+	html {
+		height: 100%
+	}
+
+	canvas {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
 </style>
+
 <body>
-<canvas id="canvas"></canvas>
+	<canvas id="canvas"></canvas>
 </body>
 <script>
 
-var lastFrameTime = Date.now() / 1000;
-var canvas, context;
-var assetManager;
-var skeleton, state, bounds;
-var skeletonRenderer;
-
-var skelName = "spineboy-ess";
-var animName = "walk";
-
-function init () {
-	canvas = document.getElementById("canvas");
-	canvas.width = window.innerWidth;
-	canvas.height = window.innerHeight;
-	context = canvas.getContext("2d");
-
-	skeletonRenderer = new spine.canvas.SkeletonRenderer(context);
-	// enable debug rendering
-	skeletonRenderer.debugRendering = true;
-	// enable the triangle renderer, supports meshes, but may produce artifacts in some browsers
-	skeletonRenderer.triangleRendering = false;
-
-	assetManager = new spine.canvas.AssetManager("assets/");
-
-	assetManager.loadText(skelName + ".json");
-	assetManager.loadText(skelName.replace("-pro", "").replace("-ess", "") + ".atlas");
-	assetManager.loadTexture(skelName.replace("-pro", "").replace("-ess", "") + ".png");
-
-	requestAnimationFrame(load);
-}
-
-function load () {
-	if (assetManager.isLoadingComplete()) {
-		var data = loadSkeleton(skelName, animName, "default");
-		skeleton = data.skeleton;
-		state = data.state;
-		bounds = data.bounds;
-		requestAnimationFrame(render);
-	} else {
+	var lastFrameTime = Date.now() / 1000;
+	var canvas, context;
+	var assetManager;
+	var skeleton, state, bounds;
+	var skeletonRenderer;
+
+	var skelName = "spineboy-ess";
+	var animName = "walk";
+
+	function init() {
+		canvas = document.getElementById("canvas");
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+		context = canvas.getContext("2d");
+
+		skeletonRenderer = new spine.SkeletonRenderer(context);
+		// enable debug rendering
+		skeletonRenderer.debugRendering = true;
+		// enable the triangle renderer, supports meshes, but may produce artifacts in some browsers
+		skeletonRenderer.triangleRendering = false;
+
+		assetManager = new spine.AssetManager("assets/");
+
+		assetManager.loadText(skelName + ".json");
+		assetManager.loadText(skelName.replace("-pro", "").replace("-ess", "") + ".atlas");
+		assetManager.loadTexture(skelName.replace("-pro", "").replace("-ess", "") + ".png");
+
 		requestAnimationFrame(load);
 	}
-}
-
-function loadSkeleton (name, initialAnimation, skin) {
-	if (skin === undefined) skin = "default";
-
-	// Load the texture atlas using name.atlas and name.png from the AssetManager.
-	// The function passed to TextureAtlas is used to resolve relative paths.
-	atlas = new spine.TextureAtlas(assetManager.require(name.replace("-pro", "").replace("-ess", "") + ".atlas"));
-	atlas.setTextures(assetManager);
-
-	// Create a AtlasAttachmentLoader, which is specific to the WebGL backend.
-	atlasLoader = new spine.AtlasAttachmentLoader(atlas);
-
-	// Create a SkeletonJson instance for parsing the .json file.
-	var skeletonJson = new spine.SkeletonJson(atlasLoader);
-
-	// Set the scale to apply during parsing, parse the file, and create a new skeleton.
-	var skeletonData = skeletonJson.readSkeletonData(assetManager.require(name + ".json"));
-	var skeleton = new spine.Skeleton(skeletonData);
-	skeleton.scaleY = -1;
-	var bounds = calculateBounds(skeleton);
-	skeleton.setSkinByName(skin);
-
-	// Create an AnimationState, and set the initial animation in looping mode.
-	var animationState = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
-	animationState.setAnimation(0, initialAnimation, true);
-	animationState.addListener({
-		event: function(trackIndex, event) {
-			// console.log("Event on track " + trackIndex + ": " + JSON.stringify(event));
-		},
-		complete: function(trackIndex, loopCount) {
-			// console.log("Animation on track " + trackIndex + " completed, loop count: " + loopCount);
-		},
-		start: function(trackIndex) {
-			// console.log("Animation on track " + trackIndex + " started");
-		},
-		end: function(trackIndex) {
-			// console.log("Animation on track " + trackIndex + " ended");
+
+	function load() {
+		if (assetManager.isLoadingComplete()) {
+			var data = loadSkeleton(skelName, animName, "default");
+			skeleton = data.skeleton;
+			state = data.state;
+			bounds = data.bounds;
+			requestAnimationFrame(render);
+		} else {
+			requestAnimationFrame(load);
 		}
-	})
-
-	// Pack everything up and return to caller.
-	return { skeleton: skeleton, state: animationState, bounds: bounds };
-}
-
-function calculateBounds(skeleton) {
-	var data = skeleton.data;
-	skeleton.setToSetupPose();
-	skeleton.updateWorldTransform();
-	var offset = new spine.Vector2();
-	var size = new spine.Vector2();
-	skeleton.getBounds(offset, size, []);
-	return { offset: offset, size: size };
-}
-
-function render () {
-	var now = Date.now() / 1000;
-	var delta = now - lastFrameTime;
-	lastFrameTime = now;
-
-	resize();
-
-	context.save();
-	context.setTransform(1, 0, 0, 1, 0, 0);
-	context.fillStyle = "#cccccc";
-	context.fillRect(0, 0, canvas.width, canvas.height);
-	context.restore();
-
-	state.update(delta);
-	state.apply(skeleton);
-	skeleton.updateWorldTransform();
-	skeletonRenderer.draw(skeleton);
-
-	context.strokeStyle = "green";
-	context.beginPath();
-	context.moveTo(-1000, 0);
-	context.lineTo(1000, 0);
-	context.moveTo(0, -1000);
-	context.lineTo(0, 1000);
-	context.stroke();
-
-	requestAnimationFrame(render);
-}
-
-function resize () {
-	var w = canvas.clientWidth;
-	var h = canvas.clientHeight;
-	if (canvas.width != w || canvas.height != h) {
-		canvas.width = w;
-		canvas.height = h;
 	}
 
-	// magic
-	var centerX = bounds.offset.x + bounds.size.x / 2;
-	var centerY = bounds.offset.y + bounds.size.y / 2;
-	var scaleX = bounds.size.x / canvas.width;
-	var scaleY = bounds.size.y / canvas.height;
-	var scale = Math.max(scaleX, scaleY) * 1.2;
-	if (scale < 1) scale = 1;
-	var width = canvas.width * scale;
-	var height = canvas.height * scale;
-
-	context.setTransform(1, 0, 0, 1, 0, 0);
-	context.scale(1 / scale, 1 / scale);
-	context.translate(-centerX, -centerY);
-	context.translate(width / 2, height / 2);
-}
-
-(function() {
-	init();
-}());
+	function loadSkeleton(name, initialAnimation, skin) {
+		if (skin === undefined) skin = "default";
+
+		// Load the texture atlas using name.atlas and name.png from the AssetManager.
+		// The function passed to TextureAtlas is used to resolve relative paths.
+		atlas = new spine.TextureAtlas(assetManager.require(name.replace("-pro", "").replace("-ess", "") + ".atlas"));
+		atlas.setTextures(assetManager);
+
+		// Create a AtlasAttachmentLoader, which is specific to the WebGL backend.
+		atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+
+		// Create a SkeletonJson instance for parsing the .json file.
+		var skeletonJson = new spine.SkeletonJson(atlasLoader);
+
+		// Set the scale to apply during parsing, parse the file, and create a new skeleton.
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.require(name + ".json"));
+		var skeleton = new spine.Skeleton(skeletonData);
+		skeleton.scaleY = -1;
+		var bounds = calculateBounds(skeleton);
+		skeleton.setSkinByName(skin);
+
+		// Create an AnimationState, and set the initial animation in looping mode.
+		var animationState = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
+		animationState.setAnimation(0, initialAnimation, true);
+		animationState.addListener({
+			event: function (trackIndex, event) {
+				// console.log("Event on track " + trackIndex + ": " + JSON.stringify(event));
+			},
+			complete: function (trackIndex, loopCount) {
+				// console.log("Animation on track " + trackIndex + " completed, loop count: " + loopCount);
+			},
+			start: function (trackIndex) {
+				// console.log("Animation on track " + trackIndex + " started");
+			},
+			end: function (trackIndex) {
+				// console.log("Animation on track " + trackIndex + " ended");
+			}
+		})
+
+		// Pack everything up and return to caller.
+		return { skeleton: skeleton, state: animationState, bounds: bounds };
+	}
+
+	function calculateBounds(skeleton) {
+		var data = skeleton.data;
+		skeleton.setToSetupPose();
+		skeleton.updateWorldTransform();
+		var offset = new spine.Vector2();
+		var size = new spine.Vector2();
+		skeleton.getBounds(offset, size, []);
+		return { offset: offset, size: size };
+	}
+
+	function render() {
+		var now = Date.now() / 1000;
+		var delta = now - lastFrameTime;
+		lastFrameTime = now;
+
+		resize();
+
+		context.save();
+		context.setTransform(1, 0, 0, 1, 0, 0);
+		context.fillStyle = "#cccccc";
+		context.fillRect(0, 0, canvas.width, canvas.height);
+		context.restore();
+
+		state.update(delta);
+		state.apply(skeleton);
+		skeleton.updateWorldTransform();
+		skeletonRenderer.draw(skeleton);
+
+		context.strokeStyle = "green";
+		context.beginPath();
+		context.moveTo(-1000, 0);
+		context.lineTo(1000, 0);
+		context.moveTo(0, -1000);
+		context.lineTo(0, 1000);
+		context.stroke();
+
+		requestAnimationFrame(render);
+	}
+
+	function resize() {
+		var w = canvas.clientWidth;
+		var h = canvas.clientHeight;
+		if (canvas.width != w || canvas.height != h) {
+			canvas.width = w;
+			canvas.height = h;
+		}
+
+		// magic
+		var centerX = bounds.offset.x + bounds.size.x / 2;
+		var centerY = bounds.offset.y + bounds.size.y / 2;
+		var scaleX = bounds.size.x / canvas.width;
+		var scaleY = bounds.size.y / canvas.height;
+		var scale = Math.max(scaleX, scaleY) * 1.2;
+		if (scale < 1) scale = 1;
+		var width = canvas.width * scale;
+		var height = canvas.height * scale;
+
+		context.setTransform(1, 0, 0, 1, 0, 0);
+		context.scale(1 / scale, 1 / scale);
+		context.translate(-centerX, -centerY);
+		context.translate(width / 2, height / 2);
+	}
+
+	(function () {
+		init();
+	}());
 
 </script>
+
 </html>

spine-ts/spine-canvas/src/index.ts

@@ -1,27 +1,4 @@
 export * from "./AssetManager";
 export * from "./CanvasTexture";
 export * from "./SkeletonRenderer";
-
-export * from "@esotericsoftware/spine-core"
-
-// Before modularization, we would expose spine-core on the global
-// `spine` object, and spine-canvas on the global `spine.canvas` object.
-// This was used by clients when including spine-canvas via <script src="spine-canvas.js">
-// 
-// Now with modularization and using esbuild for bundling, we need to emulate this old
-// behaviour as to not break old clients.
-//
-// We pass `--global-name=spine` to esbuild. This will create an object containing
-// all exports and assign it to the global variable called `spine`.
-//
-// That solves half the issue. We also need to assign the exports object to 
-// `spine.canvas`. esbuild creates a local variable called `scr_exports` pointing
-// to the exports object. We get to it via eval, then assign it to itself, on a new
-// property called `canvas`. The client can then access the APIs through `spine` and
-// `spine.canvas` as before (with the caveat that both spine-core and spine-canvas are
-// now in `spine` and `spine.canvas`).
-//
-// This will break if esbuild renames the variable `src_exports` pointing to
-// the exports object.
-let exports = eval("src_exports");
-if (exports) exports.canvas = exports;
+export * from "@esotericsoftware/spine-core"

spine-ts/spine-player/src/index.ts

@@ -1,27 +1,4 @@
 export * from './Player';
 export * from './PlayerEditor';
-
 export * from "@esotericsoftware/spine-core";
 export * from "@esotericsoftware/spine-webgl";
-
-// Before modularization, we would expose spine-core on the global
-// `spine` object, and spine-webgl on the global `spine.webgl` object.
-// This was used by clients when including spine-webgl via <script src="spine-webgl.js">
-// 
-// Now with modularization and using esbuild for bundling, we need to emulate this old
-// behaviour as to not break old clients.
-//
-// We pass `--global-name=spine` to esbuild. This will create an object containing
-// all exports and assign it to the global variable called `spine`.
-//
-// That solves half the issue. We also need to assign the exports object to 
-// `spine.webgl`. esbuild creates a local variable called `scr_exports` pointing
-// to the exports object. We get to it via eval, then assign it to itself, on a new
-// property called `webgl`. The client can then access the APIs through `spine` and
-// `spine.webgl` as before (with the caveat that both spine-core and spine-webgl are
-// now in `spine` and `spine.webgl`).
-//
-// This will break if esbuild renames the variable `src_exports` pointing to
-// the exports object.
-let exports = eval("src_exports");
-if (exports) exports.webgl = exports;

spine-ts/spine-threejs/example/index.html

@@ -52,7 +52,7 @@
 				canvas = renderer.domElement;
 
 				// load the assets required to display the Raptor model
-				assetManager = new spine.threejs.AssetManager(baseUrl);
+				assetManager = new spine.AssetManager(baseUrl);
 				assetManager.loadText(skeletonFile);
 				assetManager.loadTextureAtlas(atlasFile);
 
@@ -82,7 +82,7 @@
 					var skeletonData = skeletonJson.readSkeletonData(assetManager.require(skeletonFile));
 
 					// Create a SkeletonMesh from the data and attach it to the scene
-					skeletonMesh = new spine.threejs.SkeletonMesh(skeletonData, function (parameters) {
+					skeletonMesh = new spine.SkeletonMesh(skeletonData, function (parameters) {
 						parameters.depthTest = false;
 					});
 					skeletonMesh.state.setAnimation(0, animation, true);

spine-ts/spine-threejs/src/index.ts

@@ -3,27 +3,4 @@ export * from './AssetManager';
 export * from './MeshBatcher';
 export * from './SkeletonMesh';
 export * from './ThreeJsTexture';
-
-export * from "@esotericsoftware/spine-core";
-
-// Before modularization, we would expose spine-core on the global
-// `spine` object, and spine-threejs on the global `spine.threejs` object.
-// This was used by clients when including spine-threejs via <script src="spine-threejs.js">
-// 
-// Now with modularization and using esbuild for bundling, we need to emulate this old
-// behaviour as to not break old clients.
-//
-// We pass `--global-name=spine` to esbuild. This will create an object containing
-// all exports and assign it to the global variable called `spine`.
-//
-// That solves half the issue. We also need to assign the exports object to 
-// `spine.threejs`. esbuild creates a local variable called `scr_exports` pointing
-// to the exports object. We get to it via eval, then assign it to itself, on a new
-// property called `threejs`. The client can then access the APIs through `spine` and
-// `spine.threejs` as before (with the caveat that both spine-core and spine-threejs are
-// now in `spine` and `spine.threejs`).
-//
-// This will break if esbuild renames the variable `src_exports` pointing to
-// the exports object.
-let exports = eval("src_exports");
-if (exports) exports.threejs = exports;
+export * from "@esotericsoftware/spine-core";

spine-ts/spine-webgl/demos/additiveblending.js

@@ -1,4 +1,4 @@
-var additiveBlendingDemo = function(canvas, bgColor) {
+var additiveBlendingDemo = function (canvas, bgColor) {
 	var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
 	var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
 	var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@@ -11,7 +11,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 	var target = null;
 	var dragging = false;
 	var handle = new spine.Vector2();
-	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
+	var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.Vector3();
 	var isPlaying = true;
 
 	var left, right, up, down;
@@ -25,10 +25,10 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 		return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
 	};
 
-	function init () {
+	function init() {
 		gl = canvas.context.gl;
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
+		renderer = new spine.SceneRenderer(canvas, gl);
+		assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas2.atlas");
 		assetManager.loadJson("demos.json");
 		timeKeeper = new spine.TimeKeeper();
@@ -36,7 +36,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 		cursor = document.getElementById("cursor");
 	}
 
-	function loadingComplete () {
+	function loadingComplete() {
 		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
 		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").owl);
@@ -73,17 +73,17 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 		setupInput();
 	}
 
-	function calculateBlend (x, y, isPageCoords) {
+	function calculateBlend(x, y, isPageCoords) {
 		var canvasBounds = canvas.getBoundingClientRect();
 		var centerX = canvasBounds.x + canvasBounds.width / 2;
 		var centerY = canvasBounds.y + canvasBounds.height / 2;
 		right.alpha = x < centerX ? 1 - x / centerX : 0;
-		left.alpha = x > centerX ? (x - centerX) / (window.innerWidth - centerX): 0;
+		left.alpha = x > centerX ? (x - centerX) / (window.innerWidth - centerX) : 0;
 		up.alpha = y < centerY ? 1 - y / centerY : 0;
-		down.alpha = y > centerY ? (y - centerY) / (window.innerHeight - centerY): 0;
+		down.alpha = y > centerY ? (y - centerY) / (window.innerHeight - centerY) : 0;
 	}
 
-	function setupInput () {
+	function setupInput() {
 		if (!isMobileDevice()) {
 			document.addEventListener("mousemove", function (event) {
 				clientMouseX = event.clientX;
@@ -91,18 +91,18 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 				mouseMoved = true;
 			}, false);
 		} else {
-			var input = new spine.webgl.Input(canvas);
+			var input = new spine.Input(canvas);
 			input.addListener({
-				down: function(x, y) {
+				down: function (x, y) {
 					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
 					if (temp.set(handle.x, handle.y, 0).distance(coords) < canvas.width * HANDLE_SIZE) {
 						dragging = true;
 					}
 				},
-				up: function(x, y) {
+				up: function (x, y) {
 					dragging = false;
 				},
-				dragged: function(x, y) {
+				dragged: function (x, y) {
 					if (dragging && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
 						renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
 						handle.x = coords.x;
@@ -114,7 +114,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 		}
 	}
 
-	function render () {
+	function render() {
 		if (!isMobileDevice() && mouseMoved) calculateBlend(clientMouseX, clientMouseY, true);
 
 		timeKeeper.update();
@@ -126,7 +126,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 
 		renderer.camera.viewportWidth = bounds.x * 1.4;
 		renderer.camera.viewportHeight = bounds.y * 1.4;
-		renderer.resize(spine.webgl.ResizeMode.Fit);
+		renderer.resize(spine.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 		gl.clear(gl.COLOR_BUFFER_BIT);

spine-ts/spine-webgl/demos/clipping.js

@@ -1,4 +1,4 @@
-var clippingDemo = function(canvas, bgColor) {
+var clippingDemo = function (canvas, bgColor) {
 	var gl, renderer, assetManager;
 	var skeleton, state, bounds;
 	var timeKeeper;
@@ -6,16 +6,16 @@ var clippingDemo = function(canvas, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
-	function init () {
+	function init() {
 		gl = canvas.context.gl;
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
+		renderer = new spine.SceneRenderer(canvas, gl);
+		assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas1.atlas");
 		assetManager.loadJson("demos.json");
 		timeKeeper = new spine.TimeKeeper();
 	}
 
-	function loadingComplete () {
+	function loadingComplete() {
 		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
 		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy);
@@ -67,7 +67,7 @@ var clippingDemo = function(canvas, bgColor) {
 		renderer.skeletonDebugRenderer.drawBones = false;
 		renderer.skeletonDebugRenderer.drawMeshHull = false;
 		renderer.skeletonDebugRenderer.drawMeshTriangles = false;
-		$("#clipping-drawtriangles").click(function() {
+		$("#clipping-drawtriangles").click(function () {
 			renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
 			renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
 			renderer.skeletonDebugRenderer.drawClipping = this.checked;
@@ -75,7 +75,7 @@ var clippingDemo = function(canvas, bgColor) {
 		})
 	}
 
-	function render () {
+	function render() {
 		timeKeeper.update();
 		var delta = timeKeeper.delta;
 
@@ -93,7 +93,7 @@ var clippingDemo = function(canvas, bgColor) {
 
 		renderer.camera.viewportWidth = bounds.x * 1.6;
 		renderer.camera.viewportHeight = bounds.y * 1.6;
-		renderer.resize(spine.webgl.ResizeMode.Fit);
+		renderer.resize(spine.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 		gl.clear(gl.COLOR_BUFFER_BIT);

spine-ts/spine-webgl/demos/hoverboard.js

@@ -1,4 +1,4 @@
-var hoverboardDemo = function(canvas, bgColor) {
+var hoverboardDemo = function (canvas, bgColor) {
 	var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
 	var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
 	var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@@ -10,23 +10,23 @@ var hoverboardDemo = function(canvas, bgColor) {
 	var target = null;
 	var hoverTargets = [];
 	var controlBones = ["hoverboard controller", "hip controller", "board target", "crosshair"];
-	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
+	var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.Vector3();
 	var isPlaying = true;
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
-	function init () {
+	function init() {
 		gl = canvas.context.gl;
 
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
+		renderer = new spine.SceneRenderer(canvas, gl);
+		assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas1.atlas");
 		assetManager.loadJson("demos.json");
-		input = new spine.webgl.Input(canvas);
+		input = new spine.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();
 	}
 
-	function loadingComplete () {
+	function loadingComplete() {
 		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
 		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy);
@@ -51,12 +51,12 @@ var hoverboardDemo = function(canvas, bgColor) {
 		setupInput();
 	}
 
-	function setupUI () {
+	function setupUI() {
 		var checkbox = $("#hoverboard-drawbones");
 		renderer.skeletonDebugRenderer.drawRegionAttachments = false;
 		renderer.skeletonDebugRenderer.drawPaths = false;
 		renderer.skeletonDebugRenderer.drawBones = false;
-		checkbox.change(function() {
+		checkbox.change(function () {
 			renderer.skeletonDebugRenderer.drawPaths = this.checked;
 			renderer.skeletonDebugRenderer.drawBones = this.checked;
 		});
@@ -92,17 +92,17 @@ var hoverboardDemo = function(canvas, bgColor) {
 		});
 	}
 
-	function setupInput () {
+	function setupInput() {
 		input.addListener({
-			down: function(x, y) {
+			down: function (x, y) {
 				isPlaying = false;
 				target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
 			},
-			up: function(x, y) {
+			up: function (x, y) {
 				if (target && target.data.name == "crosshair") $("#hoverboard-shoot").click();
 				target = null;
 			},
-			dragged: function(x, y) {
+			dragged: function (x, y) {
 				spineDemos.dragged(canvas, renderer, target, x, y);
 			},
 			moved: function (x, y) {
@@ -111,7 +111,7 @@ var hoverboardDemo = function(canvas, bgColor) {
 		});
 	}
 
-	function render () {
+	function render() {
 		timeKeeper.update();
 		var delta = timeKeeper.delta;
 
@@ -121,7 +121,7 @@ var hoverboardDemo = function(canvas, bgColor) {
 
 		renderer.camera.viewportWidth = bounds.x * 1.2;
 		renderer.camera.viewportHeight = bounds.y * 1.2;
-		renderer.resize(spine.webgl.ResizeMode.Fit);
+		renderer.resize(spine.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 		gl.clear(gl.COLOR_BUFFER_BIT);

spine-ts/spine-webgl/demos/imagechanges.js

@@ -1,4 +1,4 @@
-var imageChangesDemo = function(canvas, bgColor) {
+var imageChangesDemo = function (canvas, bgColor) {
 	var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
 
 	var canvas, gl, renderer, input, assetManager;
@@ -10,16 +10,16 @@ var imageChangesDemo = function(canvas, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
-	function init () {
+	function init() {
 		gl = canvas.context.gl;
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
+		renderer = new spine.SceneRenderer(canvas, gl);
+		assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas1.atlas");
 		assetManager.loadJson("demos.json");
 		timeKeeper = new spine.TimeKeeper();
 	}
 
-	function loadingComplete () {
+	function loadingComplete() {
 		skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]);
 		skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
 		setupUI();
@@ -58,7 +58,7 @@ var imageChangesDemo = function(canvas, bgColor) {
 			if (skeletonName === activeSkeleton) option.attr("selected", "selected");
 			list.append(option);
 		}
-		list.change(function() {
+		list.change(function () {
 			activeSkeleton = $("#imagechanges-skeleton option:selected").text();
 			var active = skeletons[activeSkeleton];
 			var animationDuration = active.state.getCurrent(0).animation.duration;
@@ -83,7 +83,7 @@ var imageChangesDemo = function(canvas, bgColor) {
 		skeleton.getBounds(offset, size, []);
 
 		var regions = [];
-		for(var i = 0; i < sequenceSlots.length; i++) {
+		for (var i = 0; i < sequenceSlots.length; i++) {
 			var slot = skeleton.findSlot(sequenceSlots[i]);
 			sequenceSlots[i] = slot;
 			var index = slot.data.index;
@@ -104,7 +104,7 @@ var imageChangesDemo = function(canvas, bgColor) {
 		};
 	}
 
-	function render () {
+	function render() {
 		timeKeeper.update();
 		var delta = timeKeeper.delta;
 
@@ -127,7 +127,7 @@ var imageChangesDemo = function(canvas, bgColor) {
 		}
 		renderer.camera.viewportWidth = size.x * 2.4 / zoom;
 		renderer.camera.viewportHeight = size.y * 1.4 / zoom;
-		renderer.resize(spine.webgl.ResizeMode.Fit);
+		renderer.resize(spine.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 		gl.clear(gl.COLOR_BUFFER_BIT);
@@ -156,7 +156,7 @@ var imageChangesDemo = function(canvas, bgColor) {
 		for (var i = 0, n = active.regions.length; i < n; i++) {
 			var region = active.regions[i].region;
 			var scale = Math.min(slotSize / region.height, slotSize / region.width) / zoom;
-			renderer.drawRegion(region, x,  y, region.width * scale, region.height * scale);
+			renderer.drawRegion(region, x, y, region.width * scale, region.height * scale);
 
 			for (var ii = 0; ii < active.slots.length; ii++) {
 				var slot = active.slots[ii];

spine-ts/spine-webgl/demos/meshes.js

@@ -1,4 +1,4 @@
-var meshesDemo = function(canvas, bgColor) {
+var meshesDemo = function (canvas, bgColor) {
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, bounds;
 	var timeKeeper;
@@ -8,17 +8,17 @@ var meshesDemo = function(canvas, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
-	function init () {
+	function init() {
 		gl = canvas.context.gl;
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);
+		renderer = new spine.SceneRenderer(canvas, gl);
 		renderer.skeletonDebugRenderer.drawRegionAttachments = false;
-		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
+		assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas2.atlas");
 		assetManager.loadJson("demos.json");
 		timeKeeper = new spine.TimeKeeper();
 	}
 
-	function loadingComplete () {
+	function loadingComplete() {
 		timeKeeper.update();
 		skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
 		skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
@@ -59,7 +59,7 @@ var meshesDemo = function(canvas, bgColor) {
 			if (skeletonName === activeSkeleton) option.attr("selected", "selected");
 			list.append(option);
 		}
-		list.change(function() {
+		list.change(function () {
 			activeSkeleton = $("#meshes-skeleton option:selected").text();
 			var active = skeletons[activeSkeleton];
 			var animationDuration = active.state.getCurrent(0).animation.duration;
@@ -67,13 +67,13 @@ var meshesDemo = function(canvas, bgColor) {
 		})
 
 		renderer.skeletonDebugRenderer.drawBones = false;
-		$("#meshes-drawbonescheckbox").click(function() {
+		$("#meshes-drawbonescheckbox").click(function () {
 			renderer.skeletonDebugRenderer.drawBones = this.checked;
 		})
 
 		renderer.skeletonDebugRenderer.drawMeshHull = false;
 		renderer.skeletonDebugRenderer.drawMeshTriangles = false;
-		$("#meshes-drawmeshtrianglescheckbox").click(function() {
+		$("#meshes-drawmeshtrianglescheckbox").click(function () {
 			renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
 			renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
 		})
@@ -105,7 +105,7 @@ var meshesDemo = function(canvas, bgColor) {
 		};
 	}
 
-	function render () {
+	function render() {
 		timeKeeper.update();
 		var delta = timeKeeper.delta;
 
@@ -119,7 +119,7 @@ var meshesDemo = function(canvas, bgColor) {
 		renderer.camera.position.y = offset.y + size.y / 2 + 20;
 		renderer.camera.viewportWidth = size.x * 1.1;
 		renderer.camera.viewportHeight = size.y * 1.1;
-		renderer.resize(spine.webgl.ResizeMode.Fit);
+		renderer.resize(spine.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 		gl.clear(gl.COLOR_BUFFER_BIT);

spine-ts/spine-webgl/demos/skins.js

@@ -1,4 +1,4 @@
-var skinsDemo = function(canvas, bgColor) {
+var skinsDemo = function (canvas, bgColor) {
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, state, offset, bounds;
 	var timeKeeper;
@@ -7,17 +7,17 @@ var skinsDemo = function(canvas, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
-	function init () {
+	function init() {
 		gl = canvas.context.gl;
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
+		renderer = new spine.SceneRenderer(canvas, gl);
+		assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("heroes.atlas");
 		assetManager.loadJson("demos.json");
-		input = new spine.webgl.Input(canvas);
+		input = new spine.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();
 	}
 
-	function loadingComplete () {
+	function loadingComplete() {
 		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("heroes.atlas"));
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
 		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").heroes);
@@ -38,13 +38,13 @@ var skinsDemo = function(canvas, bgColor) {
 		setupInput();
 	}
 
-	function setupInput (){
+	function setupInput() {
 		input.addListener({
-			down: function(x, y) {
+			down: function (x, y) {
 				swingSword();
 			},
-			up: function(x, y) { },
-			dragged: function(x, y) { },
+			up: function (x, y) { },
+			dragged: function (x, y) { },
 			moved: function (x, y) { }
 		});
 	}
@@ -103,7 +103,7 @@ var skinsDemo = function(canvas, bgColor) {
 			}
 			list.append(option);
 		}
-		list.change(function() {
+		list.change(function () {
 			activeSkin = $("#skins-skin option:selected").text();
 			skeleton.setSkinByName(activeSkin);
 			skeleton.setSlotsToSetupPose();
@@ -115,7 +115,7 @@ var skinsDemo = function(canvas, bgColor) {
 		randomizeSkins = document.getElementById("skins-randomizeskins");
 	}
 
-	function setSkin (skin) {
+	function setSkin(skin) {
 		var slot = skeleton.findSlot("item_near");
 		var weapon = slot.getAttachment();
 		skeleton.setSkin(skin);
@@ -123,26 +123,26 @@ var skinsDemo = function(canvas, bgColor) {
 		slot.setAttachment(weapon);
 	}
 
-	function swingSword () {
+	function swingSword() {
 		state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0);
 	}
 
-	function randomizeSkin () {
+	function randomizeSkin() {
 		var result;
 		var count = 0;
 		for (var skin in skeleton.data.skins) {
 			if (skeleton.data.skins[skin].name === "default") continue;
-			if (Math.random() < 1/++count) {
+			if (Math.random() < 1 / ++count) {
 				result = skeleton.data.skins[skin];
 			}
 		}
 		setSkin(result);
-		$("#skins-skin option").filter(function() {
+		$("#skins-skin option").filter(function () {
 			return ($(this).text() == result.name);
 		}).prop("selected", true);
 	}
 
-	function randomizeAttachments () {
+	function randomizeAttachments() {
 		var skins = [];
 		for (var skin in skeleton.data.skins) {
 			skin = skeleton.data.skins[skin];
@@ -162,7 +162,7 @@ var skinsDemo = function(canvas, bgColor) {
 		randomizeSkins.checked = false;
 	}
 
-	function render () {
+	function render() {
 		timeKeeper.update();
 		var delta = timeKeeper.delta;
 
@@ -178,7 +178,7 @@ var skinsDemo = function(canvas, bgColor) {
 		renderer.camera.position.y = offset.y + bounds.y / 2;
 		renderer.camera.viewportWidth = bounds.x * 3;
 		renderer.camera.viewportHeight = bounds.y * 1.2;
-		renderer.resize(spine.webgl.ResizeMode.Fit);
+		renderer.resize(spine.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 		gl.clear(gl.COLOR_BUFFER_BIT);

spine-ts/spine-webgl/demos/spritesheets.js

@@ -1,4 +1,4 @@
-var spritesheetsDemo = function(canvas, bgColor) {
+var spritesheetsDemo = function (canvas, bgColor) {
 	var SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8);
 	var FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8);
 
@@ -13,17 +13,17 @@ var spritesheetsDemo = function(canvas, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
-	function init () {
+	function init() {
 		gl = canvas.context.gl;
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
+		renderer = new spine.SceneRenderer(canvas, gl);
+		assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas1.atlas");
 		assetManager.loadJson("demos.json");
 		timeKeeper = new spine.TimeKeeper();
-		input = new spine.webgl.Input(canvas);
+		input = new spine.Input(canvas);
 	}
 
-	function loadingComplete () {
+	function loadingComplete() {
 		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
 		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").raptor);
@@ -55,20 +55,20 @@ var spritesheetsDemo = function(canvas, bgColor) {
 		$("#spritesheets-overlay").addClass("overlay");
 	}
 
-	function setupUI () {
+	function setupUI() {
 		timeSlider = $("#spritesheets-timeslider").data("slider");
 		timeSlider.set(0.5);
 		timeSliderLabel = $("#spritesheets-timeslider-label")[0];
 	}
 
-	function setupInput () {
+	function setupInput() {
 		input.addListener({
-			down: function(x, y) {
+			down: function (x, y) {
 				setAnimation((clickAnim++ % 2 == 0) ? "roar" : "jump");
 			},
-			up: function(x, y) { },
-			moved: function(x, y) {	},
-			dragged: function(x, y) { }
+			up: function (x, y) { },
+			moved: function (x, y) { },
+			dragged: function (x, y) { }
 		});
 		$("#spritesheets-roar").click(function () {
 			setAnimation("roar");
@@ -78,20 +78,20 @@ var spritesheetsDemo = function(canvas, bgColor) {
 		});
 	}
 
-	function setAnimation (name) {
+	function setAnimation(name) {
 		animationState.setAnimation(0, name, false);
 		animationState.addAnimation(0, "walk", true, 0);
 	}
 
-	function resize () {
+	function resize() {
 		renderer.camera.position.x = offset.x + viewportWidth / 2 - 25;
 		renderer.camera.position.y = offset.y + viewportHeight / 2 - 100;
 		renderer.camera.viewportWidth = viewportWidth * 1.2;
 		renderer.camera.viewportHeight = viewportHeight * 1.2;
-		renderer.resize(spine.webgl.ResizeMode.Fit);
+		renderer.resize(spine.ResizeMode.Fit);
 	}
 
-	function render () {
+	function render() {
 		timeKeeper.update();
 		var delta = timeKeeper.delta;
 

spine-ts/spine-webgl/demos/stretchyman.js

@@ -1,4 +1,4 @@
-var stretchymanDemo = function(canvas, bgColor) {
+var stretchymanDemo = function (canvas, bgColor) {
 	var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
 	var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
 	var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@@ -17,23 +17,23 @@ var stretchymanDemo = function(canvas, bgColor) {
 		"head controller",
 		"hip controller"
 	];
-	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
+	var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.Vector3();
 	var kneePos = new spine.Vector2();
 	var playButton, timeLine, spacing, isPlaying = true, playTime = 0;
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
-	function init () {
+	function init() {
 		gl = canvas.context.gl;
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
+		renderer = new spine.SceneRenderer(canvas, gl);
+		assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas2.atlas");
 		assetManager.loadJson("demos.json");
 		timeKeeper = new spine.TimeKeeper();
-		input = new spine.webgl.Input(canvas);
+		input = new spine.Input(canvas);
 	}
 
-	function loadingComplete () {
+	function loadingComplete() {
 		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
 		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").stretchyman);
@@ -61,21 +61,21 @@ var stretchymanDemo = function(canvas, bgColor) {
 		var checkbox = $("#stretchyman-drawbones");
 		renderer.skeletonDebugRenderer.drawPaths = false;
 		renderer.skeletonDebugRenderer.drawBones = false;
-		checkbox.change(function() {
+		checkbox.change(function () {
 			renderer.skeletonDebugRenderer.drawPaths = this.checked;
 			renderer.skeletonDebugRenderer.drawBones = this.checked;
 		});
 	}
 
-	function setupInput (){
+	function setupInput() {
 		input.addListener({
-			down: function(x, y) {
+			down: function (x, y) {
 				target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
 			},
-			up: function(x, y) {
+			up: function (x, y) {
 				target = null;
 			},
-			dragged: function(x, y) {
+			dragged: function (x, y) {
 				spineDemos.dragged(canvas, renderer, target, x, y);
 				if (target && target.data.name === "head controller") {
 					var hipControl = skeleton.findBone("hip controller");
@@ -89,7 +89,7 @@ var stretchymanDemo = function(canvas, bgColor) {
 		});
 	}
 
-	function center (middleBone, hipBone, footBone, amount, dir) {
+	function center(middleBone, hipBone, footBone, amount, dir) {
 		temp.set(footBone.worldX + skeleton.x, footBone.worldY + skeleton.y, 0)
 			.sub(temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0));
 		var dist = Math.sqrt(temp.x * temp.x + temp.y * temp.y);
@@ -101,15 +101,15 @@ var stretchymanDemo = function(canvas, bgColor) {
 		middleBone.children[0].y = (22 + Math.max(0, amount - dist * 0.3)) * dir;
 	}
 
-	function rotate (handBone, elbowBone) {
+	function rotate(handBone, elbowBone) {
 		// can do all this in world space cause handBone is essentially in world space
-		var v = coords.set(handBone.worldX, handBone.worldY, 0).sub(new spine.webgl.Vector3(elbowBone.worldX, elbowBone.worldY, 0)).normalize();
+		var v = coords.set(handBone.worldX, handBone.worldY, 0).sub(new spine.Vector3(elbowBone.worldX, elbowBone.worldY, 0)).normalize();
 		var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees + 180;
 		if (v.y < 0) angle = 360 - angle;
 		handBone.rotation = angle;
 	}
 
-	function render () {
+	function render() {
 		timeKeeper.update();
 		var delta = timeKeeper.delta;
 
@@ -130,7 +130,7 @@ var stretchymanDemo = function(canvas, bgColor) {
 
 		renderer.camera.viewportWidth = bounds.x * 1.2;
 		renderer.camera.viewportHeight = bounds.y * 1.5;
-		renderer.resize(spine.webgl.ResizeMode.Fit);
+		renderer.resize(spine.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 		gl.clear(gl.COLOR_BUFFER_BIT);

spine-ts/spine-webgl/demos/tank.js

@@ -1,4 +1,4 @@
-var tankDemo = function(canvas, bgColor) {
+var tankDemo = function (canvas, bgColor) {
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, state, offset, bounds;
 	var timeKeeper;
@@ -6,16 +6,16 @@ var tankDemo = function(canvas, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
-	function init () {
+	function init() {
 		gl = canvas.context.gl;
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
+		renderer = new spine.SceneRenderer(canvas, gl);
+		assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas2.atlas");
 		assetManager.loadJson("demos.json");
 		timeKeeper = new spine.TimeKeeper();
 	}
 
-	function loadingComplete () {
+	function loadingComplete() {
 		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
 		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").tank);
@@ -65,13 +65,13 @@ var tankDemo = function(canvas, bgColor) {
 
 		renderer.skeletonDebugRenderer.drawPaths = false;
 		renderer.skeletonDebugRenderer.drawBones = false;
-		$("#tank-drawbones").change(function() {
+		$("#tank-drawbones").change(function () {
 			renderer.skeletonDebugRenderer.drawPaths = this.checked;
 			renderer.skeletonDebugRenderer.drawBones = this.checked;
 		});
 	}
 
-	function render () {
+	function render() {
 		timeKeeper.update();
 		var delta = timeKeeper.delta;
 
@@ -94,7 +94,7 @@ var tankDemo = function(canvas, bgColor) {
 		renderer.camera.position.y = bounds.y - 505;
 		renderer.camera.viewportWidth = bounds.x * 1.2;
 		renderer.camera.viewportHeight = bounds.y * 1.2;
-		renderer.resize(spine.webgl.ResizeMode.Fit);
+		renderer.resize(spine.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 		gl.clear(gl.COLOR_BUFFER_BIT);

spine-ts/spine-webgl/demos/transforms.js

@@ -1,4 +1,4 @@
-var transformsDemo = function(canvas, bgColor) {
+var transformsDemo = function (canvas, bgColor) {
 	var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
 	var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
 	var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@@ -11,23 +11,23 @@ var transformsDemo = function(canvas, bgColor) {
 	var target = null;
 	var hoverTargets = [null, null, null];
 	var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
-	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
+	var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2();
 	var lastRotation = 0;
 	var mix, lastOffset = 0, lastMix = 0.5;
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
-	function init () {
+	function init() {
 		gl = canvas.context.gl;
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
+		renderer = new spine.SceneRenderer(canvas, gl);
+		assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas2.atlas");
 		assetManager.loadJson("demos.json");
-		input = new spine.webgl.Input(canvas);
+		input = new spine.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();
 	}
 
-	function loadingComplete () {
+	function loadingComplete() {
 		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
 		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").transforms);
@@ -80,23 +80,23 @@ var transformsDemo = function(canvas, bgColor) {
 	}
 
 	function setupInput() {
-		var getRotation = function(x, y) {
+		var getRotation = function (x, y) {
 			renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
 			var wheel1 = skeleton.findBone("wheel1overlay");
-			var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
+			var v = coords.sub(new spine.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
 			var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees;
 			if (v.y < 0) angle = 360 - angle;
 			return angle;
 		}
 		input.addListener({
-			down: function(x, y) {
+			down: function (x, y) {
 				target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
 				if (target === rotateHandle) lastRotation = getRotation(x, y);
 			},
-			up: function(x, y) {
+			up: function (x, y) {
 				target = null;
 			},
-			dragged: function(x, y) {
+			dragged: function (x, y) {
 				if (target === rotateHandle) {
 					var rotation = getRotation(x, y);
 					var delta = rotation - lastRotation;
@@ -111,14 +111,14 @@ var transformsDemo = function(canvas, bgColor) {
 		})
 	}
 
-	function render () {
+	function render() {
 		timeKeeper.update();
 		var delta = timeKeeper.delta;
 		skeleton.updateWorldTransform();
 
 		renderer.camera.viewportWidth = bounds.x * 1.6;
 		renderer.camera.viewportHeight = bounds.y * 1.2;
-		renderer.resize(spine.webgl.ResizeMode.Fit);
+		renderer.resize(spine.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 		gl.clear(gl.COLOR_BUFFER_BIT);

spine-ts/spine-webgl/demos/transitions.js

@@ -1,4 +1,4 @@
-var transitionsDemo = function(canvas, loadingComplete, bgColor) {
+var transitionsDemo = function (canvas, loadingComplete, bgColor) {
 	var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
 
 	var canvas, gl, renderer, input, assetManager;
@@ -8,13 +8,13 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
-	function init () {
+	function init() {
 		gl = canvas.context.gl;
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
+		renderer = new spine.SceneRenderer(canvas, gl);
+		assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas1.atlas");
 		assetManager.loadJson("demos.json");
-		input = new spine.webgl.Input(canvas);
+		input = new spine.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();
 
 		timeSlider = $("#transitions-timeslider").data("slider");
@@ -22,7 +22,7 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
 		timeSliderLabel = $("#transitions-timeslider-label")[0];
 	}
 
-	function loadingComplete () {
+	function loadingComplete() {
 		skeleton = loadSkeleton("spineboy");
 		skeletonNoMix = new spine.Skeleton(skeleton.data);
 		state = createState(0.25);
@@ -51,14 +51,14 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
 		});
 	}
 
-	function createState (mix) {
+	function createState(mix) {
 		var stateData = new spine.AnimationStateData(skeleton.data);
 		stateData.defaultMix = mix;
 		var state = new spine.AnimationState(stateData);
 		return state;
 	}
 
-	function setAnimations (state, delay, first) {
+	function setAnimations(state, delay, first) {
 		state.addAnimation(0, "idle", true, first);
 		state.addAnimation(0, "walk", true, 0.6);
 		state.addAnimation(0, "jump", false, 1);
@@ -84,7 +84,7 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
 		return skeleton;
 	}
 
-	function render () {
+	function render() {
 		timeKeeper.update();
 		var delta = timeKeeper.delta * timeSlider.get();
 		if (timeSliderLabel) {
@@ -100,7 +100,7 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
 		renderer.camera.position.y = offset.y + size.y / 2 - 40;
 		renderer.camera.viewportWidth = size.x * 2;
 		renderer.camera.viewportHeight = size.y * 2;
-		renderer.resize(spine.webgl.ResizeMode.Fit);
+		renderer.resize(spine.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 		gl.clear(gl.COLOR_BUFFER_BIT);

spine-ts/spine-webgl/demos/utils.js

@@ -31,7 +31,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 
 (function () {
 	var timeKeeper = new spine.TimeKeeper();
-	function loop () {
+	function loop() {
 		timeKeeper.update();
 		if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond);
 		requestAnimationFrame(loop);
@@ -73,12 +73,12 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 		demo.visible = (vertInView && horInView);
 	}
 
-	function createCanvases (numCanvases) {
+	function createCanvases(numCanvases) {
 		for (var i = 0; i < numCanvases; i++) {
 			var canvas = document.createElement("canvas");
 			canvas.width = 1; canvas.height = 1;
-			canvas.context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
-			canvas.id = "canvas-" + i;		
+			canvas.context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
+			canvas.id = "canvas-" + i;
 			spineDemos.canvases.push(canvas);
 		}
 	}
@@ -99,9 +99,9 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 		demo.placeholder = placeholder;
 		demo.canvas = canvas;
 		demo.visible = false;
-		var renderer = new spine.webgl.SceneRenderer(canvas, canvas.context.gl);
-		demo.loadingScreen = new spine.webgl.LoadingScreen(renderer);
-		$(window).on('DOMContentLoaded load resize scroll', function() {
+		var renderer = new spine.SceneRenderer(canvas, canvas.context.gl);
+		demo.loadingScreen = new spine.LoadingScreen(renderer);
+		$(window).on('DOMContentLoaded load resize scroll', function () {
 			checkElementVisible(demo);
 			renderDemo(demo);
 		});
@@ -109,8 +109,8 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 		spineDemos.demos.push(demo);
 	}
 
-	var coords = new spine.webgl.Vector3();
-	var mouse = new spine.webgl.Vector3();
+	var coords = new spine.Vector3();
+	var mouse = new spine.Vector3();
 	spineDemos.closest = function (canvas, renderer, skeleton, controlBones, hoverTargets, x, y) {
 		mouse.set(x, canvas.clientHeight - y, 0)
 		var bestDistance = 24, index = 0;
@@ -131,7 +131,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 		return best;
 	};
 
-	var position = new spine.webgl.Vector3();
+	var position = new spine.Vector3();
 	spineDemos.dragged = function (canvas, renderer, target, x, y) {
 		if (target) {
 			x = spine.MathUtils.clamp(x, 0, canvas.clientWidth)
@@ -149,7 +149,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 	};
 
 	loadSliders = function () {
-		$(window).resize(function() {
+		$(window).resize(function () {
 			$(".slider").each(function () {
 				$(this).data("slider").resized();
 			});
@@ -164,7 +164,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 			var hw = handle.width(), value = 0, object, lastX;
 			handle = handle[0].style;
 			positionHandle(0);
-			function positionHandle (percent) {
+			function positionHandle(percent) {
 				var w = div.width();
 				var x = Math.round((w - hw - 3) * percent + 1);
 				if (x != lastX) {
@@ -179,14 +179,14 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 				}
 				value = percent;
 			}
-			function mouseEvent (e) {
+			function mouseEvent(e) {
 				var x = e.pageX;
 				if (!x && e.originalEvent.touches) x = e.originalEvent.touches[0].pageX;
 				var percent = Math.max(0, Math.min(1, (x - div.offset().left - hw / 2) / (div.width() - hw - 2)));
 				positionHandle(percent);
 				if (object.changed) object.changed(percent);
 			}
-			function clearEvents () {
+			function clearEvents() {
 				$(document).off("mouseup.slider mousemove.slider touchmove.slider touchend.slider");
 			}
 			div.on("mousedown touchstart", function (e) {

spine-ts/spine-webgl/demos/vine.js

@@ -1,4 +1,4 @@
-var vineDemo = function(canvas, bgColor) {
+var vineDemo = function (canvas, bgColor) {
 	var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
 	var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
 	var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@@ -10,22 +10,22 @@ var vineDemo = function(canvas, bgColor) {
 	var target = null;
 	var hoverTargets = [null, null, null, null, null, null];
 	var controlBones = ["base", "vine-control1", "vine-control2", "vine-control3", "vine-control4"];
-	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
+	var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2();
 	var playButton, timeLine, isPlaying = true, playTime = 0;
 
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
-	function init () {
+	function init() {
 		gl = canvas.context.gl;
-		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		input = new spine.webgl.Input(canvas);
-		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
+		renderer = new spine.SceneRenderer(canvas, gl);
+		input = new spine.Input(canvas);
+		assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas2.atlas");
 		assetManager.loadJson("demos.json");
 		timeKeeper = new spine.TimeKeeper();
 	}
 
-	function loadingComplete () {
+	function loadingComplete() {
 		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
 		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").vine);
@@ -78,7 +78,7 @@ var vineDemo = function(canvas, bgColor) {
 		renderer.skeletonDebugRenderer.drawPaths = false;
 		renderer.skeletonDebugRenderer.drawBones = false;
 		var checkbox = $("#vine-drawbones");
-		checkbox.change(function() {
+		checkbox.change(function () {
 			renderer.skeletonDebugRenderer.drawPaths = this.checked;
 			renderer.skeletonDebugRenderer.drawBones = this.checked;
 		});
@@ -86,13 +86,13 @@ var vineDemo = function(canvas, bgColor) {
 
 	function setupInput() {
 		input.addListener({
-			down: function(x, y) {
+			down: function (x, y) {
 				target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
 			},
-			up: function(x, y) {
+			up: function (x, y) {
 				target = null;
 			},
-			dragged: function(x, y) {
+			dragged: function (x, y) {
 				spineDemos.dragged(canvas, renderer, target, x, y);
 			},
 			moved: function (x, y) {
@@ -101,7 +101,7 @@ var vineDemo = function(canvas, bgColor) {
 		});
 	}
 
-	function render () {
+	function render() {
 		timeKeeper.update();
 		var delta = timeKeeper.delta;
 
@@ -121,7 +121,7 @@ var vineDemo = function(canvas, bgColor) {
 
 		renderer.camera.viewportWidth = bounds.x * 1.2;
 		renderer.camera.viewportHeight = bounds.y * 1.2;
-		renderer.resize(spine.webgl.ResizeMode.Fit);
+		renderer.resize(spine.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 		gl.clear(gl.COLOR_BUFFER_BIT);

spine-ts/spine-webgl/example/barebones.html

@@ -1,157 +1,171 @@
 <html>
 <script src="../../build/spine-webgl.js"></script>
 <style>
-* { margin: 0; padding: 0; }
-body, html { height: 100% }
-canvas { position: absolute; width: 100% ;height: 100%; }
-</style>
-<body>
-<canvas id="canvas"></canvas>
-<script>
-
-var canvas;
-var gl;
-var shader;
-var batcher;
-var mvp = new spine.webgl.Matrix4();
-var assetManager;
-var skeletonRenderer;
-
-var lastFrameTime;
-var spineboy;
-
-function init () {
-	// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
-	// loading textures. That is handled separately by PolygonBatcher.
-	canvas = document.getElementById("canvas");
-	canvas.width = window.innerWidth;
-	canvas.height = window.innerHeight;
-	var config = { alpha: false };
-	gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
-	if (!gl) {
-		alert('WebGL is unavailable.');
-		return;
+	* {
+		margin: 0;
+		padding: 0;
 	}
 
-	// Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager.
-	shader = spine.webgl.Shader.newTwoColoredTextured(gl);
-	batcher = new spine.webgl.PolygonBatcher(gl);
-	mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
-	skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
-	assetManager = new spine.webgl.AssetManager(gl);
-
-	// Tell AssetManager to load the resources for each skeleton, including the exported .skel file, the .atlas file and the .png
-	// file for the atlas. We then wait until all resources are loaded in the load() method.
-	assetManager.loadBinary("assets/spineboy-pro.skel");
-	assetManager.loadTextureAtlas("assets/spineboy-pma.atlas");
-	requestAnimationFrame(load);
-}
-
-function load () {
-	// Wait until the AssetManager has loaded all resources, then load the skeletons.
-	if (assetManager.isLoadingComplete()) {
-		spineboy = loadSpineboy("run", true);
-		lastFrameTime = Date.now() / 1000;
-		requestAnimationFrame(render); // Loading is done, call render every frame.
-	} else {
-		requestAnimationFrame(load);
-	}
-}
-
-function loadSpineboy (initialAnimation, premultipliedAlpha) {
-	// Load the texture atlas from the AssetManager.
-	var atlas = assetManager.require("assets/spineboy-pma.atlas");
-
-	// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
-	var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
-
-	// Create a SkeletonBinary instance for parsing the .skel file.
-	var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
-
-	// Set the scale to apply during parsing, parse the file, and create a new skeleton.
-	skeletonBinary.scale = 1;
-	var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("assets/spineboy-pro.skel"));
-	var skeleton = new spine.Skeleton(skeletonData);
-	var bounds = calculateSetupPoseBounds(skeleton);
-
-	// Create an AnimationState, and set the initial animation in looping mode.
-	var animationStateData = new spine.AnimationStateData(skeleton.data);
-	var animationState = new spine.AnimationState(animationStateData);
-	animationState.setAnimation(0, initialAnimation, true);
-
-	// Pack everything up and return to caller.
-	return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
-}
-
-function calculateSetupPoseBounds (skeleton) {
-	skeleton.setToSetupPose();
-	skeleton.updateWorldTransform();
-	var offset = new spine.Vector2();
-	var size = new spine.Vector2();
-	skeleton.getBounds(offset, size, []);
-	return { offset: offset, size: size };
-}
-
-function render () {
-	var now = Date.now() / 1000;
-	var delta = now - lastFrameTime;
-	lastFrameTime = now;
-
-	// Update the MVP matrix to adjust for canvas size changes
-	resize();
-
-	gl.clearColor(0.3, 0.3, 0.3, 1);
-	gl.clear(gl.COLOR_BUFFER_BIT);
-
-	// Apply the animation state based on the delta time.
-	var skeleton = spineboy.skeleton;
-	var state = spineboy.state;
-	var premultipliedAlpha = spineboy.premultipliedAlpha;
-	state.update(delta);
-	state.apply(skeleton);
-	skeleton.updateWorldTransform();
-
-	// Bind the shader and set the texture and model-view-projection matrix.
-	shader.bind();
-	shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
-	shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
-
-	// Start the batch and tell the SkeletonRenderer to render the active skeleton.
-	batcher.begin(shader);
-	skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
-	skeletonRenderer.draw(batcher, skeleton);
-	batcher.end();
-
-	shader.unbind();
-
-	requestAnimationFrame(render);
-}
-
-function resize () {
-	var w = canvas.clientWidth;
-	var h = canvas.clientHeight;
-	if (canvas.width != w || canvas.height != h) {
-		canvas.width = w;
-		canvas.height = h;
+	body,
+	html {
+		height: 100%
 	}
 
-	// Calculations to center the skeleton in the canvas.
-	var bounds = spineboy.bounds;
-	var centerX = bounds.offset.x + bounds.size.x / 2;
-	var centerY = bounds.offset.y + bounds.size.y / 2;
-	var scaleX = bounds.size.x / canvas.width;
-	var scaleY = bounds.size.y / canvas.height;
-	var scale = Math.max(scaleX, scaleY) * 1.2;
-	if (scale < 1) scale = 1;
-	var width = canvas.width * scale;
-	var height = canvas.height * scale;
-
-	mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
-	gl.viewport(0, 0, canvas.width, canvas.height);
-}
-
-init();
+	canvas {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
+</style>
 
-</script>
+<body>
+	<canvas id="canvas"></canvas>
+	<script>
+
+		var canvas;
+		var gl;
+		var shader;
+		var batcher;
+		var mvp = new spine.Matrix4();
+		var assetManager;
+		var skeletonRenderer;
+
+		var lastFrameTime;
+		var spineboy;
+
+		function init() {
+			// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
+			// loading textures. That is handled separately by PolygonBatcher.
+			canvas = document.getElementById("canvas");
+			canvas.width = window.innerWidth;
+			canvas.height = window.innerHeight;
+			var config = { alpha: false };
+			gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
+			if (!gl) {
+				alert('WebGL is unavailable.');
+				return;
+			}
+
+			// Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager.
+			shader = spine.Shader.newTwoColoredTextured(gl);
+			batcher = new spine.PolygonBatcher(gl);
+			mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
+			skeletonRenderer = new spine.SkeletonRenderer(gl);
+			assetManager = new spine.AssetManager(gl);
+
+			// Tell AssetManager to load the resources for each skeleton, including the exported .skel file, the .atlas file and the .png
+			// file for the atlas. We then wait until all resources are loaded in the load() method.
+			assetManager.loadBinary("assets/spineboy-pro.skel");
+			assetManager.loadTextureAtlas("assets/spineboy-pma.atlas");
+			requestAnimationFrame(load);
+		}
+
+		function load() {
+			// Wait until the AssetManager has loaded all resources, then load the skeletons.
+			if (assetManager.isLoadingComplete()) {
+				spineboy = loadSpineboy("run", true);
+				lastFrameTime = Date.now() / 1000;
+				requestAnimationFrame(render); // Loading is done, call render every frame.
+			} else {
+				requestAnimationFrame(load);
+			}
+		}
+
+		function loadSpineboy(initialAnimation, premultipliedAlpha) {
+			// Load the texture atlas from the AssetManager.
+			var atlas = assetManager.require("assets/spineboy-pma.atlas");
+
+			// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
+			var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+
+			// Create a SkeletonBinary instance for parsing the .skel file.
+			var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
+
+			// Set the scale to apply during parsing, parse the file, and create a new skeleton.
+			skeletonBinary.scale = 1;
+			var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("assets/spineboy-pro.skel"));
+			var skeleton = new spine.Skeleton(skeletonData);
+			var bounds = calculateSetupPoseBounds(skeleton);
+
+			// Create an AnimationState, and set the initial animation in looping mode.
+			var animationStateData = new spine.AnimationStateData(skeleton.data);
+			var animationState = new spine.AnimationState(animationStateData);
+			animationState.setAnimation(0, initialAnimation, true);
+
+			// Pack everything up and return to caller.
+			return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
+		}
+
+		function calculateSetupPoseBounds(skeleton) {
+			skeleton.setToSetupPose();
+			skeleton.updateWorldTransform();
+			var offset = new spine.Vector2();
+			var size = new spine.Vector2();
+			skeleton.getBounds(offset, size, []);
+			return { offset: offset, size: size };
+		}
+
+		function render() {
+			var now = Date.now() / 1000;
+			var delta = now - lastFrameTime;
+			lastFrameTime = now;
+
+			// Update the MVP matrix to adjust for canvas size changes
+			resize();
+
+			gl.clearColor(0.3, 0.3, 0.3, 1);
+			gl.clear(gl.COLOR_BUFFER_BIT);
+
+			// Apply the animation state based on the delta time.
+			var skeleton = spineboy.skeleton;
+			var state = spineboy.state;
+			var premultipliedAlpha = spineboy.premultipliedAlpha;
+			state.update(delta);
+			state.apply(skeleton);
+			skeleton.updateWorldTransform();
+
+			// Bind the shader and set the texture and model-view-projection matrix.
+			shader.bind();
+			shader.setUniformi(spine.Shader.SAMPLER, 0);
+			shader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);
+
+			// Start the batch and tell the SkeletonRenderer to render the active skeleton.
+			batcher.begin(shader);
+			skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
+			skeletonRenderer.draw(batcher, skeleton);
+			batcher.end();
+
+			shader.unbind();
+
+			requestAnimationFrame(render);
+		}
+
+		function resize() {
+			var w = canvas.clientWidth;
+			var h = canvas.clientHeight;
+			if (canvas.width != w || canvas.height != h) {
+				canvas.width = w;
+				canvas.height = h;
+			}
+
+			// Calculations to center the skeleton in the canvas.
+			var bounds = spineboy.bounds;
+			var centerX = bounds.offset.x + bounds.size.x / 2;
+			var centerY = bounds.offset.y + bounds.size.y / 2;
+			var scaleX = bounds.size.x / canvas.width;
+			var scaleY = bounds.size.y / canvas.height;
+			var scale = Math.max(scaleX, scaleY) * 1.2;
+			if (scale < 1) scale = 1;
+			var width = canvas.width * scale;
+			var height = canvas.height * scale;
+
+			mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
+			gl.viewport(0, 0, canvas.width, canvas.height);
+		}
+
+		init();
+
+	</script>
 </body>
+
 </html>

spine-ts/spine-webgl/example/index.html

@@ -2,390 +2,404 @@
 <script src="../../build/spine-webgl.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <style>
-* { margin: 0; padding: 0; }
-body, html { height: 100% }
-canvas { position: absolute; width: 100% ;height: 100%; }
-</style>
-<body>
-<canvas id="canvas"></canvas>
-<center>
-<div style="color: #fff; position: fixed; top: 0; width: 100%">
-<span>Format:</span><select id="formatList"></select>
-<span>Skeleton:</span><select id="skeletonList"></select>
-<span>Animation:</span><select id="animationList"></select>
-<span>Skin:</span><select id="skinList"></select>
-<span>Vertex Effect:</span><select id="effectList"></select>
-<span>Debug:</span><input type="checkbox" id="debug">
-</div>
-</center>
-<script>
-
-var canvas;
-var gl;
-var shader;
-var batcher;
-var mvp = new spine.webgl.Matrix4();
-var skeletonRenderer;
-var assetManager;
-
-var debugRenderer;
-var shapes;
-
-var lastFrameTime;
-var skeletons = {};
-var format = "JSON";
-var activeSkeleton = "spineboy";
-var pow2 = new spine.Pow(2);
-var swirlEffect = new spine.SwirlEffect(0);
-var jitterEffect = new spine.JitterEffect(20, 20);
-var swirlTime = 0;
-
-function init () {
-	// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
-	// loading textures. That is handled separately by PolygonBatcher.
-	canvas = document.getElementById("canvas");
-	canvas.width = window.innerWidth;
-	canvas.height = window.innerHeight;
-	var config = { alpha: false };
-	gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
-	if (!gl) {
-		alert('WebGL is unavailable.');
-		return;
+	* {
+		margin: 0;
+		padding: 0;
 	}
 
-	// Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager.
-	shader = spine.webgl.Shader.newTwoColoredTextured(gl);
-	batcher = new spine.webgl.PolygonBatcher(gl);
-	mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
-	skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
-	assetManager = new spine.webgl.AssetManager(gl, "assets/");
-
-	// Create a debug renderer and the ShapeRenderer it needs to render lines.
-	debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
-	debugRenderer.drawRegionAttachments = true;
-	debugRenderer.drawBoundingBoxes = true;
-	debugRenderer.drawMeshHull = true;
-	debugRenderer.drawMeshTriangles = true;
-	debugRenderer.drawPaths = true;
-	debugShader = spine.webgl.Shader.newColored(gl);
-	shapes = new spine.webgl.ShapeRenderer(gl);
-
-	// Tell AssetManager to load the resources for each skeleton, including the exported data file, the .atlas file and the .png
-	// file for the atlas. We then wait until all resources are loaded in the load() method.
-	assetManager.loadBinary("spineboy-pro.skel");
-	assetManager.loadText("spineboy-pro.json");
-	assetManager.loadTextureAtlas("spineboy-pma.atlas");
-	assetManager.loadBinary("raptor-pro.skel");
-	assetManager.loadText("raptor-pro.json");
-	assetManager.loadTextureAtlas("raptor-pma.atlas");
-	assetManager.loadBinary("tank-pro.skel");
-	assetManager.loadText("tank-pro.json");
-	assetManager.loadTextureAtlas("tank-pma.atlas");
-	assetManager.loadBinary("goblins-pro.skel");
-	assetManager.loadText("goblins-pro.json");
-	assetManager.loadTextureAtlas("goblins-pma.atlas");
-	assetManager.loadBinary("vine-pro.skel");
-	assetManager.loadText("vine-pro.json");
-	assetManager.loadTextureAtlas("vine-pma.atlas");
-	assetManager.loadBinary("stretchyman-pro.skel");
-	assetManager.loadText("stretchyman-pro.json");
-	assetManager.loadTextureAtlas("stretchyman-pma.atlas");
-	assetManager.loadBinary("coin-pro.skel");
-	assetManager.loadText("coin-pro.json");
-	assetManager.loadTextureAtlas("coin-pma.atlas");
-	assetManager.loadBinary("mix-and-match-pro.skel");
-	assetManager.loadText("mix-and-match-pro.json");
-	assetManager.loadTextureAtlas("mix-and-match-pma.atlas");
-	requestAnimationFrame(load);
-}
-
-function load () {
-	// Wait until the AssetManager has loaded all resources, then load the skeletons.
-	if (assetManager.isLoadingComplete()) {
-		skeletons = {
-			coin: {
-				Binary: loadSkeleton("coin-pro.skel", "animation", true),
-				JSON: loadSkeleton("coin-pro.json", "animation", true)
-			},
-			goblins: {
-				Binary: loadSkeleton("goblins-pro.skel", "walk", true, "goblin"),
-				JSON: loadSkeleton("goblins-pro.json", "walk", true, "goblin")
-			},
-			"mix-and-match-pro": {
-				Binary: loadSkeleton("mix-and-match-pro.skel", "dance", true, "full-skins/girl-blue-cape"),
-				JSON: loadSkeleton("mix-and-match-pro.json", "dance", true, "full-skins/girl-blue-cape")
-			},
-			raptor: {
-				Binary: loadSkeleton("raptor-pro.skel", "walk", true),
-				JSON: loadSkeleton("raptor-pro.json", "walk", true)
-			},
-			spineboy: {
-				Binary: loadSkeleton("spineboy-pro.skel", "run", true),
-				JSON: loadSkeleton("spineboy-pro.json", "run", true)
-			},
-			stretchyman: {
-				Binary: loadSkeleton("stretchyman-pro.skel", "sneak", true),
-				JSON: loadSkeleton("stretchyman-pro.json", "sneak", true)
-			},
-			tank: {
-				Binary: loadSkeleton("tank-pro.skel", "drive", true),
-				JSON: loadSkeleton("tank-pro.json", "drive", true)
-			},
-			vine: {
-				Binary: loadSkeleton("vine-pro.skel", "grow", true),
-				JSON: loadSkeleton("vine-pro.json", "grow", true)
-			}
-		};
-		setupUI();
-		lastFrameTime = Date.now() / 1000;
-		requestAnimationFrame(render); // Loading is done, call render every frame.
-	} else
-		requestAnimationFrame(load);
-}
-
-function loadSkeleton (name, initialAnimation, premultipliedAlpha, skin) {
-	if (skin === undefined) skin = "default";
-
-	// Load the texture atlas using name.atlas from the AssetManager.
-	var atlas = assetManager.require(name.replace(/(?:-ess|-pro)\.(skel|json)/, "") + (premultipliedAlpha ? "-pma": "") + ".atlas");
-
-	// Create an AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
-	var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
-
-	// Create a skeleton loader instance for parsing the skeleton data file.
-	var skeletonLoader = name.endsWith(".skel") ? new spine.SkeletonBinary(atlasLoader) : new spine.SkeletonJson(atlasLoader);
-
-	// Set the scale to apply during parsing, parse the file, and create a new skeleton.
-	skeletonLoader.scale = 1;
-	var skeletonData = skeletonLoader.readSkeletonData(assetManager.require(name));
-	var skeleton = new spine.Skeleton(skeletonData);
-	skeleton.setSkinByName(skin);
-	var bounds = calculateSetupPoseBounds(skeleton);
-
-	// Create an AnimationState, and set the initial animation in looping mode.
-	var animationStateData = new spine.AnimationStateData(skeleton.data);
-	var animationState = new spine.AnimationState(animationStateData);
-	if (name == "spineboy-pro.skel" || name == "spineboy-pro.json") {
-		animationStateData.setMix("walk", "run", 1.5)
-		animationStateData.setMix("run", "jump", 0.2)
-		animationStateData.setMix("jump", "run", 0.4);
-		animationState.setEmptyAnimation(0, 0);
-		var entry = animationState.addAnimation(0, "walk", true, 0);
-		entry.mixDuration = 1;
-		animationState.addAnimation(0, "run", true, 1.5);
-		animationState.addAnimation(0, "jump", false, 2);
-		animationState.addAnimation(0, "run", true, 0);
-		animationState.addEmptyAnimation(0, 1, 1);
-		entry = animationState.addAnimation(0, "walk", true, 1.5);
-		entry.mixDuration = 1;
-	} else
-		animationState.setAnimation(0, initialAnimation, true);
-
-	function log (message) {
-		if ($('#debug').is(':checked')) console.log(message);
-	}
-	animationState.addListener({
-		start: function(track) {
-			log("Animation on track " + track.trackIndex + " started");
-		},
-		interrupt: function(track) {
-			log("Animation on track " + track.trackIndex + " interrupted");
-		},
-		end: function(track) {
-			log("Animation on track " + track.trackIndex + " ended");
-		},
-		disposed: function(track) {
-			log("Animation on track " + track.trackIndex + " disposed");
-		},
-		complete: function(track) {
-			log("Animation on track " + track.trackIndex + " completed");
-		},
-		event: function(track, event) {
-			log("Event on track " + track.trackIndex + ": " + JSON.stringify(event));
-		}
-	})
-
-	// Pack everything up and return to caller.
-	return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
-}
-
-function calculateSetupPoseBounds(skeleton) {
-	skeleton.setToSetupPose();
-	skeleton.updateWorldTransform();
-	var offset = new spine.Vector2();
-	var size = new spine.Vector2();
-	skeleton.getBounds(offset, size, []);
-	return { offset: offset, size: size };
-}
-
-function setupUI () {
-	var formatList = $("#formatList");
-	formatList.append($("<option>Binary</option>"));
-	formatList.append($("<option>JSON</option>"));
-	var skeletonList = $("#skeletonList");
-	for (var skeletonName in skeletons) {
-		var option = $("<option></option>");
-		option.attr("value", skeletonName).text(skeletonName);
-		if (skeletonName === activeSkeleton) option.attr("selected", "selected");
-		skeletonList.append(option);
+	body,
+	html {
+		height: 100%
 	}
-	var effectList = $("#effectList");
-	var effects = ["None", "Swirl", "Jitter"];
-	for (var effect in effects) {
-		var effectName = effects[effect];
-		var option = $("<option></option>");
-		option.attr("value", effectName).text(effectName);
-		effectList.append(option);
+
+	canvas {
+		position: absolute;
+		width: 100%;
+		height: 100%;
 	}
-	var setupAnimationUI = function() {
-		var animationList = $("#animationList");
-		animationList.empty();
-		var skeleton = skeletons[activeSkeleton][format].skeleton;
-		var state = skeletons[activeSkeleton][format].state;
-		var activeAnimation = state.tracks[0].animation.name;
-		for (var i = 0; i < skeleton.data.animations.length; i++) {
-			var name = skeleton.data.animations[i].name;
-			var option = $("<option></option>");
-			option.attr("value", name).text(name);
-			if (name === activeAnimation) option.attr("selected", "selected");
-			animationList.append(option);
+</style>
+
+<body>
+	<canvas id="canvas"></canvas>
+	<center>
+		<div style="color: #fff; position: fixed; top: 0; width: 100%">
+			<span>Format:</span><select id="formatList"></select>
+			<span>Skeleton:</span><select id="skeletonList"></select>
+			<span>Animation:</span><select id="animationList"></select>
+			<span>Skin:</span><select id="skinList"></select>
+			<span>Vertex Effect:</span><select id="effectList"></select>
+			<span>Debug:</span><input type="checkbox" id="debug">
+		</div>
+	</center>
+	<script>
+
+		var canvas;
+		var gl;
+		var shader;
+		var batcher;
+		var mvp = new spine.Matrix4();
+		var skeletonRenderer;
+		var assetManager;
+
+		var debugRenderer;
+		var shapes;
+
+		var lastFrameTime;
+		var skeletons = {};
+		var format = "JSON";
+		var activeSkeleton = "spineboy";
+		var pow2 = new spine.Pow(2);
+		var swirlEffect = new spine.SwirlEffect(0);
+		var jitterEffect = new spine.JitterEffect(20, 20);
+		var swirlTime = 0;
+
+		function init() {
+			// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
+			// loading textures. That is handled separately by PolygonBatcher.
+			canvas = document.getElementById("canvas");
+			canvas.width = window.innerWidth;
+			canvas.height = window.innerHeight;
+			var config = { alpha: false };
+			gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
+			if (!gl) {
+				alert('WebGL is unavailable.');
+				return;
+			}
+
+			// Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager.
+			shader = spine.Shader.newTwoColoredTextured(gl);
+			batcher = new spine.PolygonBatcher(gl);
+			mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
+			skeletonRenderer = new spine.SkeletonRenderer(gl);
+			assetManager = new spine.AssetManager(gl, "assets/");
+
+			// Create a debug renderer and the ShapeRenderer it needs to render lines.
+			debugRenderer = new spine.SkeletonDebugRenderer(gl);
+			debugRenderer.drawRegionAttachments = true;
+			debugRenderer.drawBoundingBoxes = true;
+			debugRenderer.drawMeshHull = true;
+			debugRenderer.drawMeshTriangles = true;
+			debugRenderer.drawPaths = true;
+			debugShader = spine.Shader.newColored(gl);
+			shapes = new spine.ShapeRenderer(gl);
+
+			// Tell AssetManager to load the resources for each skeleton, including the exported data file, the .atlas file and the .png
+			// file for the atlas. We then wait until all resources are loaded in the load() method.
+			assetManager.loadBinary("spineboy-pro.skel");
+			assetManager.loadText("spineboy-pro.json");
+			assetManager.loadTextureAtlas("spineboy-pma.atlas");
+			assetManager.loadBinary("raptor-pro.skel");
+			assetManager.loadText("raptor-pro.json");
+			assetManager.loadTextureAtlas("raptor-pma.atlas");
+			assetManager.loadBinary("tank-pro.skel");
+			assetManager.loadText("tank-pro.json");
+			assetManager.loadTextureAtlas("tank-pma.atlas");
+			assetManager.loadBinary("goblins-pro.skel");
+			assetManager.loadText("goblins-pro.json");
+			assetManager.loadTextureAtlas("goblins-pma.atlas");
+			assetManager.loadBinary("vine-pro.skel");
+			assetManager.loadText("vine-pro.json");
+			assetManager.loadTextureAtlas("vine-pma.atlas");
+			assetManager.loadBinary("stretchyman-pro.skel");
+			assetManager.loadText("stretchyman-pro.json");
+			assetManager.loadTextureAtlas("stretchyman-pma.atlas");
+			assetManager.loadBinary("coin-pro.skel");
+			assetManager.loadText("coin-pro.json");
+			assetManager.loadTextureAtlas("coin-pma.atlas");
+			assetManager.loadBinary("mix-and-match-pro.skel");
+			assetManager.loadText("mix-and-match-pro.json");
+			assetManager.loadTextureAtlas("mix-and-match-pma.atlas");
+			requestAnimationFrame(load);
 		}
 
-		animationList.change(function() {
-			var state = skeletons[activeSkeleton][format].state;
-			var skeleton = skeletons[activeSkeleton][format].skeleton;
-			var animationName = $("#animationList option:selected").text();
+		function load() {
+			// Wait until the AssetManager has loaded all resources, then load the skeletons.
+			if (assetManager.isLoadingComplete()) {
+				skeletons = {
+					coin: {
+						Binary: loadSkeleton("coin-pro.skel", "animation", true),
+						JSON: loadSkeleton("coin-pro.json", "animation", true)
+					},
+					goblins: {
+						Binary: loadSkeleton("goblins-pro.skel", "walk", true, "goblin"),
+						JSON: loadSkeleton("goblins-pro.json", "walk", true, "goblin")
+					},
+					"mix-and-match-pro": {
+						Binary: loadSkeleton("mix-and-match-pro.skel", "dance", true, "full-skins/girl-blue-cape"),
+						JSON: loadSkeleton("mix-and-match-pro.json", "dance", true, "full-skins/girl-blue-cape")
+					},
+					raptor: {
+						Binary: loadSkeleton("raptor-pro.skel", "walk", true),
+						JSON: loadSkeleton("raptor-pro.json", "walk", true)
+					},
+					spineboy: {
+						Binary: loadSkeleton("spineboy-pro.skel", "run", true),
+						JSON: loadSkeleton("spineboy-pro.json", "run", true)
+					},
+					stretchyman: {
+						Binary: loadSkeleton("stretchyman-pro.skel", "sneak", true),
+						JSON: loadSkeleton("stretchyman-pro.json", "sneak", true)
+					},
+					tank: {
+						Binary: loadSkeleton("tank-pro.skel", "drive", true),
+						JSON: loadSkeleton("tank-pro.json", "drive", true)
+					},
+					vine: {
+						Binary: loadSkeleton("vine-pro.skel", "grow", true),
+						JSON: loadSkeleton("vine-pro.json", "grow", true)
+					}
+				};
+				setupUI();
+				lastFrameTime = Date.now() / 1000;
+				requestAnimationFrame(render); // Loading is done, call render every frame.
+			} else
+				requestAnimationFrame(load);
+		}
+
+		function loadSkeleton(name, initialAnimation, premultipliedAlpha, skin) {
+			if (skin === undefined) skin = "default";
+
+			// Load the texture atlas using name.atlas from the AssetManager.
+			var atlas = assetManager.require(name.replace(/(?:-ess|-pro)\.(skel|json)/, "") + (premultipliedAlpha ? "-pma" : "") + ".atlas");
+
+			// Create an AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
+			var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+
+			// Create a skeleton loader instance for parsing the skeleton data file.
+			var skeletonLoader = name.endsWith(".skel") ? new spine.SkeletonBinary(atlasLoader) : new spine.SkeletonJson(atlasLoader);
+
+			// Set the scale to apply during parsing, parse the file, and create a new skeleton.
+			skeletonLoader.scale = 1;
+			var skeletonData = skeletonLoader.readSkeletonData(assetManager.require(name));
+			var skeleton = new spine.Skeleton(skeletonData);
+			skeleton.setSkinByName(skin);
+			var bounds = calculateSetupPoseBounds(skeleton);
+
+			// Create an AnimationState, and set the initial animation in looping mode.
+			var animationStateData = new spine.AnimationStateData(skeleton.data);
+			var animationState = new spine.AnimationState(animationStateData);
+			if (name == "spineboy-pro.skel" || name == "spineboy-pro.json") {
+				animationStateData.setMix("walk", "run", 1.5)
+				animationStateData.setMix("run", "jump", 0.2)
+				animationStateData.setMix("jump", "run", 0.4);
+				animationState.setEmptyAnimation(0, 0);
+				var entry = animationState.addAnimation(0, "walk", true, 0);
+				entry.mixDuration = 1;
+				animationState.addAnimation(0, "run", true, 1.5);
+				animationState.addAnimation(0, "jump", false, 2);
+				animationState.addAnimation(0, "run", true, 0);
+				animationState.addEmptyAnimation(0, 1, 1);
+				entry = animationState.addAnimation(0, "walk", true, 1.5);
+				entry.mixDuration = 1;
+			} else
+				animationState.setAnimation(0, initialAnimation, true);
+
+			function log(message) {
+				if ($('#debug').is(':checked')) console.log(message);
+			}
+			animationState.addListener({
+				start: function (track) {
+					log("Animation on track " + track.trackIndex + " started");
+				},
+				interrupt: function (track) {
+					log("Animation on track " + track.trackIndex + " interrupted");
+				},
+				end: function (track) {
+					log("Animation on track " + track.trackIndex + " ended");
+				},
+				disposed: function (track) {
+					log("Animation on track " + track.trackIndex + " disposed");
+				},
+				complete: function (track) {
+					log("Animation on track " + track.trackIndex + " completed");
+				},
+				event: function (track, event) {
+					log("Event on track " + track.trackIndex + ": " + JSON.stringify(event));
+				}
+			})
+
+			// Pack everything up and return to caller.
+			return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
+		}
+
+		function calculateSetupPoseBounds(skeleton) {
 			skeleton.setToSetupPose();
-			state.setAnimation(0, animationName, true);
-		})
-	}
+			skeleton.updateWorldTransform();
+			var offset = new spine.Vector2();
+			var size = new spine.Vector2();
+			skeleton.getBounds(offset, size, []);
+			return { offset: offset, size: size };
+		}
 
-	var setupSkinUI = function() {
-		var skinList = $("#skinList");
-		skinList.empty();
-		var skeleton = skeletons[activeSkeleton][format].skeleton;
-		var activeSkin = skeleton.skin == null ? "default" : skeleton.skin.name;
-		for (var i = 0; i < skeleton.data.skins.length; i++) {
-			var name = skeleton.data.skins[i].name;
-			var option = $("<option></option>");
-			option.attr("value", name).text(name);
-			if (name === activeSkin) option.attr("selected", "selected");
-			skinList.append(option);
+		function setupUI() {
+			var formatList = $("#formatList");
+			formatList.append($("<option>Binary</option>"));
+			formatList.append($("<option>JSON</option>"));
+			var skeletonList = $("#skeletonList");
+			for (var skeletonName in skeletons) {
+				var option = $("<option></option>");
+				option.attr("value", skeletonName).text(skeletonName);
+				if (skeletonName === activeSkeleton) option.attr("selected", "selected");
+				skeletonList.append(option);
+			}
+			var effectList = $("#effectList");
+			var effects = ["None", "Swirl", "Jitter"];
+			for (var effect in effects) {
+				var effectName = effects[effect];
+				var option = $("<option></option>");
+				option.attr("value", effectName).text(effectName);
+				effectList.append(option);
+			}
+			var setupAnimationUI = function () {
+				var animationList = $("#animationList");
+				animationList.empty();
+				var skeleton = skeletons[activeSkeleton][format].skeleton;
+				var state = skeletons[activeSkeleton][format].state;
+				var activeAnimation = state.tracks[0].animation.name;
+				for (var i = 0; i < skeleton.data.animations.length; i++) {
+					var name = skeleton.data.animations[i].name;
+					var option = $("<option></option>");
+					option.attr("value", name).text(name);
+					if (name === activeAnimation) option.attr("selected", "selected");
+					animationList.append(option);
+				}
+
+				animationList.change(function () {
+					var state = skeletons[activeSkeleton][format].state;
+					var skeleton = skeletons[activeSkeleton][format].skeleton;
+					var animationName = $("#animationList option:selected").text();
+					skeleton.setToSetupPose();
+					state.setAnimation(0, animationName, true);
+				})
+			}
+
+			var setupSkinUI = function () {
+				var skinList = $("#skinList");
+				skinList.empty();
+				var skeleton = skeletons[activeSkeleton][format].skeleton;
+				var activeSkin = skeleton.skin == null ? "default" : skeleton.skin.name;
+				for (var i = 0; i < skeleton.data.skins.length; i++) {
+					var name = skeleton.data.skins[i].name;
+					var option = $("<option></option>");
+					option.attr("value", name).text(name);
+					if (name === activeSkin) option.attr("selected", "selected");
+					skinList.append(option);
+				}
+
+				skinList.change(function () {
+					var skeleton = skeletons[activeSkeleton][format].skeleton;
+					var skinName = $("#skinList option:selected").text();
+					skeleton.setSkinByName(skinName);
+					skeleton.setSlotsToSetupPose();
+				})
+			}
+
+			skeletonList.change(function () {
+				activeSkeleton = $("#skeletonList option:selected").text();
+				setupAnimationUI();
+				setupSkinUI();
+			})
+
+			formatList.change(function () {
+				format = $("#formatList option:selected").text();
+				setupAnimationUI();
+				setupSkinUI();
+			})
+
+			setupAnimationUI();
+			setupSkinUI();
 		}
 
-		skinList.change(function() {
-			var skeleton = skeletons[activeSkeleton][format].skeleton;
-			var skinName = $("#skinList option:selected").text();
-			skeleton.setSkinByName(skinName);
-			skeleton.setSlotsToSetupPose();
-		})
-	}
+		function render() {
+			var now = Date.now() / 1000;
+			var delta = now - lastFrameTime;
+			lastFrameTime = now;
 
-	skeletonList.change(function() {
-		activeSkeleton = $("#skeletonList option:selected").text();
-		setupAnimationUI();
-		setupSkinUI();
-	})
-
-	formatList.change(function() {
-		format = $("#formatList option:selected").text();
-		setupAnimationUI();
-		setupSkinUI();
-	})
-
-	setupAnimationUI();
-	setupSkinUI();
-}
-
-function render () {
-	var now = Date.now() / 1000;
-	var delta = now - lastFrameTime;
-	lastFrameTime = now;
-
-	// Update the MVP matrix to adjust for canvas size changes
-	resize();
-
-	gl.clearColor(0.3, 0.3, 0.3, 1);
-	gl.clear(gl.COLOR_BUFFER_BIT);
-
-	// Apply the animation state based on the delta time.
-	var skeleton = skeletons[activeSkeleton][format].skeleton;
-	var state = skeletons[activeSkeleton][format].state;
-	var bounds = skeletons[activeSkeleton][format].bounds;
-	var premultipliedAlpha = skeletons[activeSkeleton][format].premultipliedAlpha;
-	state.update(delta);
-	state.apply(skeleton);
-	skeleton.updateWorldTransform();
-
-	// Bind the shader and set the texture and model-view-projection matrix.
-	shader.bind();
-	shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
-	shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
-
-	// Start the batch and tell the SkeletonRenderer to render the active skeleton.
-	batcher.begin(shader);
-
-	var effect = $("#effectList option:selected").text();
-	if (effect == "None") {
-		skeletonRenderer.vertexEffect = null;
-	} else if (effect == "Swirl") {
-		swirlTime += delta;
-		var percent = swirlTime % 2;
-		if (percent > 1) percent = 1 - (percent -1 );
-		swirlEffect.angle = pow2.apply(-60, 60, percent);
-		swirlEffect.centerX = bounds.offset.x + bounds.size.x / 2;
-		swirlEffect.centerY = bounds.offset.y + bounds.size.y / 2;
-		swirlEffect.radius = Math.sqrt(bounds.size.x * bounds.size.x + bounds.size.y * bounds.size.y) * 0.75;
-		skeletonRenderer.vertexEffect = swirlEffect;
-	} else if (effect == "Jitter")
-		skeletonRenderer.vertexEffect = jitterEffect;
-
-	skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
-	skeletonRenderer.draw(batcher, skeleton);
-	batcher.end();
-
-	shader.unbind();
-
-	// Draw debug information.
-	var debug = $('#debug').is(':checked');
-	if (debug) {
-		debugShader.bind();
-		debugShader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
-		debugRenderer.premultipliedAlpha = premultipliedAlpha;
-		shapes.begin(debugShader);
-		debugRenderer.draw(shapes, skeleton);
-		shapes.end();
-		debugShader.unbind();
-	}
+			// Update the MVP matrix to adjust for canvas size changes
+			resize();
 
-	requestAnimationFrame(render);
-}
+			gl.clearColor(0.3, 0.3, 0.3, 1);
+			gl.clear(gl.COLOR_BUFFER_BIT);
 
-function resize () {
-	var w = canvas.clientWidth;
-	var h = canvas.clientHeight;
-	if (canvas.width != w || canvas.height != h) {
-		canvas.width = w;
-		canvas.height = h;
-	}
+			// Apply the animation state based on the delta time.
+			var skeleton = skeletons[activeSkeleton][format].skeleton;
+			var state = skeletons[activeSkeleton][format].state;
+			var bounds = skeletons[activeSkeleton][format].bounds;
+			var premultipliedAlpha = skeletons[activeSkeleton][format].premultipliedAlpha;
+			state.update(delta);
+			state.apply(skeleton);
+			skeleton.updateWorldTransform();
+
+			// Bind the shader and set the texture and model-view-projection matrix.
+			shader.bind();
+			shader.setUniformi(spine.Shader.SAMPLER, 0);
+			shader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);
+
+			// Start the batch and tell the SkeletonRenderer to render the active skeleton.
+			batcher.begin(shader);
+
+			var effect = $("#effectList option:selected").text();
+			if (effect == "None") {
+				skeletonRenderer.vertexEffect = null;
+			} else if (effect == "Swirl") {
+				swirlTime += delta;
+				var percent = swirlTime % 2;
+				if (percent > 1) percent = 1 - (percent - 1);
+				swirlEffect.angle = pow2.apply(-60, 60, percent);
+				swirlEffect.centerX = bounds.offset.x + bounds.size.x / 2;
+				swirlEffect.centerY = bounds.offset.y + bounds.size.y / 2;
+				swirlEffect.radius = Math.sqrt(bounds.size.x * bounds.size.x + bounds.size.y * bounds.size.y) * 0.75;
+				skeletonRenderer.vertexEffect = swirlEffect;
+			} else if (effect == "Jitter")
+				skeletonRenderer.vertexEffect = jitterEffect;
+
+			skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
+			skeletonRenderer.draw(batcher, skeleton);
+			batcher.end();
+
+			shader.unbind();
+
+			// Draw debug information.
+			var debug = $('#debug').is(':checked');
+			if (debug) {
+				debugShader.bind();
+				debugShader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);
+				debugRenderer.premultipliedAlpha = premultipliedAlpha;
+				shapes.begin(debugShader);
+				debugRenderer.draw(shapes, skeleton);
+				shapes.end();
+				debugShader.unbind();
+			}
 
-	// Calculations to center the skeleton in the canvas.
-	var bounds = skeletons[activeSkeleton][format].bounds;
-	var centerX = bounds.offset.x + bounds.size.x / 2;
-	var centerY = bounds.offset.y + bounds.size.y / 2;
-	var scaleX = bounds.size.x / canvas.width;
-	var scaleY = bounds.size.y / canvas.height;
-	var scale = Math.max(scaleX, scaleY) * 2;
-	if (scale < 1) scale = 1;
-	var width = canvas.width * scale;
-	var height = canvas.height * scale;
+			requestAnimationFrame(render);
+		}
 
-	mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
-	gl.viewport(0, 0, canvas.width, canvas.height);
-}
+		function resize() {
+			var w = canvas.clientWidth;
+			var h = canvas.clientHeight;
+			if (canvas.width != w || canvas.height != h) {
+				canvas.width = w;
+				canvas.height = h;
+			}
 
-init();
+			// Calculations to center the skeleton in the canvas.
+			var bounds = skeletons[activeSkeleton][format].bounds;
+			var centerX = bounds.offset.x + bounds.size.x / 2;
+			var centerY = bounds.offset.y + bounds.size.y / 2;
+			var scaleX = bounds.size.x / canvas.width;
+			var scaleY = bounds.size.y / canvas.height;
+			var scale = Math.max(scaleX, scaleY) * 2;
+			if (scale < 1) scale = 1;
+			var width = canvas.width * scale;
+			var height = canvas.height * scale;
+
+			mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
+			gl.viewport(0, 0, canvas.width, canvas.height);
+		}
 
-</script>
+		init();
+
+	</script>
 </body>
+
 </html>

spine-ts/spine-webgl/src/index.ts

@@ -13,27 +13,4 @@ export * from './SkeletonDebugRenderer';
 export * from './SkeletonRenderer';
 export * from './Vector3';
 export * from './WebGL';
-
-export * from "@esotericsoftware/spine-core";
-
-// Before modularization, we would expose spine-core on the global
-// `spine` object, and spine-webgl on the global `spine.webgl` object.
-// This was used by clients when including spine-webgl via <script src="spine-webgl.js">
-// 
-// Now with modularization and using esbuild for bundling, we need to emulate this old
-// behaviour as to not break old clients.
-//
-// We pass `--global-name=spine` to esbuild. This will create an object containing
-// all exports and assign it to the global variable called `spine`.
-//
-// That solves half the issue. We also need to assign the exports object to 
-// `spine.webgl`. esbuild creates a local variable called `scr_exports` pointing
-// to the exports object. We get to it via eval, then assign it to itself, on a new
-// property called `webgl`. The client can then access the APIs through `spine` and
-// `spine.webgl` as before (with the caveat that both spine-core and spine-webgl are
-// now in `spine` and `spine.webgl`).
-//
-// This will break if esbuild renames the variable `src_exports` pointing to
-// the exports object.
-let exports = eval("src_exports");
-if (exports) exports.webgl = exports;
+export * from "@esotericsoftware/spine-core";

spine-ts/spine-webgl/tests/test-additive-animation-blending.html

@@ -1,117 +1,122 @@
 <!DOCTYPE HTML>
 <html>
-	<head>
-		<script src="../../build/spine-webgl.js"></script>
-		<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
-		<style>
-			input, label {
-				display: block;
-			}
-			#controls {
-				position: absolute;
-			}
-
-			#controls * {
-				position: relative;
-				top: 0;
-				left: 0;
-			}
-		</style>
-	</head>
-	<body>
-		<canvas id="canvas" style="width: 640px; height: 480px;"></canvas>
-		<div id="controls">
-			<label>Up</label><input type="range" id="up" min="0" max="100" value="0"></input>
-			<label>Down</label><input type="range" id="down" min="0" max="100" value="0"></input>
-			<label>Left</label><input type="range" id="left" min="0" max="100" value="0"></input>
-			<label>Right</label><input type="range" id="right" min="0" max="100" value="0"></input>
-		</div>
-	</body>
-	<script>
-		var canvas = document.getElementById("canvas");
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
-		var gl = context.gl;
-
-		var time = new spine.TimeKeeper();
-		var assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
-		var renderer = new spine.webgl.SceneRenderer(canvas, context);
-		var skeleton, animationState;
-		var upEntry, downEntry, leftEntry, rightEntry;
-
-		assetManager.loadTexture("owl-pma.png");
-		assetManager.loadText("owl-pma.atlas");
-		assetManager.loadText("owl-pro.json");
-
-		function load () {
-			if (assetManager.isLoadingComplete()) {
-				var atlas = new spine.TextureAtlas(assetManager.get("owl-pma.atlas"));
-				atlas.setTextures(assetManager);
-				var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
-				var skeletonJson = new spine.SkeletonJson(atlasLoader);
-				skeletonJson.scale = 0.5;
-				var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get("owl-pro.json")));
-				skeleton = new spine.Skeleton(skeletonData);
-				var animationStateData = new spine.AnimationStateData(skeletonData);
-				animationStateData.defaultMix = 0.3;
-				animationState = new spine.AnimationState(animationStateData);
-
-				animationState.setAnimation(0, "idle", true);
-				animationState.setAnimation(1, "blink", true);
-				upEntry = animationState.setAnimation(2, "up", true);
-				upEntry.alpha = 0;
-				upEntry.mixBlend = spine.MixBlend.add;
-				downEntry = animationState.setAnimation(3, "down", true);
-				downEntry.alpha = 0;
-				downEntry.mixBlend = spine.MixBlend.add;
-				leftEntry = animationState.setAnimation(4, "left", true);
-				leftEntry.alpha = 0;
-				leftEntry.mixBlend = spine.MixBlend.add;
-				rightEntry = animationState.setAnimation(5, "right", true);
-				rightEntry.alpha = 0;
-				rightEntry.mixBlend = spine.MixBlend.add;
-
-				requestAnimationFrame(render);
-			} else {
-				requestAnimationFrame(load);
-			}
+
+<head>
+	<script src="../../build/spine-webgl.js"></script>
+	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+	<style>
+		input,
+		label {
+			display: block;
+		}
+
+		#controls {
+			position: absolute;
 		}
 
-		function render () {
-			time.update();
-			animationState.update(time.delta);
-			skeleton.setToSetupPose(); // Or key all bones used in the additive animations in a lower track, like idle.
-			animationState.apply(skeleton);
-			skeleton.y = -canvas.height / 2 / 2;
-			skeleton.updateWorldTransform();
+		#controls * {
+			position: relative;
+			top: 0;
+			left: 0;
+		}
+	</style>
+</head>
+
+<body>
+	<canvas id="canvas" style="width: 640px; height: 480px;"></canvas>
+	<div id="controls">
+		<label>Up</label><input type="range" id="up" min="0" max="100" value="0"></input>
+		<label>Down</label><input type="range" id="down" min="0" max="100" value="0"></input>
+		<label>Left</label><input type="range" id="left" min="0" max="100" value="0"></input>
+		<label>Right</label><input type="range" id="right" min="0" max="100" value="0"></input>
+	</div>
+</body>
+<script>
+	var canvas = document.getElementById("canvas");
+	canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+	var context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
+	var gl = context.gl;
+
+	var time = new spine.TimeKeeper();
+	var assetManager = new spine.AssetManager(context, "../example/assets/");
+	var renderer = new spine.SceneRenderer(canvas, context);
+	var skeleton, animationState;
+	var upEntry, downEntry, leftEntry, rightEntry;
+
+	assetManager.loadTexture("owl-pma.png");
+	assetManager.loadText("owl-pma.atlas");
+	assetManager.loadText("owl-pro.json");
 
-			gl.clearColor(0.3, 0.3, 0.3, 1);
-			gl.clear(gl.COLOR_BUFFER_BIT);
+	function load() {
+		if (assetManager.isLoadingComplete()) {
+			var atlas = new spine.TextureAtlas(assetManager.get("owl-pma.atlas"));
+			atlas.setTextures(assetManager);
+			var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+			var skeletonJson = new spine.SkeletonJson(atlasLoader);
+			skeletonJson.scale = 0.5;
+			var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get("owl-pro.json")));
+			skeleton = new spine.Skeleton(skeletonData);
+			var animationStateData = new spine.AnimationStateData(skeletonData);
+			animationStateData.defaultMix = 0.3;
+			animationState = new spine.AnimationState(animationStateData);
 
-			renderer.resize(spine.webgl.ResizeMode.Fit);
-			renderer.begin();
-			renderer.drawSkeleton(skeleton);
-			renderer.end();
+			animationState.setAnimation(0, "idle", true);
+			animationState.setAnimation(1, "blink", true);
+			upEntry = animationState.setAnimation(2, "up", true);
+			upEntry.alpha = 0;
+			upEntry.mixBlend = spine.MixBlend.add;
+			downEntry = animationState.setAnimation(3, "down", true);
+			downEntry.alpha = 0;
+			downEntry.mixBlend = spine.MixBlend.add;
+			leftEntry = animationState.setAnimation(4, "left", true);
+			leftEntry.alpha = 0;
+			leftEntry.mixBlend = spine.MixBlend.add;
+			rightEntry = animationState.setAnimation(5, "right", true);
+			rightEntry.alpha = 0;
+			rightEntry.mixBlend = spine.MixBlend.add;
 
 			requestAnimationFrame(render);
+		} else {
+			requestAnimationFrame(load);
 		}
+	}
 
-		function setupUI () {
-			$("#up").on("input", function() {
-				upEntry.alpha = $(this).val() / 100;
-			});
-			$("#down").on("input", function() {
-				downEntry.alpha = $(this).val() / 100;
-			});
-			$("#left").on("input", function() {
-				leftEntry.alpha = $(this).val() / 100;
-			});
-			$("#right").on("input", function() {
-				rightEntry.alpha = $(this).val() / 100;
-			});
-		}
+	function render() {
+		time.update();
+		animationState.update(time.delta);
+		skeleton.setToSetupPose(); // Or key all bones used in the additive animations in a lower track, like idle.
+		animationState.apply(skeleton);
+		skeleton.y = -canvas.height / 2 / 2;
+		skeleton.updateWorldTransform();
+
+		gl.clearColor(0.3, 0.3, 0.3, 1);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+
+		renderer.resize(spine.ResizeMode.Fit);
+		renderer.begin();
+		renderer.drawSkeleton(skeleton);
+		renderer.end();
+
+		requestAnimationFrame(render);
+	}
+
+	function setupUI() {
+		$("#up").on("input", function () {
+			upEntry.alpha = $(this).val() / 100;
+		});
+		$("#down").on("input", function () {
+			downEntry.alpha = $(this).val() / 100;
+		});
+		$("#left").on("input", function () {
+			leftEntry.alpha = $(this).val() / 100;
+		});
+		$("#right").on("input", function () {
+			rightEntry.alpha = $(this).val() / 100;
+		});
+	}
+
+	setupUI();
+	load();
+</script>
 
-		setupUI();
-		load();
-	</script>
 </html>

spine-ts/spine-webgl/tests/test-atlas-loading.html

@@ -1,70 +1,72 @@
 <html>
+
 <body>
-	<script src="../../build/spine-webgl.js"></script>
-	<canvas width="640" height="480"></canvas>
+    <script src="../../build/spine-webgl.js"></script>
+    <canvas width="640" height="480"></canvas>
 </body>
 <script>
-var canvas = document.getElementsByTagName("canvas")[0];
-canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-var context = new spine.webgl.ManagedWebGLRenderingContext(canvas);
-var assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
-var renderer = new spine.webgl.SceneRenderer(canvas, context);
-var time = new spine.TimeKeeper();
-var loadingScreen = new spine.webgl.LoadingScreen(new spine.webgl.SceneRenderer(canvas, context));
+    var canvas = document.getElementsByTagName("canvas")[0];
+    canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+    var context = new spine.ManagedWebGLRenderingContext(canvas);
+    var assetManager = new spine.AssetManager(context, "../example/assets/");
+    var renderer = new spine.SceneRenderer(canvas, context);
+    var time = new spine.TimeKeeper();
+    var loadingScreen = new spine.LoadingScreen(new spine.SceneRenderer(canvas, context));
 
-var skeleton = null;
-var animationState = null;
+    var skeleton = null;
+    var animationState = null;
 
-assetManager.loadText("spineboy-pro.json");
-assetManager.loadTextureAtlas("spineboy-pma.atlas");
+    assetManager.loadText("spineboy-pro.json");
+    assetManager.loadTextureAtlas("spineboy-pma.atlas");
 
-requestAnimationFrame(load);
+    requestAnimationFrame(load);
 
-function load () {
-    if (assetManager.isLoadingComplete()) {
-        var atlas = assetManager.get("spineboy-pma.atlas");
-        var skeletonJson = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
-        var skeletonData = skeletonJson.readSkeletonData(assetManager.get("spineboy-pro.json"));
-        var animationStateData = new spine.AnimationStateData(skeletonData);
-        animationStateData.defaultMix = 0.3;
+    function load() {
+        if (assetManager.isLoadingComplete()) {
+            var atlas = assetManager.get("spineboy-pma.atlas");
+            var skeletonJson = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
+            var skeletonData = skeletonJson.readSkeletonData(assetManager.get("spineboy-pro.json"));
+            var animationStateData = new spine.AnimationStateData(skeletonData);
+            animationStateData.defaultMix = 0.3;
 
-        skeleton = new spine.Skeleton(skeletonData);
-        animationState = new spine.AnimationState(animationStateData);
-        var offset = new spine.Vector2();
-        var size = new spine.Vector2();
-        skeleton.updateWorldTransform();
-        skeleton.getBounds(offset, size, []);
-        renderer.camera.position.x = offset.x + size.x / 2;
-        renderer.camera.position.y = offset.y + size.y / 2;
-        renderer.camera.zoom = size.x > size.y ? size.x / canvas.width : size.y / canvas.height;
+            skeleton = new spine.Skeleton(skeletonData);
+            animationState = new spine.AnimationState(animationStateData);
+            var offset = new spine.Vector2();
+            var size = new spine.Vector2();
+            skeleton.updateWorldTransform();
+            skeleton.getBounds(offset, size, []);
+            renderer.camera.position.x = offset.x + size.x / 2;
+            renderer.camera.position.y = offset.y + size.y / 2;
+            renderer.camera.zoom = size.x > size.y ? size.x / canvas.width : size.y / canvas.height;
 
-        animationState.setAnimation(0, "walk", true);
-        animationState.addAnimation(0, "run", true, 1);
-        animationState.addAnimation(0, "jump", true, 3);
+            animationState.setAnimation(0, "walk", true);
+            animationState.addAnimation(0, "run", true, 1);
+            animationState.addAnimation(0, "jump", true, 3);
 
-        requestAnimationFrame(render);
-    } else {
-        loadingScreen.draw(false);
-        requestAnimationFrame(load);
+            requestAnimationFrame(render);
+        } else {
+            loadingScreen.draw(false);
+            requestAnimationFrame(load);
+        }
     }
-}
 
-function render () {
-    context.gl.clearColor(0.9, 0.9, 0.9, 1);
-    context.gl.clear(context.gl.COLOR_BUFFER_BIT);
+    function render() {
+        context.gl.clearColor(0.9, 0.9, 0.9, 1);
+        context.gl.clear(context.gl.COLOR_BUFFER_BIT);
 
-    time.update();
-    animationState.update(time.delta);
-    animationState.apply(skeleton);
-    skeleton.updateWorldTransform();
+        time.update();
+        animationState.update(time.delta);
+        animationState.apply(skeleton);
+        skeleton.updateWorldTransform();
 
-    renderer.begin();
-    renderer.drawSkeleton(skeleton, true);
-    renderer.end();
+        renderer.begin();
+        renderer.drawSkeleton(skeleton, true);
+        renderer.end();
 
-    loadingScreen.draw(true);
+        loadingScreen.draw(true);
 
-    requestAnimationFrame(render);
-}
+        requestAnimationFrame(render);
+    }
 </script>
+
 </html>

spine-ts/spine-webgl/tests/test-binary.html

@@ -2,118 +2,132 @@
 <script src="../../build/spine-webgl.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <style>
-	* { margin: 0; padding: 0; }
-	body, html { height: 100% }
-	canvas { position: absolute; width: 100% ;height: 100%; }
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	body,
+	html {
+		height: 100%
+	}
+
+	canvas {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
 </style>
+
 <body>
-<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
-<canvas id="canvas" style="background: red;"></canvas>
+	<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
+	<canvas id="canvas" style="background: red;"></canvas>
 </body>
 <script>
 
-var FILE = "spineboy-pro";
-var ANIMATION = "walk";
-var SCALE = 0.5;
-
-var canvas, context, gl, renderer, input, assetManager;
-var skeletons = [];
-var timeKeeper;
-var label = document.getElementById("label");
-var updateMean = new spine.WindowedMean();
-var renderMean = new spine.WindowedMean();
-
-function init() {
-	canvas = document.getElementById("canvas");
-	canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-	context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
-	gl = context.gl;
-
-	renderer = new spine.webgl.SceneRenderer(canvas, context);
-	assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
-	input = new spine.webgl.Input(canvas);
-
-	assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
-	assetManager.loadBinary(FILE + ".skel");
-	// assetManager.loadText(FILE + ".json");
-
-	timeKeeper = new spine.TimeKeeper();
-	requestAnimationFrame(load);
-}
-
-var run = true;
-
-function load() {
-	timeKeeper.update();
-	if (assetManager.isLoadingComplete()) {
-		var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
-		var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
-		skeletonBinary.scale = SCALE;
-		// var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		// skeletonJson.scale = SCALE;
-		var skeletonData = null;
-		var skeletonJsonData = null;
-
-		var time = new spine.TimeKeeper()
-		for (var i = 0; i < 1; i++)
-			skeletonData = skeletonBinary.readSkeletonData(assetManager.get(FILE + ".skel"));
-		time.update();
-		console.log("Binary: " + time.totalTime);
-
-		/*time = new spine.TimeKeeper()
-		for (var i = 0; i < 1; i++)
-			skeletonData = skeletonJson.readSkeletonData(assetManager.get(FILE + ".json"));
-		time.update();
-		console.log("Json: " + time.totalTime);*/
-
-		skeleton = new spine.Skeleton(skeletonData);
-		skeleton.y = -150;
-		var stateData = new spine.AnimationStateData(skeleton.data);
-		state = new spine.AnimationState(stateData);
-		stateData.defaultMix = 0;
-
-		state.setAnimation(0, ANIMATION, true);
-		skeletons.push({ skeleton: skeleton, state: state });
-
-		requestAnimationFrame(render);
-	} else {
+	var FILE = "spineboy-pro";
+	var ANIMATION = "walk";
+	var SCALE = 0.5;
+
+	var canvas, context, gl, renderer, input, assetManager;
+	var skeletons = [];
+	var timeKeeper;
+	var label = document.getElementById("label");
+	var updateMean = new spine.WindowedMean();
+	var renderMean = new spine.WindowedMean();
+
+	function init() {
+		canvas = document.getElementById("canvas");
+		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+		context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
+		gl = context.gl;
+
+		renderer = new spine.SceneRenderer(canvas, context);
+		assetManager = new spine.AssetManager(context, "../example/assets/");
+		input = new spine.Input(canvas);
+
+		assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
+		assetManager.loadBinary(FILE + ".skel");
+		// assetManager.loadText(FILE + ".json");
+
+		timeKeeper = new spine.TimeKeeper();
 		requestAnimationFrame(load);
 	}
-}
-
-function render() {
-	var start = Date.now()
-	timeKeeper.update();
-	var delta = 0.016; // timeKeeper.delta;
-
-	for (var i = 0; i < skeletons.length; i++) {
-		var state = skeletons[i].state;
-		var skeleton = skeletons[i].skeleton;
-		state.update(delta);
-		state.apply(skeleton);
-		skeleton.updateWorldTransform();
-	}
-	updateMean.addValue(Date.now() - start);
-	start = Date.now();
 
-	gl.clearColor(0.2, 0.2, 0.2, 1);
-	gl.clear(gl.COLOR_BUFFER_BIT);
-
-	renderer.resize(spine.webgl.ResizeMode.Fit);
-	renderer.begin();
-	for (var i = 0; i < skeletons.length; i++) {
-		var skeleton = skeletons[i].skeleton;
-		renderer.drawSkeleton(skeleton, true);
+	var run = true;
+
+	function load() {
+		timeKeeper.update();
+		if (assetManager.isLoadingComplete()) {
+			var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
+			var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+			var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
+			skeletonBinary.scale = SCALE;
+			// var skeletonJson = new spine.SkeletonJson(atlasLoader);
+			// skeletonJson.scale = SCALE;
+			var skeletonData = null;
+			var skeletonJsonData = null;
+
+			var time = new spine.TimeKeeper()
+			for (var i = 0; i < 1; i++)
+				skeletonData = skeletonBinary.readSkeletonData(assetManager.get(FILE + ".skel"));
+			time.update();
+			console.log("Binary: " + time.totalTime);
+
+			/*time = new spine.TimeKeeper()
+			for (var i = 0; i < 1; i++)
+				skeletonData = skeletonJson.readSkeletonData(assetManager.get(FILE + ".json"));
+			time.update();
+			console.log("Json: " + time.totalTime);*/
+
+			skeleton = new spine.Skeleton(skeletonData);
+			skeleton.y = -150;
+			var stateData = new spine.AnimationStateData(skeleton.data);
+			state = new spine.AnimationState(stateData);
+			stateData.defaultMix = 0;
+
+			state.setAnimation(0, ANIMATION, true);
+			skeletons.push({ skeleton: skeleton, state: state });
+
+			requestAnimationFrame(render);
+		} else {
+			requestAnimationFrame(load);
+		}
 	}
-	renderer.end();
 
-	requestAnimationFrame(render)
-	renderMean.addValue(Date.now() - start);
-	label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
-					   "Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
-}
+	function render() {
+		var start = Date.now()
+		timeKeeper.update();
+		var delta = 0.016; // timeKeeper.delta;
+
+		for (var i = 0; i < skeletons.length; i++) {
+			var state = skeletons[i].state;
+			var skeleton = skeletons[i].skeleton;
+			state.update(delta);
+			state.apply(skeleton);
+			skeleton.updateWorldTransform();
+		}
+		updateMean.addValue(Date.now() - start);
+		start = Date.now();
+
+		gl.clearColor(0.2, 0.2, 0.2, 1);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+
+		renderer.resize(spine.ResizeMode.Fit);
+		renderer.begin();
+		for (var i = 0; i < skeletons.length; i++) {
+			var skeleton = skeletons[i].skeleton;
+			renderer.drawSkeleton(skeleton, true);
+		}
+		renderer.end();
+
+		requestAnimationFrame(render)
+		renderMean.addValue(Date.now() - start);
+		label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
+			"Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
+	}
 
-init();
+	init();
 </script>
+
 </html>

spine-ts/spine-webgl/tests/test-mix-and-match.html

@@ -2,117 +2,131 @@
 <script src="../../build/spine-webgl.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <style>
-	* { margin: 0; padding: 0; }
-	body, html { height: 100% }
-	canvas { position: absolute; width: 100% ;height: 100%; }
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	body,
+	html {
+		height: 100%
+	}
+
+	canvas {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
 </style>
+
 <body>
-<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
-<canvas id="canvas" style="background: red;"></canvas>
+	<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
+	<canvas id="canvas" style="background: red;"></canvas>
 </body>
 <script>
 
-var FILE = "mix-and-match-pro";
-var ANIMATION = "dance";
-var SCALE = 0.5;
-
-var canvas, context, gl, renderer, input, assetManager;
-var skeletons = [];
-var timeKeeper;
-var label = document.getElementById("label");
-var updateMean = new spine.WindowedMean();
-var renderMean = new spine.WindowedMean();
-
-function init() {
-	canvas = document.getElementById("canvas");
-	canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-	context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
-	gl = context.gl;
-
-	renderer = new spine.webgl.SceneRenderer(canvas, context);
-	assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
-	input = new spine.webgl.Input(canvas);
-
-	assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
-	assetManager.loadBinary(FILE + ".skel");
-
-	timeKeeper = new spine.TimeKeeper();
-	requestAnimationFrame(load);
-}
-
-var run = true;
-
-function load() {
-	timeKeeper.update();
-	if (assetManager.isLoadingComplete()) {
-		var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
-		var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
-		skeletonBinary.scale = SCALE;
-		var skeletonData = skeletonBinary.readSkeletonData(assetManager.get(FILE + ".skel"));
-
-		skeleton = new spine.Skeleton(skeletonData);
-		var stateData = new spine.AnimationStateData(skeleton.data);
-		state = new spine.AnimationState(stateData);
-		stateData.defaultMix = 0;
-
-		// Create a new skin, by mixing and matching other skins
-		// that fit together. Items making up the girl are individual
-		// skins. Using the skin API, a new skin is created which is
-		// a combination of all these individual item skins.
-		var mixAndMatchSkin = new spine.Skin("custom-girl");
-		mixAndMatchSkin.addSkin(skeletonData.findSkin("skin-base"));
-		mixAndMatchSkin.addSkin(skeletonData.findSkin("nose/short"));
-		mixAndMatchSkin.addSkin(skeletonData.findSkin("eyelids/girly"));
-		mixAndMatchSkin.addSkin(skeletonData.findSkin("eyes/violet"));
-		mixAndMatchSkin.addSkin(skeletonData.findSkin("hair/brown"));
-		mixAndMatchSkin.addSkin(skeletonData.findSkin("clothes/hoodie-orange"));
-		mixAndMatchSkin.addSkin(skeletonData.findSkin("legs/pants-jeans"));
-		mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/bag"));
-		mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
-		skeleton.setSkin(mixAndMatchSkin);
-
-		state.setAnimation(0, ANIMATION, true);
-		skeletons.push({ skeleton: skeleton, state: state });
-
-		requestAnimationFrame(render);
-	} else {
+	var FILE = "mix-and-match-pro";
+	var ANIMATION = "dance";
+	var SCALE = 0.5;
+
+	var canvas, context, gl, renderer, input, assetManager;
+	var skeletons = [];
+	var timeKeeper;
+	var label = document.getElementById("label");
+	var updateMean = new spine.WindowedMean();
+	var renderMean = new spine.WindowedMean();
+
+	function init() {
+		canvas = document.getElementById("canvas");
+		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+		context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
+		gl = context.gl;
+
+		renderer = new spine.SceneRenderer(canvas, context);
+		assetManager = new spine.AssetManager(context, "../example/assets/");
+		input = new spine.Input(canvas);
+
+		assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
+		assetManager.loadBinary(FILE + ".skel");
+
+		timeKeeper = new spine.TimeKeeper();
 		requestAnimationFrame(load);
 	}
-}
-
-function render() {
-	var start = Date.now()
-	timeKeeper.update();
-	var delta = timeKeeper.delta;
-
-	for (var i = 0; i < skeletons.length; i++) {
-		var state = skeletons[i].state;
-		var skeleton = skeletons[i].skeleton;
-		state.update(delta);
-		state.apply(skeleton);
-		skeleton.updateWorldTransform();
-	}
-	updateMean.addValue(Date.now() - start);
-	start = Date.now();
 
-	gl.clearColor(0.2, 0.2, 0.2, 1);
-	gl.clear(gl.COLOR_BUFFER_BIT);
-
-	renderer.resize(spine.webgl.ResizeMode.Fit);
-	renderer.begin();
-	for (var i = 0; i < skeletons.length; i++) {
-		var skeleton = skeletons[i].skeleton;
-		renderer.drawSkeleton(skeleton, true);
+	var run = true;
+
+	function load() {
+		timeKeeper.update();
+		if (assetManager.isLoadingComplete()) {
+			var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
+			var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+			var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
+			skeletonBinary.scale = SCALE;
+			var skeletonData = skeletonBinary.readSkeletonData(assetManager.get(FILE + ".skel"));
+
+			skeleton = new spine.Skeleton(skeletonData);
+			var stateData = new spine.AnimationStateData(skeleton.data);
+			state = new spine.AnimationState(stateData);
+			stateData.defaultMix = 0;
+
+			// Create a new skin, by mixing and matching other skins
+			// that fit together. Items making up the girl are individual
+			// skins. Using the skin API, a new skin is created which is
+			// a combination of all these individual item skins.
+			var mixAndMatchSkin = new spine.Skin("custom-girl");
+			mixAndMatchSkin.addSkin(skeletonData.findSkin("skin-base"));
+			mixAndMatchSkin.addSkin(skeletonData.findSkin("nose/short"));
+			mixAndMatchSkin.addSkin(skeletonData.findSkin("eyelids/girly"));
+			mixAndMatchSkin.addSkin(skeletonData.findSkin("eyes/violet"));
+			mixAndMatchSkin.addSkin(skeletonData.findSkin("hair/brown"));
+			mixAndMatchSkin.addSkin(skeletonData.findSkin("clothes/hoodie-orange"));
+			mixAndMatchSkin.addSkin(skeletonData.findSkin("legs/pants-jeans"));
+			mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/bag"));
+			mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
+			skeleton.setSkin(mixAndMatchSkin);
+
+			state.setAnimation(0, ANIMATION, true);
+			skeletons.push({ skeleton: skeleton, state: state });
+
+			requestAnimationFrame(render);
+		} else {
+			requestAnimationFrame(load);
+		}
 	}
-	renderer.end();
 
-	requestAnimationFrame(render)
-	renderMean.addValue(Date.now() - start);
-	label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
-					   "Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
-}
+	function render() {
+		var start = Date.now()
+		timeKeeper.update();
+		var delta = timeKeeper.delta;
+
+		for (var i = 0; i < skeletons.length; i++) {
+			var state = skeletons[i].state;
+			var skeleton = skeletons[i].skeleton;
+			state.update(delta);
+			state.apply(skeleton);
+			skeleton.updateWorldTransform();
+		}
+		updateMean.addValue(Date.now() - start);
+		start = Date.now();
+
+		gl.clearColor(0.2, 0.2, 0.2, 1);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+
+		renderer.resize(spine.ResizeMode.Fit);
+		renderer.begin();
+		for (var i = 0; i < skeletons.length; i++) {
+			var skeleton = skeletons[i].skeleton;
+			renderer.drawSkeleton(skeleton, true);
+		}
+		renderer.end();
+
+		requestAnimationFrame(render)
+		renderMean.addValue(Date.now() - start);
+		label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
+			"Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
+	}
 
-init();
+	init();
 </script>
-</html>
+
+</html>

spine-ts/spine-webgl/tests/test-pma-tintblack.html

@@ -1,12 +1,24 @@
 <html>
-	<script src="../../build/spine-webgl.js"></script>
-	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
-	<style>
-		* { margin: 0; padding: 0; }
-		body, html { height: 100% }
-		canvas { width: 640px ;height: 640px; }
-	</style>
-	<body>
+<script src="../../build/spine-webgl.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+<style>
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	body,
+	html {
+		height: 100%
+	}
+
+	canvas {
+		width: 640px;
+		height: 640px;
+	}
+</style>
+
+<body>
 	<canvas id="canvas" style="background: #ff00ff;"></canvas>
 	<div>
 		<div><label>Light: </label><input type="text" value="ffffffff" id="light"></div>
@@ -14,32 +26,32 @@
 		<div><label>PMA blend:</label><input type="checkbox" id="pmaBlend"></div>
 		<div><label>Ivan's shader:</label><input type="checkbox" id="ivan"></div>
 	</div>
-	</body>
-	<script>
+</body>
+<script>
 
-	$("#light").change(function() {
+	$("#light").change(function () {
 		setColors();
 	});
 
-	$("#dark").change(function() {
+	$("#dark").change(function () {
 		setColors();
 	});
 
-	$("#pmaBlend").change(function() {
+	$("#pmaBlend").change(function () {
 		setColors();
 	});
 
 	function setColors() {
 		var light = $("#light").val();
-		var r = parseInt(light.substr(0,2),16) / 255;
-        var g = parseInt(light.substr(2,2),16) / 255;
-		var b = parseInt(light.substr(4,2),16) / 255;
-		var a = parseInt(light.substr(6,2),16) / 255;
+		var r = parseInt(light.substr(0, 2), 16) / 255;
+		var g = parseInt(light.substr(2, 2), 16) / 255;
+		var b = parseInt(light.substr(4, 2), 16) / 255;
+		var a = parseInt(light.substr(6, 2), 16) / 255;
 
 		var dark = $("#dark").val();
-		var dr = parseInt(dark.substr(0,2),16) / 255;
-        var dg = parseInt(dark.substr(2,2),16) / 255;
-		var db = parseInt(dark.substr(4,2),16) / 255;
+		var dr = parseInt(dark.substr(0, 2), 16) / 255;
+		var dg = parseInt(dark.substr(2, 2), 16) / 255;
+		var db = parseInt(dark.substr(4, 2), 16) / 255;
 
 		var pma = $("#pmaBlend").prop("checked");
 		if (pma) {
@@ -55,45 +67,45 @@
 			da = 0;
 		}
 
-		for (var i = 0, j = 2, k = 8; i < 4; i++, j+=12, k+=12) {
+		for (var i = 0, j = 2, k = 8; i < 4; i++, j += 12, k += 12) {
 			vertices[j] = r;
-			vertices[j+1] = g;
-			vertices[j+2] = b;
-			vertices[j+3] = a;
+			vertices[j + 1] = g;
+			vertices[j + 2] = b;
+			vertices[j + 3] = a;
 
 			vertices[k] = dr;
-			vertices[k+1] = dg;
-			vertices[k+2] = db;
-			vertices[k+3] = da;
+			vertices[k + 1] = dg;
+			vertices[k + 2] = db;
+			vertices[k + 3] = da;
 		}
 	}
 
 	var canvas = document.getElementById("canvas");
 	canvas.width = canvas.clientWidth;
 	canvas.height = canvas.clientHeight;
-	var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
+	var context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
 	var gl = context.gl;
 
-	var vertices = [ -1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
-					 1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
-					 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0,
-					 -1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0];
-	var indices = [ 0, 1, 2, 2, 3, 0 ];
+	var vertices = [-1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
+		1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
+		1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0,
+	-1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0];
+	var indices = [0, 1, 2, 2, 3, 0];
 
-	var shader = spine.webgl.Shader.newTwoColoredTextured(context);
+	var shader = spine.Shader.newTwoColoredTextured(context);
 	var ivanShader = loadIvanShader(context, shader);
 
-	var assetManager = new spine.webgl.AssetManager(context);
+	var assetManager = new spine.AssetManager(context);
 	assetManager.loadTexture("../example/assets/spineboy.png");
 	assetManager.loadTexture("../example/assets/spineboy-pma.png");
 
-	var camMatrix = new spine.webgl.Matrix4();
+	var camMatrix = new spine.Matrix4();
 
-	var batcher = new spine.webgl.PolygonBatcher(context, true);
+	var batcher = new spine.PolygonBatcher(context, true);
 
 	requestAnimationFrame(load);
 
-	function load () {
+	function load() {
 		if (assetManager.isLoadingComplete()) {
 			texture = assetManager.get("../example/assets/spineboy.png");
 			texturePma = assetManager.get("../example/assets/spineboy-pma.png");
@@ -110,7 +122,7 @@
 		var s = ivan ? ivanShader : shader;
 
 		s.bind();
-		s.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values);
+		s.setUniform4x4f(spine.Shader.MVP_MATRIX, camMatrix.values);
 		s.setUniformi("u_texture", 0);
 		if (texture != null) {
 			batcher.setBlendMode(pma ? context.gl.ONE : context.gl.SRC_ALPHA, context.gl.ONE_MINUS_SRC_ALPHA)
@@ -123,7 +135,7 @@
 		requestAnimationFrame(render);
 	}
 
-	function loadIvanShader (context, shader) {
+	function loadIvanShader(context, shader) {
 		var vs = shader.getVertexShaderSource();
 
 		let fs = `
@@ -144,6 +156,6 @@
 			}
 		`;
 
-		return new spine.webgl.Shader(context, vs, fs);
+		return new spine.Shader(context, vs, fs);
 	}
-	</script>
+</script>

spine-ts/spine-webgl/tests/test-rig.html

@@ -2,110 +2,124 @@
 <script src="../../build/spine-webgl.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <style>
-	* { margin: 0; padding: 0; }
-	body, html { height: 100% }
-	canvas { position: absolute; width: 100% ;height: 100%; }
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	body,
+	html {
+		height: 100%
+	}
+
+	canvas {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
 </style>
+
 <body>
-<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
-<canvas id="canvas" style="background: red;"></canvas>
+	<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
+	<canvas id="canvas" style="background: red;"></canvas>
 </body>
 <script>
 
-var FILE = "spineboy-pro";
-var ANIMATION = "idle";
-var SCALE = 0.5;
-
-var canvas, context, gl, renderer, input, assetManager;
-var skeletons = [];
-var timeKeeper;
-var label = document.getElementById("label");
-var updateMean = new spine.WindowedMean();
-var renderMean = new spine.WindowedMean();
-
-function init() {
-	canvas = document.getElementById("canvas");
-	canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-	context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
-	gl = context.gl;
-
-	renderer = new spine.webgl.SceneRenderer(canvas, context);
-	assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
-	input = new spine.webgl.Input(canvas);
-
-	assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
-	assetManager.loadText(FILE + ".json");
-
-	timeKeeper = new spine.TimeKeeper();
-	requestAnimationFrame(load);
-}
-
-var run = true;
-
-function switchAnimation() {
-	var skel = skeletons[0];
-	skel.state.setAnimation(0, run ? "run" : "idle", true);
-	run = !run;
-	setTimeout(switchAnimation, 300);
-}
-
-function load() {
-	timeKeeper.update();
-	if (assetManager.isLoadingComplete()) {
-		var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
-		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		skeletonJson.scale = SCALE;
-		var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get(FILE + ".json")));
-
-		skeleton = new spine.Skeleton(skeletonData);
-		var stateData = new spine.AnimationStateData(skeleton.data);
-		state = new spine.AnimationState(stateData);
-		stateData.defaultMix = 0;
-
-		state.setAnimation(0, ANIMATION, true);
-		skeletons.push({ skeleton: skeleton, state: state });
+	var FILE = "spineboy-pro";
+	var ANIMATION = "idle";
+	var SCALE = 0.5;
 
-		setTimeout(switchAnimation, 300);
+	var canvas, context, gl, renderer, input, assetManager;
+	var skeletons = [];
+	var timeKeeper;
+	var label = document.getElementById("label");
+	var updateMean = new spine.WindowedMean();
+	var renderMean = new spine.WindowedMean();
+
+	function init() {
+		canvas = document.getElementById("canvas");
+		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+		context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
+		gl = context.gl;
 
-		requestAnimationFrame(render);
-	} else {
+		renderer = new spine.SceneRenderer(canvas, context);
+		assetManager = new spine.AssetManager(context, "../example/assets/");
+		input = new spine.Input(canvas);
+
+		assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
+		assetManager.loadText(FILE + ".json");
+
+		timeKeeper = new spine.TimeKeeper();
 		requestAnimationFrame(load);
 	}
-}
-
-function render() {
-	var start = Date.now()
-	timeKeeper.update();
-	var delta = timeKeeper.delta;
-
-	for (var i = 0; i < skeletons.length; i++) {
-		var state = skeletons[i].state;
-		var skeleton = skeletons[i].skeleton;
-		state.update(delta);
-		state.apply(skeleton);
-		skeleton.updateWorldTransform();
-	}
-	updateMean.addValue(Date.now() - start);
-	start = Date.now();
 
-	gl.clearColor(0.2, 0.2, 0.2, 1);
-	gl.clear(gl.COLOR_BUFFER_BIT);
+	var run = true;
+
+	function switchAnimation() {
+		var skel = skeletons[0];
+		skel.state.setAnimation(0, run ? "run" : "idle", true);
+		run = !run;
+		setTimeout(switchAnimation, 300);
+	}
 
-	renderer.resize(spine.webgl.ResizeMode.Fit);
-	renderer.begin();
-	for (var i = 0; i < skeletons.length; i++) {
-		var skeleton = skeletons[i].skeleton;
-		renderer.drawSkeleton(skeleton, true);
+	function load() {
+		timeKeeper.update();
+		if (assetManager.isLoadingComplete()) {
+			var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
+			var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+			var skeletonJson = new spine.SkeletonJson(atlasLoader);
+			skeletonJson.scale = SCALE;
+			var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get(FILE + ".json")));
+
+			skeleton = new spine.Skeleton(skeletonData);
+			var stateData = new spine.AnimationStateData(skeleton.data);
+			state = new spine.AnimationState(stateData);
+			stateData.defaultMix = 0;
+
+			state.setAnimation(0, ANIMATION, true);
+			skeletons.push({ skeleton: skeleton, state: state });
+
+			setTimeout(switchAnimation, 300);
+
+			requestAnimationFrame(render);
+		} else {
+			requestAnimationFrame(load);
+		}
 	}
-	renderer.end();
 
-	requestAnimationFrame(render)
-	renderMean.addValue(Date.now() - start);
-	label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
-					   "Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
-}
+	function render() {
+		var start = Date.now()
+		timeKeeper.update();
+		var delta = timeKeeper.delta;
+
+		for (var i = 0; i < skeletons.length; i++) {
+			var state = skeletons[i].state;
+			var skeleton = skeletons[i].skeleton;
+			state.update(delta);
+			state.apply(skeleton);
+			skeleton.updateWorldTransform();
+		}
+		updateMean.addValue(Date.now() - start);
+		start = Date.now();
+
+		gl.clearColor(0.2, 0.2, 0.2, 1);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+
+		renderer.resize(spine.ResizeMode.Fit);
+		renderer.begin();
+		for (var i = 0; i < skeletons.length; i++) {
+			var skeleton = skeletons[i].skeleton;
+			renderer.drawSkeleton(skeleton, true);
+		}
+		renderer.end();
+
+		requestAnimationFrame(render)
+		renderMean.addValue(Date.now() - start);
+		label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
+			"Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
+	}
 
-init();
+	init();
 </script>
+
 </html>

spine-ts/spine-webgl/tests/test-simple.html

@@ -1,87 +1,101 @@
 <html>
 <script src="../../build/spine-webgl.js"></script>
 <style>
-	* { margin: 0; padding: 0; }
-	body, html { height: 100% }
-	canvas { position: absolute; width: 100% ;height: 100%; }
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	body,
+	html {
+		height: 100%
+	}
+
+	canvas {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
 </style>
+
 <body>
-<canvas id="canvas" style="background: red;"></canvas>
+	<canvas id="canvas" style="background: red;"></canvas>
 </body>
 <script>
 
-var FILE = "spineboy-pro";
-var ANIMATION = "walk";
-var SCALE = 0.5;
-
-var canvas, context, gl, renderer, input, assetManager;
-var timeKeeper;
-var skeleton;
-var animationState;
-
-function init() {
-	canvas = document.getElementById("canvas");
-	canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-	context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
-	gl = context.gl;
-
-	renderer = new spine.webgl.SceneRenderer(canvas, context);
-	assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
-	input = new spine.webgl.Input(canvas);
-
-	assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");	
-	assetManager.loadBinary(FILE + ".skel");
-
-	timeKeeper = new spine.TimeKeeper();
-	requestAnimationFrame(load);
-}
-
-var run = true;
-
-function load() {
-	timeKeeper.update();
-	if (assetManager.isLoadingComplete()) {
-		var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
-		
-		var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
-		skeletonBinary.scale = SCALE;				
-
-		var time = new spine.TimeKeeper()		
-		var skeletonData = skeletonBinary.readSkeletonData(assetManager.get(FILE + ".skel"));		
-
-		skeleton = new spine.Skeleton(skeletonData);
-		var stateData = new spine.AnimationStateData(skeleton.data);
-		animationState = new spine.AnimationState(stateData);
-		stateData.defaultMix = 0;
-		animationState.setAnimation(0, ANIMATION, true);		
-
-		requestAnimationFrame(render);
-	} else {
+	var FILE = "spineboy-pro";
+	var ANIMATION = "walk";
+	var SCALE = 0.5;
+
+	var canvas, context, gl, renderer, input, assetManager;
+	var timeKeeper;
+	var skeleton;
+	var animationState;
+
+	function init() {
+		canvas = document.getElementById("canvas");
+		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+		context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
+		gl = context.gl;
+
+		renderer = new spine.SceneRenderer(canvas, context);
+		assetManager = new spine.AssetManager(context, "../example/assets/");
+		input = new spine.Input(canvas);
+
+		assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
+		assetManager.loadBinary(FILE + ".skel");
+
+		timeKeeper = new spine.TimeKeeper();
 		requestAnimationFrame(load);
 	}
-}
 
-function render() {
-	var start = Date.now()
-	timeKeeper.update();
-	var delta = timeKeeper.delta;
+	var run = true;
+
+	function load() {
+		timeKeeper.update();
+		if (assetManager.isLoadingComplete()) {
+			var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
+			var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+
+			var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
+			skeletonBinary.scale = SCALE;
+
+			var time = new spine.TimeKeeper()
+			var skeletonData = skeletonBinary.readSkeletonData(assetManager.get(FILE + ".skel"));
+
+			skeleton = new spine.Skeleton(skeletonData);
+			var stateData = new spine.AnimationStateData(skeleton.data);
+			animationState = new spine.AnimationState(stateData);
+			stateData.defaultMix = 0;
+			animationState.setAnimation(0, ANIMATION, true);
+
+			requestAnimationFrame(render);
+		} else {
+			requestAnimationFrame(load);
+		}
+	}
+
+	function render() {
+		var start = Date.now()
+		timeKeeper.update();
+		var delta = timeKeeper.delta;
 
-	animationState.update(delta);
-	animationState.apply(skeleton);
-	skeleton.updateWorldTransform();	
+		animationState.update(delta);
+		animationState.apply(skeleton);
+		skeleton.updateWorldTransform();
 
-	gl.clearColor(0.2, 0.2, 0.2, 1);
-	gl.clear(gl.COLOR_BUFFER_BIT);
+		gl.clearColor(0.2, 0.2, 0.2, 1);
+		gl.clear(gl.COLOR_BUFFER_BIT);
 
-	renderer.resize(spine.webgl.ResizeMode.Fit);
-	renderer.begin();
-	renderer.drawSkeleton(skeleton, true);	
-	renderer.end();
+		renderer.resize(spine.ResizeMode.Fit);
+		renderer.begin();
+		renderer.drawSkeleton(skeleton, true);
+		renderer.end();
 
-	requestAnimationFrame(render)	
-}
+		requestAnimationFrame(render)
+	}
 
-init();
+	init();
 </script>
+
 </html>

spine-ts/spine-webgl/tests/test-skins.html

@@ -2,107 +2,121 @@
 <script src="../../build/spine-webgl.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <style>
-	* { margin: 0; padding: 0; }
-	body, html { height: 100% }
-	canvas { position: absolute; width: 100% ;height: 100%; }
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	body,
+	html {
+		height: 100%
+	}
+
+	canvas {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
 </style>
+
 <body>
-<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
-<canvas id="canvas" style="background: red;"></canvas>
+	<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
+	<canvas id="canvas" style="background: red;"></canvas>
 </body>
 <script>
 
-var FILE = "goblins-pro";
-var ANIMATION = "walk";
-var SCALE = 0.5;
-
-var canvas, context, gl, renderer, input, assetManager;
-var skeletons = [];
-var timeKeeper;
-var label = document.getElementById("label");
-var updateMean = new spine.WindowedMean();
-var renderMean = new spine.WindowedMean();
-
-function init() {
-	canvas = document.getElementById("canvas");
-	canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-	context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
-	gl = context.gl;
-
-	renderer = new spine.webgl.SceneRenderer(canvas, context);
-	assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
-	input = new spine.webgl.Input(canvas);
-
-	assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
-	assetManager.loadText(FILE + ".json");
-
-	timeKeeper = new spine.TimeKeeper();
-	requestAnimationFrame(load);
-}
-
-var run = true;
-
-function load() {
-	timeKeeper.update();
-	if (assetManager.isLoadingComplete()) {
-		var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
-		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		skeletonJson.scale = SCALE;
-		var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get(FILE + ".json")));
-
-		skeleton = new spine.Skeleton(skeletonData);
-		var stateData = new spine.AnimationStateData(skeleton.data);
-		state = new spine.AnimationState(stateData);
-		stateData.defaultMix = 0;
-
-		var originalSkin = skeleton.data.findSkin("goblingirl");
-		var copy = new spine.Skin("test");
-		copy.copySkin(originalSkin);
-		skeleton.setSkin(copy);
-		skeleton.setSlotsToSetupPose();
-
-		state.setAnimation(0, ANIMATION, true);
-		skeletons.push({ skeleton: skeleton, state: state });
-
-		requestAnimationFrame(render);
-	} else {
+	var FILE = "goblins-pro";
+	var ANIMATION = "walk";
+	var SCALE = 0.5;
+
+	var canvas, context, gl, renderer, input, assetManager;
+	var skeletons = [];
+	var timeKeeper;
+	var label = document.getElementById("label");
+	var updateMean = new spine.WindowedMean();
+	var renderMean = new spine.WindowedMean();
+
+	function init() {
+		canvas = document.getElementById("canvas");
+		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+		context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
+		gl = context.gl;
+
+		renderer = new spine.SceneRenderer(canvas, context);
+		assetManager = new spine.AssetManager(context, "../example/assets/");
+		input = new spine.Input(canvas);
+
+		assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
+		assetManager.loadText(FILE + ".json");
+
+		timeKeeper = new spine.TimeKeeper();
 		requestAnimationFrame(load);
 	}
-}
-
-function render() {
-	var start = Date.now()
-	timeKeeper.update();
-	var delta = timeKeeper.delta;
-
-	for (var i = 0; i < skeletons.length; i++) {
-		var state = skeletons[i].state;
-		var skeleton = skeletons[i].skeleton;
-		state.update(delta);
-		state.apply(skeleton);
-		skeleton.updateWorldTransform();
-	}
-	updateMean.addValue(Date.now() - start);
-	start = Date.now();
 
-	gl.clearColor(0.2, 0.2, 0.2, 1);
-	gl.clear(gl.COLOR_BUFFER_BIT);
-
-	renderer.resize(spine.webgl.ResizeMode.Fit);
-	renderer.begin();
-	for (var i = 0; i < skeletons.length; i++) {
-		var skeleton = skeletons[i].skeleton;
-		renderer.drawSkeleton(skeleton, true);
+	var run = true;
+
+	function load() {
+		timeKeeper.update();
+		if (assetManager.isLoadingComplete()) {
+			var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
+			var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+			var skeletonJson = new spine.SkeletonJson(atlasLoader);
+			skeletonJson.scale = SCALE;
+			var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get(FILE + ".json")));
+
+			skeleton = new spine.Skeleton(skeletonData);
+			var stateData = new spine.AnimationStateData(skeleton.data);
+			state = new spine.AnimationState(stateData);
+			stateData.defaultMix = 0;
+
+			var originalSkin = skeleton.data.findSkin("goblingirl");
+			var copy = new spine.Skin("test");
+			copy.copySkin(originalSkin);
+			skeleton.setSkin(copy);
+			skeleton.setSlotsToSetupPose();
+
+			state.setAnimation(0, ANIMATION, true);
+			skeletons.push({ skeleton: skeleton, state: state });
+
+			requestAnimationFrame(render);
+		} else {
+			requestAnimationFrame(load);
+		}
 	}
-	renderer.end();
 
-	requestAnimationFrame(render)
-	renderMean.addValue(Date.now() - start);
-	label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
-					   "Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
-}
+	function render() {
+		var start = Date.now()
+		timeKeeper.update();
+		var delta = timeKeeper.delta;
+
+		for (var i = 0; i < skeletons.length; i++) {
+			var state = skeletons[i].state;
+			var skeleton = skeletons[i].skeleton;
+			state.update(delta);
+			state.apply(skeleton);
+			skeleton.updateWorldTransform();
+		}
+		updateMean.addValue(Date.now() - start);
+		start = Date.now();
+
+		gl.clearColor(0.2, 0.2, 0.2, 1);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+
+		renderer.resize(spine.ResizeMode.Fit);
+		renderer.begin();
+		for (var i = 0; i < skeletons.length; i++) {
+			var skeleton = skeletons[i].skeleton;
+			renderer.drawSkeleton(skeleton, true);
+		}
+		renderer.end();
+
+		requestAnimationFrame(render)
+		renderMean.addValue(Date.now() - start);
+		label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
+			"Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
+	}
 
-init();
+	init();
 </script>
+
 </html>

spine-ts/spine-webgl/tests/test-slot-range.html

@@ -1,114 +1,116 @@
 <html>
+
 <body>
 	<script src="../../build/spine-webgl.js"></script>
 	<canvas width="640" height="480"></canvas>
 </body>
 <script>
-/*
-	This test illustrates how to render one skeleton in the
-	middle of rendering another skeleton. This technique can
-	be used to e.g. render different weapons on a character that
-	are themselves animated.
-*/
-var canvas = document.getElementsByTagName("canvas")[0];
-canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-var context = new spine.webgl.ManagedWebGLRenderingContext(canvas);
-var assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
-var renderer = new spine.webgl.SceneRenderer(canvas, context);
-var time = new spine.TimeKeeper();
-var loadingScreen = new spine.webgl.LoadingScreen(new spine.webgl.SceneRenderer(canvas, context));
-
-var spineBoy;
-var vine;
-
-assetManager.loadText("spineboy-pro.json");
-assetManager.loadTextureAtlas("spineboy-pma.atlas");
-
-assetManager.loadText("vine-pro.json");
-assetManager.loadTextureAtlas("vine-pma.atlas");
-
-requestAnimationFrame(load);
-
-function loadSkeleton(json, atlas, scale) {
-	var atlas = assetManager.get(atlas);
-	var skeletonJson = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
-	skeletonJson.scale = scale;
-	var skeletonData = skeletonJson.readSkeletonData(assetManager.get(json));
-	var animationStateData = new spine.AnimationStateData(skeletonData);
-
-	skeleton = new spine.Skeleton(skeletonData);
-	animationState = new spine.AnimationState(animationStateData);
-
-	return { skeleton: skeleton, animationState: animationState };
-}
-
-function load () {
-    if (assetManager.isLoadingComplete()) {
-		spineBoy = loadSkeleton("spineboy-pro.json", "spineboy-pma.atlas", 1);
-		vine = loadSkeleton("vine-pro.json", "vine-pma.atlas", 0.3);
-
-
-        var offset = new spine.Vector2();
-        var size = new spine.Vector2();
-        spineBoy.skeleton.updateWorldTransform();
-        spineBoy.skeleton.getBounds(offset, size, []);
-        renderer.camera.position.x = offset.x + size.x / 2;
-        renderer.camera.position.y = offset.y + size.y / 2;
-        renderer.camera.zoom = size.x > size.y ? size.x / canvas.width : size.y / canvas.height;
-
-		spineBoy.animationState.setAnimation(0, "walk", true);
-		vine.animationState.setAnimation(0, "grow", true);
-
-        requestAnimationFrame(render);
-    } else {
-        loadingScreen.draw(false);
-        requestAnimationFrame(load);
-    }
-}
-
-function render () {
-    context.gl.clearColor(0.9, 0.9, 0.9, 1);
-    context.gl.clear(context.gl.COLOR_BUFFER_BIT);
-
-	time.update();
-
-	// Update Spineboy first
-    spineBoy.animationState.update(time.delta);
-    spineBoy.animationState.apply(spineBoy.skeleton);
-	spineBoy.skeleton.updateWorldTransform();
-
-	// Next figure out the world location of the bone
-	// we attach the vine to, and apply it to the vine's
-	// root bone. Note that the root bone must not be
-	// keyed! We also ignore scaling and shearing.
-	var gun = spineBoy.skeleton.findBone("gun");
-	var vineRoot = vine.skeleton.getRootBone();
-	vineRoot.x = gun.worldX;
-	vineRoot.y = gun.worldY;
-	vineRoot.rotation = gun.getWorldRotationX();
-	vine.animationState.update(time.delta);
-	vine.animationState.apply(vine.skeleton);
-	vine.skeleton.updateWorldTransform();
-
-	// Find the two slots inbetween we want to render the vine
-	var gunSlot = spineBoy.skeleton.findSlot("gun");
-	var rearFoot = spineBoy.skeleton.findSlot("rear-foot");
-
-	renderer.begin();
-	// render from the back most slot (-1) to the gun slot (inclusive)
-	renderer.drawSkeleton(spineBoy.skeleton, true, -1, gunSlot.data.index);
-
-	// now render the vine
-	renderer.drawSkeleton(vine.skeleton, false);
-
-	// finally render the remaining spineboy slots starting at the rear foot
-	// (the next slot after the gun)
-	renderer.drawSkeleton(spineBoy.skeleton, true, rearFoot.data.index, -1);
-    renderer.end();
-
-    loadingScreen.draw(true);
-
-    requestAnimationFrame(render);
-}
+	/*
+		This test illustrates how to render one skeleton in the
+		middle of rendering another skeleton. This technique can
+		be used to e.g. render different weapons on a character that
+		are themselves animated.
+	*/
+	var canvas = document.getElementsByTagName("canvas")[0];
+	canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+	var context = new spine.ManagedWebGLRenderingContext(canvas);
+	var assetManager = new spine.AssetManager(context, "../example/assets/");
+	var renderer = new spine.SceneRenderer(canvas, context);
+	var time = new spine.TimeKeeper();
+	var loadingScreen = new spine.LoadingScreen(new spine.SceneRenderer(canvas, context));
+
+	var spineBoy;
+	var vine;
+
+	assetManager.loadText("spineboy-pro.json");
+	assetManager.loadTextureAtlas("spineboy-pma.atlas");
+
+	assetManager.loadText("vine-pro.json");
+	assetManager.loadTextureAtlas("vine-pma.atlas");
+
+	requestAnimationFrame(load);
+
+	function loadSkeleton(json, atlas, scale) {
+		var atlas = assetManager.get(atlas);
+		var skeletonJson = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
+		skeletonJson.scale = scale;
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(json));
+		var animationStateData = new spine.AnimationStateData(skeletonData);
+
+		skeleton = new spine.Skeleton(skeletonData);
+		animationState = new spine.AnimationState(animationStateData);
+
+		return { skeleton: skeleton, animationState: animationState };
+	}
+
+	function load() {
+		if (assetManager.isLoadingComplete()) {
+			spineBoy = loadSkeleton("spineboy-pro.json", "spineboy-pma.atlas", 1);
+			vine = loadSkeleton("vine-pro.json", "vine-pma.atlas", 0.3);
+
+
+			var offset = new spine.Vector2();
+			var size = new spine.Vector2();
+			spineBoy.skeleton.updateWorldTransform();
+			spineBoy.skeleton.getBounds(offset, size, []);
+			renderer.camera.position.x = offset.x + size.x / 2;
+			renderer.camera.position.y = offset.y + size.y / 2;
+			renderer.camera.zoom = size.x > size.y ? size.x / canvas.width : size.y / canvas.height;
+
+			spineBoy.animationState.setAnimation(0, "walk", true);
+			vine.animationState.setAnimation(0, "grow", true);
+
+			requestAnimationFrame(render);
+		} else {
+			loadingScreen.draw(false);
+			requestAnimationFrame(load);
+		}
+	}
+
+	function render() {
+		context.gl.clearColor(0.9, 0.9, 0.9, 1);
+		context.gl.clear(context.gl.COLOR_BUFFER_BIT);
+
+		time.update();
+
+		// Update Spineboy first
+		spineBoy.animationState.update(time.delta);
+		spineBoy.animationState.apply(spineBoy.skeleton);
+		spineBoy.skeleton.updateWorldTransform();
+
+		// Next figure out the world location of the bone
+		// we attach the vine to, and apply it to the vine's
+		// root bone. Note that the root bone must not be
+		// keyed! We also ignore scaling and shearing.
+		var gun = spineBoy.skeleton.findBone("gun");
+		var vineRoot = vine.skeleton.getRootBone();
+		vineRoot.x = gun.worldX;
+		vineRoot.y = gun.worldY;
+		vineRoot.rotation = gun.getWorldRotationX();
+		vine.animationState.update(time.delta);
+		vine.animationState.apply(vine.skeleton);
+		vine.skeleton.updateWorldTransform();
+
+		// Find the two slots inbetween we want to render the vine
+		var gunSlot = spineBoy.skeleton.findSlot("gun");
+		var rearFoot = spineBoy.skeleton.findSlot("rear-foot");
+
+		renderer.begin();
+		// render from the back most slot (-1) to the gun slot (inclusive)
+		renderer.drawSkeleton(spineBoy.skeleton, true, -1, gunSlot.data.index);
+
+		// now render the vine
+		renderer.drawSkeleton(vine.skeleton, false);
+
+		// finally render the remaining spineboy slots starting at the rear foot
+		// (the next slot after the gun)
+		renderer.drawSkeleton(spineBoy.skeleton, true, rearFoot.data.index, -1);
+		renderer.end();
+
+		loadingScreen.draw(true);
+
+		requestAnimationFrame(render);
+	}
 </script>
+
 </html>

spine-ts/spine-webgl/tests/test.html

@@ -2,130 +2,144 @@
 <script src="../../build/spine-webgl.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <style>
-	* { margin: 0; padding: 0; }
-	body, html { height: 100% }
-	canvas { position: absolute; width: 100% ;height: 100%; }
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	body,
+	html {
+		height: 100%
+	}
+
+	canvas {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
 </style>
+
 <body>
-<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
-<canvas id="canvas" style="background: red;"></canvas>
+	<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
+	<canvas id="canvas" style="background: red;"></canvas>
 </body>
 <script>
 
-var FILE = "coin-pro";
-var ANIMATION = "animation";
-var NUM_SKELETONS = 1;
-var SCALE = 0.5;
-
-var canvas, context, gl, renderer, input, assetManager;
-var skeletons = [];
-var timeKeeper;
-var label = document.getElementById("label");
-var updateMean = new spine.WindowedMean();
-var renderMean = new spine.WindowedMean();
-var swirlEffect = new spine.SwirlEffect();
-var swirlTime = 0;
-var interpolation = new spine.Pow(2);
-
-function init() {
-	canvas = document.getElementById("canvas");
-	canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-	context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
-	gl = context.gl;
-
-	renderer = new spine.webgl.SceneRenderer(canvas, context);
-	renderer.skeletonDebugRenderer.drawBones = false;
-	renderer.skeletonDebugRenderer.drawMeshTriangles = false;
-	renderer.skeletonDebugRenderer.drawMeshHull = false;
-	renderer.skeletonDebugRenderer.drawRegionAttachments = false;
-	renderer.skeletonDebugRenderer.drawBoundingBoxes = false;
-	renderer.skeletonRenderer.vertexEffect = swirlEffect;
-
-	swirlEffect.centerX = 0;
-	swirlEffect.centerY = 200;
-	swirlEffect.radius = 500;
-
-	assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
-	input = new spine.webgl.Input(canvas);
-
-	assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-oss", "") + "-pma.atlas");
-	assetManager.loadText(FILE + ".json");
-
-	timeKeeper = new spine.TimeKeeper();
-	requestAnimationFrame(load);
-}
-
-function load() {
-	timeKeeper.update();
-	if (assetManager.isLoadingComplete()) {
-		var atlas = assetManager.get(FILE.replace("-pro", "").replace("-oss", "") + "-pma.atlas");
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
-		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		skeletonJson.scale = SCALE;
-		var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get(FILE + ".json")));
-
-		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);
-
-			var mixDuration = 0.8;
-			var stableDuration = 2;
-			stateData.defaultMix = mixDuration;
-
-			state.multipleMixing = false;
-			state.setAnimation(0, ANIMATION, true);
-			skeleton.x = 0;
-			skeleton.y = 0;
-			skeleton.updateWorldTransform();
-			skeletons.push({ skeleton: skeleton, state: state });
-		}
-
-		requestAnimationFrame(render);
-	} else {
+	var FILE = "coin-pro";
+	var ANIMATION = "animation";
+	var NUM_SKELETONS = 1;
+	var SCALE = 0.5;
+
+	var canvas, context, gl, renderer, input, assetManager;
+	var skeletons = [];
+	var timeKeeper;
+	var label = document.getElementById("label");
+	var updateMean = new spine.WindowedMean();
+	var renderMean = new spine.WindowedMean();
+	var swirlEffect = new spine.SwirlEffect();
+	var swirlTime = 0;
+	var interpolation = new spine.Pow(2);
+
+	function init() {
+		canvas = document.getElementById("canvas");
+		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+		context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
+		gl = context.gl;
+
+		renderer = new spine.SceneRenderer(canvas, context);
+		renderer.skeletonDebugRenderer.drawBones = false;
+		renderer.skeletonDebugRenderer.drawMeshTriangles = false;
+		renderer.skeletonDebugRenderer.drawMeshHull = false;
+		renderer.skeletonDebugRenderer.drawRegionAttachments = false;
+		renderer.skeletonDebugRenderer.drawBoundingBoxes = false;
+		renderer.skeletonRenderer.vertexEffect = swirlEffect;
+
+		swirlEffect.centerX = 0;
+		swirlEffect.centerY = 200;
+		swirlEffect.radius = 500;
+
+		assetManager = new spine.AssetManager(context, "../example/assets/");
+		input = new spine.Input(canvas);
+
+		assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-oss", "") + "-pma.atlas");
+		assetManager.loadText(FILE + ".json");
+
+		timeKeeper = new spine.TimeKeeper();
 		requestAnimationFrame(load);
 	}
-}
-
-function render() {
-	var start = Date.now()
-	timeKeeper.update();
-	var delta = timeKeeper.delta;
-	delta = 0.016;
-
-	swirlTime += delta;
-	var percent = swirlTime % 2;
-	if (percent > 1) percent = 1 - (percent - 1);
-	swirlEffect.angle = interpolation.apply(-60, 60, percent);
-
-	for (var i = 0; i < skeletons.length; i++) {
-		var state = skeletons[i].state;
-		var skeleton = skeletons[i].skeleton;
-		state.update(delta);
-		state.apply(skeleton);
-		skeleton.updateWorldTransform();
-	}
-	updateMean.addValue(Date.now() - start);
-	start = Date.now();
-
-	gl.clearColor(0.2, 0.2, 0.2, 1);
-	gl.clear(gl.COLOR_BUFFER_BIT);
-
-	renderer.resize(spine.webgl.ResizeMode.Fit);
-	renderer.begin();
-	for (var i = 0; i < skeletons.length; i++) {
-		var skeleton = skeletons[i].skeleton;
-		renderer.drawSkeleton(skeleton, true);
-		renderer.drawSkeletonDebug(skeleton);
+
+	function load() {
+		timeKeeper.update();
+		if (assetManager.isLoadingComplete()) {
+			var atlas = assetManager.get(FILE.replace("-pro", "").replace("-oss", "") + "-pma.atlas");
+			var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+			var skeletonJson = new spine.SkeletonJson(atlasLoader);
+			skeletonJson.scale = SCALE;
+			var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get(FILE + ".json")));
+
+			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);
+
+				var mixDuration = 0.8;
+				var stableDuration = 2;
+				stateData.defaultMix = mixDuration;
+
+				state.multipleMixing = false;
+				state.setAnimation(0, ANIMATION, true);
+				skeleton.x = 0;
+				skeleton.y = 0;
+				skeleton.updateWorldTransform();
+				skeletons.push({ skeleton: skeleton, state: state });
+			}
+
+			requestAnimationFrame(render);
+		} else {
+			requestAnimationFrame(load);
+		}
 	}
-	renderer.end();
 
-	requestAnimationFrame(render)
-	renderMean.addValue(Date.now() - start);
-	label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
-					   "Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
-}
+	function render() {
+		var start = Date.now()
+		timeKeeper.update();
+		var delta = timeKeeper.delta;
+		delta = 0.016;
+
+		swirlTime += delta;
+		var percent = swirlTime % 2;
+		if (percent > 1) percent = 1 - (percent - 1);
+		swirlEffect.angle = interpolation.apply(-60, 60, percent);
+
+		for (var i = 0; i < skeletons.length; i++) {
+			var state = skeletons[i].state;
+			var skeleton = skeletons[i].skeleton;
+			state.update(delta);
+			state.apply(skeleton);
+			skeleton.updateWorldTransform();
+		}
+		updateMean.addValue(Date.now() - start);
+		start = Date.now();
+
+		gl.clearColor(0.2, 0.2, 0.2, 1);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+
+		renderer.resize(spine.ResizeMode.Fit);
+		renderer.begin();
+		for (var i = 0; i < skeletons.length; i++) {
+			var skeleton = skeletons[i].skeleton;
+			renderer.drawSkeleton(skeleton, true);
+			renderer.drawSkeletonDebug(skeleton);
+		}
+		renderer.end();
+
+		requestAnimationFrame(render)
+		renderMean.addValue(Date.now() - start);
+		label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
+			"Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
+	}
 
-init();
+	init();
 </script>
+
 </html>

spine-ts/spine-webgl/tests/test2.html

@@ -2,69 +2,82 @@
 <script src="../../build/spine-webgl.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <style>
-	* { margin: 0; padding: 0; }
-	body, html { height: 100% }
-	canvas { position: absolute; width: 100% ;height: 100%; }
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	body,
+	html {
+		height: 100%
+	}
+
+	canvas {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
 </style>
+
 <body>
-<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
-<canvas id="canvas" style="background: #ff00ff;"></canvas>
+	<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
+	<canvas id="canvas" style="background: #ff00ff;"></canvas>
 </body>
 <script>
-var canvas = document.getElementById("canvas");
-canvas.width = canvas.clientWidth;
-canvas.height = canvas.clientHeight;
-var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
-var gl = context.gl;
+	var canvas = document.getElementById("canvas");
+	canvas.width = canvas.clientWidth;
+	canvas.height = canvas.clientHeight;
+	var context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
+	var gl = context.gl;
 
-var vertices = [ -1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
-				 1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
-				 0, 1, 1, 1, 1, 1, 0.5, 1, 0, 0, 0, 0];
-var indices = [ 0, 1, 2 ];
-var mesh = new spine.webgl.Mesh(context,
-								[new spine.webgl.Position2Attribute(), new spine.webgl.ColorAttribute(), new spine.webgl.TexCoordAttribute()],
-								10920, 10920 * 3);
-mesh.setVertices(vertices);
-mesh.setIndices(indices);
+	var vertices = [-1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
+		1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
+		0, 1, 1, 1, 1, 1, 0.5, 1, 0, 0, 0, 0];
+	var indices = [0, 1, 2];
+	var mesh = new spine.Mesh(context,
+		[new spine.Position2Attribute(), new spine.ColorAttribute(), new spine.TexCoordAttribute()],
+		10920, 10920 * 3);
+	mesh.setVertices(vertices);
+	mesh.setIndices(indices);
 
-var shader = spine.webgl.Shader.newTwoColoredTextured(context);
+	var shader = spine.Shader.newTwoColoredTextured(context);
 
-var assetManager = new spine.webgl.AssetManager(context);
-assetManager.loadTexture("../example/assets/spineboy.png");
+	var assetManager = new spine.AssetManager(context);
+	assetManager.loadTexture("../example/assets/spineboy.png");
 
-var camMatrix = new spine.webgl.Matrix4();
+	var camMatrix = new spine.Matrix4();
 
-var batcher = new spine.webgl.PolygonBatcher(context, true);
+	var batcher = new spine.PolygonBatcher(context, true);
 
-requestAnimationFrame(load);
+	requestAnimationFrame(load);
 
-function load () {
-	if (assetManager.isLoadingComplete()) {
-		texture = assetManager.get("../example/assets/spineboy.png");
-		requestAnimationFrame(render);
-	} else requestAnimationFrame(load);
-}
+	function load() {
+		if (assetManager.isLoadingComplete()) {
+			texture = assetManager.get("../example/assets/spineboy.png");
+			requestAnimationFrame(render);
+		} else requestAnimationFrame(load);
+	}
 
-function render() {
-	gl.clearColor(1, 0, 0, 1);
-	gl.clear(gl.COLOR_BUFFER_BIT);
+	function render() {
+		gl.clearColor(1, 0, 0, 1);
+		gl.clear(gl.COLOR_BUFFER_BIT);
 
-	shader.bind();
-	shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values);
-	shader.setUniformi("u_texture", 0);
-	if (texture != null) {
-		/*gl.enable(gl.BLEND);
-		gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-		mesh.setVertices(vertices);
-		mesh.setIndices(indices);
-		mesh.draw(shader, gl.TRIANGLES);*/
+		shader.bind();
+		shader.setUniform4x4f(spine.Shader.MVP_MATRIX, camMatrix.values);
+		shader.setUniformi("u_texture", 0);
+		if (texture != null) {
+			/*gl.enable(gl.BLEND);
+			gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+			mesh.setVertices(vertices);
+			mesh.setIndices(indices);
+			mesh.draw(shader, gl.TRIANGLES);*/
 
-		batcher.begin(shader);
-		batcher.draw(texture, vertices, indices);
-		batcher.end();
-	}
-	shader.unbind();
+			batcher.begin(shader);
+			batcher.draw(texture, vertices, indices);
+			batcher.end();
+		}
+		shader.unbind();
 
-	requestAnimationFrame(render);
-}
+		requestAnimationFrame(render);
+	}
 </script>