[ts] Update demos to 4.0 and new AssetManager.

spine-ts/webgl/demos/additiveblending.js

@@ -19,8 +19,6 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 
 	var clientMouseX = 0, clientMouseY = 0, mouseMoved;
 
-	var DEMO_NAME = "AdditiveBlendingDemo";
-
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function isMobileDevice() {
@@ -32,23 +30,18 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 		gl = canvas.ctx.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = spineDemos.assetManager;
+		assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+		assetManager.loadTextureAtlas("atlas2.atlas");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
+		assetManager.loadJson("demos.json");
-		assetManager.loadText(DEMO_NAME, "atlas2.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");
 		timeKeeper = new spine.TimeKeeper();
 
 		cursor = document.getElementById("cursor");
 	}
 
 	function loadingComplete () {
-		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
+		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
-			return assetManager.get(DEMO_NAME, path);
-		});
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["owl"]);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").owl);
 		skeleton = new spine.Skeleton(skeletonData);
 		state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
 
@@ -153,8 +146,8 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 		renderer.end();
 	}
 
+	init();
+	additiveBlendingDemo.assetManager = assetManager;
 	additiveBlendingDemo.loadingComplete = loadingComplete;
 	additiveBlendingDemo.render = render;
-	additiveBlendingDemo.DEMO_NAME = DEMO_NAME;
-	init();
 };

spine-ts/webgl/demos/clipping.js

@@ -4,30 +4,23 @@ var clippingDemo = function(canvas, bgColor) {
 	var timeKeeper;
 	var playButton, timeline, isPlaying = true, playTime = 0;
 
-	var DEMO_NAME = "ClippingDemo";
-
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.ctx.gl;
+
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = spineDemos.assetManager;
+		assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+		assetManager.loadTextureAtlas("atlas1.atlas");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
+		assetManager.loadJson("demos.json");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas12.png");
-		assetManager.loadText(DEMO_NAME, "atlas1.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");
 		timeKeeper = new spine.TimeKeeper();
 	}
 
 	function loadingComplete () {
-		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
+		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
-			return assetManager.get(DEMO_NAME, path);
-		});
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy);
 		skeleton = new spine.Skeleton(skeletonData);
 		state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
 		state.setAnimation(0, "portal", true);
@@ -113,8 +106,8 @@ var clippingDemo = function(canvas, bgColor) {
 		renderer.end();
 	}
 
+	init();
+	clippingDemo.assetManager = assetManager;
 	clippingDemo.loadingComplete = loadingComplete;
 	clippingDemo.render = render;
-	clippingDemo.DEMO_NAME = DEMO_NAME;
-	init();
 };

spine-ts/webgl/demos/demos.js

@@ -5,7 +5,6 @@ $(function () {
 	}
 
 	spineDemos.init();
-	spineDemos.assetManager = new spine.SharedAssetManager("assets/");
 
 	var demos = [
 		spritesheetsDemo,

spine-ts/webgl/demos/hoverboard.js

@@ -13,8 +13,6 @@ var hoverboardDemo = function(canvas, bgColor) {
 	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
 	var isPlaying = true;
 
-	var DEMO_NAME = "HoverboardDemo";
-
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
@@ -22,23 +20,17 @@ var hoverboardDemo = function(canvas, bgColor) {
 		gl = canvas.ctx.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = spineDemos.assetManager;
+		assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+		assetManager.loadTextureAtlas("atlas1.atlas");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
+		assetManager.loadJson("demos.json");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas12.png");
-		assetManager.loadText(DEMO_NAME, "atlas1.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");
 		input = new spine.webgl.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();
 	}
 
 	function loadingComplete () {
-		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
+		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
-			return assetManager.get(DEMO_NAME, path);
-		});
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy"]);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy);
 		skeleton = new spine.Skeleton(skeletonData);
 		state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
 		state.setAnimation(0, "hoverboard", true);
@@ -174,8 +166,8 @@ var hoverboardDemo = function(canvas, bgColor) {
 		gl.lineWidth(1);
 	}
 
+	init();
+	hoverboardDemo.assetManager = assetManager;
 	hoverboardDemo.loadingComplete = loadingComplete;
 	hoverboardDemo.render = render;
-	hoverboardDemo.DEMO_NAME = DEMO_NAME;
-	init();
 };

spine-ts/webgl/demos/imagechanges.js

@@ -8,8 +8,6 @@ var imageChangesDemo = function(canvas, bgColor) {
 	var activeSkeleton = "Alien";
 	var playButton, timeLine, isPlaying = true;
 
-	var DEMO_NAME = "ImageChangesDemo";
-
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
@@ -17,12 +15,9 @@ var imageChangesDemo = function(canvas, bgColor) {
 		gl = canvas.ctx.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = spineDemos.assetManager;
+		assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+		assetManager.loadTextureAtlas("atlas1.atlas");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
+		assetManager.loadJson("demos.json");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas12.png");
-		assetManager.loadText(DEMO_NAME, "atlas1.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");
 		timeKeeper = new spine.TimeKeeper();
 	}
 
@@ -74,12 +69,9 @@ var imageChangesDemo = function(canvas, bgColor) {
 	}
 
 	function loadSkeleton(name, animation, sequenceSlots) {
-		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
+		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
-			return assetManager.get(DEMO_NAME, path);
-		});
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")[name]);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json")[name]);
 		var skeleton = new spine.Skeleton(skeletonData);
 		skeleton.setSkinByName("default");
 
