[ts][widget] Added jsonContent and atlasContent fields to widget configuration. Allows to pass content directly instead of fetching it from a URL. See README.md. Closes #844

spine-ts/README.md

@@ -161,7 +161,9 @@ new spine.SpineWidget("my-widget", {
 The configuration object has the following fields:
 
   * `json`: required, path to the `.json` file, absolute or relative, e.g. "assets/animation.json"
+  * `jsonContent`: optional, string or JSON object holding the content of a skeleton `.json` file. Overrides `json` if given.
   * `atlas`: required, path to the `.atlas` file, absolute or relative, e.g. "assets/animation.atlas"
+  * `atlasContent`: optional, string holding the content of a file. Overrides `atlasContent` if given.
   * `animation`: required, the name of the animation to play back
   * `imagesPath`: optional, the location of images on the server to load atlas pages from. If omitted, atlas `.png` page files are loaded relative to the `.atlas` file.
   * `atlasPages`: optional, the list of atlas page images, e.g. `atlasPages: ["assets/page1.png", "assets/page2.png"]` when using code, or `data-atlas-pages="assets/page1.png,assets/page2.png"` on case of HTML instantiation. Use this if you have a multi-page atlas. If ommited, only one atlas page image is loaded based on the atlas file name, replacing `.atlas` with `.png`.

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

@@ -79,6 +79,7 @@ declare module spine.canvas {
 		private ctx;
 		triangleRendering: boolean;
 		debugRendering: boolean;
+		private tempColor;
 		constructor(context: CanvasRenderingContext2D);
 		draw(skeleton: Skeleton): void;
 		private drawImages(skeleton);
@@ -1540,7 +1541,9 @@ declare module spine {
 	}
 	class SpineWidgetConfig {
 		json: string;
+		jsonContent: any;
 		atlas: string;
+		atlasContent: string;
 		animation: string;
 		imagesPath: string;
 		atlasPages: string[];

spine-ts/build/spine-all.js

@@ -213,6 +213,7 @@ var spine;
 			function SkeletonRenderer(context) {
 				this.triangleRendering = false;
 				this.debugRendering = false;
+				this.tempColor = new spine.Color(0, 0, 0, 1);
 				this.ctx = context;
 			}
 			SkeletonRenderer.prototype.draw = function (skeleton) {
@@ -226,37 +227,48 @@ var spine;
 				var drawOrder = skeleton.drawOrder;
 				if (this.debugRendering)
 					ctx.strokeStyle = "green";
+				ctx.save();
 				for (var i = 0, n = drawOrder.length; i < n; i++) {
 					var slot = drawOrder[i];
 					var attachment = slot.getAttachment();
+					var regionAttachment = null;
 					var region = null;
 					var image = null;
 					if (attachment instanceof spine.RegionAttachment) {
-						var regionAttachment = attachment;
+						regionAttachment = attachment;
 						region = regionAttachment.region;
-						image = (region).texture.getImage();
+						image = region.texture.getImage();
 					}
 					else
 						continue;
+					var skeleton_1 = slot.bone.skeleton;
+					var skeletonColor = skeleton_1.color;
+					var slotColor = slot.color;
+					var regionColor = regionAttachment.color;
+					var alpha = skeletonColor.a * slotColor.a * regionColor.a;
+					var color = this.tempColor;
+					color.set(skeletonColor.r * slotColor.r * regionColor.r, skeletonColor.g * slotColor.g * regionColor.g, skeletonColor.b * slotColor.b * regionColor.b, alpha);
 					var att = attachment;
 					var bone = slot.bone;
 					var w = region.width;
 					var h = region.height;
-					var offsetX = attachment.offset[0];
-					var offsetY = attachment.offset[1];
 					ctx.save();
 					ctx.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
-					ctx.translate(offsetX, offsetY);
+					ctx.translate(attachment.offset[0], attachment.offset[1]);
 					ctx.rotate(attachment.rotation * Math.PI / 180);
 					ctx.scale(attachment.scaleX, attachment.scaleY);
-					ctx.translate(region.width / 2, region.height / 2);
+					ctx.translate(w / 2, h / 2);
 					ctx.scale(1, -1);
-					ctx.translate(-region.width / 2, -region.height / 2);
+					ctx.translate(-w / 2, -h / 2);
-					ctx.drawImage(image, region.x, region.y, region.width, region.height, 0, 0, w, h);
+					if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) {
+						ctx.globalAlpha = color.a;
+					}
+					ctx.drawImage(image, region.x, region.y, w, h, 0, 0, w, h);
 					if (this.debugRendering)
 						ctx.strokeRect(0, 0, w, h);
 					ctx.restore();
 				}
+				ctx.restore();
 			};
 			SkeletonRenderer.prototype.drawTriangles = function (skeleton) {
 				var blendMode = null;
@@ -7895,7 +7907,9 @@ var spine;
 			this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
 			this.shapes = new spine.webgl.ShapeRenderer(gl);
 			var assets = this.assetManager = new spine.webgl.AssetManager(gl);
+			if (!config.atlasContent)
 				assets.loadText(config.atlas);
+			if (!config.jsonContent)
 				assets.loadText(config.json);
 			if (config.atlasPages == null) {
 				assets.loadTexture(config.atlas.replace(".atlas", ".png"));
@@ -7908,10 +7922,10 @@ var spine;
 			requestAnimationFrame(function () { _this.load(); });
 		}
 		SpineWidget.prototype.validateConfig = function (config) {
-			if (!config.atlas)
+			if (!config.atlas && !config.atlasContent)
-				throw new Error("Please specify config.atlas");
+				throw new Error("Please specify config.atlas or config.atlasContent");
-			if (!config.json)
+			if (!config.json && !config.jsonContent)
-				throw new Error("Please specify config.json");
+				throw new Error("Please specify config.json or config.jsonContent");
 			if (!config.animation)
 				throw new Error("Please specify config.animationName");
 			if (!config.scale)
@@ -7958,14 +7972,16 @@ var spine;
 					else
 						throw new Error("Failed to load assets: " + JSON.stringify(assetManager.getErrors()));
 				}
-				var atlas = new spine.TextureAtlas(this.assetManager.get(this.config.atlas), function (path) {
+				var atlasContent = config.atlasContent === undefined ? this.assetManager.get(this.config.atlas) : config.atlasContent;
+				var atlas = new spine.TextureAtlas(atlasContent, function (path) {
 					var texture = assetManager.get(imagesPath + path);
 					return texture;
 				});
 				var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 				var skeletonJson = new spine.SkeletonJson(atlasLoader);
 				skeletonJson.scale = config.scale;
-				var skeletonData = skeletonJson.readSkeletonData(assetManager.get(config.json));
+				var jsonContent = config.jsonContent === undefined ? assetManager.get(config.json) : config.jsonContent;
+				var skeletonData = skeletonJson.readSkeletonData(jsonContent);
 				var skeleton = this.skeleton = new spine.Skeleton(skeletonData);
 				var bounds = this.bounds;
 				skeleton.setSkinByName(config.skin);

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

@@ -1470,7 +1470,9 @@ declare module spine {
 	}
 	class SpineWidgetConfig {
 		json: string;
+		jsonContent: any;
 		atlas: string;
+		atlasContent: string;
 		animation: string;
 		imagesPath: string;
 		atlasPages: string[];

spine-ts/build/spine-widget.js

@@ -7482,7 +7482,9 @@ var spine;
 			this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
 			this.shapes = new spine.webgl.ShapeRenderer(gl);
 			var assets = this.assetManager = new spine.webgl.AssetManager(gl);
+			if (!config.atlasContent)
 				assets.loadText(config.atlas);
+			if (!config.jsonContent)
 				assets.loadText(config.json);
 			if (config.atlasPages == null) {
 				assets.loadTexture(config.atlas.replace(".atlas", ".png"));
@@ -7495,10 +7497,10 @@ var spine;
 			requestAnimationFrame(function () { _this.load(); });
 		}
 		SpineWidget.prototype.validateConfig = function (config) {
-			if (!config.atlas)
+			if (!config.atlas && !config.atlasContent)
-				throw new Error("Please specify config.atlas");
+				throw new Error("Please specify config.atlas or config.atlasContent");
-			if (!config.json)
+			if (!config.json && !config.jsonContent)
-				throw new Error("Please specify config.json");
+				throw new Error("Please specify config.json or config.jsonContent");
 			if (!config.animation)
 				throw new Error("Please specify config.animationName");
 			if (!config.scale)
@@ -7545,14 +7547,16 @@ var spine;
 					else
 						throw new Error("Failed to load assets: " + JSON.stringify(assetManager.getErrors()));
 				}
-				var atlas = new spine.TextureAtlas(this.assetManager.get(this.config.atlas), function (path) {
+				var atlasContent = config.atlasContent === undefined ? this.assetManager.get(this.config.atlas) : config.atlasContent;
+				var atlas = new spine.TextureAtlas(atlasContent, function (path) {
 					var texture = assetManager.get(imagesPath + path);
 					return texture;
 				});
 				var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 				var skeletonJson = new spine.SkeletonJson(atlasLoader);
 				skeletonJson.scale = config.scale;
-				var skeletonData = skeletonJson.readSkeletonData(assetManager.get(config.json));
+				var jsonContent = config.jsonContent === undefined ? assetManager.get(config.json) : config.jsonContent;
+				var skeletonData = skeletonJson.readSkeletonData(jsonContent);
 				var skeleton = this.skeleton = new spine.Skeleton(skeletonData);
 				var bounds = this.bounds;
 				skeleton.setSkinByName(config.skin);

spine-ts/widget/src/Widget.ts

@@ -78,8 +78,8 @@ module spine {
 			this.shapes = new spine.webgl.ShapeRenderer(gl);
 
 			let assets = this.assetManager = new spine.webgl.AssetManager(gl);
-			assets.loadText(config.atlas);
+			if (!config.atlasContent) assets.loadText(config.atlas);
-			assets.loadText(config.json);
+			if (!config.jsonContent) assets.loadText(config.json);
 			if (config.atlasPages == null) {
 				assets.loadTexture(config.atlas.replace(".atlas", ".png"));
 			} else {
@@ -91,8 +91,8 @@ module spine {
 		}
 
 		private validateConfig (config: SpineWidgetConfig) {
-			if (!config.atlas) throw new Error("Please specify config.atlas");
+			if (!config.atlas && !config.atlasContent) throw new Error("Please specify config.atlas or config.atlasContent");
-			if (!config.json) throw new Error("Please specify config.json");
+			if (!config.json && !config.jsonContent) throw new Error("Please specify config.json or config.jsonContent");
 			if (!config.animation) throw new Error("Please specify config.animationName");
 
 			if (!config.scale) config.scale = 1.0;
@@ -127,7 +127,8 @@ module spine {
 					else throw new Error("Failed to load assets: " + JSON.stringify(assetManager.getErrors()));
 				}
 
-				let atlas = new spine.TextureAtlas(this.assetManager.get(this.config.atlas) as string, (path: string) => {
+				let atlasContent = config.atlasContent === undefined ? this.assetManager.get(this.config.atlas) as string : config.atlasContent;
+				let atlas = new spine.TextureAtlas(atlasContent, (path: string) => {
 					let texture = assetManager.get(imagesPath + path) as spine.webgl.GLTexture;
 					return texture;
 				});
@@ -137,7 +138,8 @@ module spine {
 
 				// Set the scale to apply during parsing, parse the file, and create a new skeleton.
 				skeletonJson.scale = config.scale;
-				var skeletonData = skeletonJson.readSkeletonData(assetManager.get(config.json) as string);
+				let jsonContent = config.jsonContent === undefined ? assetManager.get(config.json) as string : config.jsonContent;
+				var skeletonData = skeletonJson.readSkeletonData(jsonContent);
 				var skeleton = this.skeleton = new spine.Skeleton(skeletonData);
 				var bounds = this.bounds;
 				skeleton.setSkinByName(config.skin);
@@ -307,7 +309,9 @@ module spine {
 
 	export class SpineWidgetConfig {
 		json: string;
+		jsonContent: any;
 		atlas: string;
+		atlasContent: string;
 		animation: string;
 		imagesPath: string;
 		atlasPages: string[];