[ts][player] Added AssetManager.setRawDataURI(path, name). Allows to set a path and corresponding raw data URI which enables embedding of resources like skeletons, atlases, and so on directly in HTML/JS. Added SpinePlayerConfig.rawDataURIs, see the player example for a demonstration. Also closes #1541, closes #1539.

CHANGELOG.md

@@ -316,6 +316,7 @@
   * Added `Attachment#copy()` to all attachment type implementations. This lets you deep copy an attachment to modify it independently from the original, i.e. when programmatically changing texture coordinates or mesh vertices.
   * Added `MeshAttachment#newLinkedMesh()`, creates a linked mesh linkted to either the original mesh, or the parent of the original mesh.
   * Added IK softness.
+  * Added `AssetManager.setRawDataURI(path, data)`. Allows to embed data URIs for skeletons, atlases and atlas page images directly in the HTML/JS without needing to load it from a separate file.
 
 ### WebGL backend
 * `Input` can now take a partially defined implementation of `InputListener`.
@@ -328,6 +329,7 @@
 ### Player
 * `SpinePlayer#setAnimation()` can now be called directly to set the animation being displayed.
 * The player supports loading `.skel` binary skeleton files by setting the `SpinePlayerConfig#skelUrl` field instead of `SpinePlayerConfig#jsonUrl`.
+* Added `SpinePlayerConfig#rawDataURIs`. Allows to embed data URIs for skeletons, atlases and atlas page images directly in the HTML/JS without needing to load it from a separate file. See the example for a demonstration.
 
 # 3.7
 

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