@@ -102,7 +94,6 @@ var imageChangesDemo = function(canvas, bgColor) {
 		}
 
 		return {
-			atlas: atlas,
 			skeleton: skeleton,
 			state: state,
 			playTime: 0,
@@ -191,8 +182,8 @@ var imageChangesDemo = function(canvas, bgColor) {
 		renderer.end();
 	}
 
+	init();
+	imageChangesDemo.assetManager = assetManager;
 	imageChangesDemo.loadingComplete = loadingComplete;
 	imageChangesDemo.render = render;
-	imageChangesDemo.DEMO_NAME = DEMO_NAME;
-	init();
 };

spine-ts/webgl/demos/meshes.js

@@ -6,8 +6,6 @@ var meshesDemo = function(canvas, bgColor) {
 	var activeSkeleton = "Orange Girl";
 	var playButton, timeline, isPlaying = true;
 
-	var DEMO_NAME = "MeshesDemo";
-
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
@@ -15,11 +13,9 @@ var meshesDemo = function(canvas, bgColor) {
 		gl = canvas.ctx.gl;
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		renderer.skeletonDebugRenderer.drawRegionAttachments = false;
-		assetManager = spineDemos.assetManager;
+		assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+		assetManager.loadTextureAtlas("atlas2.atlas");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
+		assetManager.loadJson("demos.json");
-		assetManager.loadText(DEMO_NAME, "atlas2.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");
 		timeKeeper = new spine.TimeKeeper();
 	}
 
@@ -85,12 +81,9 @@ var meshesDemo = function(canvas, bgColor) {
 	}
 
 	function loadSkeleton(name, animation, sequenceSlots) {
-		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
+		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
-			return assetManager.get(DEMO_NAME, path);
-		});
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")[name]);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json")[name]);
 		var skeleton = new spine.Skeleton(skeletonData);
 		skeleton.setSkinByName("default");
 
@@ -103,7 +96,6 @@ var meshesDemo = function(canvas, bgColor) {
 		skeleton.getBounds(offset, size, []);
 
 		return {
-			atlas: atlas,
 			skeleton: skeleton,
 			state: state,
 			playTime: 0,
@@ -151,8 +143,8 @@ var meshesDemo = function(canvas, bgColor) {
 		renderer.end();
 	}
 
+	init();
+	meshesDemo.assetManager = assetManager;
 	meshesDemo.loadingComplete = loadingComplete;
 	meshesDemo.render = render;
-	meshesDemo.DEMO_NAME = DEMO_NAME;
-	init();
 };

spine-ts/webgl/demos/skins.js

@@ -5,8 +5,6 @@ var skinsDemo = function(canvas, bgColor) {
 	var playButton, timeLine, isPlaying = true, playTime = 0;
 	var randomizeSkins, lastSkinChange = Date.now() / 1000, clickAnim = 0;
 
-	var DEMO_NAME = "SkinsDemo";
-
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
@@ -14,23 +12,17 @@ var skinsDemo = function(canvas, bgColor) {
 		gl = canvas.ctx.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = spineDemos.assetManager;
+		assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+		assetManager.loadTextureAtlas("heroes.atlas");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "heroes.png");
+		assetManager.loadJson("demos.json");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "heroes2.png");
-		assetManager.loadText(DEMO_NAME, "heroes.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");
 		input = new spine.webgl.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();
 	}
 
 	function loadingComplete () {
-		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "heroes.atlas"), function(path) {
+		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("heroes.atlas"));
-			return assetManager.get(DEMO_NAME, path);
-		});
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").heroes);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").heroes);
 		skeleton = new spine.Skeleton(skeletonData);
 		skeleton.setSkinByName("Assassin");
 		var stateData = new spine.AnimationStateData(skeleton.data);
