UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 17:56:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Removed SharedAssetManager. Added webworker support to AssetManager. AssetManager clean up.

Browse Source 
Related: #1762
This commit is contained in:
Nathan Sweet 2021-06-18 19:22:00 -04:00
parent 5d6f46d295
commit 173a61be7f
20 changed files with 73238 additions and 74400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
spine-ts/build/spine-all.d.ts vendored
View File

@ -346,19 +346,21 @@ declare module spine {
class AssetManager implements Disposable { class AssetManager implements Disposable {
private pathPrefix; private pathPrefix;
private textureLoader; private textureLoader;
private downloader;
private assets; private assets;
private errors; private errors;
private toLoad; private toLoad;
private loaded; private loaded;
private rawDataUris; constructor(textureLoader: (image: HTMLImageElement | ImageBitmap) => any, pathPrefix?: string, downloader?: Downloader);
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string); private start;
private downloadText; private success;
private downloadBinary; private error;
setRawDataURI(path: string, data: string): void; setRawDataURI(path: string, data: string): void;
loadBinary(path: string, success?: (path: string, binary: Uint8Array) => void, error?: (path: string, error: string) => void): void; loadBinary(path: string, success?: (path: string, binary: Uint8Array) => void, error?: (path: string, message: string) => void): void;
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void; loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, message: string) => void): void;
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void; loadJson(path: string, success?: (path: string, object: object) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, error: string) => void): void; loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void;
get(path: string): any; get(path: string): any;
remove(path: string): void; remove(path: string): void;
removeAll(): void; removeAll(): void;
@ -369,6 +371,15 @@ declare module spine {
hasErrors(): boolean; hasErrors(): boolean;
getErrors(): Map<string>; getErrors(): Map<string>;
} }
class Downloader {
private callbacks;
rawDataUris: Map<string>;
downloadText(url: string, success: (data: string) => void, error: (status: number, responseText: string) => void): void;
downloadJson(url: string, success: (data: object) => void, error: (status: number, responseText: string) => void): void;
downloadBinary(url: string, success: (data: Uint8Array) => void, error: (status: number, responseText: string) => void): void;
private start;
private finish;
}
} }
declare module spine { declare module spine {
class AtlasAttachmentLoader implements AttachmentLoader { class AtlasAttachmentLoader implements AttachmentLoader {
@ -578,26 +589,6 @@ declare module spine {
ChainScale = 2 ChainScale = 2
} }
} }
declare module spine {
class SharedAssetManager implements Disposable {
private pathPrefix;
private clientAssets;
private queuedAssets;
private rawAssets;
private errors;
constructor(pathPrefix?: string);
private queueAsset;
loadText(clientId: string, path: string): void;
loadJson(clientId: string, path: string): void;
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
get(clientId: string, path: string): any;
private updateClientAssets;
isLoadingComplete(clientId: string): boolean;
dispose(): void;
hasErrors(): boolean;
getErrors(): Map<string>;
}
}
declare module spine { declare module spine {
class Skeleton { class Skeleton {
data: SkeletonData; data: SkeletonData;
@ -1267,7 +1258,7 @@ declare module spine {
} }
declare module spine.canvas { declare module spine.canvas {
class AssetManager extends spine.AssetManager { class AssetManager extends spine.AssetManager {
constructor(pathPrefix?: string); constructor(pathPrefix?: string, downloader?: Downloader);
} }
} }
declare module spine.canvas { declare module spine.canvas {
@ -1298,7 +1289,7 @@ declare module spine.canvas {
} }
declare module spine.webgl { declare module spine.webgl {
class AssetManager extends spine.AssetManager { class AssetManager extends spine.AssetManager {
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string, downloader?: Downloader);
} }
} }
declare module spine.webgl { declare module spine.webgl {
@ -1736,7 +1727,7 @@ declare module spine.webgl {
} }
declare module spine.threejs { declare module spine.threejs {
class AssetManager extends spine.AssetManager { class AssetManager extends spine.AssetManager {
constructor(pathPrefix?: string); constructor(pathPrefix?: string, downloader?: Downloader);
} }
} }
declare module spine.threejs { declare module spine.threejs {
@ -1812,6 +1803,7 @@ declare module spine {
} }
interface SpinePlayerConfig { interface SpinePlayerConfig {
jsonUrl: string; jsonUrl: string;
jsonField: string;
skelUrl: string; skelUrl: string;
atlasUrl: string; atlasUrl: string;
rawDataURIs: Map<string>; rawDataURIs: Map<string>;
@ -1858,6 +1850,7 @@ declare module spine {
controlBones: string[]; controlBones: string[];
success: (widget: SpinePlayer) => void; success: (widget: SpinePlayer) => void;
error: (widget: SpinePlayer, msg: string) => void; error: (widget: SpinePlayer, msg: string) => void;
downloader: spine.Downloader;
} }
class SpinePlayer { class SpinePlayer {
private config; private config;
@ -1876,6 +1869,7 @@ declare module spine {
private context; private context;
private loadingScreen; private loadingScreen;
private assetManager; private assetManager;
error: boolean;
loaded: boolean; loaded: boolean;
skeleton: Skeleton; skeleton: Skeleton;
animationState: AnimationState; animationState: AnimationState;

565
spine-ts/build/spine-all.js
View File

@ -2756,134 +2756,113 @@ var spine;
var spine; var spine;
(function (spine) { (function (spine) {
var AssetManager = (function () { var AssetManager = (function () {
function AssetManager(textureLoader, pathPrefix) { function AssetManager(textureLoader, pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
this.assets = {}; this.assets = {};
this.errors = {}; this.errors = {};
this.toLoad = 0; this.toLoad = 0;
this.loaded = 0; this.loaded = 0;
this.rawDataUris = {};
this.textureLoader = textureLoader; this.textureLoader = textureLoader;
this.pathPrefix = pathPrefix; this.pathPrefix = pathPrefix;
this.downloader = downloader || new Downloader();
} }
AssetManager.prototype.downloadText = function (url, success, error) { AssetManager.prototype.start = function (path) {
var request = new XMLHttpRequest(); this.toLoad++;
request.overrideMimeType("text/html"); return this.pathPrefix + path;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
request.open("GET", url, true);
request.onload = function () {
if (request.status == 200) {
success(request.responseText);
}
else {
error(request.status, request.responseText);
}
}; };
request.onerror = function () { AssetManager.prototype.success = function (callback, path, asset) {
error(request.status, request.responseText); this.toLoad--;
this.loaded++;
this.assets[path] = asset;
if (callback)
callback(path, asset);
}; };
request.send(); AssetManager.prototype.error = function (callback, path, message) {
}; this.toLoad--;
AssetManager.prototype.downloadBinary = function (url, success, error) { this.loaded++;
var request = new XMLHttpRequest(); this.errors[path] = message;
if (this.rawDataUris[url]) if (callback)
url = this.rawDataUris[url]; callback(path, message);
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function () {
if (request.status == 200) {
success(new Uint8Array(request.response));
}
else {
error(request.status, request.responseText);
}
};
request.onerror = function () {
error(request.status, request.responseText);
};
request.send();
}; };
AssetManager.prototype.setRawDataURI = function (path, data) { AssetManager.prototype.setRawDataURI = function (path, data) {
this.rawDataUris[this.pathPrefix + path] = data; this.downloader.rawDataUris[this.pathPrefix + path] = data;
}; };
AssetManager.prototype.loadBinary = function (path, success, error) { AssetManager.prototype.loadBinary = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadBinary(path, function (data) {
this.downloadBinary(path, function (data) { _this.success(success, path, data);
_this.assets[path] = data; }, function (status, responseText) {
if (success) _this.error(error, path, "Couldn't load binary " + path + ": status " + status + ", " + responseText);
success(path, data);
_this.toLoad--;
_this.loaded++;
}, function (state, responseText) {
_this.errors[path] = "Couldn't load binary " + path + ": status " + status + ", " + responseText;
if (error)
error(path, "Couldn't load binary " + path + ": status " + status + ", " + responseText);
_this.toLoad--;
_this.loaded++;
}); });
}; };
AssetManager.prototype.loadText = function (path, success, error) { AssetManager.prototype.loadText = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadText(path, function (data) {
this.downloadText(path, function (data) { _this.success(success, path, data);
_this.assets[path] = data; }, function (status, responseText) {
if (success) _this.error(error, path, "Couldn't load text " + path + ": status " + status + ", " + responseText);
success(path, data); });
_this.toLoad--; };
_this.loaded++; AssetManager.prototype.loadJson = function (path, success, error) {
}, function (state, responseText) { var _this = this;
_this.errors[path] = "Couldn't load text " + path + ": status " + status + ", " + responseText; if (success === void 0) { success = null; }
if (error) if (error === void 0) { error = null; }
error(path, "Couldn't load text " + path + ": status " + status + ", " + responseText); path = this.start(path);
_this.toLoad--; this.downloader.downloadJson(path, function (data) {
_this.loaded++; _this.success(success, path, data);
}, function (status, responseText) {
_this.error(error, path, "Couldn't load JSON " + path + ": status " + status + ", " + responseText);
}); });
}; };
AssetManager.prototype.loadTexture = function (path, success, error) { AssetManager.prototype.loadTexture = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
var storagePath = path; var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
this.toLoad++; var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
var img = new Image(); if (isWebWorker) {
img.crossOrigin = "anonymous"; fetch(path, { mode: "cors" }).then(function (response) {
img.onload = function (ev) { if (response.ok)
var texture = _this.textureLoader(img); return response.blob();
_this.assets[storagePath] = texture; _this.error(error, path, "Couldn't load image: " + path);
_this.toLoad--; return null;
_this.loaded++; }).then(function (blob) {
if (success) return blob ? createImageBitmap(blob, { premultiplyAlpha: "none", colorSpaceConversion: "none" }) : null;
success(path, img); }).then(function (bitmap) {
if (bitmap)
_this.success(success, path, _this.textureLoader(bitmap));
});
}
else {
var image_1 = new Image();
image_1.crossOrigin = "anonymous";
image_1.onload = function () {
_this.success(success, path, _this.textureLoader(image_1));
}; };
img.onerror = function (ev) { image_1.onerror = function () {
_this.errors[path] = "Couldn't load image " + path; _this.error(error, path, "Couldn't load image: " + path);
_this.toLoad--;
_this.loaded++;
if (error)
error(path, "Couldn't load image " + path);
}; };
if (this.rawDataUris[path]) if (this.downloader.rawDataUris[path])
path = this.rawDataUris[path]; path = this.downloader.rawDataUris[path];
img.src = path; image_1.src = path;
}
}; };
AssetManager.prototype.loadTextureAtlas = function (path, success, error) { AssetManager.prototype.loadTextureAtlas = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : ""; var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : "";
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadText(path, function (atlasData) {
this.downloadText(path, function (atlasData) { var pagesLoaded = 0;
var pagesLoaded = { count: 0 };
var atlasPages = new Array(); var atlasPages = new Array();
try { try {
var atlas = new spine.TextureAtlas(atlasData, function (path) { var atlas = new spine.TextureAtlas(atlasData, function (path) {
@ -2893,83 +2872,52 @@ var spine;
image.height = 16; image.height = 16;
return new spine.FakeTexture(image); return new spine.FakeTexture(image);
}); });
}
catch (e) {
var ex = e;
_this.errors[path] = "Couldn't load texture atlas " + path + ": " + ex.message;
if (error)
error(path, "Couldn't load texture atlas " + path + ": " + ex.message);
_this.toLoad--;
_this.loaded++;
return;
}
var _loop_1 = function (atlasPage) { var _loop_1 = function (atlasPage) {
var pageLoadError = false; var pageLoadError = false;
_this.loadTexture(atlasPage, function (imagePath, image) { _this.loadTexture(atlasPage, function (imagePath, image) {
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded.count == atlasPages.length) { if (pagesLoaded == atlasPages.length) {
if (!pageLoadError) { if (!pageLoadError) {
try { try {
var atlas = new spine.TextureAtlas(atlasData, function (path) { _this.success(success, path, new spine.TextureAtlas(atlasData, function (path) {
return _this.get(parent == "" ? path : parent + "/" + path); return _this.get(parent == "" ? path : parent + "/" + path);
}); }));
_this.assets[path] = atlas;
if (success)
success(path, atlas);
_this.toLoad--;
_this.loaded++;
} }
catch (e) { catch (e) {
var ex = e; _this.error(error, path, "Couldn't load texture atlas " + path + ": " + e.message);
_this.errors[path] = "Couldn't load texture atlas " + path + ": " + ex.message;
if (error)
error(path, "Couldn't load texture atlas " + path + ": " + ex.message);
_this.toLoad--;
_this.loaded++;
} }
} }
else { else
_this.errors[path] = "Couldn't load texture atlas page " + imagePath + "} of atlas " + path; _this.error(error, path, "Couldn't load texture atlas " + path + " page: " + imagePath);
if (error)
error(path, "Couldn't load texture atlas page " + imagePath + " of atlas " + path);
_this.toLoad--;
_this.loaded++;
}
} }
}, function (imagePath, errorMessage) { }, function (imagePath, errorMessage) {
pageLoadError = true; pageLoadError = true;
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded.count == atlasPages.length) { if (pagesLoaded == atlasPages.length)
_this.errors[path] = "Couldn't load texture atlas page " + imagePath + "} of atlas " + path; _this.error(error, path, "Couldn't load texture atlas " + path + " page: " + imagePath);
if (error)
error(path, "Couldn't load texture atlas page " + imagePath + " of atlas " + path);
_this.toLoad--;
_this.loaded++;
}
}); });
}; };
for (var _i = 0, atlasPages_1 = atlasPages; _i < atlasPages_1.length; _i++) { for (var _i = 0, atlasPages_1 = atlasPages; _i < atlasPages_1.length; _i++) {
var atlasPage = atlasPages_1[_i]; var atlasPage = atlasPages_1[_i];
_loop_1(atlasPage); _loop_1(atlasPage);
} }
}, function (state, responseText) { }
_this.errors[path] = "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText; catch (e) {
if (error) _this.error(error, path, "Couldn't load texture atlas " + path + ": " + e.message);
error(path, "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText); }
_this.toLoad--; }, function (status, responseText) {
_this.loaded++; _this.error(error, path, "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText);
}); });
}; };
AssetManager.prototype.get = function (path) { AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path; return this.assets[this.pathPrefix + path];
return this.assets[path];
}; };
AssetManager.prototype.remove = function (path) { AssetManager.prototype.remove = function (path) {
path = this.pathPrefix + path; path = this.pathPrefix + path;
var asset = this.assets[path]; var asset = this.assets[path];
if (asset.dispose) if (asset.dispose)
asset.dispose(); asset.dispose();
this.assets[path] = null; delete this.assets[path];
}; };
AssetManager.prototype.removeAll = function () { AssetManager.prototype.removeAll = function () {
for (var key in this.assets) { for (var key in this.assets) {
@ -3000,6 +2948,74 @@ var spine;
return AssetManager; return AssetManager;
}()); }());
spine.AssetManager = AssetManager; spine.AssetManager = AssetManager;
var Downloader = (function () {
function Downloader() {
this.callbacks = {};
this.rawDataUris = {};
}
Downloader.prototype.downloadText = function (url, success, error) {
var _this = this;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
if (this.start(url, success, error))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.open("GET", url, true);
var done = function () {
_this.finish(url, request.status, request.responseText);
};
request.onload = done;
request.onerror = done;
request.send();
};
Downloader.prototype.downloadJson = function (url, success, error) {
this.downloadText(url, function (data) {
success(JSON.parse(data));
}, error);
};
Downloader.prototype.downloadBinary = function (url, success, error) {
var _this = this;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
if (this.start(url, success, error))
return;
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
var onerror = function () {
_this.finish(url, request.status, request.responseText);
};
request.onload = function () {
if (request.status == 200)
_this.finish(url, 200, new Uint8Array(request.response));
else
onerror();
};
request.onerror = onerror;
request.send();
};
Downloader.prototype.start = function (url, success, error) {
var callbacks = this.callbacks[url];
try {
if (callbacks)
return true;
this.callbacks[url] = callbacks = [];
}
finally {
callbacks.push(success, error);
}
};
Downloader.prototype.finish = function (url, status, data) {
var callbacks = this.callbacks[url];
delete this.callbacks[url];
var args = status == 200 ? [data] : [status, data];
for (var i = args.length - 1, n = callbacks.length; i < n; i += 2)
callbacks[i].apply(null, args);
};
return Downloader;
}());
spine.Downloader = Downloader;
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) { (function (spine) {
@ -4088,178 +4104,6 @@ var spine;
})(RotateMode = spine.RotateMode || (spine.RotateMode = {})); })(RotateMode = spine.RotateMode || (spine.RotateMode = {}));
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) {
var Assets = (function () {
function Assets(clientId) {
this.toLoad = new Array();
this.assets = {};
this.clientId = clientId;
}
Assets.prototype.loaded = function () {
var i = 0;
for (var v in this.assets)
i++;
return i;
};
return Assets;
}());
var SharedAssetManager = (function () {
function SharedAssetManager(pathPrefix) {
if (pathPrefix === void 0) { pathPrefix = ""; }
this.clientAssets = {};
this.queuedAssets = {};
this.rawAssets = {};
this.errors = {};
this.pathPrefix = pathPrefix;
}
SharedAssetManager.prototype.queueAsset = function (clientId, textureLoader, path) {
var clientAssets = this.clientAssets[clientId];
if (!clientAssets) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader)
clientAssets.textureLoader = textureLoader;
clientAssets.toLoad.push(path);
if (this.queuedAssets[path] === path) {
return false;
}
else {
this.queuedAssets[path] = path;
return true;
}
};
SharedAssetManager.prototype.loadText = function (clientId, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
_this.rawAssets[path] = request.responseText;
}
else {
_this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
}
}
};
request.open("GET", path, true);
request.send();
};
SharedAssetManager.prototype.loadJson = function (clientId, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
_this.rawAssets[path] = JSON.parse(request.responseText);
}
else {
_this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
}
}
};
request.open("GET", path, true);
request.send();
};
SharedAssetManager.prototype.loadTexture = function (clientId, textureLoader, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, textureLoader, path))
return;
var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
if (isWebWorker) {
var options = { mode: "cors" };
fetch(path, options).then(function (response) {
if (!response.ok) {
_this.errors[path] = "Couldn't load image " + path;
}
return response.blob();
}).then(function (blob) {
return createImageBitmap(blob, {
premultiplyAlpha: 'none',
colorSpaceConversion: 'none'
});
}).then(function (bitmap) {
_this.rawAssets[path] = bitmap;
});
}
else {
var img_1 = new Image();
img_1.crossOrigin = "anonymous";
img_1.onload = function (ev) {
_this.rawAssets[path] = img_1;
};
img_1.onerror = function (ev) {
_this.errors[path] = "Couldn't load image " + path;
};
img_1.src = path;
}
};
SharedAssetManager.prototype.get = function (clientId, path) {
path = this.pathPrefix + path;
var clientAssets = this.clientAssets[clientId];
if (!clientAssets)
return true;
return clientAssets.assets[path];
};
SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
for (var i = 0; i < clientAssets.toLoad.length; i++) {
var path = clientAssets.toLoad[i];
var asset = clientAssets.assets[path];
if (!asset) {
var rawAsset = this.rawAssets[path];
if (!rawAsset)
continue;
if (isWebWorker) {
if (rawAsset instanceof ImageBitmap) {
clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
}
else {
clientAssets.assets[path] = rawAsset;
}
}
else {
if (rawAsset instanceof HTMLImageElement) {
clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
}
else {
clientAssets.assets[path] = rawAsset;
}
}
}
}
};
SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
var clientAssets = this.clientAssets[clientId];
if (!clientAssets)
return true;
this.updateClientAssets(clientAssets);
return clientAssets.toLoad.length == clientAssets.loaded();
};
SharedAssetManager.prototype.dispose = function () {
};
SharedAssetManager.prototype.hasErrors = function () {
return Object.keys(this.errors).length > 0;
};
SharedAssetManager.prototype.getErrors = function () {
return this.errors;
};
return SharedAssetManager;
}());
spine.SharedAssetManager = SharedAssetManager;
})(spine || (spine = {}));
var spine;
(function (spine) { (function (spine) {
var Skeleton = (function () { var Skeleton = (function () {
function Skeleton(data) { function Skeleton(data) {
@ -9152,9 +8996,10 @@ var spine;
(function (canvas) { (function (canvas) {
var AssetManager = (function (_super) { var AssetManager = (function (_super) {
__extends(AssetManager, _super); __extends(AssetManager, _super);
function AssetManager(pathPrefix) { function AssetManager(pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
return _super.call(this, function (image) { return new spine.canvas.CanvasTexture(image); }, pathPrefix) || this; if (downloader === void 0) { downloader = null; }
return _super.call(this, function (image) { return new spine.canvas.CanvasTexture(image); }, pathPrefix, downloader) || this;
} }
return AssetManager; return AssetManager;
}(spine.AssetManager)); }(spine.AssetManager));
@ -9401,11 +9246,12 @@ var spine;
(function (webgl) { (function (webgl) {
var AssetManager = (function (_super) { var AssetManager = (function (_super) {
__extends(AssetManager, _super); __extends(AssetManager, _super);
function AssetManager(context, pathPrefix) { function AssetManager(context, pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
return _super.call(this, function (image) { return _super.call(this, function (image) {
return new spine.webgl.GLTexture(context, image); return new spine.webgl.GLTexture(context, image);
}, pathPrefix) || this; }, pathPrefix, downloader) || this;
} }
return AssetManager; return AssetManager;
}(spine.AssetManager)); }(spine.AssetManager));
@ -12031,11 +11877,12 @@ var spine;
(function (threejs) { (function (threejs) {
var AssetManager = (function (_super) { var AssetManager = (function (_super) {
__extends(AssetManager, _super); __extends(AssetManager, _super);
function AssetManager(pathPrefix) { function AssetManager(pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
return _super.call(this, function (image) { return _super.call(this, function (image) {
return new threejs.ThreeJsTexture(image); return new threejs.ThreeJsTexture(image);
}, pathPrefix) || this; }, pathPrefix, downloader) || this;
} }
return AssetManager; return AssetManager;
}(spine.AssetManager)); }(spine.AssetManager));
@ -12596,10 +12443,7 @@ var spine;
this.viewportTransitionStart = 0; this.viewportTransitionStart = 0;
this.stopRequestAnimationFrame = false; this.stopRequestAnimationFrame = false;
this.cancelId = 0; this.cancelId = 0;
if (typeof parent === "string") this.parent = typeof parent === "string" ? document.getElementById(parent) : parent;
this.parent = document.getElementById(parent);
else
this.parent = parent;
this.parent.appendChild(this.render()); this.parent.appendChild(this.render());
} }
SpinePlayer.prototype.validateConfig = function (config) { SpinePlayer.prototype.validateConfig = function (config) {
@ -12650,7 +12494,7 @@ var spine;
config.debug.meshes = false; config.debug.meshes = false;
if (config.animations && config.animation) { if (config.animations && config.animation) {
if (config.animations.indexOf(config.animation) < 0) if (config.animations.indexOf(config.animation) < 0)
throw new Error("Default animation '" + config.animation + "' is not contained in the list of selectable animations " + escapeHtml(JSON.stringify(this.config.animations)) + "."); throw new Error("Default animation '" + config.animation + "' is not contained in the list of selectable animations: " + escapeHtml(JSON.stringify(this.config.animations)));
} }
if (config.skins && config.skin) { if (config.skins && config.skin) {
if (config.skins.indexOf(config.skin) < 0) if (config.skins.indexOf(config.skin) < 0)
@ -12665,9 +12509,13 @@ var spine;
return config; return config;
}; };
SpinePlayer.prototype.showError = function (error) { SpinePlayer.prototype.showError = function (error) {
if (this.error)
return;
this.error = true;
console.log(error);
var errorDom = findWithClass(this.dom, "spine-player-error")[0]; var errorDom = findWithClass(this.dom, "spine-player-error")[0];
errorDom.classList.remove("spine-player-hidden"); errorDom.classList.remove("spine-player-hidden");
errorDom.innerHTML = "<p style=\"text-align: center; align-self: center;\">" + error + "</p>"; errorDom.innerHTML = '<p style="text-align: center; align-self: center;">' + error.replace("\n", "<br><br>") + '</p>';
this.config.error(this, error); this.config.error(this, error);
}; };
SpinePlayer.prototype.render = function () { SpinePlayer.prototype.render = function () {
@ -12689,18 +12537,19 @@ var spine;
this.loadingScreen = new spine.webgl.LoadingScreen(this.sceneRenderer); this.loadingScreen = new spine.webgl.LoadingScreen(this.sceneRenderer);
} }
catch (e) { catch (e) {
this.showError("Sorry, your browser does not support WebGL.<br><br>Please use the latest version of Firefox, Chrome, Edge, or Safari."); this.showError("Sorry, your browser does not support WebGL.\nPlease use the latest version of Firefox, Chrome, Edge, or Safari.");
return dom; return dom;
} }
this.assetManager = new spine.webgl.AssetManager(this.context); this.assetManager = new spine.webgl.AssetManager(this.context, "", config.downloader);
if (config.rawDataURIs) { if (config.rawDataURIs) {
for (var path in config.rawDataURIs) { for (var path in config.rawDataURIs) {
var data = config.rawDataURIs[path]; var data = config.rawDataURIs[path];
this.assetManager.setRawDataURI(path, data); this.assetManager.setRawDataURI(path, data);
} }
} }
if (config.jsonUrl) var jsonUrl = config.jsonUrl;
this.assetManager.loadText(config.jsonUrl); if (jsonUrl)
this.assetManager.loadJson(jsonUrl);
else else
this.assetManager.loadBinary(config.skelUrl); this.assetManager.loadBinary(config.skelUrl);
this.assetManager.loadTextureAtlas(config.atlasUrl); this.assetManager.loadTextureAtlas(config.atlasUrl);
@ -12830,9 +12679,8 @@ var spine;
var popup = new Popup(this.dom, this.playerControls, "\n\t\t\t\t<div class=\"spine-player-popup-title\">Animations</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\"></ul>\n\t\t\t"); var popup = new Popup(this.dom, this.playerControls, "\n\t\t\t\t<div class=\"spine-player-popup-title\">Animations</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\"></ul>\n\t\t\t");
var rows = findWithClass(popup.dom, "spine-player-list")[0]; var rows = findWithClass(popup.dom, "spine-player-list")[0];
this.skeleton.data.animations.forEach(function (animation) { this.skeleton.data.animations.forEach(function (animation) {
if (_this.config.animations && _this.config.animations.indexOf(animation.name) < 0) { if (_this.config.animations && _this.config.animations.indexOf(animation.name) < 0)
return; return;
}
var row = createElement("\n\t\t\t\t\t<li class=\"spine-player-list-item selectable\">\n\t\t\t\t\t\t<div class=\"selectable-circle\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"selectable-text\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t"); var row = createElement("\n\t\t\t\t\t<li class=\"spine-player-list-item selectable\">\n\t\t\t\t\t\t<div class=\"selectable-circle\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"selectable-text\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t");
if (animation.name == _this.config.animation) if (animation.name == _this.config.animation)
row.classList.add("selected"); row.classList.add("selected");
@ -12934,7 +12782,8 @@ var spine;
SpinePlayer.prototype.drawFrame = function (requestNextFrame) { SpinePlayer.prototype.drawFrame = function (requestNextFrame) {
var _this = this; var _this = this;
if (requestNextFrame === void 0) { requestNextFrame = true; } if (requestNextFrame === void 0) { requestNextFrame = true; }
if (requestNextFrame && !this.stopRequestAnimationFrame) try {
if (requestNextFrame && !this.stopRequestAnimationFrame && !this.error)
requestAnimationFrame(function () { return _this.drawFrame(); }); requestAnimationFrame(function () { return _this.drawFrame(); });
var ctx = this.context; var ctx = this.context;
var gl = ctx.gl; var gl = ctx.gl;
@ -13028,6 +12877,10 @@ var spine;
this.sceneRenderer.end(); this.sceneRenderer.end();
this.sceneRenderer.camera.zoom = 0; this.sceneRenderer.camera.zoom = 0;
} }
}
catch (e) {
this.showError("Error: Unable to render skeleton.\n" + e.message);
}
}; };
SpinePlayer.prototype.scale = function (sourceWidth, sourceHeight, targetWidth, targetHeight) { SpinePlayer.prototype.scale = function (sourceWidth, sourceHeight, targetWidth, targetHeight) {
var targetRatio = targetHeight / targetWidth; var targetRatio = targetHeight / targetWidth;
@ -13042,20 +12895,30 @@ var spine;
var _this = this; var _this = this;
if (this.loaded) if (this.loaded)
return; return;
if (this.error)
return;
if (this.assetManager.hasErrors()) { if (this.assetManager.hasErrors()) {
this.showError("Error: assets could not be loaded.<br><br>" + escapeHtml(JSON.stringify(this.assetManager.getErrors()))); this.showError("Error: Assets could not be loaded.\n" + escapeHtml(JSON.stringify(this.assetManager.getErrors())));
return; return;
} }
var atlas = this.assetManager.get(this.config.atlasUrl); var atlas = this.assetManager.get(this.config.atlasUrl);
var skeletonData; var skeletonData;
if (this.config.jsonUrl) { var jsonUrl = this.config.jsonUrl;
var jsonText = this.assetManager.get(this.config.jsonUrl); if (jsonUrl) {
var json = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
try { try {
skeletonData = json.readSkeletonData(jsonText); var jsonData = this.assetManager.get(jsonUrl);
if (!jsonData)
throw new Error("Empty JSON data.");
if (this.config.jsonField) {
jsonData = jsonData[this.config.jsonField];
if (!jsonData)
throw new Error("JSON field not found: " + this.config.jsonField);
}
var json = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
skeletonData = json.readSkeletonData(jsonData);
} }
catch (e) { catch (e) {
this.showError("Error: could not load skeleton .json.<br><br>" + e.toString()); this.showError("Error: Could not load skeleton JSON.\n" + e.message);
return; return;
} }
} }
@ -13066,7 +12929,7 @@ var spine;
skeletonData = binary.readSkeletonData(binaryData); skeletonData = binary.readSkeletonData(binaryData);
} }
catch (e) { catch (e) {
this.showError("Error: could not load skeleton .skel.<br><br>" + e.toString()); this.showError("Error: Could not load skeleton binary.\n" + e.message);
return; return;
} }
} }
@ -13077,26 +12940,26 @@ var spine;
if (this.config.controlBones) { if (this.config.controlBones) {
this.config.controlBones.forEach(function (bone) { this.config.controlBones.forEach(function (bone) {
if (!skeletonData.findBone(bone)) { if (!skeletonData.findBone(bone)) {
_this.showError("Error: control bone '" + bone + "' does not exist in skeleton."); _this.showError("Error: Control bone does not exist in skeleton: " + bone);
return;
} }
}); });
} }
if (!this.config.skin) { if (!this.config.skin) {
if (skeletonData.skins.length > 0) { if (skeletonData.skins.length > 0)
this.config.skin = skeletonData.skins[0].name; this.config.skin = skeletonData.skins[0].name;
} }
}
if (this.config.skins && this.config.skin.length > 0) { if (this.config.skins && this.config.skin.length > 0) {
this.config.skins.forEach(function (skin) { this.config.skins.forEach(function (skin) {
if (!_this.skeleton.data.findSkin(skin)) { if (!_this.skeleton.data.findSkin(skin)) {
_this.showError("Error: skin '" + skin + "' in selectable skin list does not exist in skeleton."); _this.showError("Error: Skin in config list does not exist in skeleton: " + skin);
return; return;
} }
}); });
} }
if (this.config.skin) { if (this.config.skin) {
if (!this.skeleton.data.findSkin(this.config.skin)) { if (!this.skeleton.data.findSkin(this.config.skin)) {
this.showError("Error: skin '" + this.config.skin + "' does not exist in skeleton."); this.showError("Error: Skin does not exist in skeleton: " + this.config.skin);
return; return;
} }
this.skeleton.setSkinByName(this.config.skin); this.skeleton.setSkinByName(this.config.skin);
@ -13119,7 +12982,7 @@ var spine;
else { else {
Object.getOwnPropertyNames(this.config.viewport.animations).forEach(function (animation) { Object.getOwnPropertyNames(this.config.viewport.animations).forEach(function (animation) {
if (!skeletonData.findAnimation(animation)) { if (!skeletonData.findAnimation(animation)) {
_this.showError("Error: animation '" + animation + "' for which a viewport was specified does not exist in skeleton."); _this.showError("Error: Animation for which a viewport was specified does not exist in skeleton: " + animation);
return; return;
} }
}); });
@ -13127,7 +12990,7 @@ var spine;
if (this.config.animations && this.config.animations.length > 0) { if (this.config.animations && this.config.animations.length > 0) {
this.config.animations.forEach(function (animation) { this.config.animations.forEach(function (animation) {
if (!_this.skeleton.data.findAnimation(animation)) { if (!_this.skeleton.data.findAnimation(animation)) {
_this.showError("Error: animation '" + animation + "' in selectable animation list does not exist in skeleton."); _this.showError("Error: Animation in config list does not exist in skeleton: " + animation);
return; return;
} }
}); });
@ -13142,7 +13005,7 @@ var spine;
} }
if (this.config.animation) { if (this.config.animation) {
if (!skeletonData.findAnimation(this.config.animation)) { if (!skeletonData.findAnimation(this.config.animation)) {
this.showError("Error: animation '" + this.config.animation + "' does not exist in skeleton."); this.showError("Error: Animation does not exist in skeleton: " + this.config.animation);
return; return;
} }
this.play(); this.play();
@ -13284,11 +13147,8 @@ var spine;
this.cancelId = setTimeout(remove, 1000); this.cancelId = setTimeout(remove, 1000);
this.playButton.classList.remove("spine-player-button-icon-play"); this.playButton.classList.remove("spine-player-button-icon-play");
this.playButton.classList.add("spine-player-button-icon-pause"); this.playButton.classList.add("spine-player-button-icon-pause");
if (this.config.animation) { if (this.config.animation && !this.animationState.getCurrent(0))
if (!this.animationState.getCurrent(0)) {
this.setAnimation(this.config.animation); this.setAnimation(this.config.animation);
}
}
}; };
SpinePlayer.prototype.pause = function () { SpinePlayer.prototype.pause = function () {
this.paused = true; this.paused = true;
@ -13385,9 +13245,8 @@ var spine;
minY = Math.min(offset.y, minY); minY = Math.min(offset.y, minY);
maxY = Math.max(offset.y + size.y, maxY); maxY = Math.max(offset.y + size.y, maxY);
} }
else { else
console.log("Bounds of animation " + animationName + " are NaN"); console.log("Animation bounds are NaN: " + animationName);
}
} }
offset.x = minX; offset.x = minX;
offset.y = minY; offset.y = minY;

2
spine-ts/build/spine-all.js.map
View File

File diff suppressed because one or more lines are too long

49
spine-ts/build/spine-canvas.d.ts vendored
View File

@ -346,19 +346,21 @@ declare module spine {
class AssetManager implements Disposable { class AssetManager implements Disposable {
private pathPrefix; private pathPrefix;
private textureLoader; private textureLoader;
private downloader;
private assets; private assets;
private errors; private errors;
private toLoad; private toLoad;
private loaded; private loaded;
private rawDataUris; constructor(textureLoader: (image: HTMLImageElement | ImageBitmap) => any, pathPrefix?: string, downloader?: Downloader);
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string); private start;
private downloadText; private success;
private downloadBinary; private error;
setRawDataURI(path: string, data: string): void; setRawDataURI(path: string, data: string): void;
loadBinary(path: string, success?: (path: string, binary: Uint8Array) => void, error?: (path: string, error: string) => void): void; loadBinary(path: string, success?: (path: string, binary: Uint8Array) => void, error?: (path: string, message: string) => void): void;
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void; loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, message: string) => void): void;
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void; loadJson(path: string, success?: (path: string, object: object) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, error: string) => void): void; loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void;
get(path: string): any; get(path: string): any;
remove(path: string): void; remove(path: string): void;
removeAll(): void; removeAll(): void;
@ -369,6 +371,15 @@ declare module spine {
hasErrors(): boolean; hasErrors(): boolean;
getErrors(): Map<string>; getErrors(): Map<string>;
} }
class Downloader {
private callbacks;
rawDataUris: Map<string>;
downloadText(url: string, success: (data: string) => void, error: (status: number, responseText: string) => void): void;
downloadJson(url: string, success: (data: object) => void, error: (status: number, responseText: string) => void): void;
downloadBinary(url: string, success: (data: Uint8Array) => void, error: (status: number, responseText: string) => void): void;
private start;
private finish;
}
} }
declare module spine { declare module spine {
class AtlasAttachmentLoader implements AttachmentLoader { class AtlasAttachmentLoader implements AttachmentLoader {
@ -578,26 +589,6 @@ declare module spine {
ChainScale = 2 ChainScale = 2
} }
} }
declare module spine {
class SharedAssetManager implements Disposable {
private pathPrefix;
private clientAssets;
private queuedAssets;
private rawAssets;
private errors;
constructor(pathPrefix?: string);
private queueAsset;
loadText(clientId: string, path: string): void;
loadJson(clientId: string, path: string): void;
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
get(clientId: string, path: string): any;
private updateClientAssets;
isLoadingComplete(clientId: string): boolean;
dispose(): void;
hasErrors(): boolean;
getErrors(): Map<string>;
}
}
declare module spine { declare module spine {
class Skeleton { class Skeleton {
data: SkeletonData; data: SkeletonData;
@ -1267,7 +1258,7 @@ declare module spine {
} }
declare module spine.canvas { declare module spine.canvas {
class AssetManager extends spine.AssetManager { class AssetManager extends spine.AssetManager {
constructor(pathPrefix?: string); constructor(pathPrefix?: string, downloader?: Downloader);
} }
} }
declare module spine.canvas { declare module spine.canvas {

473
spine-ts/build/spine-canvas.js
View File

@ -2756,134 +2756,113 @@ var spine;
var spine; var spine;
(function (spine) { (function (spine) {
var AssetManager = (function () { var AssetManager = (function () {
function AssetManager(textureLoader, pathPrefix) { function AssetManager(textureLoader, pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
this.assets = {}; this.assets = {};
this.errors = {}; this.errors = {};
this.toLoad = 0; this.toLoad = 0;
this.loaded = 0; this.loaded = 0;
this.rawDataUris = {};
this.textureLoader = textureLoader; this.textureLoader = textureLoader;
this.pathPrefix = pathPrefix; this.pathPrefix = pathPrefix;
this.downloader = downloader || new Downloader();
} }
AssetManager.prototype.downloadText = function (url, success, error) { AssetManager.prototype.start = function (path) {
var request = new XMLHttpRequest(); this.toLoad++;
request.overrideMimeType("text/html"); return this.pathPrefix + path;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
request.open("GET", url, true);
request.onload = function () {
if (request.status == 200) {
success(request.responseText);
}
else {
error(request.status, request.responseText);
}
}; };
request.onerror = function () { AssetManager.prototype.success = function (callback, path, asset) {
error(request.status, request.responseText); this.toLoad--;
this.loaded++;
this.assets[path] = asset;
if (callback)
callback(path, asset);
}; };
request.send(); AssetManager.prototype.error = function (callback, path, message) {
}; this.toLoad--;
AssetManager.prototype.downloadBinary = function (url, success, error) { this.loaded++;
var request = new XMLHttpRequest(); this.errors[path] = message;
if (this.rawDataUris[url]) if (callback)
url = this.rawDataUris[url]; callback(path, message);
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function () {
if (request.status == 200) {
success(new Uint8Array(request.response));
}
else {
error(request.status, request.responseText);
}
};
request.onerror = function () {
error(request.status, request.responseText);
};
request.send();
}; };
AssetManager.prototype.setRawDataURI = function (path, data) { AssetManager.prototype.setRawDataURI = function (path, data) {
this.rawDataUris[this.pathPrefix + path] = data; this.downloader.rawDataUris[this.pathPrefix + path] = data;
}; };
AssetManager.prototype.loadBinary = function (path, success, error) { AssetManager.prototype.loadBinary = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadBinary(path, function (data) {
this.downloadBinary(path, function (data) { _this.success(success, path, data);
_this.assets[path] = data; }, function (status, responseText) {
if (success) _this.error(error, path, "Couldn't load binary " + path + ": status " + status + ", " + responseText);
success(path, data);
_this.toLoad--;
_this.loaded++;
}, function (state, responseText) {
_this.errors[path] = "Couldn't load binary " + path + ": status " + status + ", " + responseText;
if (error)
error(path, "Couldn't load binary " + path + ": status " + status + ", " + responseText);
_this.toLoad--;
_this.loaded++;
}); });
}; };
AssetManager.prototype.loadText = function (path, success, error) { AssetManager.prototype.loadText = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadText(path, function (data) {
this.downloadText(path, function (data) { _this.success(success, path, data);
_this.assets[path] = data; }, function (status, responseText) {
if (success) _this.error(error, path, "Couldn't load text " + path + ": status " + status + ", " + responseText);
success(path, data); });
_this.toLoad--; };
_this.loaded++; AssetManager.prototype.loadJson = function (path, success, error) {
}, function (state, responseText) { var _this = this;
_this.errors[path] = "Couldn't load text " + path + ": status " + status + ", " + responseText; if (success === void 0) { success = null; }
if (error) if (error === void 0) { error = null; }
error(path, "Couldn't load text " + path + ": status " + status + ", " + responseText); path = this.start(path);
_this.toLoad--; this.downloader.downloadJson(path, function (data) {
_this.loaded++; _this.success(success, path, data);
}, function (status, responseText) {
_this.error(error, path, "Couldn't load JSON " + path + ": status " + status + ", " + responseText);
}); });
}; };
AssetManager.prototype.loadTexture = function (path, success, error) { AssetManager.prototype.loadTexture = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
var storagePath = path; var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
this.toLoad++; var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
var img = new Image(); if (isWebWorker) {
img.crossOrigin = "anonymous"; fetch(path, { mode: "cors" }).then(function (response) {
img.onload = function (ev) { if (response.ok)
var texture = _this.textureLoader(img); return response.blob();
_this.assets[storagePath] = texture; _this.error(error, path, "Couldn't load image: " + path);
_this.toLoad--; return null;
_this.loaded++; }).then(function (blob) {
if (success) return blob ? createImageBitmap(blob, { premultiplyAlpha: "none", colorSpaceConversion: "none" }) : null;
success(path, img); }).then(function (bitmap) {
if (bitmap)
_this.success(success, path, _this.textureLoader(bitmap));
});
}
else {
var image_1 = new Image();
image_1.crossOrigin = "anonymous";
image_1.onload = function () {
_this.success(success, path, _this.textureLoader(image_1));
}; };
img.onerror = function (ev) { image_1.onerror = function () {
_this.errors[path] = "Couldn't load image " + path; _this.error(error, path, "Couldn't load image: " + path);
_this.toLoad--;
_this.loaded++;
if (error)
error(path, "Couldn't load image " + path);
}; };
if (this.rawDataUris[path]) if (this.downloader.rawDataUris[path])
path = this.rawDataUris[path]; path = this.downloader.rawDataUris[path];
img.src = path; image_1.src = path;
}
}; };
AssetManager.prototype.loadTextureAtlas = function (path, success, error) { AssetManager.prototype.loadTextureAtlas = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : ""; var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : "";
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadText(path, function (atlasData) {
this.downloadText(path, function (atlasData) { var pagesLoaded = 0;
var pagesLoaded = { count: 0 };
var atlasPages = new Array(); var atlasPages = new Array();
try { try {
var atlas = new spine.TextureAtlas(atlasData, function (path) { var atlas = new spine.TextureAtlas(atlasData, function (path) {
@ -2893,83 +2872,52 @@ var spine;
image.height = 16; image.height = 16;
return new spine.FakeTexture(image); return new spine.FakeTexture(image);
}); });
}
catch (e) {
var ex = e;
_this.errors[path] = "Couldn't load texture atlas " + path + ": " + ex.message;
if (error)
error(path, "Couldn't load texture atlas " + path + ": " + ex.message);
_this.toLoad--;
_this.loaded++;
return;
}
var _loop_1 = function (atlasPage) { var _loop_1 = function (atlasPage) {
var pageLoadError = false; var pageLoadError = false;
_this.loadTexture(atlasPage, function (imagePath, image) { _this.loadTexture(atlasPage, function (imagePath, image) {
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded.count == atlasPages.length) { if (pagesLoaded == atlasPages.length) {
if (!pageLoadError) { if (!pageLoadError) {
try { try {
var atlas = new spine.TextureAtlas(atlasData, function (path) { _this.success(success, path, new spine.TextureAtlas(atlasData, function (path) {
return _this.get(parent == "" ? path : parent + "/" + path); return _this.get(parent == "" ? path : parent + "/" + path);
}); }));
_this.assets[path] = atlas;
if (success)
success(path, atlas);
_this.toLoad--;
_this.loaded++;
} }
catch (e) { catch (e) {
var ex = e; _this.error(error, path, "Couldn't load texture atlas " + path + ": " + e.message);
_this.errors[path] = "Couldn't load texture atlas " + path + ": " + ex.message;
if (error)
error(path, "Couldn't load texture atlas " + path + ": " + ex.message);
_this.toLoad--;
_this.loaded++;
} }
} }
else { else
_this.errors[path] = "Couldn't load texture atlas page " + imagePath + "} of atlas " + path; _this.error(error, path, "Couldn't load texture atlas " + path + " page: " + imagePath);
if (error)
error(path, "Couldn't load texture atlas page " + imagePath + " of atlas " + path);
_this.toLoad--;
_this.loaded++;
}
} }
}, function (imagePath, errorMessage) { }, function (imagePath, errorMessage) {
pageLoadError = true; pageLoadError = true;
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded.count == atlasPages.length) { if (pagesLoaded == atlasPages.length)
_this.errors[path] = "Couldn't load texture atlas page " + imagePath + "} of atlas " + path; _this.error(error, path, "Couldn't load texture atlas " + path + " page: " + imagePath);
if (error)
error(path, "Couldn't load texture atlas page " + imagePath + " of atlas " + path);
_this.toLoad--;
_this.loaded++;
}
}); });
}; };
for (var _i = 0, atlasPages_1 = atlasPages; _i < atlasPages_1.length; _i++) { for (var _i = 0, atlasPages_1 = atlasPages; _i < atlasPages_1.length; _i++) {
var atlasPage = atlasPages_1[_i]; var atlasPage = atlasPages_1[_i];
_loop_1(atlasPage); _loop_1(atlasPage);
} }
}, function (state, responseText) { }
_this.errors[path] = "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText; catch (e) {
if (error) _this.error(error, path, "Couldn't load texture atlas " + path + ": " + e.message);
error(path, "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText); }
_this.toLoad--; }, function (status, responseText) {
_this.loaded++; _this.error(error, path, "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText);
}); });
}; };
AssetManager.prototype.get = function (path) { AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path; return this.assets[this.pathPrefix + path];
return this.assets[path];
}; };
AssetManager.prototype.remove = function (path) { AssetManager.prototype.remove = function (path) {
path = this.pathPrefix + path; path = this.pathPrefix + path;
var asset = this.assets[path]; var asset = this.assets[path];
if (asset.dispose) if (asset.dispose)
asset.dispose(); asset.dispose();
this.assets[path] = null; delete this.assets[path];
}; };
AssetManager.prototype.removeAll = function () { AssetManager.prototype.removeAll = function () {
for (var key in this.assets) { for (var key in this.assets) {
@ -3000,6 +2948,74 @@ var spine;
return AssetManager; return AssetManager;
}()); }());
spine.AssetManager = AssetManager; spine.AssetManager = AssetManager;
var Downloader = (function () {
function Downloader() {
this.callbacks = {};
this.rawDataUris = {};
}
Downloader.prototype.downloadText = function (url, success, error) {
var _this = this;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
if (this.start(url, success, error))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.open("GET", url, true);
var done = function () {
_this.finish(url, request.status, request.responseText);
};
request.onload = done;
request.onerror = done;
request.send();
};
Downloader.prototype.downloadJson = function (url, success, error) {
this.downloadText(url, function (data) {
success(JSON.parse(data));
}, error);
};
Downloader.prototype.downloadBinary = function (url, success, error) {
var _this = this;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
if (this.start(url, success, error))
return;
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
var onerror = function () {
_this.finish(url, request.status, request.responseText);
};
request.onload = function () {
if (request.status == 200)
_this.finish(url, 200, new Uint8Array(request.response));
else
onerror();
};
request.onerror = onerror;
request.send();
};
Downloader.prototype.start = function (url, success, error) {
var callbacks = this.callbacks[url];
try {
if (callbacks)
return true;
this.callbacks[url] = callbacks = [];
}
finally {
callbacks.push(success, error);
}
};
Downloader.prototype.finish = function (url, status, data) {
var callbacks = this.callbacks[url];
delete this.callbacks[url];
var args = status == 200 ? [data] : [status, data];
for (var i = args.length - 1, n = callbacks.length; i < n; i += 2)
callbacks[i].apply(null, args);
};
return Downloader;
}());
spine.Downloader = Downloader;
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) { (function (spine) {
@ -4088,178 +4104,6 @@ var spine;
})(RotateMode = spine.RotateMode || (spine.RotateMode = {})); })(RotateMode = spine.RotateMode || (spine.RotateMode = {}));
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) {
var Assets = (function () {
function Assets(clientId) {
this.toLoad = new Array();
this.assets = {};
this.clientId = clientId;
}
Assets.prototype.loaded = function () {
var i = 0;
for (var v in this.assets)
i++;
return i;
};
return Assets;
}());
var SharedAssetManager = (function () {
function SharedAssetManager(pathPrefix) {
if (pathPrefix === void 0) { pathPrefix = ""; }
this.clientAssets = {};
this.queuedAssets = {};
this.rawAssets = {};
this.errors = {};
this.pathPrefix = pathPrefix;
}
SharedAssetManager.prototype.queueAsset = function (clientId, textureLoader, path) {
var clientAssets = this.clientAssets[clientId];
if (!clientAssets) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader)
clientAssets.textureLoader = textureLoader;
clientAssets.toLoad.push(path);
if (this.queuedAssets[path] === path) {
return false;
}
else {
this.queuedAssets[path] = path;
return true;
}
};
SharedAssetManager.prototype.loadText = function (clientId, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
_this.rawAssets[path] = request.responseText;
}
else {
_this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
}
}
};
request.open("GET", path, true);
request.send();
};
SharedAssetManager.prototype.loadJson = function (clientId, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
_this.rawAssets[path] = JSON.parse(request.responseText);
}
else {
_this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
}
}
};
request.open("GET", path, true);
request.send();
};
SharedAssetManager.prototype.loadTexture = function (clientId, textureLoader, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, textureLoader, path))
return;
var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
if (isWebWorker) {
var options = { mode: "cors" };
fetch(path, options).then(function (response) {
if (!response.ok) {
_this.errors[path] = "Couldn't load image " + path;
}
return response.blob();
}).then(function (blob) {
return createImageBitmap(blob, {
premultiplyAlpha: 'none',
colorSpaceConversion: 'none'
});
}).then(function (bitmap) {
_this.rawAssets[path] = bitmap;
});
}
else {
var img_1 = new Image();
img_1.crossOrigin = "anonymous";
img_1.onload = function (ev) {
_this.rawAssets[path] = img_1;
};
img_1.onerror = function (ev) {
_this.errors[path] = "Couldn't load image " + path;
};
img_1.src = path;
}
};
SharedAssetManager.prototype.get = function (clientId, path) {
path = this.pathPrefix + path;
var clientAssets = this.clientAssets[clientId];
if (!clientAssets)
return true;
return clientAssets.assets[path];
};
SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
for (var i = 0; i < clientAssets.toLoad.length; i++) {
var path = clientAssets.toLoad[i];
var asset = clientAssets.assets[path];
if (!asset) {
var rawAsset = this.rawAssets[path];
if (!rawAsset)
continue;
if (isWebWorker) {
if (rawAsset instanceof ImageBitmap) {
clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
}
else {
clientAssets.assets[path] = rawAsset;
}
}
else {
if (rawAsset instanceof HTMLImageElement) {
clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
}
else {
clientAssets.assets[path] = rawAsset;
}
}
}
}
};
SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
var clientAssets = this.clientAssets[clientId];
if (!clientAssets)
return true;
this.updateClientAssets(clientAssets);
return clientAssets.toLoad.length == clientAssets.loaded();
};
SharedAssetManager.prototype.dispose = function () {
};
SharedAssetManager.prototype.hasErrors = function () {
return Object.keys(this.errors).length > 0;
};
SharedAssetManager.prototype.getErrors = function () {
return this.errors;
};
return SharedAssetManager;
}());
spine.SharedAssetManager = SharedAssetManager;
})(spine || (spine = {}));
var spine;
(function (spine) { (function (spine) {
var Skeleton = (function () { var Skeleton = (function () {
function Skeleton(data) { function Skeleton(data) {
@ -9152,9 +8996,10 @@ var spine;
(function (canvas) { (function (canvas) {
var AssetManager = (function (_super) { var AssetManager = (function (_super) {
__extends(AssetManager, _super); __extends(AssetManager, _super);
function AssetManager(pathPrefix) { function AssetManager(pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
return _super.call(this, function (image) { return new spine.canvas.CanvasTexture(image); }, pathPrefix) || this; if (downloader === void 0) { downloader = null; }
return _super.call(this, function (image) { return new spine.canvas.CanvasTexture(image); }, pathPrefix, downloader) || this;
} }
return AssetManager; return AssetManager;
}(spine.AssetManager)); }(spine.AssetManager));

2
spine-ts/build/spine-canvas.js.map
View File

File diff suppressed because one or more lines are too long

47
spine-ts/build/spine-core.d.ts vendored
View File

@ -346,19 +346,21 @@ declare module spine {
class AssetManager implements Disposable { class AssetManager implements Disposable {
private pathPrefix; private pathPrefix;
private textureLoader; private textureLoader;
private downloader;
private assets; private assets;
private errors; private errors;
private toLoad; private toLoad;
private loaded; private loaded;
private rawDataUris; constructor(textureLoader: (image: HTMLImageElement | ImageBitmap) => any, pathPrefix?: string, downloader?: Downloader);
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string); private start;
private downloadText; private success;
private downloadBinary; private error;
setRawDataURI(path: string, data: string): void; setRawDataURI(path: string, data: string): void;
loadBinary(path: string, success?: (path: string, binary: Uint8Array) => void, error?: (path: string, error: string) => void): void; loadBinary(path: string, success?: (path: string, binary: Uint8Array) => void, error?: (path: string, message: string) => void): void;
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void; loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, message: string) => void): void;
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void; loadJson(path: string, success?: (path: string, object: object) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, error: string) => void): void; loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void;
get(path: string): any; get(path: string): any;
remove(path: string): void; remove(path: string): void;
removeAll(): void; removeAll(): void;
@ -369,6 +371,15 @@ declare module spine {
hasErrors(): boolean; hasErrors(): boolean;
getErrors(): Map<string>; getErrors(): Map<string>;
} }
class Downloader {
private callbacks;
rawDataUris: Map<string>;
downloadText(url: string, success: (data: string) => void, error: (status: number, responseText: string) => void): void;
downloadJson(url: string, success: (data: object) => void, error: (status: number, responseText: string) => void): void;
downloadBinary(url: string, success: (data: Uint8Array) => void, error: (status: number, responseText: string) => void): void;
private start;
private finish;
}
} }
declare module spine { declare module spine {
class AtlasAttachmentLoader implements AttachmentLoader { class AtlasAttachmentLoader implements AttachmentLoader {
@ -578,26 +589,6 @@ declare module spine {
ChainScale = 2 ChainScale = 2
} }
} }
declare module spine {
class SharedAssetManager implements Disposable {
private pathPrefix;
private clientAssets;
private queuedAssets;
private rawAssets;
private errors;
constructor(pathPrefix?: string);
private queueAsset;
loadText(clientId: string, path: string): void;
loadJson(clientId: string, path: string): void;
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
get(clientId: string, path: string): any;
private updateClientAssets;
isLoadingComplete(clientId: string): boolean;
dispose(): void;
hasErrors(): boolean;
getErrors(): Map<string>;
}
}
declare module spine { declare module spine {
class Skeleton { class Skeleton {
data: SkeletonData; data: SkeletonData;

468
spine-ts/build/spine-core.js
View File

@ -2756,134 +2756,113 @@ var spine;
var spine; var spine;
(function (spine) { (function (spine) {
var AssetManager = (function () { var AssetManager = (function () {
function AssetManager(textureLoader, pathPrefix) { function AssetManager(textureLoader, pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
this.assets = {}; this.assets = {};
this.errors = {}; this.errors = {};
this.toLoad = 0; this.toLoad = 0;
this.loaded = 0; this.loaded = 0;
this.rawDataUris = {};
this.textureLoader = textureLoader; this.textureLoader = textureLoader;
this.pathPrefix = pathPrefix; this.pathPrefix = pathPrefix;
this.downloader = downloader || new Downloader();
} }
AssetManager.prototype.downloadText = function (url, success, error) { AssetManager.prototype.start = function (path) {
var request = new XMLHttpRequest(); this.toLoad++;
request.overrideMimeType("text/html"); return this.pathPrefix + path;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
request.open("GET", url, true);
request.onload = function () {
if (request.status == 200) {
success(request.responseText);
}
else {
error(request.status, request.responseText);
}
}; };
request.onerror = function () { AssetManager.prototype.success = function (callback, path, asset) {
error(request.status, request.responseText); this.toLoad--;
this.loaded++;
this.assets[path] = asset;
if (callback)
callback(path, asset);
}; };
request.send(); AssetManager.prototype.error = function (callback, path, message) {
}; this.toLoad--;
AssetManager.prototype.downloadBinary = function (url, success, error) { this.loaded++;
var request = new XMLHttpRequest(); this.errors[path] = message;
if (this.rawDataUris[url]) if (callback)
url = this.rawDataUris[url]; callback(path, message);
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function () {
if (request.status == 200) {
success(new Uint8Array(request.response));
}
else {
error(request.status, request.responseText);
}
};
request.onerror = function () {
error(request.status, request.responseText);
};
request.send();
}; };
AssetManager.prototype.setRawDataURI = function (path, data) { AssetManager.prototype.setRawDataURI = function (path, data) {
this.rawDataUris[this.pathPrefix + path] = data; this.downloader.rawDataUris[this.pathPrefix + path] = data;
}; };
AssetManager.prototype.loadBinary = function (path, success, error) { AssetManager.prototype.loadBinary = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadBinary(path, function (data) {
this.downloadBinary(path, function (data) { _this.success(success, path, data);
_this.assets[path] = data; }, function (status, responseText) {
if (success) _this.error(error, path, "Couldn't load binary " + path + ": status " + status + ", " + responseText);
success(path, data);
_this.toLoad--;
_this.loaded++;
}, function (state, responseText) {
_this.errors[path] = "Couldn't load binary " + path + ": status " + status + ", " + responseText;
if (error)
error(path, "Couldn't load binary " + path + ": status " + status + ", " + responseText);
_this.toLoad--;
_this.loaded++;
}); });
}; };
AssetManager.prototype.loadText = function (path, success, error) { AssetManager.prototype.loadText = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadText(path, function (data) {
this.downloadText(path, function (data) { _this.success(success, path, data);
_this.assets[path] = data; }, function (status, responseText) {
if (success) _this.error(error, path, "Couldn't load text " + path + ": status " + status + ", " + responseText);
success(path, data); });
_this.toLoad--; };
_this.loaded++; AssetManager.prototype.loadJson = function (path, success, error) {
}, function (state, responseText) { var _this = this;
_this.errors[path] = "Couldn't load text " + path + ": status " + status + ", " + responseText; if (success === void 0) { success = null; }
if (error) if (error === void 0) { error = null; }
error(path, "Couldn't load text " + path + ": status " + status + ", " + responseText); path = this.start(path);
_this.toLoad--; this.downloader.downloadJson(path, function (data) {
_this.loaded++; _this.success(success, path, data);
}, function (status, responseText) {
_this.error(error, path, "Couldn't load JSON " + path + ": status " + status + ", " + responseText);
}); });
}; };
AssetManager.prototype.loadTexture = function (path, success, error) { AssetManager.prototype.loadTexture = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
var storagePath = path; var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
this.toLoad++; var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
var img = new Image(); if (isWebWorker) {
img.crossOrigin = "anonymous"; fetch(path, { mode: "cors" }).then(function (response) {
img.onload = function (ev) { if (response.ok)
var texture = _this.textureLoader(img); return response.blob();
_this.assets[storagePath] = texture; _this.error(error, path, "Couldn't load image: " + path);
_this.toLoad--; return null;
_this.loaded++; }).then(function (blob) {
if (success) return blob ? createImageBitmap(blob, { premultiplyAlpha: "none", colorSpaceConversion: "none" }) : null;
success(path, img); }).then(function (bitmap) {
if (bitmap)
_this.success(success, path, _this.textureLoader(bitmap));
});
}
else {
var image_1 = new Image();
image_1.crossOrigin = "anonymous";
image_1.onload = function () {
_this.success(success, path, _this.textureLoader(image_1));
}; };
img.onerror = function (ev) { image_1.onerror = function () {
_this.errors[path] = "Couldn't load image " + path; _this.error(error, path, "Couldn't load image: " + path);
_this.toLoad--;
_this.loaded++;
if (error)
error(path, "Couldn't load image " + path);
}; };
if (this.rawDataUris[path]) if (this.downloader.rawDataUris[path])
path = this.rawDataUris[path]; path = this.downloader.rawDataUris[path];
img.src = path; image_1.src = path;
}
}; };
AssetManager.prototype.loadTextureAtlas = function (path, success, error) { AssetManager.prototype.loadTextureAtlas = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : ""; var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : "";
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadText(path, function (atlasData) {
this.downloadText(path, function (atlasData) { var pagesLoaded = 0;
var pagesLoaded = { count: 0 };
var atlasPages = new Array(); var atlasPages = new Array();
try { try {
var atlas = new spine.TextureAtlas(atlasData, function (path) { var atlas = new spine.TextureAtlas(atlasData, function (path) {
@ -2893,83 +2872,52 @@ var spine;
image.height = 16; image.height = 16;
return new spine.FakeTexture(image); return new spine.FakeTexture(image);
}); });
}
catch (e) {
var ex = e;
_this.errors[path] = "Couldn't load texture atlas " + path + ": " + ex.message;
if (error)
error(path, "Couldn't load texture atlas " + path + ": " + ex.message);
_this.toLoad--;
_this.loaded++;
return;
}
var _loop_1 = function (atlasPage) { var _loop_1 = function (atlasPage) {
var pageLoadError = false; var pageLoadError = false;
_this.loadTexture(atlasPage, function (imagePath, image) { _this.loadTexture(atlasPage, function (imagePath, image) {
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded.count == atlasPages.length) { if (pagesLoaded == atlasPages.length) {
if (!pageLoadError) { if (!pageLoadError) {
try { try {
var atlas = new spine.TextureAtlas(atlasData, function (path) { _this.success(success, path, new spine.TextureAtlas(atlasData, function (path) {
return _this.get(parent == "" ? path : parent + "/" + path); return _this.get(parent == "" ? path : parent + "/" + path);
}); }));
_this.assets[path] = atlas;
if (success)
success(path, atlas);
_this.toLoad--;
_this.loaded++;
} }
catch (e) { catch (e) {
var ex = e; _this.error(error, path, "Couldn't load texture atlas " + path + ": " + e.message);
_this.errors[path] = "Couldn't load texture atlas " + path + ": " + ex.message;
if (error)
error(path, "Couldn't load texture atlas " + path + ": " + ex.message);
_this.toLoad--;
_this.loaded++;
} }
} }
else { else
_this.errors[path] = "Couldn't load texture atlas page " + imagePath + "} of atlas " + path; _this.error(error, path, "Couldn't load texture atlas " + path + " page: " + imagePath);
if (error)
error(path, "Couldn't load texture atlas page " + imagePath + " of atlas " + path);
_this.toLoad--;
_this.loaded++;
}
} }
}, function (imagePath, errorMessage) { }, function (imagePath, errorMessage) {
pageLoadError = true; pageLoadError = true;
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded.count == atlasPages.length) { if (pagesLoaded == atlasPages.length)
_this.errors[path] = "Couldn't load texture atlas page " + imagePath + "} of atlas " + path; _this.error(error, path, "Couldn't load texture atlas " + path + " page: " + imagePath);
if (error)
error(path, "Couldn't load texture atlas page " + imagePath + " of atlas " + path);
_this.toLoad--;
_this.loaded++;
}
}); });
}; };
for (var _i = 0, atlasPages_1 = atlasPages; _i < atlasPages_1.length; _i++) { for (var _i = 0, atlasPages_1 = atlasPages; _i < atlasPages_1.length; _i++) {
var atlasPage = atlasPages_1[_i]; var atlasPage = atlasPages_1[_i];
_loop_1(atlasPage); _loop_1(atlasPage);
} }
}, function (state, responseText) { }
_this.errors[path] = "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText; catch (e) {
if (error) _this.error(error, path, "Couldn't load texture atlas " + path + ": " + e.message);
error(path, "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText); }
_this.toLoad--; }, function (status, responseText) {
_this.loaded++; _this.error(error, path, "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText);
}); });
}; };
AssetManager.prototype.get = function (path) { AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path; return this.assets[this.pathPrefix + path];
return this.assets[path];
}; };
AssetManager.prototype.remove = function (path) { AssetManager.prototype.remove = function (path) {
path = this.pathPrefix + path; path = this.pathPrefix + path;
var asset = this.assets[path]; var asset = this.assets[path];
if (asset.dispose) if (asset.dispose)
asset.dispose(); asset.dispose();
this.assets[path] = null; delete this.assets[path];
}; };
AssetManager.prototype.removeAll = function () { AssetManager.prototype.removeAll = function () {
for (var key in this.assets) { for (var key in this.assets) {
@ -3000,6 +2948,74 @@ var spine;
return AssetManager; return AssetManager;
}()); }());
spine.AssetManager = AssetManager; spine.AssetManager = AssetManager;
var Downloader = (function () {
function Downloader() {
this.callbacks = {};
this.rawDataUris = {};
}
Downloader.prototype.downloadText = function (url, success, error) {
var _this = this;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
if (this.start(url, success, error))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.open("GET", url, true);
var done = function () {
_this.finish(url, request.status, request.responseText);
};
request.onload = done;
request.onerror = done;
request.send();
};
Downloader.prototype.downloadJson = function (url, success, error) {
this.downloadText(url, function (data) {
success(JSON.parse(data));
}, error);
};
Downloader.prototype.downloadBinary = function (url, success, error) {
var _this = this;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
if (this.start(url, success, error))
return;
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
var onerror = function () {
_this.finish(url, request.status, request.responseText);
};
request.onload = function () {
if (request.status == 200)
_this.finish(url, 200, new Uint8Array(request.response));
else
onerror();
};
request.onerror = onerror;
request.send();
};
Downloader.prototype.start = function (url, success, error) {
var callbacks = this.callbacks[url];
try {
if (callbacks)
return true;
this.callbacks[url] = callbacks = [];
}
finally {
callbacks.push(success, error);
}
};
Downloader.prototype.finish = function (url, status, data) {
var callbacks = this.callbacks[url];
delete this.callbacks[url];
var args = status == 200 ? [data] : [status, data];
for (var i = args.length - 1, n = callbacks.length; i < n; i += 2)
callbacks[i].apply(null, args);
};
return Downloader;
}());
spine.Downloader = Downloader;
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) { (function (spine) {
@ -4088,178 +4104,6 @@ var spine;
})(RotateMode = spine.RotateMode || (spine.RotateMode = {})); })(RotateMode = spine.RotateMode || (spine.RotateMode = {}));
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) {
var Assets = (function () {
function Assets(clientId) {
this.toLoad = new Array();
this.assets = {};
this.clientId = clientId;
}
Assets.prototype.loaded = function () {
var i = 0;
for (var v in this.assets)
i++;
return i;
};
return Assets;
}());
var SharedAssetManager = (function () {
function SharedAssetManager(pathPrefix) {
if (pathPrefix === void 0) { pathPrefix = ""; }
this.clientAssets = {};
this.queuedAssets = {};
this.rawAssets = {};
this.errors = {};
this.pathPrefix = pathPrefix;
}
SharedAssetManager.prototype.queueAsset = function (clientId, textureLoader, path) {
var clientAssets = this.clientAssets[clientId];
if (!clientAssets) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader)
clientAssets.textureLoader = textureLoader;
clientAssets.toLoad.push(path);
if (this.queuedAssets[path] === path) {
return false;
}
else {
this.queuedAssets[path] = path;
return true;
}
};
SharedAssetManager.prototype.loadText = function (clientId, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
_this.rawAssets[path] = request.responseText;
}
else {
_this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
}
}
};
request.open("GET", path, true);
request.send();
};
SharedAssetManager.prototype.loadJson = function (clientId, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
_this.rawAssets[path] = JSON.parse(request.responseText);
}
else {
_this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
}
}
};
request.open("GET", path, true);
request.send();
};
SharedAssetManager.prototype.loadTexture = function (clientId, textureLoader, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, textureLoader, path))
return;
var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
if (isWebWorker) {
var options = { mode: "cors" };
fetch(path, options).then(function (response) {
if (!response.ok) {
_this.errors[path] = "Couldn't load image " + path;
}
return response.blob();
}).then(function (blob) {
return createImageBitmap(blob, {
premultiplyAlpha: 'none',
colorSpaceConversion: 'none'
});
}).then(function (bitmap) {
_this.rawAssets[path] = bitmap;
});
}
else {
var img_1 = new Image();
img_1.crossOrigin = "anonymous";
img_1.onload = function (ev) {
_this.rawAssets[path] = img_1;
};
img_1.onerror = function (ev) {
_this.errors[path] = "Couldn't load image " + path;
};
img_1.src = path;
}
};
SharedAssetManager.prototype.get = function (clientId, path) {
path = this.pathPrefix + path;
var clientAssets = this.clientAssets[clientId];
if (!clientAssets)
return true;
return clientAssets.assets[path];
};
SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
for (var i = 0; i < clientAssets.toLoad.length; i++) {
var path = clientAssets.toLoad[i];
var asset = clientAssets.assets[path];
if (!asset) {
var rawAsset = this.rawAssets[path];
if (!rawAsset)
continue;
if (isWebWorker) {
if (rawAsset instanceof ImageBitmap) {
clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
}
else {
clientAssets.assets[path] = rawAsset;
}
}
else {
if (rawAsset instanceof HTMLImageElement) {
clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
}
else {
clientAssets.assets[path] = rawAsset;
}
}
}
}
};
SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
var clientAssets = this.clientAssets[clientId];
if (!clientAssets)
return true;
this.updateClientAssets(clientAssets);
return clientAssets.toLoad.length == clientAssets.loaded();
};
SharedAssetManager.prototype.dispose = function () {
};
SharedAssetManager.prototype.hasErrors = function () {
return Object.keys(this.errors).length > 0;
};
SharedAssetManager.prototype.getErrors = function () {
return this.errors;
};
return SharedAssetManager;
}());
spine.SharedAssetManager = SharedAssetManager;
})(spine || (spine = {}));
var spine;
(function (spine) { (function (spine) {
var Skeleton = (function () { var Skeleton = (function () {
function Skeleton(data) { function Skeleton(data) {

2
spine-ts/build/spine-core.js.map
View File

File diff suppressed because one or more lines are too long

52
spine-ts/build/spine-player.d.ts vendored
View File

@ -346,19 +346,21 @@ declare module spine {
class AssetManager implements Disposable { class AssetManager implements Disposable {
private pathPrefix; private pathPrefix;
private textureLoader; private textureLoader;
private downloader;
private assets; private assets;
private errors; private errors;
private toLoad; private toLoad;
private loaded; private loaded;
private rawDataUris; constructor(textureLoader: (image: HTMLImageElement | ImageBitmap) => any, pathPrefix?: string, downloader?: Downloader);
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string); private start;
private downloadText; private success;
private downloadBinary; private error;
setRawDataURI(path: string, data: string): void; setRawDataURI(path: string, data: string): void;
loadBinary(path: string, success?: (path: string, binary: Uint8Array) => void, error?: (path: string, error: string) => void): void; loadBinary(path: string, success?: (path: string, binary: Uint8Array) => void, error?: (path: string, message: string) => void): void;
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void; loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, message: string) => void): void;
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void; loadJson(path: string, success?: (path: string, object: object) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, error: string) => void): void; loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void;
get(path: string): any; get(path: string): any;
remove(path: string): void; remove(path: string): void;
removeAll(): void; removeAll(): void;
@ -369,6 +371,15 @@ declare module spine {
hasErrors(): boolean; hasErrors(): boolean;
getErrors(): Map<string>; getErrors(): Map<string>;
} }
class Downloader {
private callbacks;
rawDataUris: Map<string>;
downloadText(url: string, success: (data: string) => void, error: (status: number, responseText: string) => void): void;
downloadJson(url: string, success: (data: object) => void, error: (status: number, responseText: string) => void): void;
downloadBinary(url: string, success: (data: Uint8Array) => void, error: (status: number, responseText: string) => void): void;
private start;
private finish;
}
} }
declare module spine { declare module spine {
class AtlasAttachmentLoader implements AttachmentLoader { class AtlasAttachmentLoader implements AttachmentLoader {
@ -578,26 +589,6 @@ declare module spine {
ChainScale = 2 ChainScale = 2
} }
} }
declare module spine {
class SharedAssetManager implements Disposable {
private pathPrefix;
private clientAssets;
private queuedAssets;
private rawAssets;
private errors;
constructor(pathPrefix?: string);
private queueAsset;
loadText(clientId: string, path: string): void;
loadJson(clientId: string, path: string): void;
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
get(clientId: string, path: string): any;
private updateClientAssets;
isLoadingComplete(clientId: string): boolean;
dispose(): void;
hasErrors(): boolean;
getErrors(): Map<string>;
}
}
declare module spine { declare module spine {
class Skeleton { class Skeleton {
data: SkeletonData; data: SkeletonData;
@ -1267,7 +1258,7 @@ declare module spine {
} }
declare module spine.webgl { declare module spine.webgl {
class AssetManager extends spine.AssetManager { class AssetManager extends spine.AssetManager {
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string, downloader?: Downloader);
} }
} }
declare module spine.webgl { declare module spine.webgl {
@ -1716,6 +1707,7 @@ declare module spine {
} }
interface SpinePlayerConfig { interface SpinePlayerConfig {
jsonUrl: string; jsonUrl: string;
jsonField: string;
skelUrl: string; skelUrl: string;
atlasUrl: string; atlasUrl: string;
rawDataURIs: Map<string>; rawDataURIs: Map<string>;
@ -1762,6 +1754,7 @@ declare module spine {
controlBones: string[]; controlBones: string[];
success: (widget: SpinePlayer) => void; success: (widget: SpinePlayer) => void;
error: (widget: SpinePlayer, msg: string) => void; error: (widget: SpinePlayer, msg: string) => void;
downloader: spine.Downloader;
} }
class SpinePlayer { class SpinePlayer {
private config; private config;
@ -1780,6 +1773,7 @@ declare module spine {
private context; private context;
private loadingScreen; private loadingScreen;
private assetManager; private assetManager;
error: boolean;
loaded: boolean; loaded: boolean;
skeleton: Skeleton; skeleton: Skeleton;
animationState: AnimationState; animationState: AnimationState;

555
spine-ts/build/spine-player.js
View File

@ -2756,134 +2756,113 @@ var spine;
var spine; var spine;
(function (spine) { (function (spine) {
var AssetManager = (function () { var AssetManager = (function () {
function AssetManager(textureLoader, pathPrefix) { function AssetManager(textureLoader, pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
this.assets = {}; this.assets = {};
this.errors = {}; this.errors = {};
this.toLoad = 0; this.toLoad = 0;
this.loaded = 0; this.loaded = 0;
this.rawDataUris = {};
this.textureLoader = textureLoader; this.textureLoader = textureLoader;
this.pathPrefix = pathPrefix; this.pathPrefix = pathPrefix;
this.downloader = downloader || new Downloader();
} }
AssetManager.prototype.downloadText = function (url, success, error) { AssetManager.prototype.start = function (path) {
var request = new XMLHttpRequest(); this.toLoad++;
request.overrideMimeType("text/html"); return this.pathPrefix + path;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
request.open("GET", url, true);
request.onload = function () {
if (request.status == 200) {
success(request.responseText);
}
else {
error(request.status, request.responseText);
}
}; };
request.onerror = function () { AssetManager.prototype.success = function (callback, path, asset) {
error(request.status, request.responseText); this.toLoad--;
this.loaded++;
this.assets[path] = asset;
if (callback)
callback(path, asset);
}; };
request.send(); AssetManager.prototype.error = function (callback, path, message) {
}; this.toLoad--;
AssetManager.prototype.downloadBinary = function (url, success, error) { this.loaded++;
var request = new XMLHttpRequest(); this.errors[path] = message;
if (this.rawDataUris[url]) if (callback)
url = this.rawDataUris[url]; callback(path, message);
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function () {
if (request.status == 200) {
success(new Uint8Array(request.response));
}
else {
error(request.status, request.responseText);
}
};
request.onerror = function () {
error(request.status, request.responseText);
};
request.send();
}; };
AssetManager.prototype.setRawDataURI = function (path, data) { AssetManager.prototype.setRawDataURI = function (path, data) {
this.rawDataUris[this.pathPrefix + path] = data; this.downloader.rawDataUris[this.pathPrefix + path] = data;
}; };
AssetManager.prototype.loadBinary = function (path, success, error) { AssetManager.prototype.loadBinary = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadBinary(path, function (data) {
this.downloadBinary(path, function (data) { _this.success(success, path, data);
_this.assets[path] = data; }, function (status, responseText) {
if (success) _this.error(error, path, "Couldn't load binary " + path + ": status " + status + ", " + responseText);
success(path, data);
_this.toLoad--;
_this.loaded++;
}, function (state, responseText) {
_this.errors[path] = "Couldn't load binary " + path + ": status " + status + ", " + responseText;
if (error)
error(path, "Couldn't load binary " + path + ": status " + status + ", " + responseText);
_this.toLoad--;
_this.loaded++;
}); });
}; };
AssetManager.prototype.loadText = function (path, success, error) { AssetManager.prototype.loadText = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadText(path, function (data) {
this.downloadText(path, function (data) { _this.success(success, path, data);
_this.assets[path] = data; }, function (status, responseText) {
if (success) _this.error(error, path, "Couldn't load text " + path + ": status " + status + ", " + responseText);
success(path, data); });
_this.toLoad--; };
_this.loaded++; AssetManager.prototype.loadJson = function (path, success, error) {
}, function (state, responseText) { var _this = this;
_this.errors[path] = "Couldn't load text " + path + ": status " + status + ", " + responseText; if (success === void 0) { success = null; }
if (error) if (error === void 0) { error = null; }
error(path, "Couldn't load text " + path + ": status " + status + ", " + responseText); path = this.start(path);
_this.toLoad--; this.downloader.downloadJson(path, function (data) {
_this.loaded++; _this.success(success, path, data);
}, function (status, responseText) {
_this.error(error, path, "Couldn't load JSON " + path + ": status " + status + ", " + responseText);
}); });
}; };
AssetManager.prototype.loadTexture = function (path, success, error) { AssetManager.prototype.loadTexture = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
var storagePath = path; var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
this.toLoad++; var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
var img = new Image(); if (isWebWorker) {
img.crossOrigin = "anonymous"; fetch(path, { mode: "cors" }).then(function (response) {
img.onload = function (ev) { if (response.ok)
var texture = _this.textureLoader(img); return response.blob();
_this.assets[storagePath] = texture; _this.error(error, path, "Couldn't load image: " + path);
_this.toLoad--; return null;
_this.loaded++; }).then(function (blob) {
if (success) return blob ? createImageBitmap(blob, { premultiplyAlpha: "none", colorSpaceConversion: "none" }) : null;
success(path, img); }).then(function (bitmap) {
if (bitmap)
_this.success(success, path, _this.textureLoader(bitmap));
});
}
else {
var image_1 = new Image();
image_1.crossOrigin = "anonymous";
image_1.onload = function () {
_this.success(success, path, _this.textureLoader(image_1));
}; };
img.onerror = function (ev) { image_1.onerror = function () {
_this.errors[path] = "Couldn't load image " + path; _this.error(error, path, "Couldn't load image: " + path);
_this.toLoad--;
_this.loaded++;
if (error)
error(path, "Couldn't load image " + path);
}; };
if (this.rawDataUris[path]) if (this.downloader.rawDataUris[path])
path = this.rawDataUris[path]; path = this.downloader.rawDataUris[path];
img.src = path; image_1.src = path;
}
}; };
AssetManager.prototype.loadTextureAtlas = function (path, success, error) { AssetManager.prototype.loadTextureAtlas = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : ""; var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : "";
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadText(path, function (atlasData) {
this.downloadText(path, function (atlasData) { var pagesLoaded = 0;
var pagesLoaded = { count: 0 };
var atlasPages = new Array(); var atlasPages = new Array();
try { try {
var atlas = new spine.TextureAtlas(atlasData, function (path) { var atlas = new spine.TextureAtlas(atlasData, function (path) {
@ -2893,83 +2872,52 @@ var spine;
image.height = 16; image.height = 16;
return new spine.FakeTexture(image); return new spine.FakeTexture(image);
}); });
}
catch (e) {
var ex = e;
_this.errors[path] = "Couldn't load texture atlas " + path + ": " + ex.message;
if (error)
error(path, "Couldn't load texture atlas " + path + ": " + ex.message);
_this.toLoad--;
_this.loaded++;
return;
}
var _loop_1 = function (atlasPage) { var _loop_1 = function (atlasPage) {
var pageLoadError = false; var pageLoadError = false;
_this.loadTexture(atlasPage, function (imagePath, image) { _this.loadTexture(atlasPage, function (imagePath, image) {
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded.count == atlasPages.length) { if (pagesLoaded == atlasPages.length) {
if (!pageLoadError) { if (!pageLoadError) {
try { try {
var atlas = new spine.TextureAtlas(atlasData, function (path) { _this.success(success, path, new spine.TextureAtlas(atlasData, function (path) {
return _this.get(parent == "" ? path : parent + "/" + path); return _this.get(parent == "" ? path : parent + "/" + path);
}); }));
_this.assets[path] = atlas;
if (success)
success(path, atlas);
_this.toLoad--;
_this.loaded++;
} }
catch (e) { catch (e) {
var ex = e; _this.error(error, path, "Couldn't load texture atlas " + path + ": " + e.message);
_this.errors[path] = "Couldn't load texture atlas " + path + ": " + ex.message;
if (error)
error(path, "Couldn't load texture atlas " + path + ": " + ex.message);
_this.toLoad--;
_this.loaded++;
} }
} }
else { else
_this.errors[path] = "Couldn't load texture atlas page " + imagePath + "} of atlas " + path; _this.error(error, path, "Couldn't load texture atlas " + path + " page: " + imagePath);
if (error)
error(path, "Couldn't load texture atlas page " + imagePath + " of atlas " + path);
_this.toLoad--;
_this.loaded++;
}
} }
}, function (imagePath, errorMessage) { }, function (imagePath, errorMessage) {
pageLoadError = true; pageLoadError = true;
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded.count == atlasPages.length) { if (pagesLoaded == atlasPages.length)
_this.errors[path] = "Couldn't load texture atlas page " + imagePath + "} of atlas " + path; _this.error(error, path, "Couldn't load texture atlas " + path + " page: " + imagePath);
if (error)
error(path, "Couldn't load texture atlas page " + imagePath + " of atlas " + path);
_this.toLoad--;
_this.loaded++;
}
}); });
}; };
for (var _i = 0, atlasPages_1 = atlasPages; _i < atlasPages_1.length; _i++) { for (var _i = 0, atlasPages_1 = atlasPages; _i < atlasPages_1.length; _i++) {
var atlasPage = atlasPages_1[_i]; var atlasPage = atlasPages_1[_i];
_loop_1(atlasPage); _loop_1(atlasPage);
} }
}, function (state, responseText) { }
_this.errors[path] = "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText; catch (e) {
if (error) _this.error(error, path, "Couldn't load texture atlas " + path + ": " + e.message);
error(path, "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText); }
_this.toLoad--; }, function (status, responseText) {
_this.loaded++; _this.error(error, path, "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText);
}); });
}; };
AssetManager.prototype.get = function (path) { AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path; return this.assets[this.pathPrefix + path];
return this.assets[path];
}; };
AssetManager.prototype.remove = function (path) { AssetManager.prototype.remove = function (path) {
path = this.pathPrefix + path; path = this.pathPrefix + path;
var asset = this.assets[path]; var asset = this.assets[path];
if (asset.dispose) if (asset.dispose)
asset.dispose(); asset.dispose();
this.assets[path] = null; delete this.assets[path];
}; };
AssetManager.prototype.removeAll = function () { AssetManager.prototype.removeAll = function () {
for (var key in this.assets) { for (var key in this.assets) {
@ -3000,6 +2948,74 @@ var spine;
return AssetManager; return AssetManager;
}()); }());
spine.AssetManager = AssetManager; spine.AssetManager = AssetManager;
var Downloader = (function () {
function Downloader() {
this.callbacks = {};
this.rawDataUris = {};
}
Downloader.prototype.downloadText = function (url, success, error) {
var _this = this;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
if (this.start(url, success, error))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.open("GET", url, true);
var done = function () {
_this.finish(url, request.status, request.responseText);
};
request.onload = done;
request.onerror = done;
request.send();
};
Downloader.prototype.downloadJson = function (url, success, error) {
this.downloadText(url, function (data) {
success(JSON.parse(data));
}, error);
};
Downloader.prototype.downloadBinary = function (url, success, error) {
var _this = this;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
if (this.start(url, success, error))
return;
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
var onerror = function () {
_this.finish(url, request.status, request.responseText);
};
request.onload = function () {
if (request.status == 200)
_this.finish(url, 200, new Uint8Array(request.response));
else
onerror();
};
request.onerror = onerror;
request.send();
};
Downloader.prototype.start = function (url, success, error) {
var callbacks = this.callbacks[url];
try {
if (callbacks)
return true;
this.callbacks[url] = callbacks = [];
}
finally {
callbacks.push(success, error);
}
};
Downloader.prototype.finish = function (url, status, data) {
var callbacks = this.callbacks[url];
delete this.callbacks[url];
var args = status == 200 ? [data] : [status, data];
for (var i = args.length - 1, n = callbacks.length; i < n; i += 2)
callbacks[i].apply(null, args);
};
return Downloader;
}());
spine.Downloader = Downloader;
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) { (function (spine) {
@ -4088,178 +4104,6 @@ var spine;
})(RotateMode = spine.RotateMode || (spine.RotateMode = {})); })(RotateMode = spine.RotateMode || (spine.RotateMode = {}));
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) {
var Assets = (function () {
function Assets(clientId) {
this.toLoad = new Array();
this.assets = {};
this.clientId = clientId;
}
Assets.prototype.loaded = function () {
var i = 0;
for (var v in this.assets)
i++;
return i;
};
return Assets;
}());
var SharedAssetManager = (function () {
function SharedAssetManager(pathPrefix) {
if (pathPrefix === void 0) { pathPrefix = ""; }
this.clientAssets = {};
this.queuedAssets = {};
this.rawAssets = {};
this.errors = {};
this.pathPrefix = pathPrefix;
}
SharedAssetManager.prototype.queueAsset = function (clientId, textureLoader, path) {
var clientAssets = this.clientAssets[clientId];
if (!clientAssets) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader)
clientAssets.textureLoader = textureLoader;
clientAssets.toLoad.push(path);
if (this.queuedAssets[path] === path) {
return false;
}
else {
this.queuedAssets[path] = path;
return true;
}
};
SharedAssetManager.prototype.loadText = function (clientId, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
_this.rawAssets[path] = request.responseText;
}
else {
_this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
}
}
};
request.open("GET", path, true);
request.send();
};
SharedAssetManager.prototype.loadJson = function (clientId, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
_this.rawAssets[path] = JSON.parse(request.responseText);
}
else {
_this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
}
}
};
request.open("GET", path, true);
request.send();
};
SharedAssetManager.prototype.loadTexture = function (clientId, textureLoader, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, textureLoader, path))
return;
var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
if (isWebWorker) {
var options = { mode: "cors" };
fetch(path, options).then(function (response) {
if (!response.ok) {
_this.errors[path] = "Couldn't load image " + path;
}
return response.blob();
}).then(function (blob) {
return createImageBitmap(blob, {
premultiplyAlpha: 'none',
colorSpaceConversion: 'none'
});
}).then(function (bitmap) {
_this.rawAssets[path] = bitmap;
});
}
else {
var img_1 = new Image();
img_1.crossOrigin = "anonymous";
img_1.onload = function (ev) {
_this.rawAssets[path] = img_1;
};
img_1.onerror = function (ev) {
_this.errors[path] = "Couldn't load image " + path;
};
img_1.src = path;
}
};
SharedAssetManager.prototype.get = function (clientId, path) {
path = this.pathPrefix + path;
var clientAssets = this.clientAssets[clientId];
if (!clientAssets)
return true;
return clientAssets.assets[path];
};
SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
for (var i = 0; i < clientAssets.toLoad.length; i++) {
var path = clientAssets.toLoad[i];
var asset = clientAssets.assets[path];
if (!asset) {
var rawAsset = this.rawAssets[path];
if (!rawAsset)
continue;
if (isWebWorker) {
if (rawAsset instanceof ImageBitmap) {
clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
}
else {
clientAssets.assets[path] = rawAsset;
}
}
else {
if (rawAsset instanceof HTMLImageElement) {
clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
}
else {
clientAssets.assets[path] = rawAsset;
}
}
}
}
};
SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
var clientAssets = this.clientAssets[clientId];
if (!clientAssets)
return true;
this.updateClientAssets(clientAssets);
return clientAssets.toLoad.length == clientAssets.loaded();
};
SharedAssetManager.prototype.dispose = function () {
};
SharedAssetManager.prototype.hasErrors = function () {
return Object.keys(this.errors).length > 0;
};
SharedAssetManager.prototype.getErrors = function () {
return this.errors;
};
return SharedAssetManager;
}());
spine.SharedAssetManager = SharedAssetManager;
})(spine || (spine = {}));
var spine;
(function (spine) { (function (spine) {
var Skeleton = (function () { var Skeleton = (function () {
function Skeleton(data) { function Skeleton(data) {
@ -9152,11 +8996,12 @@ var spine;
(function (webgl) { (function (webgl) {
var AssetManager = (function (_super) { var AssetManager = (function (_super) {
__extends(AssetManager, _super); __extends(AssetManager, _super);
function AssetManager(context, pathPrefix) { function AssetManager(context, pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
return _super.call(this, function (image) { return _super.call(this, function (image) {
return new spine.webgl.GLTexture(context, image); return new spine.webgl.GLTexture(context, image);
}, pathPrefix) || this; }, pathPrefix, downloader) || this;
} }
return AssetManager; return AssetManager;
}(spine.AssetManager)); }(spine.AssetManager));
@ -11921,10 +11766,7 @@ var spine;
this.viewportTransitionStart = 0; this.viewportTransitionStart = 0;
this.stopRequestAnimationFrame = false; this.stopRequestAnimationFrame = false;
this.cancelId = 0; this.cancelId = 0;
if (typeof parent === "string") this.parent = typeof parent === "string" ? document.getElementById(parent) : parent;
this.parent = document.getElementById(parent);
else
this.parent = parent;
this.parent.appendChild(this.render()); this.parent.appendChild(this.render());
} }
SpinePlayer.prototype.validateConfig = function (config) { SpinePlayer.prototype.validateConfig = function (config) {
@ -11975,7 +11817,7 @@ var spine;
config.debug.meshes = false; config.debug.meshes = false;
if (config.animations && config.animation) { if (config.animations && config.animation) {
if (config.animations.indexOf(config.animation) < 0) if (config.animations.indexOf(config.animation) < 0)
throw new Error("Default animation '" + config.animation + "' is not contained in the list of selectable animations " + escapeHtml(JSON.stringify(this.config.animations)) + "."); throw new Error("Default animation '" + config.animation + "' is not contained in the list of selectable animations: " + escapeHtml(JSON.stringify(this.config.animations)));
} }
if (config.skins && config.skin) { if (config.skins && config.skin) {
if (config.skins.indexOf(config.skin) < 0) if (config.skins.indexOf(config.skin) < 0)
@ -11990,9 +11832,13 @@ var spine;
return config; return config;
}; };
SpinePlayer.prototype.showError = function (error) { SpinePlayer.prototype.showError = function (error) {
if (this.error)
return;
this.error = true;
console.log(error);
var errorDom = findWithClass(this.dom, "spine-player-error")[0]; var errorDom = findWithClass(this.dom, "spine-player-error")[0];
errorDom.classList.remove("spine-player-hidden"); errorDom.classList.remove("spine-player-hidden");
errorDom.innerHTML = "<p style=\"text-align: center; align-self: center;\">" + error + "</p>"; errorDom.innerHTML = '<p style="text-align: center; align-self: center;">' + error.replace("\n", "<br><br>") + '</p>';
this.config.error(this, error); this.config.error(this, error);
}; };
SpinePlayer.prototype.render = function () { SpinePlayer.prototype.render = function () {
@ -12014,18 +11860,19 @@ var spine;
this.loadingScreen = new spine.webgl.LoadingScreen(this.sceneRenderer); this.loadingScreen = new spine.webgl.LoadingScreen(this.sceneRenderer);
} }
catch (e) { catch (e) {
this.showError("Sorry, your browser does not support WebGL.<br><br>Please use the latest version of Firefox, Chrome, Edge, or Safari."); this.showError("Sorry, your browser does not support WebGL.\nPlease use the latest version of Firefox, Chrome, Edge, or Safari.");
return dom; return dom;
} }
this.assetManager = new spine.webgl.AssetManager(this.context); this.assetManager = new spine.webgl.AssetManager(this.context, "", config.downloader);
if (config.rawDataURIs) { if (config.rawDataURIs) {
for (var path in config.rawDataURIs) { for (var path in config.rawDataURIs) {
var data = config.rawDataURIs[path]; var data = config.rawDataURIs[path];
this.assetManager.setRawDataURI(path, data); this.assetManager.setRawDataURI(path, data);
} }
} }
if (config.jsonUrl) var jsonUrl = config.jsonUrl;
this.assetManager.loadText(config.jsonUrl); if (jsonUrl)
this.assetManager.loadJson(jsonUrl);
else else
this.assetManager.loadBinary(config.skelUrl); this.assetManager.loadBinary(config.skelUrl);
this.assetManager.loadTextureAtlas(config.atlasUrl); this.assetManager.loadTextureAtlas(config.atlasUrl);
@ -12155,9 +12002,8 @@ var spine;
var popup = new Popup(this.dom, this.playerControls, "\n\t\t\t\t<div class=\"spine-player-popup-title\">Animations</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\"></ul>\n\t\t\t"); var popup = new Popup(this.dom, this.playerControls, "\n\t\t\t\t<div class=\"spine-player-popup-title\">Animations</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\"></ul>\n\t\t\t");
var rows = findWithClass(popup.dom, "spine-player-list")[0]; var rows = findWithClass(popup.dom, "spine-player-list")[0];
this.skeleton.data.animations.forEach(function (animation) { this.skeleton.data.animations.forEach(function (animation) {
if (_this.config.animations && _this.config.animations.indexOf(animation.name) < 0) { if (_this.config.animations && _this.config.animations.indexOf(animation.name) < 0)
return; return;
}
var row = createElement("\n\t\t\t\t\t<li class=\"spine-player-list-item selectable\">\n\t\t\t\t\t\t<div class=\"selectable-circle\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"selectable-text\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t"); var row = createElement("\n\t\t\t\t\t<li class=\"spine-player-list-item selectable\">\n\t\t\t\t\t\t<div class=\"selectable-circle\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"selectable-text\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t");
if (animation.name == _this.config.animation) if (animation.name == _this.config.animation)
row.classList.add("selected"); row.classList.add("selected");
@ -12259,7 +12105,8 @@ var spine;
SpinePlayer.prototype.drawFrame = function (requestNextFrame) { SpinePlayer.prototype.drawFrame = function (requestNextFrame) {
var _this = this; var _this = this;
if (requestNextFrame === void 0) { requestNextFrame = true; } if (requestNextFrame === void 0) { requestNextFrame = true; }
if (requestNextFrame && !this.stopRequestAnimationFrame) try {
if (requestNextFrame && !this.stopRequestAnimationFrame && !this.error)
requestAnimationFrame(function () { return _this.drawFrame(); }); requestAnimationFrame(function () { return _this.drawFrame(); });
var ctx = this.context; var ctx = this.context;
var gl = ctx.gl; var gl = ctx.gl;
@ -12353,6 +12200,10 @@ var spine;
this.sceneRenderer.end(); this.sceneRenderer.end();
this.sceneRenderer.camera.zoom = 0; this.sceneRenderer.camera.zoom = 0;
} }
}
catch (e) {
this.showError("Error: Unable to render skeleton.\n" + e.message);
}
}; };
SpinePlayer.prototype.scale = function (sourceWidth, sourceHeight, targetWidth, targetHeight) { SpinePlayer.prototype.scale = function (sourceWidth, sourceHeight, targetWidth, targetHeight) {
var targetRatio = targetHeight / targetWidth; var targetRatio = targetHeight / targetWidth;
@ -12367,20 +12218,30 @@ var spine;
var _this = this; var _this = this;
if (this.loaded) if (this.loaded)
return; return;
if (this.error)
return;
if (this.assetManager.hasErrors()) { if (this.assetManager.hasErrors()) {
this.showError("Error: assets could not be loaded.<br><br>" + escapeHtml(JSON.stringify(this.assetManager.getErrors()))); this.showError("Error: Assets could not be loaded.\n" + escapeHtml(JSON.stringify(this.assetManager.getErrors())));
return; return;
} }
var atlas = this.assetManager.get(this.config.atlasUrl); var atlas = this.assetManager.get(this.config.atlasUrl);
var skeletonData; var skeletonData;
if (this.config.jsonUrl) { var jsonUrl = this.config.jsonUrl;
var jsonText = this.assetManager.get(this.config.jsonUrl); if (jsonUrl) {
var json = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
try { try {
skeletonData = json.readSkeletonData(jsonText); var jsonData = this.assetManager.get(jsonUrl);
if (!jsonData)
throw new Error("Empty JSON data.");
if (this.config.jsonField) {
jsonData = jsonData[this.config.jsonField];
if (!jsonData)
throw new Error("JSON field not found: " + this.config.jsonField);
}
var json = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
skeletonData = json.readSkeletonData(jsonData);
} }
catch (e) { catch (e) {
this.showError("Error: could not load skeleton .json.<br><br>" + e.toString()); this.showError("Error: Could not load skeleton JSON.\n" + e.message);
return; return;
} }
} }
@ -12391,7 +12252,7 @@ var spine;
skeletonData = binary.readSkeletonData(binaryData); skeletonData = binary.readSkeletonData(binaryData);
} }
catch (e) { catch (e) {
this.showError("Error: could not load skeleton .skel.<br><br>" + e.toString()); this.showError("Error: Could not load skeleton binary.\n" + e.message);
return; return;
} }
} }
@ -12402,26 +12263,26 @@ var spine;
if (this.config.controlBones) { if (this.config.controlBones) {
this.config.controlBones.forEach(function (bone) { this.config.controlBones.forEach(function (bone) {
if (!skeletonData.findBone(bone)) { if (!skeletonData.findBone(bone)) {
_this.showError("Error: control bone '" + bone + "' does not exist in skeleton."); _this.showError("Error: Control bone does not exist in skeleton: " + bone);
return;
} }
}); });
} }
if (!this.config.skin) { if (!this.config.skin) {
if (skeletonData.skins.length > 0) { if (skeletonData.skins.length > 0)
this.config.skin = skeletonData.skins[0].name; this.config.skin = skeletonData.skins[0].name;
} }
}
if (this.config.skins && this.config.skin.length > 0) { if (this.config.skins && this.config.skin.length > 0) {
this.config.skins.forEach(function (skin) { this.config.skins.forEach(function (skin) {
if (!_this.skeleton.data.findSkin(skin)) { if (!_this.skeleton.data.findSkin(skin)) {
_this.showError("Error: skin '" + skin + "' in selectable skin list does not exist in skeleton."); _this.showError("Error: Skin in config list does not exist in skeleton: " + skin);
return; return;
} }
}); });
} }
if (this.config.skin) { if (this.config.skin) {
if (!this.skeleton.data.findSkin(this.config.skin)) { if (!this.skeleton.data.findSkin(this.config.skin)) {
this.showError("Error: skin '" + this.config.skin + "' does not exist in skeleton."); this.showError("Error: Skin does not exist in skeleton: " + this.config.skin);
return; return;
} }
this.skeleton.setSkinByName(this.config.skin); this.skeleton.setSkinByName(this.config.skin);
@ -12444,7 +12305,7 @@ var spine;
else { else {
Object.getOwnPropertyNames(this.config.viewport.animations).forEach(function (animation) { Object.getOwnPropertyNames(this.config.viewport.animations).forEach(function (animation) {
if (!skeletonData.findAnimation(animation)) { if (!skeletonData.findAnimation(animation)) {
_this.showError("Error: animation '" + animation + "' for which a viewport was specified does not exist in skeleton."); _this.showError("Error: Animation for which a viewport was specified does not exist in skeleton: " + animation);
return; return;
} }
}); });
@ -12452,7 +12313,7 @@ var spine;
if (this.config.animations && this.config.animations.length > 0) { if (this.config.animations && this.config.animations.length > 0) {
this.config.animations.forEach(function (animation) { this.config.animations.forEach(function (animation) {
if (!_this.skeleton.data.findAnimation(animation)) { if (!_this.skeleton.data.findAnimation(animation)) {
_this.showError("Error: animation '" + animation + "' in selectable animation list does not exist in skeleton."); _this.showError("Error: Animation in config list does not exist in skeleton: " + animation);
return; return;
} }
}); });
@ -12467,7 +12328,7 @@ var spine;
} }
if (this.config.animation) { if (this.config.animation) {
if (!skeletonData.findAnimation(this.config.animation)) { if (!skeletonData.findAnimation(this.config.animation)) {
this.showError("Error: animation '" + this.config.animation + "' does not exist in skeleton."); this.showError("Error: Animation does not exist in skeleton: " + this.config.animation);
return; return;
} }
this.play(); this.play();
@ -12609,11 +12470,8 @@ var spine;
this.cancelId = setTimeout(remove, 1000); this.cancelId = setTimeout(remove, 1000);
this.playButton.classList.remove("spine-player-button-icon-play"); this.playButton.classList.remove("spine-player-button-icon-play");
this.playButton.classList.add("spine-player-button-icon-pause"); this.playButton.classList.add("spine-player-button-icon-pause");
if (this.config.animation) { if (this.config.animation && !this.animationState.getCurrent(0))
if (!this.animationState.getCurrent(0)) {
this.setAnimation(this.config.animation); this.setAnimation(this.config.animation);
}
}
}; };
SpinePlayer.prototype.pause = function () { SpinePlayer.prototype.pause = function () {
this.paused = true; this.paused = true;
@ -12710,9 +12568,8 @@ var spine;
minY = Math.min(offset.y, minY); minY = Math.min(offset.y, minY);
maxY = Math.max(offset.y + size.y, maxY); maxY = Math.max(offset.y + size.y, maxY);
} }
else { else
console.log("Bounds of animation " + animationName + " are NaN"); console.log("Animation bounds are NaN: " + animationName);
}
} }
offset.x = minX; offset.x = minX;
offset.y = minY; offset.y = minY;

2
spine-ts/build/spine-player.js.map
View File

File diff suppressed because one or more lines are too long

49
spine-ts/build/spine-threejs.d.ts vendored
View File

@ -346,19 +346,21 @@ declare module spine {
class AssetManager implements Disposable { class AssetManager implements Disposable {
private pathPrefix; private pathPrefix;
private textureLoader; private textureLoader;
private downloader;
private assets; private assets;
private errors; private errors;
private toLoad; private toLoad;
private loaded; private loaded;
private rawDataUris; constructor(textureLoader: (image: HTMLImageElement | ImageBitmap) => any, pathPrefix?: string, downloader?: Downloader);
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string); private start;
private downloadText; private success;
private downloadBinary; private error;
setRawDataURI(path: string, data: string): void; setRawDataURI(path: string, data: string): void;
loadBinary(path: string, success?: (path: string, binary: Uint8Array) => void, error?: (path: string, error: string) => void): void; loadBinary(path: string, success?: (path: string, binary: Uint8Array) => void, error?: (path: string, message: string) => void): void;
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void; loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, message: string) => void): void;
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void; loadJson(path: string, success?: (path: string, object: object) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, error: string) => void): void; loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void;
get(path: string): any; get(path: string): any;
remove(path: string): void; remove(path: string): void;
removeAll(): void; removeAll(): void;
@ -369,6 +371,15 @@ declare module spine {
hasErrors(): boolean; hasErrors(): boolean;
getErrors(): Map<string>; getErrors(): Map<string>;
} }
class Downloader {
private callbacks;
rawDataUris: Map<string>;
downloadText(url: string, success: (data: string) => void, error: (status: number, responseText: string) => void): void;
downloadJson(url: string, success: (data: object) => void, error: (status: number, responseText: string) => void): void;
downloadBinary(url: string, success: (data: Uint8Array) => void, error: (status: number, responseText: string) => void): void;
private start;
private finish;
}
} }
declare module spine { declare module spine {
class AtlasAttachmentLoader implements AttachmentLoader { class AtlasAttachmentLoader implements AttachmentLoader {
@ -578,26 +589,6 @@ declare module spine {
ChainScale = 2 ChainScale = 2
} }
} }
declare module spine {
class SharedAssetManager implements Disposable {
private pathPrefix;
private clientAssets;
private queuedAssets;
private rawAssets;
private errors;
constructor(pathPrefix?: string);
private queueAsset;
loadText(clientId: string, path: string): void;
loadJson(clientId: string, path: string): void;
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
get(clientId: string, path: string): any;
private updateClientAssets;
isLoadingComplete(clientId: string): boolean;
dispose(): void;
hasErrors(): boolean;
getErrors(): Map<string>;
}
}
declare module spine { declare module spine {
class Skeleton { class Skeleton {
data: SkeletonData; data: SkeletonData;
@ -1267,7 +1258,7 @@ declare module spine {
} }
declare module spine.threejs { declare module spine.threejs {
class AssetManager extends spine.AssetManager { class AssetManager extends spine.AssetManager {
constructor(pathPrefix?: string); constructor(pathPrefix?: string, downloader?: Downloader);
} }
} }
declare module spine.threejs { declare module spine.threejs {

473
spine-ts/build/spine-threejs.js
View File

@ -2756,134 +2756,113 @@ var spine;
var spine; var spine;
(function (spine) { (function (spine) {
var AssetManager = (function () { var AssetManager = (function () {
function AssetManager(textureLoader, pathPrefix) { function AssetManager(textureLoader, pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
this.assets = {}; this.assets = {};
this.errors = {}; this.errors = {};
this.toLoad = 0; this.toLoad = 0;
this.loaded = 0; this.loaded = 0;
this.rawDataUris = {};
this.textureLoader = textureLoader; this.textureLoader = textureLoader;
this.pathPrefix = pathPrefix; this.pathPrefix = pathPrefix;
this.downloader = downloader || new Downloader();
} }
AssetManager.prototype.downloadText = function (url, success, error) { AssetManager.prototype.start = function (path) {
var request = new XMLHttpRequest(); this.toLoad++;
request.overrideMimeType("text/html"); return this.pathPrefix + path;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
request.open("GET", url, true);
request.onload = function () {
if (request.status == 200) {
success(request.responseText);
}
else {
error(request.status, request.responseText);
}
}; };
request.onerror = function () { AssetManager.prototype.success = function (callback, path, asset) {
error(request.status, request.responseText); this.toLoad--;
this.loaded++;
this.assets[path] = asset;
if (callback)
callback(path, asset);
}; };
request.send(); AssetManager.prototype.error = function (callback, path, message) {
}; this.toLoad--;
AssetManager.prototype.downloadBinary = function (url, success, error) { this.loaded++;
var request = new XMLHttpRequest(); this.errors[path] = message;
if (this.rawDataUris[url]) if (callback)
url = this.rawDataUris[url]; callback(path, message);
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function () {
if (request.status == 200) {
success(new Uint8Array(request.response));
}
else {
error(request.status, request.responseText);
}
};
request.onerror = function () {
error(request.status, request.responseText);
};
request.send();
}; };
AssetManager.prototype.setRawDataURI = function (path, data) { AssetManager.prototype.setRawDataURI = function (path, data) {
this.rawDataUris[this.pathPrefix + path] = data; this.downloader.rawDataUris[this.pathPrefix + path] = data;
}; };
AssetManager.prototype.loadBinary = function (path, success, error) { AssetManager.prototype.loadBinary = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadBinary(path, function (data) {
this.downloadBinary(path, function (data) { _this.success(success, path, data);
_this.assets[path] = data; }, function (status, responseText) {
if (success) _this.error(error, path, "Couldn't load binary " + path + ": status " + status + ", " + responseText);
success(path, data);
_this.toLoad--;
_this.loaded++;
}, function (state, responseText) {
_this.errors[path] = "Couldn't load binary " + path + ": status " + status + ", " + responseText;
if (error)
error(path, "Couldn't load binary " + path + ": status " + status + ", " + responseText);
_this.toLoad--;
_this.loaded++;
}); });
}; };
AssetManager.prototype.loadText = function (path, success, error) { AssetManager.prototype.loadText = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadText(path, function (data) {
this.downloadText(path, function (data) { _this.success(success, path, data);
_this.assets[path] = data; }, function (status, responseText) {
if (success) _this.error(error, path, "Couldn't load text " + path + ": status " + status + ", " + responseText);
success(path, data); });
_this.toLoad--; };
_this.loaded++; AssetManager.prototype.loadJson = function (path, success, error) {
}, function (state, responseText) { var _this = this;
_this.errors[path] = "Couldn't load text " + path + ": status " + status + ", " + responseText; if (success === void 0) { success = null; }
if (error) if (error === void 0) { error = null; }
error(path, "Couldn't load text " + path + ": status " + status + ", " + responseText); path = this.start(path);
_this.toLoad--; this.downloader.downloadJson(path, function (data) {
_this.loaded++; _this.success(success, path, data);
}, function (status, responseText) {
_this.error(error, path, "Couldn't load JSON " + path + ": status " + status + ", " + responseText);
}); });
}; };
AssetManager.prototype.loadTexture = function (path, success, error) { AssetManager.prototype.loadTexture = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
var storagePath = path; var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
this.toLoad++; var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
var img = new Image(); if (isWebWorker) {
img.crossOrigin = "anonymous"; fetch(path, { mode: "cors" }).then(function (response) {
img.onload = function (ev) { if (response.ok)
var texture = _this.textureLoader(img); return response.blob();
_this.assets[storagePath] = texture; _this.error(error, path, "Couldn't load image: " + path);
_this.toLoad--; return null;
_this.loaded++; }).then(function (blob) {
if (success) return blob ? createImageBitmap(blob, { premultiplyAlpha: "none", colorSpaceConversion: "none" }) : null;
success(path, img); }).then(function (bitmap) {
if (bitmap)
_this.success(success, path, _this.textureLoader(bitmap));
});
}
else {
var image_1 = new Image();
image_1.crossOrigin = "anonymous";
image_1.onload = function () {
_this.success(success, path, _this.textureLoader(image_1));
}; };
img.onerror = function (ev) { image_1.onerror = function () {
_this.errors[path] = "Couldn't load image " + path; _this.error(error, path, "Couldn't load image: " + path);
_this.toLoad--;
_this.loaded++;
if (error)
error(path, "Couldn't load image " + path);
}; };
if (this.rawDataUris[path]) if (this.downloader.rawDataUris[path])
path = this.rawDataUris[path]; path = this.downloader.rawDataUris[path];
img.src = path; image_1.src = path;
}
}; };
AssetManager.prototype.loadTextureAtlas = function (path, success, error) { AssetManager.prototype.loadTextureAtlas = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : ""; var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : "";
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadText(path, function (atlasData) {
this.downloadText(path, function (atlasData) { var pagesLoaded = 0;
var pagesLoaded = { count: 0 };
var atlasPages = new Array(); var atlasPages = new Array();
try { try {
var atlas = new spine.TextureAtlas(atlasData, function (path) { var atlas = new spine.TextureAtlas(atlasData, function (path) {
@ -2893,83 +2872,52 @@ var spine;
image.height = 16; image.height = 16;
return new spine.FakeTexture(image); return new spine.FakeTexture(image);
}); });
}
catch (e) {
var ex = e;
_this.errors[path] = "Couldn't load texture atlas " + path + ": " + ex.message;
if (error)
error(path, "Couldn't load texture atlas " + path + ": " + ex.message);
_this.toLoad--;
_this.loaded++;
return;
}
var _loop_1 = function (atlasPage) { var _loop_1 = function (atlasPage) {
var pageLoadError = false; var pageLoadError = false;
_this.loadTexture(atlasPage, function (imagePath, image) { _this.loadTexture(atlasPage, function (imagePath, image) {
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded.count == atlasPages.length) { if (pagesLoaded == atlasPages.length) {
if (!pageLoadError) { if (!pageLoadError) {
try { try {
var atlas = new spine.TextureAtlas(atlasData, function (path) { _this.success(success, path, new spine.TextureAtlas(atlasData, function (path) {
return _this.get(parent == "" ? path : parent + "/" + path); return _this.get(parent == "" ? path : parent + "/" + path);
}); }));
_this.assets[path] = atlas;
if (success)
success(path, atlas);
_this.toLoad--;
_this.loaded++;
} }
catch (e) { catch (e) {
var ex = e; _this.error(error, path, "Couldn't load texture atlas " + path + ": " + e.message);
_this.errors[path] = "Couldn't load texture atlas " + path + ": " + ex.message;
if (error)
error(path, "Couldn't load texture atlas " + path + ": " + ex.message);
_this.toLoad--;
_this.loaded++;
} }
} }
else { else
_this.errors[path] = "Couldn't load texture atlas page " + imagePath + "} of atlas " + path; _this.error(error, path, "Couldn't load texture atlas " + path + " page: " + imagePath);
if (error)
error(path, "Couldn't load texture atlas page " + imagePath + " of atlas " + path);
_this.toLoad--;
_this.loaded++;
}
} }
}, function (imagePath, errorMessage) { }, function (imagePath, errorMessage) {
pageLoadError = true; pageLoadError = true;
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded.count == atlasPages.length) { if (pagesLoaded == atlasPages.length)
_this.errors[path] = "Couldn't load texture atlas page " + imagePath + "} of atlas " + path; _this.error(error, path, "Couldn't load texture atlas " + path + " page: " + imagePath);
if (error)
error(path, "Couldn't load texture atlas page " + imagePath + " of atlas " + path);
_this.toLoad--;
_this.loaded++;
}
}); });
}; };
for (var _i = 0, atlasPages_1 = atlasPages; _i < atlasPages_1.length; _i++) { for (var _i = 0, atlasPages_1 = atlasPages; _i < atlasPages_1.length; _i++) {
var atlasPage = atlasPages_1[_i]; var atlasPage = atlasPages_1[_i];
_loop_1(atlasPage); _loop_1(atlasPage);
} }
}, function (state, responseText) { }
_this.errors[path] = "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText; catch (e) {
if (error) _this.error(error, path, "Couldn't load texture atlas " + path + ": " + e.message);
error(path, "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText); }
_this.toLoad--; }, function (status, responseText) {
_this.loaded++; _this.error(error, path, "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText);
}); });
}; };
AssetManager.prototype.get = function (path) { AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path; return this.assets[this.pathPrefix + path];
return this.assets[path];
}; };
AssetManager.prototype.remove = function (path) { AssetManager.prototype.remove = function (path) {
path = this.pathPrefix + path; path = this.pathPrefix + path;
var asset = this.assets[path]; var asset = this.assets[path];
if (asset.dispose) if (asset.dispose)
asset.dispose(); asset.dispose();
this.assets[path] = null; delete this.assets[path];
}; };
AssetManager.prototype.removeAll = function () { AssetManager.prototype.removeAll = function () {
for (var key in this.assets) { for (var key in this.assets) {
@ -3000,6 +2948,74 @@ var spine;
return AssetManager; return AssetManager;
}()); }());
spine.AssetManager = AssetManager; spine.AssetManager = AssetManager;
var Downloader = (function () {
function Downloader() {
this.callbacks = {};
this.rawDataUris = {};
}
Downloader.prototype.downloadText = function (url, success, error) {
var _this = this;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
if (this.start(url, success, error))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.open("GET", url, true);
var done = function () {
_this.finish(url, request.status, request.responseText);
};
request.onload = done;
request.onerror = done;
request.send();
};
Downloader.prototype.downloadJson = function (url, success, error) {
this.downloadText(url, function (data) {
success(JSON.parse(data));
}, error);
};
Downloader.prototype.downloadBinary = function (url, success, error) {
var _this = this;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
if (this.start(url, success, error))
return;
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
var onerror = function () {
_this.finish(url, request.status, request.responseText);
};
request.onload = function () {
if (request.status == 200)
_this.finish(url, 200, new Uint8Array(request.response));
else
onerror();
};
request.onerror = onerror;
request.send();
};
Downloader.prototype.start = function (url, success, error) {
var callbacks = this.callbacks[url];
try {
if (callbacks)
return true;
this.callbacks[url] = callbacks = [];
}
finally {
callbacks.push(success, error);
}
};
Downloader.prototype.finish = function (url, status, data) {
var callbacks = this.callbacks[url];
delete this.callbacks[url];
var args = status == 200 ? [data] : [status, data];
for (var i = args.length - 1, n = callbacks.length; i < n; i += 2)
callbacks[i].apply(null, args);
};
return Downloader;
}());
spine.Downloader = Downloader;
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) { (function (spine) {
@ -4088,178 +4104,6 @@ var spine;
})(RotateMode = spine.RotateMode || (spine.RotateMode = {})); })(RotateMode = spine.RotateMode || (spine.RotateMode = {}));
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) {
var Assets = (function () {
function Assets(clientId) {
this.toLoad = new Array();
this.assets = {};
this.clientId = clientId;
}
Assets.prototype.loaded = function () {
var i = 0;
for (var v in this.assets)
i++;
return i;
};
return Assets;
}());
var SharedAssetManager = (function () {
function SharedAssetManager(pathPrefix) {
if (pathPrefix === void 0) { pathPrefix = ""; }
this.clientAssets = {};
this.queuedAssets = {};
this.rawAssets = {};
this.errors = {};
this.pathPrefix = pathPrefix;
}
SharedAssetManager.prototype.queueAsset = function (clientId, textureLoader, path) {
var clientAssets = this.clientAssets[clientId];
if (!clientAssets) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader)
clientAssets.textureLoader = textureLoader;
clientAssets.toLoad.push(path);
if (this.queuedAssets[path] === path) {
return false;
}
else {
this.queuedAssets[path] = path;
return true;
}
};
SharedAssetManager.prototype.loadText = function (clientId, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
_this.rawAssets[path] = request.responseText;
}
else {
_this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
}
}
};
request.open("GET", path, true);
request.send();
};
SharedAssetManager.prototype.loadJson = function (clientId, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
_this.rawAssets[path] = JSON.parse(request.responseText);
}
else {
_this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
}
}
};
request.open("GET", path, true);
request.send();
};
SharedAssetManager.prototype.loadTexture = function (clientId, textureLoader, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, textureLoader, path))
return;
var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
if (isWebWorker) {
var options = { mode: "cors" };
fetch(path, options).then(function (response) {
if (!response.ok) {
_this.errors[path] = "Couldn't load image " + path;
}
return response.blob();
}).then(function (blob) {
return createImageBitmap(blob, {
premultiplyAlpha: 'none',
colorSpaceConversion: 'none'
});
}).then(function (bitmap) {
_this.rawAssets[path] = bitmap;
});
}
else {
var img_1 = new Image();
img_1.crossOrigin = "anonymous";
img_1.onload = function (ev) {
_this.rawAssets[path] = img_1;
};
img_1.onerror = function (ev) {
_this.errors[path] = "Couldn't load image " + path;
};
img_1.src = path;
}
};
SharedAssetManager.prototype.get = function (clientId, path) {
path = this.pathPrefix + path;
var clientAssets = this.clientAssets[clientId];
if (!clientAssets)
return true;
return clientAssets.assets[path];
};
SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
for (var i = 0; i < clientAssets.toLoad.length; i++) {
var path = clientAssets.toLoad[i];
var asset = clientAssets.assets[path];
if (!asset) {
var rawAsset = this.rawAssets[path];
if (!rawAsset)
continue;
if (isWebWorker) {
if (rawAsset instanceof ImageBitmap) {
clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
}
else {
clientAssets.assets[path] = rawAsset;
}
}
else {
if (rawAsset instanceof HTMLImageElement) {
clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
}
else {
clientAssets.assets[path] = rawAsset;
}
}
}
}
};
SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
var clientAssets = this.clientAssets[clientId];
if (!clientAssets)
return true;
this.updateClientAssets(clientAssets);
return clientAssets.toLoad.length == clientAssets.loaded();
};
SharedAssetManager.prototype.dispose = function () {
};
SharedAssetManager.prototype.hasErrors = function () {
return Object.keys(this.errors).length > 0;
};
SharedAssetManager.prototype.getErrors = function () {
return this.errors;
};
return SharedAssetManager;
}());
spine.SharedAssetManager = SharedAssetManager;
})(spine || (spine = {}));
var spine;
(function (spine) { (function (spine) {
var Skeleton = (function () { var Skeleton = (function () {
function Skeleton(data) { function Skeleton(data) {
@ -9152,11 +8996,12 @@ var spine;
(function (threejs) { (function (threejs) {
var AssetManager = (function (_super) { var AssetManager = (function (_super) {
__extends(AssetManager, _super); __extends(AssetManager, _super);
function AssetManager(pathPrefix) { function AssetManager(pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
return _super.call(this, function (image) { return _super.call(this, function (image) {
return new threejs.ThreeJsTexture(image); return new threejs.ThreeJsTexture(image);
}, pathPrefix) || this; }, pathPrefix, downloader) || this;
} }
return AssetManager; return AssetManager;
}(spine.AssetManager)); }(spine.AssetManager));

2
spine-ts/build/spine-threejs.js.map
View File

File diff suppressed because one or more lines are too long

49
spine-ts/build/spine-webgl.d.ts vendored
View File

@ -346,19 +346,21 @@ declare module spine {
class AssetManager implements Disposable { class AssetManager implements Disposable {
private pathPrefix; private pathPrefix;
private textureLoader; private textureLoader;
private downloader;
private assets; private assets;
private errors; private errors;
private toLoad; private toLoad;
private loaded; private loaded;
private rawDataUris; constructor(textureLoader: (image: HTMLImageElement | ImageBitmap) => any, pathPrefix?: string, downloader?: Downloader);
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string); private start;
private downloadText; private success;
private downloadBinary; private error;
setRawDataURI(path: string, data: string): void; setRawDataURI(path: string, data: string): void;
loadBinary(path: string, success?: (path: string, binary: Uint8Array) => void, error?: (path: string, error: string) => void): void; loadBinary(path: string, success?: (path: string, binary: Uint8Array) => void, error?: (path: string, message: string) => void): void;
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void; loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, message: string) => void): void;
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void; loadJson(path: string, success?: (path: string, object: object) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, error: string) => void): void; loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void;
get(path: string): any; get(path: string): any;
remove(path: string): void; remove(path: string): void;
removeAll(): void; removeAll(): void;
@ -369,6 +371,15 @@ declare module spine {
hasErrors(): boolean; hasErrors(): boolean;
getErrors(): Map<string>; getErrors(): Map<string>;
} }
class Downloader {
private callbacks;
rawDataUris: Map<string>;
downloadText(url: string, success: (data: string) => void, error: (status: number, responseText: string) => void): void;
downloadJson(url: string, success: (data: object) => void, error: (status: number, responseText: string) => void): void;
downloadBinary(url: string, success: (data: Uint8Array) => void, error: (status: number, responseText: string) => void): void;
private start;
private finish;
}
} }
declare module spine { declare module spine {
class AtlasAttachmentLoader implements AttachmentLoader { class AtlasAttachmentLoader implements AttachmentLoader {
@ -578,26 +589,6 @@ declare module spine {
ChainScale = 2 ChainScale = 2
} }
} }
declare module spine {
class SharedAssetManager implements Disposable {
private pathPrefix;
private clientAssets;
private queuedAssets;
private rawAssets;
private errors;
constructor(pathPrefix?: string);
private queueAsset;
loadText(clientId: string, path: string): void;
loadJson(clientId: string, path: string): void;
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
get(clientId: string, path: string): any;
private updateClientAssets;
isLoadingComplete(clientId: string): boolean;
dispose(): void;
hasErrors(): boolean;
getErrors(): Map<string>;
}
}
declare module spine { declare module spine {
class Skeleton { class Skeleton {
data: SkeletonData; data: SkeletonData;
@ -1267,7 +1258,7 @@ declare module spine {
} }
declare module spine.webgl { declare module spine.webgl {
class AssetManager extends spine.AssetManager { class AssetManager extends spine.AssetManager {
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string, downloader?: Downloader);
} }
} }
declare module spine.webgl { declare module spine.webgl {

473
spine-ts/build/spine-webgl.js
View File

@ -2756,134 +2756,113 @@ var spine;
var spine; var spine;
(function (spine) { (function (spine) {
var AssetManager = (function () { var AssetManager = (function () {
function AssetManager(textureLoader, pathPrefix) { function AssetManager(textureLoader, pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
this.assets = {}; this.assets = {};
this.errors = {}; this.errors = {};
this.toLoad = 0; this.toLoad = 0;
this.loaded = 0; this.loaded = 0;
this.rawDataUris = {};
this.textureLoader = textureLoader; this.textureLoader = textureLoader;
this.pathPrefix = pathPrefix; this.pathPrefix = pathPrefix;
this.downloader = downloader || new Downloader();
} }
AssetManager.prototype.downloadText = function (url, success, error) { AssetManager.prototype.start = function (path) {
var request = new XMLHttpRequest(); this.toLoad++;
request.overrideMimeType("text/html"); return this.pathPrefix + path;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
request.open("GET", url, true);
request.onload = function () {
if (request.status == 200) {
success(request.responseText);
}
else {
error(request.status, request.responseText);
}
}; };
request.onerror = function () { AssetManager.prototype.success = function (callback, path, asset) {
error(request.status, request.responseText); this.toLoad--;
this.loaded++;
this.assets[path] = asset;
if (callback)
callback(path, asset);
}; };
request.send(); AssetManager.prototype.error = function (callback, path, message) {
}; this.toLoad--;
AssetManager.prototype.downloadBinary = function (url, success, error) { this.loaded++;
var request = new XMLHttpRequest(); this.errors[path] = message;
if (this.rawDataUris[url]) if (callback)
url = this.rawDataUris[url]; callback(path, message);
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function () {
if (request.status == 200) {
success(new Uint8Array(request.response));
}
else {
error(request.status, request.responseText);
}
};
request.onerror = function () {
error(request.status, request.responseText);
};
request.send();
}; };
AssetManager.prototype.setRawDataURI = function (path, data) { AssetManager.prototype.setRawDataURI = function (path, data) {
this.rawDataUris[this.pathPrefix + path] = data; this.downloader.rawDataUris[this.pathPrefix + path] = data;
}; };
AssetManager.prototype.loadBinary = function (path, success, error) { AssetManager.prototype.loadBinary = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadBinary(path, function (data) {
this.downloadBinary(path, function (data) { _this.success(success, path, data);
_this.assets[path] = data; }, function (status, responseText) {
if (success) _this.error(error, path, "Couldn't load binary " + path + ": status " + status + ", " + responseText);
success(path, data);
_this.toLoad--;
_this.loaded++;
}, function (state, responseText) {
_this.errors[path] = "Couldn't load binary " + path + ": status " + status + ", " + responseText;
if (error)
error(path, "Couldn't load binary " + path + ": status " + status + ", " + responseText);
_this.toLoad--;
_this.loaded++;
}); });
}; };
AssetManager.prototype.loadText = function (path, success, error) { AssetManager.prototype.loadText = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadText(path, function (data) {
this.downloadText(path, function (data) { _this.success(success, path, data);
_this.assets[path] = data; }, function (status, responseText) {
if (success) _this.error(error, path, "Couldn't load text " + path + ": status " + status + ", " + responseText);
success(path, data); });
_this.toLoad--; };
_this.loaded++; AssetManager.prototype.loadJson = function (path, success, error) {
}, function (state, responseText) { var _this = this;
_this.errors[path] = "Couldn't load text " + path + ": status " + status + ", " + responseText; if (success === void 0) { success = null; }
if (error) if (error === void 0) { error = null; }
error(path, "Couldn't load text " + path + ": status " + status + ", " + responseText); path = this.start(path);
_this.toLoad--; this.downloader.downloadJson(path, function (data) {
_this.loaded++; _this.success(success, path, data);
}, function (status, responseText) {
_this.error(error, path, "Couldn't load JSON " + path + ": status " + status + ", " + responseText);
}); });
}; };
AssetManager.prototype.loadTexture = function (path, success, error) { AssetManager.prototype.loadTexture = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
path = this.pathPrefix + path; path = this.start(path);
var storagePath = path; var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
this.toLoad++; var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
var img = new Image(); if (isWebWorker) {
img.crossOrigin = "anonymous"; fetch(path, { mode: "cors" }).then(function (response) {
img.onload = function (ev) { if (response.ok)
var texture = _this.textureLoader(img); return response.blob();
_this.assets[storagePath] = texture; _this.error(error, path, "Couldn't load image: " + path);
_this.toLoad--; return null;
_this.loaded++; }).then(function (blob) {
if (success) return blob ? createImageBitmap(blob, { premultiplyAlpha: "none", colorSpaceConversion: "none" }) : null;
success(path, img); }).then(function (bitmap) {
if (bitmap)
_this.success(success, path, _this.textureLoader(bitmap));
});
}
else {
var image_1 = new Image();
image_1.crossOrigin = "anonymous";
image_1.onload = function () {
_this.success(success, path, _this.textureLoader(image_1));
}; };
img.onerror = function (ev) { image_1.onerror = function () {
_this.errors[path] = "Couldn't load image " + path; _this.error(error, path, "Couldn't load image: " + path);
_this.toLoad--;
_this.loaded++;
if (error)
error(path, "Couldn't load image " + path);
}; };
if (this.rawDataUris[path]) if (this.downloader.rawDataUris[path])
path = this.rawDataUris[path]; path = this.downloader.rawDataUris[path];
img.src = path; image_1.src = path;
}
}; };
AssetManager.prototype.loadTextureAtlas = function (path, success, error) { AssetManager.prototype.loadTextureAtlas = function (path, success, error) {
var _this = this; var _this = this;
if (success === void 0) { success = null; } if (success === void 0) { success = null; }
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : ""; var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : "";
path = this.pathPrefix + path; path = this.start(path);
this.toLoad++; this.downloader.downloadText(path, function (atlasData) {
this.downloadText(path, function (atlasData) { var pagesLoaded = 0;
var pagesLoaded = { count: 0 };
var atlasPages = new Array(); var atlasPages = new Array();
try { try {
var atlas = new spine.TextureAtlas(atlasData, function (path) { var atlas = new spine.TextureAtlas(atlasData, function (path) {
@ -2893,83 +2872,52 @@ var spine;
image.height = 16; image.height = 16;
return new spine.FakeTexture(image); return new spine.FakeTexture(image);
}); });
}
catch (e) {
var ex = e;
_this.errors[path] = "Couldn't load texture atlas " + path + ": " + ex.message;
if (error)
error(path, "Couldn't load texture atlas " + path + ": " + ex.message);
_this.toLoad--;
_this.loaded++;
return;
}
var _loop_1 = function (atlasPage) { var _loop_1 = function (atlasPage) {
var pageLoadError = false; var pageLoadError = false;
_this.loadTexture(atlasPage, function (imagePath, image) { _this.loadTexture(atlasPage, function (imagePath, image) {
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded.count == atlasPages.length) { if (pagesLoaded == atlasPages.length) {
if (!pageLoadError) { if (!pageLoadError) {
try { try {
var atlas = new spine.TextureAtlas(atlasData, function (path) { _this.success(success, path, new spine.TextureAtlas(atlasData, function (path) {
return _this.get(parent == "" ? path : parent + "/" + path); return _this.get(parent == "" ? path : parent + "/" + path);
}); }));
_this.assets[path] = atlas;
if (success)
success(path, atlas);
_this.toLoad--;
_this.loaded++;
} }
catch (e) { catch (e) {
var ex = e; _this.error(error, path, "Couldn't load texture atlas " + path + ": " + e.message);
_this.errors[path] = "Couldn't load texture atlas " + path + ": " + ex.message;
if (error)
error(path, "Couldn't load texture atlas " + path + ": " + ex.message);
_this.toLoad--;
_this.loaded++;
} }
} }
else { else
_this.errors[path] = "Couldn't load texture atlas page " + imagePath + "} of atlas " + path; _this.error(error, path, "Couldn't load texture atlas " + path + " page: " + imagePath);
if (error)
error(path, "Couldn't load texture atlas page " + imagePath + " of atlas " + path);
_this.toLoad--;
_this.loaded++;
}
} }
}, function (imagePath, errorMessage) { }, function (imagePath, errorMessage) {
pageLoadError = true; pageLoadError = true;
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded.count == atlasPages.length) { if (pagesLoaded == atlasPages.length)
_this.errors[path] = "Couldn't load texture atlas page " + imagePath + "} of atlas " + path; _this.error(error, path, "Couldn't load texture atlas " + path + " page: " + imagePath);
if (error)
error(path, "Couldn't load texture atlas page " + imagePath + " of atlas " + path);
_this.toLoad--;
_this.loaded++;
}
}); });
}; };
for (var _i = 0, atlasPages_1 = atlasPages; _i < atlasPages_1.length; _i++) { for (var _i = 0, atlasPages_1 = atlasPages; _i < atlasPages_1.length; _i++) {
var atlasPage = atlasPages_1[_i]; var atlasPage = atlasPages_1[_i];
_loop_1(atlasPage); _loop_1(atlasPage);
} }
}, function (state, responseText) { }
_this.errors[path] = "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText; catch (e) {
if (error) _this.error(error, path, "Couldn't load texture atlas " + path + ": " + e.message);
error(path, "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText); }
_this.toLoad--; }, function (status, responseText) {
_this.loaded++; _this.error(error, path, "Couldn't load texture atlas " + path + ": status " + status + ", " + responseText);
}); });
}; };
AssetManager.prototype.get = function (path) { AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path; return this.assets[this.pathPrefix + path];
return this.assets[path];
}; };
AssetManager.prototype.remove = function (path) { AssetManager.prototype.remove = function (path) {
path = this.pathPrefix + path; path = this.pathPrefix + path;
var asset = this.assets[path]; var asset = this.assets[path];
if (asset.dispose) if (asset.dispose)
asset.dispose(); asset.dispose();
this.assets[path] = null; delete this.assets[path];
}; };
AssetManager.prototype.removeAll = function () { AssetManager.prototype.removeAll = function () {
for (var key in this.assets) { for (var key in this.assets) {
@ -3000,6 +2948,74 @@ var spine;
return AssetManager; return AssetManager;
}()); }());
spine.AssetManager = AssetManager; spine.AssetManager = AssetManager;
var Downloader = (function () {
function Downloader() {
this.callbacks = {};
this.rawDataUris = {};
}
Downloader.prototype.downloadText = function (url, success, error) {
var _this = this;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
if (this.start(url, success, error))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.open("GET", url, true);
var done = function () {
_this.finish(url, request.status, request.responseText);
};
request.onload = done;
request.onerror = done;
request.send();
};
Downloader.prototype.downloadJson = function (url, success, error) {
this.downloadText(url, function (data) {
success(JSON.parse(data));
}, error);
};
Downloader.prototype.downloadBinary = function (url, success, error) {
var _this = this;
if (this.rawDataUris[url])
url = this.rawDataUris[url];
if (this.start(url, success, error))
return;
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
var onerror = function () {
_this.finish(url, request.status, request.responseText);
};
request.onload = function () {
if (request.status == 200)
_this.finish(url, 200, new Uint8Array(request.response));
else
onerror();
};
request.onerror = onerror;
request.send();
};
Downloader.prototype.start = function (url, success, error) {
var callbacks = this.callbacks[url];
try {
if (callbacks)
return true;
this.callbacks[url] = callbacks = [];
}
finally {
callbacks.push(success, error);
}
};
Downloader.prototype.finish = function (url, status, data) {
var callbacks = this.callbacks[url];
delete this.callbacks[url];
var args = status == 200 ? [data] : [status, data];
for (var i = args.length - 1, n = callbacks.length; i < n; i += 2)
callbacks[i].apply(null, args);
};
return Downloader;
}());
spine.Downloader = Downloader;
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) { (function (spine) {
@ -4088,178 +4104,6 @@ var spine;
})(RotateMode = spine.RotateMode || (spine.RotateMode = {})); })(RotateMode = spine.RotateMode || (spine.RotateMode = {}));
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) {
var Assets = (function () {
function Assets(clientId) {
this.toLoad = new Array();
this.assets = {};
this.clientId = clientId;
}
Assets.prototype.loaded = function () {
var i = 0;
for (var v in this.assets)
i++;
return i;
};
return Assets;
}());
var SharedAssetManager = (function () {
function SharedAssetManager(pathPrefix) {
if (pathPrefix === void 0) { pathPrefix = ""; }
this.clientAssets = {};
this.queuedAssets = {};
this.rawAssets = {};
this.errors = {};
this.pathPrefix = pathPrefix;
}
SharedAssetManager.prototype.queueAsset = function (clientId, textureLoader, path) {
var clientAssets = this.clientAssets[clientId];
if (!clientAssets) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader)
clientAssets.textureLoader = textureLoader;
clientAssets.toLoad.push(path);
if (this.queuedAssets[path] === path) {
return false;
}
else {
this.queuedAssets[path] = path;
return true;
}
};
SharedAssetManager.prototype.loadText = function (clientId, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
_this.rawAssets[path] = request.responseText;
}
else {
_this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
}
}
};
request.open("GET", path, true);
request.send();
};
SharedAssetManager.prototype.loadJson = function (clientId, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path))
return;
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
_this.rawAssets[path] = JSON.parse(request.responseText);
}
else {
_this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
}
}
};
request.open("GET", path, true);
request.send();
};
SharedAssetManager.prototype.loadTexture = function (clientId, textureLoader, path) {
var _this = this;
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, textureLoader, path))
return;
var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
if (isWebWorker) {
var options = { mode: "cors" };
fetch(path, options).then(function (response) {
if (!response.ok) {
_this.errors[path] = "Couldn't load image " + path;
}
return response.blob();
}).then(function (blob) {
return createImageBitmap(blob, {
premultiplyAlpha: 'none',
colorSpaceConversion: 'none'
});
}).then(function (bitmap) {
_this.rawAssets[path] = bitmap;
});
}
else {
var img_1 = new Image();
img_1.crossOrigin = "anonymous";
img_1.onload = function (ev) {
_this.rawAssets[path] = img_1;
};
img_1.onerror = function (ev) {
_this.errors[path] = "Couldn't load image " + path;
};
img_1.src = path;
}
};
SharedAssetManager.prototype.get = function (clientId, path) {
path = this.pathPrefix + path;
var clientAssets = this.clientAssets[clientId];
if (!clientAssets)
return true;
return clientAssets.assets[path];
};
SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
for (var i = 0; i < clientAssets.toLoad.length; i++) {
var path = clientAssets.toLoad[i];
var asset = clientAssets.assets[path];
if (!asset) {
var rawAsset = this.rawAssets[path];
if (!rawAsset)
continue;
if (isWebWorker) {
if (rawAsset instanceof ImageBitmap) {
clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
}
else {
clientAssets.assets[path] = rawAsset;
}
}
else {
if (rawAsset instanceof HTMLImageElement) {
clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
}
else {
clientAssets.assets[path] = rawAsset;
}
}
}
}
};
SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
var clientAssets = this.clientAssets[clientId];
if (!clientAssets)
return true;
this.updateClientAssets(clientAssets);
return clientAssets.toLoad.length == clientAssets.loaded();
};
SharedAssetManager.prototype.dispose = function () {
};
SharedAssetManager.prototype.hasErrors = function () {
return Object.keys(this.errors).length > 0;
};
SharedAssetManager.prototype.getErrors = function () {
return this.errors;
};
return SharedAssetManager;
}());
spine.SharedAssetManager = SharedAssetManager;
})(spine || (spine = {}));
var spine;
(function (spine) { (function (spine) {
var Skeleton = (function () { var Skeleton = (function () {
function Skeleton(data) { function Skeleton(data) {
@ -9152,11 +8996,12 @@ var spine;
(function (webgl) { (function (webgl) {
var AssetManager = (function (_super) { var AssetManager = (function (_super) {
__extends(AssetManager, _super); __extends(AssetManager, _super);
function AssetManager(context, pathPrefix) { function AssetManager(context, pathPrefix, downloader) {
if (pathPrefix === void 0) { pathPrefix = ""; } if (pathPrefix === void 0) { pathPrefix = ""; }
if (downloader === void 0) { downloader = null; }
return _super.call(this, function (image) { return _super.call(this, function (image) {
return new spine.webgl.GLTexture(context, image); return new spine.webgl.GLTexture(context, image);
}, pathPrefix) || this; }, pathPrefix, downloader) || this;
} }
return AssetManager; return AssetManager;
}(spine.AssetManager)); }(spine.AssetManager));

2
spine-ts/build/spine-webgl.js.map
View File

File diff suppressed because one or more lines are too long

98
spine-ts/core/src/AssetManager.ts
View File

@ -30,14 +30,14 @@
module spine { module spine {
export class AssetManager implements Disposable { export class AssetManager implements Disposable {
private pathPrefix: string; private pathPrefix: string;
private textureLoader: (image: HTMLImageElement) => any; private textureLoader: (image: HTMLImageElement | ImageBitmap) => any;
private downloader: Downloader; private downloader: Downloader;
private assets: Map<any> = {}; private assets: Map<any> = {};
private errors: Map<string> = {}; private errors: Map<string> = {};
private toLoad = 0; private toLoad = 0;
private loaded = 0; private loaded = 0;
constructor (textureLoader: (image: HTMLImageElement) => any, pathPrefix: string = "", downloader: Downloader = null) { constructor (textureLoader: (image: HTMLImageElement | ImageBitmap) => any, pathPrefix: string = "", downloader: Downloader = null) {
this.textureLoader = textureLoader; this.textureLoader = textureLoader;
this.pathPrefix = pathPrefix; this.pathPrefix = pathPrefix;
this.downloader = downloader || new Downloader(); this.downloader = downloader || new Downloader();
@ -48,14 +48,14 @@ module spine {
return this.pathPrefix + path; return this.pathPrefix + path;
} }
private success (path: string, callback: (path: string, data: any) => void, asset: any) { private success (callback: (path: string, data: any) => void, path: string, asset: any) {
this.toLoad--; this.toLoad--;
this.loaded++; this.loaded++;
this.assets[path] = asset; this.assets[path] = asset;
if (callback) callback(path, asset); if (callback) callback(path, asset);
} }
private error (path: string, callback: (path: string, error: string) => void, message: string) { private error (callback: (path: string, message: string) => void, path: string, message: string) {
this.toLoad--; this.toLoad--;
this.loaded++; this.loaded++;
this.errors[path] = message; this.errors[path] = message;
@ -68,66 +68,80 @@ module spine {
loadBinary(path: string, loadBinary(path: string,
success: (path: string, binary: Uint8Array) => void = null, success: (path: string, binary: Uint8Array) => void = null,
error: (path: string, error: string) => void = null) { error: (path: string, message: string) => void = null) {
path = this.start(path); path = this.start(path);
this.downloader.downloadBinary(path, (data: Uint8Array): void => { this.downloader.downloadBinary(path, (data: Uint8Array): void => {
this.success(path, success, data); this.success(success, path, data);
}, (status: number, responseText: string): void => { }, (status: number, responseText: string): void => {
this.error(path, error, `Couldn't load binary ${path}: status ${status}, ${responseText}`); this.error(error, path, `Couldn't load binary ${path}: status ${status}, ${responseText}`);
}); });
} }
loadText(path: string, loadText(path: string,
success: (path: string, text: string) => void = null, success: (path: string, text: string) => void = null,
error: (path: string, error: string) => void = null) { error: (path: string, message: string) => void = null) {
path = this.start(path); path = this.start(path);
this.downloader.downloadText(path, (data: string): void => { this.downloader.downloadText(path, (data: string): void => {
this.success(path, success, data); this.success(success, path, data);
}, (status: number, responseText: string): void => { }, (status: number, responseText: string): void => {
this.error(path, error, `Couldn't load text ${path}: status ${status}, ${responseText}`); this.error(error, path, `Couldn't load text ${path}: status ${status}, ${responseText}`);
}); });
} }
loadJson(path: string, loadJson(path: string,
success: (path: string, object: object) => void = null, success: (path: string, object: object) => void = null,
error: (path: string, error: string) => void = null) { error: (path: string, message: string) => void = null) {
path = this.start(path); path = this.start(path);
this.downloader.downloadJson(path, (data: object): void => { this.downloader.downloadJson(path, (data: object): void => {
this.success(path, success, data); this.success(success, path, data);
}, (status: number, responseText: string): void => { }, (status: number, responseText: string): void => {
this.error(path, error, `Couldn't load JSON ${path}: status ${status}, ${responseText}`); this.error(error, path, `Couldn't load JSON ${path}: status ${status}, ${responseText}`);
}); });
} }
loadTexture (path: string, loadTexture (path: string,
success: (path: string, image: HTMLImageElement) => void = null, success: (path: string, image: HTMLImageElement | ImageBitmap) => void = null,
error: (path: string, error: string) => void = null) { error: (path: string, message: string) => void = null) {
path = this.start(path); path = this.start(path);
let img = new Image(); let isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
img.crossOrigin = "anonymous"; let isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
img.onload = (ev) => { if (isWebWorker) {
this.success(path, success, this.textureLoader(img)); fetch(path, {mode: <RequestMode>"cors"}).then( (response) => {
} if (response.ok) return response.blob();
img.onerror = (ev) => { this.error(error, path, `Couldn't load image: ${path}`);
this.error(path, error, `Couldn't load image ${path}`); return null;
} }).then( (blob) => {
return blob ? createImageBitmap(blob, { premultiplyAlpha: "none", colorSpaceConversion: "none" }) : null;
}).then( (bitmap) => {
if (bitmap) this.success(success, path, this.textureLoader(bitmap));
});
} else {
let image = new Image();
image.crossOrigin = "anonymous";
image.onload = () => {
this.success(success, path, this.textureLoader(image));
};
image.onerror = () => {
this.error(error, path, `Couldn't load image: ${path}`);
};
if (this.downloader.rawDataUris[path]) path = this.downloader.rawDataUris[path]; if (this.downloader.rawDataUris[path]) path = this.downloader.rawDataUris[path];
img.src = path; image.src = path;
}
} }
loadTextureAtlas (path: string, loadTextureAtlas (path: string,
success: (path: string, atlas: TextureAtlas) => void = null, success: (path: string, atlas: TextureAtlas) => void = null,
error: (path: string, error: string) => void = null error: (path: string, message: string) => void = null
) { ) {
path = this.start(path);
let parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : ""; let parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : "";
path = this.start(path);
this.downloader.downloadText(path, (atlasData: string): void => { this.downloader.downloadText(path, (atlasData: string): void => {
let pagesLoaded: any = { count: 0 }; let pagesLoaded = 0;
let atlasPages = new Array<string>(); let atlasPages = new Array<string>();
try { try {
let atlas = new TextureAtlas(atlasData, (path: string) => { let atlas = new TextureAtlas(atlasData, (path: string) => {
@ -137,38 +151,34 @@ module spine {
image.height = 16; image.height = 16;
return new FakeTexture(image); return new FakeTexture(image);
}); });
} catch (e) {
this.error(path, error, `Couldn't load texture atlas ${path}: ${e.message}`);
return;
}
for (let atlasPage of atlasPages) { for (let atlasPage of atlasPages) {
let pageLoadError = false; let pageLoadError = false;
this.loadTexture(atlasPage, (imagePath: string, image: HTMLImageElement) => { this.loadTexture(atlasPage, (imagePath: string, image: HTMLImageElement | ImageBitmap) => {
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded == atlasPages.length) {
if (pagesLoaded.count == atlasPages.length) {
if (!pageLoadError) { if (!pageLoadError) {
try { try {
this.success(path, success, new TextureAtlas(atlasData, (path: string) => { this.success(success, path, new TextureAtlas(atlasData, (path: string) => {
return this.get(parent == "" ? path : parent + "/" + path); return this.get(parent == "" ? path : parent + "/" + path);
})); }));
} catch (e) { } catch (e) {
this.error(path, error, `Couldn't load texture atlas ${path}: ${e.message}`); this.error(error, path, `Couldn't load texture atlas ${path}: ${e.message}`);
} }
} else } else
this.error(path, error, `Couldn't load texture atlas page ${imagePath}} of atlas ${path}`); this.error(error, path, `Couldn't load texture atlas ${path} page: ${imagePath}`);
} }
}, (imagePath: string, errorMessage: string) => { }, (imagePath: string, errorMessage: string) => {
pageLoadError = true; pageLoadError = true;
pagesLoaded.count++; pagesLoaded++;
if (pagesLoaded == atlasPages.length)
if (pagesLoaded.count == atlasPages.length) this.error(error, path, `Couldn't load texture atlas ${path} page: ${imagePath}`);
this.error(path, error, `Couldn't load texture atlas page ${imagePath}} of atlas ${path}`);
}); });
} }
} catch (e) {
this.error(error, path, `Couldn't load texture atlas ${path}: ${e.message}`);
}
}, (status: number, responseText: string): void => { }, (status: number, responseText: string): void => {
this.error(path, error, `Couldn't load texture atlas ${path}: status ${status}, ${responseText}`); this.error(error, path, `Couldn't load texture atlas ${path}: status ${status}, ${responseText}`);
}); });
} }

219
spine-ts/core/src/SharedAssetManager.ts
View File

@ -1,219 +0,0 @@
/******************************************************************************
* Spine Runtimes License Agreement
* Last updated January 1, 2020. Replaces all prior versions.
*
* Copyright (c) 2013-2020, Esoteric Software LLC
*
* Integration of the Spine Runtimes into software or otherwise creating
* derivative works of the Spine Runtimes is permitted under the terms and
* conditions of Section 2 of the Spine Editor License Agreement:
* http://esotericsoftware.com/spine-editor-license
*
* Otherwise, it is permitted to integrate the Spine Runtimes into software
* or otherwise create derivative works of the Spine Runtimes (collectively,
* "Products"), provided that each user of the Products must obtain their own
* Spine Editor license and redistribution of the Products in any form must
* include this license and copyright notice.
*
* THE SPINE RUNTIMES ARE PROVIDED BY ESOTERIC SOFTWARE LLC "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL ESOTERIC SOFTWARE LLC BE LIABLE FOR ANY
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES,
* BUSINESS INTERRUPTION, OR LOSS OF USE, DATA, OR PROFITS) HOWEVER CAUSED AND
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
module spine {
class Assets {
clientId: string;
toLoad = new Array<string>();
assets: Map<any> = {};
textureLoader: (image: HTMLImageElement | ImageBitmap) => any;
constructor(clientId: string) {
this.clientId = clientId;
}
loaded() {
let i = 0;
for (let v in this.assets) i++;
return i;
}
}
export class SharedAssetManager implements Disposable {
private pathPrefix: string;
private clientAssets: Map<Assets> = {};
private queuedAssets: Map<string> = {};
private rawAssets: Map<any> = {}
private errors: Map<string> = {};
constructor (pathPrefix: string = "") {
this.pathPrefix = pathPrefix;
}
private queueAsset(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): boolean {
let clientAssets = this.clientAssets[clientId];
if (!clientAssets) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader) clientAssets.textureLoader = textureLoader;
clientAssets.toLoad.push(path);
// check if already queued, in which case we can skip actual
// loading
if (this.queuedAssets[path] === path) {
return false;
} else {
this.queuedAssets[path] = path;
return true;
}
}
loadText(clientId: string, path: string) {
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path)) return;
let request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = () => {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
this.rawAssets[path] = request.responseText;
} else {
this.errors[path] = `Couldn't load text ${path}: status ${request.status}, ${request.responseText}`;
}
}
};
request.open("GET", path, true);
request.send();
}
loadJson(clientId: string, path: string) {
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, null, path)) return;
let request = new XMLHttpRequest();
request.overrideMimeType("text/html");
request.onreadystatechange = () => {
if (request.readyState == XMLHttpRequest.DONE) {
if (request.status >= 200 && request.status < 300) {
this.rawAssets[path] = JSON.parse(request.responseText);
} else {
this.errors[path] = `Couldn't load text ${path}: status ${request.status}, ${request.responseText}`;
}
}
};
request.open("GET", path, true);
request.send();
}
loadTexture (clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string) {
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, textureLoader, path)) return;
let isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
let isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
if (isWebWorker) {
// For webworker use fetch instead of Image()
const options = {mode: <RequestMode>"cors"};
fetch(path, options).then( (response) => {
if (!response.ok) {
this.errors[path] = "Couldn't load image " + path;
}
return response.blob();
}).then( (blob) => {
return createImageBitmap(blob, {
premultiplyAlpha: 'none',
colorSpaceConversion: 'none',
});
}).then( (bitmap) => {
this.rawAssets[path] = bitmap;
});
} else {
let img = new Image();
img.crossOrigin = "anonymous";
img.onload = (ev) => {
this.rawAssets[path] = img;
}
img.onerror = (ev) => {
this.errors[path] = `Couldn't load image ${path}`;
}
img.src = path;
}
}
get (clientId: string, path: string) {
path = this.pathPrefix + path;
let clientAssets = this.clientAssets[clientId];
if (!clientAssets) return true;
return clientAssets.assets[path];
}
private updateClientAssets(clientAssets: Assets): void {
let isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
let isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
for (let i = 0; i < clientAssets.toLoad.length; i++) {
let path = clientAssets.toLoad[i];
let asset = clientAssets.assets[path];
if (!asset) {
let rawAsset = this.rawAssets[path];
if (!rawAsset) continue;
if (isWebWorker) {
if (rawAsset instanceof ImageBitmap) {
clientAssets.assets[path] = clientAssets.textureLoader(<ImageBitmap>rawAsset);
} else {
clientAssets.assets[path] = rawAsset;
}
} else {
if (rawAsset instanceof HTMLImageElement) {
clientAssets.assets[path] = clientAssets.textureLoader(<HTMLImageElement>rawAsset);
} else {
clientAssets.assets[path] = rawAsset;
}
}
}
}
}
isLoadingComplete (clientId: string): boolean {
let clientAssets = this.clientAssets[clientId];
if (!clientAssets) return true;
this.updateClientAssets(clientAssets);
return clientAssets.toLoad.length == clientAssets.loaded();
}
/*remove (clientId: string, path: string) {
path = this.pathPrefix + path;
let asset = this.assets[path];
if ((<any>asset).dispose) (<any>asset).dispose();
this.assets[path] = null;
}
removeAll () {
for (let key in this.assets) {
let asset = this.assets[key];
if ((<any>asset).dispose) (<any>asset).dispose();
}
this.assets = {};
}*/
dispose () {
// this.removeAll();
}
hasErrors() {
return Object.keys(this.errors).length > 0;
}
getErrors() {
return this.errors;
}
}
}