[ts] Widget can now load json, atlas, and atlas pages from inline resources. See widget example source and README.md

spine-ts/core/src/AssetManager.ts

@@ -90,6 +90,29 @@ module spine {
 			}
 		}
 
+		loadTextureData(path: string, data: string,
+			success: (path: string, image: HTMLImageElement) => void = null,
+			error: (path: string, error: string) => void = null
+		) {
+			path = this.pathPrefix + path;
+			this.toLoad++;
+			let img = new Image();
+			img.src = data;
+			img.onload = (ev) => {
+				let texture = this.textureLoader(img);
+				this.assets[path] = texture;
+				this.toLoad--;
+				this.loaded++;
+				if (success) success(path, img);
+			}
+			img.onerror = (ev) => {
+				this.errors[path] = `Couldn't load image ${path}`;
+				this.toLoad--;
+				this.loaded++;
+				if (error) error(path, `Couldn't load image ${path}`);
+			}
+		}
+
 		get (path: string) {
 			path = this.pathPrefix + path;
 			return this.assets[path];

spine-ts/webgl/example/test.html

@@ -12,7 +12,7 @@
 </body>
 <script>
 
-var FILE = "spineboy ikfeet";
+var FILE = "spineboy";
 var NUM_SKELETONS = 1;
 var SCALE = 0.6;
 
@@ -63,12 +63,6 @@ function load() {
 
 			state.multipleMixing = false;
 			state.setAnimation(0, "idle", true);
-			state.addAnimation(0, "run", true, stableDuration);
-			state.addAnimation(0, "idle", true, mixDuration * 0.35);
-			state.addAnimation(0, "run", true, stableDuration);
-			state.addAnimation(0, "idle", true, mixDuration * 0.75);
-			state.addAnimation(0, "run", true, stableDuration);
-			state.addAnimation(0, "idle", true, mixDuration * 2);
 			state.apply(skeleton);
 			skeleton.x = Math.random() * 200 - Math.random() * 200;
 			skeleton.y = Math.random() * 200 - Math.random() * 200;

spine-ts/widget/example/index.html

@@ -104,11 +104,13 @@ new spine.SpineWidget("spine-widget", {
 
 json = document.getElementById("json").innerHTML;
 atlas = document.getElementById("atlas").innerHTML;
+atlasPageContent = document.getElementById("atlasPage").innerHTML;
 
 new spine.SpineWidget("spine-widget-inline", {
 	jsonContent: json,
 	atlasContent: atlas,
-	imagesPath: "assets/",
+	atlasPages: ["spine-logo.png"],
+	atlasPagesContent: [atlasPageContent],
 	animation: "animation",
 	backgroundColor: "#00000000",
 	debug: true,

spine-ts/widget/src/Widget.ts

@@ -97,7 +97,11 @@ module spine {
 				}
 			} else {
 				for (let i = 0; i < config.atlasPages.length; i++) {
-					assets.loadTexture(config.atlasPages[i]);
+					if (config.atlasPagesContent && config.atlasPagesContent[i]) {
+						assets.loadTextureData(config.atlasPages[i], config.atlasPagesContent[0]);
+					} else {
+						assets.loadTexture(config.atlasPages[i]);
+					}
 				}
 			}
 			requestAnimationFrame(() => { this.load(); });