@@ -199,7 +191,7 @@ var skinsDemo = function(canvas, bgColor) {
 
 		renderer.begin();
 		renderer.drawSkeleton(skeleton, true);
-		var texture = assetManager.get(DEMO_NAME, "heroes.png");
+		var texture = assetManager.get("heroes.png");
 		var width = bounds.x * 1.25;
 		var scale = width / texture.getImage().width;
 		var height = scale * texture.getImage().height;
@@ -207,8 +199,8 @@ var skinsDemo = function(canvas, bgColor) {
 		renderer.end();
 	}
 
+	init();
+	skinsDemo.assetManager = assetManager;
 	skinsDemo.loadingComplete = loadingComplete;
 	skinsDemo.render = render;
-	skinsDemo.DEMO_NAME = DEMO_NAME;
-	init();
 };

spine-ts/webgl/demos/spritesheets.js

@@ -11,8 +11,6 @@ var spritesheetsDemo = function(canvas, bgColor) {
 	var timeKeeper, loadingScreen, input;
 	var playTime = 0, framePlaytime = 0, clickAnim = 0;
 
-	var DEMO_NAME = "SpritesheetsDemo";
-
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
@@ -20,23 +18,17 @@ var spritesheetsDemo = function(canvas, bgColor) {
 		gl = canvas.ctx.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = spineDemos.assetManager;
+		assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+		assetManager.loadTextureAtlas("atlas1.atlas");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
+		assetManager.loadJson("demos.json");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas12.png");
-		assetManager.loadText(DEMO_NAME, "atlas1.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");
 		timeKeeper = new spine.TimeKeeper();
 		input = new spine.webgl.Input(canvas);
 	}
 
 	function loadingComplete () {
-		skeletonAtlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
+		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
-			return assetManager.get(DEMO_NAME, path);
-		});
-		var atlasLoader = new spine.AtlasAttachmentLoader(skeletonAtlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").raptor);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").raptor);
 		skeleton = new spine.Skeleton(skeletonData);
 		var stateData = new spine.AnimationStateData(skeleton.data);
 		stateData.defaultMix = 0.5;
@@ -144,8 +136,8 @@ var spritesheetsDemo = function(canvas, bgColor) {
 		renderer.end();
 	}
 
+	init();
+	spritesheetsDemo.assetManager = assetManager;
 	spritesheetsDemo.loadingComplete = loadingComplete;
 	spritesheetsDemo.render = render;
-	spritesheetsDemo.DEMO_NAME = DEMO_NAME;
-	init();
 };

spine-ts/webgl/demos/stretchyman.js

@@ -21,8 +21,6 @@ var stretchymanDemo = function(canvas, bgColor) {
 	var kneePos = new spine.Vector2();
 	var playButton, timeLine, spacing, isPlaying = true, playTime = 0;
 
-	var DEMO_NAME = "StretchymanDemo";
-
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
@@ -30,22 +28,17 @@ var stretchymanDemo = function(canvas, bgColor) {
 		gl = canvas.ctx.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = spineDemos.assetManager;
+		assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+		assetManager.loadTextureAtlas("atlas2.atlas");
-		input = new spine.webgl.Input(canvas);
+		assetManager.loadJson("demos.json");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
-		assetManager.loadText(DEMO_NAME, "atlas2.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");
 		timeKeeper = new spine.TimeKeeper();
+		input = new spine.webgl.Input(canvas);
 	}
 
 	function loadingComplete () {
-		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
+		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
-			return assetManager.get(DEMO_NAME, path);
-		});
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").stretchyman);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").stretchyman);
 		skeleton = new spine.Skeleton(skeletonData);
 		skeleton.setToSetupPose();
 		skeleton.updateWorldTransform();