@@ -1874,6 +1874,7 @@ declare module spine {
 		jsonUrl: string;
 		skelUrl: string;
 		atlasUrl: string;
+		rawDataURIs: Map<string>;
 		animation: string;
 		animations: string[];
 		defaultMix: number;

spine-ts/build/spine-all.js

@@ -798,6 +798,7 @@ var spine;
 						case MixBlend.replace:
 							for (var i_5 = 0; i_5 < vertexCount; i_5++)
 								deform[i_5] += (lastVertices[i_5] - deform[i_5]) * alpha;
+							break;
 						case MixBlend.add:
 							var vertexAttachment = slotAttachment;
 							if (vertexAttachment.bones == null) {
@@ -1836,6 +1837,7 @@ var spine;
 			entry.interruptAlpha = 1;
 			entry.mixTime = 0;
 			entry.mixDuration = last == null ? 0 : this.data.getMix(last.animation, animation);
+			entry.mixBlend = spine.MixBlend.replace;
 			return entry;
 		};
 		AnimationState.prototype.disposeNext = function (entry) {
@@ -11667,6 +11669,12 @@ var spine;
 				return dom;
 			}
 			this.assetManager = new spine.webgl.AssetManager(this.context);
+			if (config.rawDataURIs) {
+				for (var path in config.rawDataURIs) {
+					var data = config.rawDataURIs[path];
+					this.assetManager.setRawDataURI(path, data);
+				}
+			}
 			if (config.jsonUrl)
 				this.assetManager.loadText(config.jsonUrl);
 			else

spine-ts/build/spine-canvas.js

@@ -798,6 +798,7 @@ var spine;
 						case MixBlend.replace:
 							for (var i_5 = 0; i_5 < vertexCount; i_5++)
 								deform[i_5] += (lastVertices[i_5] - deform[i_5]) * alpha;
+							break;
 						case MixBlend.add:
 							var vertexAttachment = slotAttachment;
 							if (vertexAttachment.bones == null) {
@@ -1836,6 +1837,7 @@ var spine;
 			entry.interruptAlpha = 1;
 			entry.mixTime = 0;
 			entry.mixDuration = last == null ? 0 : this.data.getMix(last.animation, animation);
+			entry.mixBlend = spine.MixBlend.replace;
 			return entry;
 		};
 		AnimationState.prototype.disposeNext = function (entry) {

spine-ts/build/spine-core.js

@@ -798,6 +798,7 @@ var spine;
 						case MixBlend.replace:
 							for (var i_5 = 0; i_5 < vertexCount; i_5++)
 								deform[i_5] += (lastVertices[i_5] - deform[i_5]) * alpha;
+							break;
 						case MixBlend.add:
 							var vertexAttachment = slotAttachment;
 							if (vertexAttachment.bones == null) {
@@ -1836,6 +1837,7 @@ var spine;
 			entry.interruptAlpha = 1;
 			entry.mixTime = 0;
 			entry.mixDuration = last == null ? 0 : this.data.getMix(last.animation, animation);
+			entry.mixBlend = spine.MixBlend.replace;
 			return entry;
 		};
 		AnimationState.prototype.disposeNext = function (entry) {

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

@@ -1782,6 +1782,7 @@ declare module spine {
 		jsonUrl: string;
 		skelUrl: string;
 		atlasUrl: string;
+		rawDataURIs: Map<string>;
 		animation: string;
 		animations: string[];
 		defaultMix: number;

spine-ts/build/spine-player.js

@@ -798,6 +798,7 @@ var spine;
 						case MixBlend.replace:
 							for (var i_5 = 0; i_5 < vertexCount; i_5++)
 								deform[i_5] += (lastVertices[i_5] - deform[i_5]) * alpha;
+							break;
 						case MixBlend.add:
 							var vertexAttachment = slotAttachment;
 							if (vertexAttachment.bones == null) {
@@ -1836,6 +1837,7 @@ var spine;
 			entry.interruptAlpha = 1;
 			entry.mixTime = 0;
 			entry.mixDuration = last == null ? 0 : this.data.getMix(last.animation, animation);
+			entry.mixBlend = spine.MixBlend.replace;
 			return entry;
 		};
 		AnimationState.prototype.disposeNext = function (entry) {
@@ -10991,6 +10993,12 @@ var spine;
 				return dom;
 			}
 			this.assetManager = new spine.webgl.AssetManager(this.context);
+			if (config.rawDataURIs) {
+				for (var path in config.rawDataURIs) {
+					var data = config.rawDataURIs[path];
+					this.assetManager.setRawDataURI(path, data);
+				}
+			}
 			if (config.jsonUrl)
 				this.assetManager.loadText(config.jsonUrl);
 			else

spine-ts/build/spine-threejs.js

@@ -798,6 +798,7 @@ var spine;
 						case MixBlend.replace:
 							for (var i_5 = 0; i_5 < vertexCount; i_5++)
 								deform[i_5] += (lastVertices[i_5] - deform[i_5]) * alpha;
+							break;
 						case MixBlend.add:
 							var vertexAttachment = slotAttachment;
 							if (vertexAttachment.bones == null) {
@@ -1836,6 +1837,7 @@ var spine;
 			entry.interruptAlpha = 1;
 			entry.mixTime = 0;
 			entry.mixDuration = last == null ? 0 : this.data.getMix(last.animation, animation);
+			entry.mixBlend = spine.MixBlend.replace;
 			return entry;
 		};
 		AnimationState.prototype.disposeNext = function (entry) {

spine-ts/build/spine-webgl.js

@@ -798,6 +798,7 @@ var spine;
 						case MixBlend.replace:
 							for (var i_5 = 0; i_5 < vertexCount; i_5++)
 								deform[i_5] += (lastVertices[i_5] - deform[i_5]) * alpha;
+							break;
 						case MixBlend.add:
 							var vertexAttachment = slotAttachment;
 							if (vertexAttachment.bones == null) {
@@ -1836,6 +1837,7 @@ var spine;
 			entry.interruptAlpha = 1;
 			entry.mixTime = 0;
 			entry.mixDuration = last == null ? 0 : this.data.getMix(last.animation, animation);
+			entry.mixBlend = spine.MixBlend.replace;
 			return entry;
 		};
 		AnimationState.prototype.disposeNext = function (entry) {

spine-ts/core/src/Animation.ts

@@ -948,6 +948,7 @@ module spine {
 					case MixBlend.replace:
 						for (let i = 0; i < vertexCount; i++)
 							deform[i] += (lastVertices[i] - deform[i]) * alpha;
+						break;
 					case MixBlend.add:
 						let vertexAttachment = slotAttachment as VertexAttachment;
 						if (vertexAttachment.bones == null) {

spine-ts/core/src/AnimationState.ts

@@ -676,6 +676,7 @@ module spine {
 			entry.interruptAlpha = 1;
 			entry.mixTime = 0;
 			entry.mixDuration = last == null ? 0 : this.data.getMix(last.animation, animation);
+			entry.mixBlend = MixBlend.replace;
 			return entry;
 		}
 

spine-ts/player/src/Player.ts

@@ -49,6 +49,12 @@ module spine {
 		/* the URL of the skeleton .atlas file. Atlas page images are automatically resolved. */
 		atlasUrl: string
 
+		/* Raw data URIs, mapping from a path to base 64 encoded raw data. When the player
+		   resolves a path of the `jsonUrl`, `skelUrl`, `atlasUrl`, or the image paths
+		   referenced in the atlas, it will first look for that path in this array of
+		   raw data URIs. This allows embedding of resources directly in HTML/JS. */
+		rawDataURIs: Map<string>
+
 		/* Optional: the name of the animation to be played. Default: first animation in the skeleton. */
 		animation: string
 
@@ -421,6 +427,12 @@ module spine {
 
 			// Load the assets
 			this.assetManager = new spine.webgl.AssetManager(this.context);
+			if (config.rawDataURIs) {
+				for (let path in config.rawDataURIs) {
+					let data = config.rawDataURIs[path];
+					this.assetManager.setRawDataURI(path, data);
+				}
+			}
 			if (config.jsonUrl) this.assetManager.loadText(config.jsonUrl);
 			else this.assetManager.loadBinary(config.skelUrl);
 			this.assetManager.loadTextureAtlas(config.atlasUrl);