@@ -181,8 +174,8 @@ var stretchymanDemo = function(canvas, bgColor) {
 		gl.lineWidth(1);
 	}
 
+	init();
+	stretchymanDemo.assetManager = assetManager;
 	stretchymanDemo.loadingComplete = loadingComplete;
 	stretchymanDemo.render = render;
-	stretchymanDemo.DEMO_NAME = DEMO_NAME;
-	init();
 };

spine-ts/webgl/demos/tank.js

@@ -4,8 +4,6 @@ var tankDemo = function(canvas, bgColor) {
 	var timeKeeper;
 	var playButton, timeLine, isPlaying = true, playTime = 0;
 
-	var DEMO_NAME = "TankDemo";
-
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
@@ -13,21 +11,16 @@ var tankDemo = function(canvas, bgColor) {
 		gl = canvas.ctx.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = spineDemos.assetManager;
+		assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+		assetManager.loadTextureAtlas("atlas2.atlas");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
+		assetManager.loadJson("demos.json");
-		assetManager.loadText(DEMO_NAME, "atlas2.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");
 		timeKeeper = new spine.TimeKeeper();
 	}
 
 	function loadingComplete () {
-		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
+		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
-			return assetManager.get(DEMO_NAME, path);
-		});
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").tank);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").tank);
 		skeleton = new spine.Skeleton(skeletonData);
 		state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
 		state.setAnimation(0, "drive", true);
@@ -114,8 +107,8 @@ var tankDemo = function(canvas, bgColor) {
 		renderer.end();
 	}
 
+	init();
+	tankDemo.assetManager = assetManager;
 	tankDemo.loadingComplete = loadingComplete;
 	tankDemo.render = render;
-	tankDemo.DEMO_NAME = DEMO_NAME;
-	init();
 };

spine-ts/webgl/demos/transforms.js

@@ -15,8 +15,6 @@ var transformsDemo = function(canvas, bgColor) {
 	var lastRotation = 0;
 	var mix, lastOffset = 0, lastMix = 0.5;
 
-	var DEMO_NAME = "TransformsDemo";
-
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
@@ -24,22 +22,17 @@ var transformsDemo = function(canvas, bgColor) {
 		gl = canvas.ctx.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = spineDemos.assetManager;
+		assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+		assetManager.loadTextureAtlas("atlas2.atlas");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
+		assetManager.loadJson("demos.json");
-		assetManager.loadText(DEMO_NAME, "atlas2.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");
 		input = new spine.webgl.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();
 	}
 
 	function loadingComplete () {
-		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
+		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
-			return assetManager.get(DEMO_NAME, path);
-		});
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transforms);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").transforms);
 		skeleton = new spine.Skeleton(skeletonData);
 		skeleton.setToSetupPose();
 		skeleton.updateWorldTransform();
@@ -80,7 +73,9 @@ var transformsDemo = function(canvas, bgColor) {
 			var val = percent;
 			var delta = val - lastMix;
 			lastMix = val;
-			skeleton.findTransformConstraint("wheel1").translateMix += delta;
+			var constraint = skeleton.findTransformConstraint("wheel1");
+			constraint.mixX += delta;
+			constraint.mixY += delta;
 			$("#transforms-translationmix-label").text(Math.round(val * 100) + "%");
 		};
 		$("#transforms-translationmix-label").text("50%");
@@ -170,8 +165,8 @@ var transformsDemo = function(canvas, bgColor) {
 		renderer.end();
 	}
 
+	init();
+	transformsDemo.assetManager = assetManager;
 	transformsDemo.loadingComplete = loadingComplete;
 	transformsDemo.render = render;
-	transformsDemo.DEMO_NAME = DEMO_NAME;
-	init();
 };

spine-ts/webgl/demos/transitions.js

@@ -6,8 +6,6 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
 	var timeSlider, timeSliderLabel;
 	var timeKeeper;
 
-	var DEMO_NAME = "TransitionsDemo";
-
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
@@ -19,13 +17,9 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
 		gl = canvas.ctx.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
-		assetManager = spineDemos.assetManager;
+		assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+		assetManager.loadTextureAtlas("atlas1.atlas");
-
+		assetManager.loadJson("demos.json");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas12.png");
-		assetManager.loadText(DEMO_NAME, "atlas1.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");
 
 		input = new spine.webgl.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();
@@ -85,12 +79,9 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
 	}
 
 	function loadSkeleton(name) {
-		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
+		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
-			return assetManager.get(DEMO_NAME, path);
-		});
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")[name]);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json")[name]);
 		var skeleton = new spine.Skeleton(skeletonData);
 		skeleton.setSkinByName("default");
 		return skeleton;
@@ -134,8 +125,8 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
 		renderer.end();
 	}
 
+	init();
+	transitionsDemo.assetManager = assetManager;
 	transitionsDemo.loadingComplete = loadingComplete;
 	transitionsDemo.render = render;
-	transitionsDemo.DEMO_NAME = DEMO_NAME;
-	init();
 };

spine-ts/webgl/demos/utils.js

@@ -3,18 +3,18 @@ var spineDemos = {
 	HOVER_COLOR_OUTER: new spine.Color(1, 1, 1, 1),
 	NON_HOVER_COLOR_INNER: new spine.Color(0.478, 0, 0, 0.5),
 	NON_HOVER_COLOR_OUTER: new spine.Color(1, 0, 0, 0.8),
-	assetManager: new spine.SharedAssetManager("assets/"),
 	demos: [],
 	loopRunning: false,
-	canvases: []
+	canvases: [],
+	downloader: new spine.Downloader()
 };
 
 window.onerror = function (msg, url, lineNo, columnNo, error) {
 	var string = msg.toLowerCase();
 	var substring = "script error";
-    if (string.indexOf(substring) > -1){
+	if (string.indexOf(substring) > -1)
 		alert('Script Error: See Browser Console for Detail');
-    } else {
+	else {
 		var message = [
 			'Message: ' + msg,
 			'URL: ' + url,
@@ -25,7 +25,6 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 
 		alert(message);
 	}
-
 	return false;
 };
 
@@ -38,7 +37,6 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 		var demos = spineDemos.demos;
 		for (var i = 0; i < demos.length; i++) {
 			var demo = demos[i];
-
 			checkElementVisible(demo);
 			renderDemo(demo);
 		}
@@ -46,7 +44,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 
 	function renderDemo(demo) {
 		var canvas = demo.canvas;
-		if (!spineDemos.assetManager.isLoadingComplete(demo.DEMO_NAME)) {
+		if (!demo.assetManager.isLoadingComplete()) {
 			if (demo.visible) {
 				if (canvas.parentElement != demo.placeholder) {
 					$(canvas).detach();

spine-ts/webgl/demos/vine.js

@@ -13,8 +13,6 @@ var vineDemo = function(canvas, bgColor) {
 	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
 	var playButton, timeLine, isPlaying = true, playTime = 0;
 
-	var DEMO_NAME = "VineDemo";
-
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
@@ -23,21 +21,16 @@ var vineDemo = function(canvas, bgColor) {
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		input = new spine.webgl.Input(canvas);
-		assetManager = spineDemos.assetManager;
+		assetManager = new spine.webgl.AssetManager(gl, "assets/", spineDemos.downloader);
-		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+		assetManager.loadTextureAtlas("atlas2.atlas");
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
+		assetManager.loadJson("demos.json");
-		assetManager.loadText(DEMO_NAME, "atlas2.atlas");
-		assetManager.loadJson(DEMO_NAME, "demos.json");
 		timeKeeper = new spine.TimeKeeper();
 	}
 
 	function loadingComplete () {
-		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
+		var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
-			return assetManager.get(DEMO_NAME, path);
-		});
-		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
-		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").vine);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").vine);
 		skeleton = new spine.Skeleton(skeletonData);
 		skeleton.setToSetupPose();
 		skeleton.updateWorldTransform();
@@ -174,8 +167,8 @@ var vineDemo = function(canvas, bgColor) {
 		renderer.end();
 	}
 
+	init();
+	vineDemo.assetManager = assetManager;
 	vineDemo.loadingComplete = loadingComplete;
 	vineDemo.render = render;
-	vineDemo.DEMO_NAME = DEMO_NAME;
-	init();
 };