UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-16 03:51:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Refactored demos to share assets as much as possible. Added SharedAssetManager for that purpose

Browse Source
This commit is contained in:
badlogic 2016-09-02 11:22:04 +02:00
parent e4bd9124a5
commit 1c74823b2f
39 changed files with 1236 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -489,6 +489,26 @@ declare module spine {
ChainScale = 2,
}
}
declare module spine {
class SharedAssetManager implements Disposable {
private pathPrefix;
private clientAssets;
private queuedAssets;
private rawAssets;
private errors;
constructor(pathPrefix?: string);
private queueAsset(clientId, textureLoader, path);
loadText(clientId: string, path: string): void;
loadJson(clientId: string, path: string): void;
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
get(clientId: string, path: string): any;
private updateClientAssets(clientAssets);
isLoadingComplete(clientId: string): boolean;
dispose(): void;
hasErrors(): boolean;
getErrors(): Map<string>;
}
}
declare module spine {
class Skeleton {
data: SkeletonData;
@ -593,7 +613,7 @@ declare module spine {
scale: number;
private linkedMeshes;
constructor(attachmentLoader: AttachmentLoader);
readSkeletonData(json: string): SkeletonData;
readSkeletonData(json: string | any): SkeletonData;
readAttachment(map: any, skin: Skin, slotIndex: number, name: string): Attachment;
readVertices(map: any, attachment: VertexAttachment, verticesLength: number): void;
readAnimation(map: any, name: string, skeletonData: SkeletonData): void;
@ -1038,6 +1058,9 @@ declare module spine.webgl {
}
declare module spine.webgl {
class LoadingScreen {
private static loaded;
private static spinnerImg;
private static logoImg;
private renderer;
private logo;
private spinner;

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

@ -2230,6 +2230,144 @@ var spine;
var RotateMode = spine.RotateMode;
})(spine || (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 === null || clientAssets === undefined) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader !== null)
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.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.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 img = new Image();
img.src = path;
img.crossOrigin = "anonymous";
img.onload = function (ev) {
_this.rawAssets[path] = img;
};
img.onerror = function (ev) {
_this.errors[path] = "Couldn't load image " + path;
};
};
SharedAssetManager.prototype.get = function (clientId, path) {
path = this.pathPrefix + path;
var clientAssets = this.clientAssets[clientId];
if (clientAssets === null || clientAssets === undefined)
return true;
return clientAssets.assets[path];
};
SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
for (var i = 0; i < clientAssets.toLoad.length; i++) {
var path = clientAssets.toLoad[i];
var asset = clientAssets.assets[path];
if (asset === null || asset === undefined) {
var rawAsset = this.rawAssets[path];
if (rawAsset === null || rawAsset === undefined)
continue;
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 === null || clientAssets === undefined)
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) {
var Skeleton = (function () {
function Skeleton(data) {
@ -2922,7 +3060,7 @@ var spine;
SkeletonJson.prototype.readSkeletonData = function (json) {
var scale = this.scale;
var skeletonData = new spine.SkeletonData();
var root = JSON.parse(json);
var root = typeof (json) === "string" ? JSON.parse(json) : json;
var skeletonMap = root.skeleton;
if (skeletonMap != null) {
skeletonData.hash = skeletonMap.hash;
@ -5176,25 +5314,26 @@ var spine;
(function (webgl) {
var LoadingScreen = (function () {
function LoadingScreen(renderer) {
var _this = this;
this.logo = null;
this.spinner = null;
this.angle = 0;
this.timeKeeper = new spine.TimeKeeper();
this.backgroundColor = new spine.Color(0, 0, 0, 1);
this.renderer = renderer;
var logoImg = document.createElement("img");
logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA;
logoImg.crossOrigin = "anonymous";
logoImg.onload = function (ev) {
_this.logo = new webgl.GLTexture(renderer.gl, logoImg);
};
var spinnerImg = new Image();
spinnerImg.src = LoadingScreen.useDark ? LoadingScreen.SPINNER_DARK_DATA : LoadingScreen.SPINNER_DATA;
logoImg.crossOrigin = "anonymous";
spinnerImg.onload = function (ev) {
_this.spinner = new webgl.GLTexture(renderer.gl, spinnerImg);
};
if (LoadingScreen.logoImg === null) {
LoadingScreen.logoImg = document.createElement("img");
LoadingScreen.logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA;
LoadingScreen.logoImg.crossOrigin = "anonymous";
LoadingScreen.logoImg.onload = function (ev) {
LoadingScreen.loaded++;
};
LoadingScreen.spinnerImg = new Image();
LoadingScreen.spinnerImg.src = LoadingScreen.useDark ? LoadingScreen.SPINNER_DARK_DATA : LoadingScreen.SPINNER_DATA;
LoadingScreen.spinnerImg.crossOrigin = "anonymous";
LoadingScreen.spinnerImg.onload = function (ev) {
LoadingScreen.loaded++;
};
}
}
LoadingScreen.prototype.draw = function () {
this.timeKeeper.update();
@ -5204,9 +5343,12 @@ var spine;
var gl = renderer.gl;
gl.clearColor(this.backgroundColor.r, this.backgroundColor.g, this.backgroundColor.b, this.backgroundColor.a);
gl.clear(gl.COLOR_BUFFER_BIT);
if (this.logo === null || this.spinner === null)
if (LoadingScreen.loaded != 2)
return;
this.logo.update(false);
if (this.logo === null) {
this.logo = new webgl.GLTexture(renderer.gl, LoadingScreen.logoImg);
this.spinner = new webgl.GLTexture(renderer.gl, LoadingScreen.spinnerImg);
}
renderer.camera.position.set(canvas.width / 2, canvas.height / 2, 0);
renderer.camera.viewportWidth = canvas.width;
renderer.camera.viewportHeight = canvas.height;
@ -5222,6 +5364,9 @@ var spine;
renderer.drawTextureRotated(this.spinner, canvas.width / 2 - width / 2 + logoWidth + margin, canvas.height / 2 - spinnerHeight / 2 + 2, spinnerWidth, spinnerHeight, spinnerWidth / 2, spinnerHeight / 2, this.angle);
renderer.end();
};
LoadingScreen.loaded = 0;
LoadingScreen.spinnerImg = null;
LoadingScreen.logoImg = null;
LoadingScreen.useDark = true;
LoadingScreen.SPINNER_DATA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAYAAADwbH0HAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgtJREFUeNrsVz1LA0EQvbt8IIFoESshEBRCSsXOwhhsLBTS+jf8BSns/QtWYqeohY14lVoIpg4EAwGxMEZMkHiF5xsYdVx2z9zlksoHj8l+3Lyb2dndi2VFgO/7e/4PumDNGjdIxNejNm7hrkH4Powf2+B8DqYM9kHXtu2eGPONzoBRItoCbwUvwTUxfmeI+ChyxBzpiWZeD8FUeE4VRidSwRxX+ErB5Lj5irE3OdlRHi4bXjALR8uczmMSAcm6bJekKGOG/ROnVYdJpd0PyE5PrKXLokH4kMlUB9WIXSkg0IBYI2S5vIAD5vMwxVUET0VxHVCfNSnwC0xOcFKwOToq+3Uuf1rLa7X8YxeGaB52B8yI/jaEd2NctgTMAm1L0AObVNWbiighj8mLMQZYYFFCml7C0Yh+i8conFDaaRI2rWU7RmFPbZPwmUac1rgeo3CbDxSLtZqyqle+BiB6Yf1jHAeIsuemYDbAEh/wdc2VN8zezYid8QQfnb+E6aJX97AbRpxFV8GU6L6S4o7mOd3BUQoZcF4RJcwH3ccmDAI+CiMhqelr8RGn9v26Mnn7pfHb4zQ2lH1bDDqQTMVVFem9gdNzMU5n7rbmhfcxzxPzciK9dCA9BkaMCZTWw4AsZQ39s+CD8EOF1DE5cSIsz3vI/niEOZKG5mOwM/JfmCH3aoG/WFphRQmfAgwALNYr+OATlbkAAAAASUVORK5CYII=";
LoadingScreen.SPINNER_DARK_DATA = "data:image/png;base64,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";

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

File diff suppressed because one or more lines are too long

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

@ -423,6 +423,26 @@ declare module spine {
ChainScale = 2,
}
}
declare module spine {
class SharedAssetManager implements Disposable {
private pathPrefix;
private clientAssets;
private queuedAssets;
private rawAssets;
private errors;
constructor(pathPrefix?: string);
private queueAsset(clientId, textureLoader, path);
loadText(clientId: string, path: string): void;
loadJson(clientId: string, path: string): void;
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
get(clientId: string, path: string): any;
private updateClientAssets(clientAssets);
isLoadingComplete(clientId: string): boolean;
dispose(): void;
hasErrors(): boolean;
getErrors(): Map<string>;
}
}
declare module spine {
class Skeleton {
data: SkeletonData;
@ -527,7 +547,7 @@ declare module spine {
scale: number;
private linkedMeshes;
constructor(attachmentLoader: AttachmentLoader);
readSkeletonData(json: string): SkeletonData;
readSkeletonData(json: string | any): SkeletonData;
readAttachment(map: any, skin: Skin, slotIndex: number, name: string): Attachment;
readVertices(map: any, attachment: VertexAttachment, verticesLength: number): void;
readAnimation(map: any, name: string, skeletonData: SkeletonData): void;

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

@ -1987,6 +1987,144 @@ var spine;
var RotateMode = spine.RotateMode;
})(spine || (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 === null || clientAssets === undefined) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader !== null)
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.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.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 img = new Image();
img.src = path;
img.crossOrigin = "anonymous";
img.onload = function (ev) {
_this.rawAssets[path] = img;
};
img.onerror = function (ev) {
_this.errors[path] = "Couldn't load image " + path;
};
};
SharedAssetManager.prototype.get = function (clientId, path) {
path = this.pathPrefix + path;
var clientAssets = this.clientAssets[clientId];
if (clientAssets === null || clientAssets === undefined)
return true;
return clientAssets.assets[path];
};
SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
for (var i = 0; i < clientAssets.toLoad.length; i++) {
var path = clientAssets.toLoad[i];
var asset = clientAssets.assets[path];
if (asset === null || asset === undefined) {
var rawAsset = this.rawAssets[path];
if (rawAsset === null || rawAsset === undefined)
continue;
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 === null || clientAssets === undefined)
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) {
var Skeleton = (function () {
function Skeleton(data) {
@ -2679,7 +2817,7 @@ var spine;
SkeletonJson.prototype.readSkeletonData = function (json) {
var scale = this.scale;
var skeletonData = new spine.SkeletonData();
var root = JSON.parse(json);
var root = typeof (json) === "string" ? JSON.parse(json) : json;
var skeletonMap = root.skeleton;
if (skeletonMap != null) {
skeletonData.hash = skeletonMap.hash;

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

File diff suppressed because one or more lines are too long

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

@ -423,6 +423,26 @@ declare module spine {
ChainScale = 2,
}
}
declare module spine {
class SharedAssetManager implements Disposable {
private pathPrefix;
private clientAssets;
private queuedAssets;
private rawAssets;
private errors;
constructor(pathPrefix?: string);
private queueAsset(clientId, textureLoader, path);
loadText(clientId: string, path: string): void;
loadJson(clientId: string, path: string): void;
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
get(clientId: string, path: string): any;
private updateClientAssets(clientAssets);
isLoadingComplete(clientId: string): boolean;
dispose(): void;
hasErrors(): boolean;
getErrors(): Map<string>;
}
}
declare module spine {
class Skeleton {
data: SkeletonData;
@ -527,7 +547,7 @@ declare module spine {
scale: number;
private linkedMeshes;
constructor(attachmentLoader: AttachmentLoader);
readSkeletonData(json: string): SkeletonData;
readSkeletonData(json: string | any): SkeletonData;
readAttachment(map: any, skin: Skin, slotIndex: number, name: string): Attachment;
readVertices(map: any, attachment: VertexAttachment, verticesLength: number): void;
readAnimation(map: any, name: string, skeletonData: SkeletonData): void;

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

@ -1987,6 +1987,144 @@ var spine;
var RotateMode = spine.RotateMode;
})(spine || (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 === null || clientAssets === undefined) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader !== null)
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.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.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 img = new Image();
img.src = path;
img.crossOrigin = "anonymous";
img.onload = function (ev) {
_this.rawAssets[path] = img;
};
img.onerror = function (ev) {
_this.errors[path] = "Couldn't load image " + path;
};
};
SharedAssetManager.prototype.get = function (clientId, path) {
path = this.pathPrefix + path;
var clientAssets = this.clientAssets[clientId];
if (clientAssets === null || clientAssets === undefined)
return true;
return clientAssets.assets[path];
};
SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
for (var i = 0; i < clientAssets.toLoad.length; i++) {
var path = clientAssets.toLoad[i];
var asset = clientAssets.assets[path];
if (asset === null || asset === undefined) {
var rawAsset = this.rawAssets[path];
if (rawAsset === null || rawAsset === undefined)
continue;
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 === null || clientAssets === undefined)
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) {
var Skeleton = (function () {
function Skeleton(data) {
@ -2679,7 +2817,7 @@ var spine;
SkeletonJson.prototype.readSkeletonData = function (json) {
var scale = this.scale;
var skeletonData = new spine.SkeletonData();
var root = JSON.parse(json);
var root = typeof (json) === "string" ? JSON.parse(json) : json;
var skeletonMap = root.skeleton;
if (skeletonMap != null) {
skeletonData.hash = skeletonMap.hash;

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

File diff suppressed because one or more lines are too long

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

@ -423,6 +423,26 @@ declare module spine {
ChainScale = 2,
}
}
declare module spine {
class SharedAssetManager implements Disposable {
private pathPrefix;
private clientAssets;
private queuedAssets;
private rawAssets;
private errors;
constructor(pathPrefix?: string);
private queueAsset(clientId, textureLoader, path);
loadText(clientId: string, path: string): void;
loadJson(clientId: string, path: string): void;
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
get(clientId: string, path: string): any;
private updateClientAssets(clientAssets);
isLoadingComplete(clientId: string): boolean;
dispose(): void;
hasErrors(): boolean;
getErrors(): Map<string>;
}
}
declare module spine {
class Skeleton {
data: SkeletonData;
@ -527,7 +547,7 @@ declare module spine {
scale: number;
private linkedMeshes;
constructor(attachmentLoader: AttachmentLoader);
readSkeletonData(json: string): SkeletonData;
readSkeletonData(json: string | any): SkeletonData;
readAttachment(map: any, skin: Skin, slotIndex: number, name: string): Attachment;
readVertices(map: any, attachment: VertexAttachment, verticesLength: number): void;
readAnimation(map: any, name: string, skeletonData: SkeletonData): void;
@ -968,6 +988,9 @@ declare module spine.webgl {
}
declare module spine.webgl {
class LoadingScreen {
private static loaded;
private static spinnerImg;
private static logoImg;
private renderer;
private logo;
private spinner;

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

@ -1987,6 +1987,144 @@ var spine;
var RotateMode = spine.RotateMode;
})(spine || (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 === null || clientAssets === undefined) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader !== null)
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.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.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 img = new Image();
img.src = path;
img.crossOrigin = "anonymous";
img.onload = function (ev) {
_this.rawAssets[path] = img;
};
img.onerror = function (ev) {
_this.errors[path] = "Couldn't load image " + path;
};
};
SharedAssetManager.prototype.get = function (clientId, path) {
path = this.pathPrefix + path;
var clientAssets = this.clientAssets[clientId];
if (clientAssets === null || clientAssets === undefined)
return true;
return clientAssets.assets[path];
};
SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
for (var i = 0; i < clientAssets.toLoad.length; i++) {
var path = clientAssets.toLoad[i];
var asset = clientAssets.assets[path];
if (asset === null || asset === undefined) {
var rawAsset = this.rawAssets[path];
if (rawAsset === null || rawAsset === undefined)
continue;
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 === null || clientAssets === undefined)
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) {
var Skeleton = (function () {
function Skeleton(data) {
@ -2679,7 +2817,7 @@ var spine;
SkeletonJson.prototype.readSkeletonData = function (json) {
var scale = this.scale;
var skeletonData = new spine.SkeletonData();
var root = JSON.parse(json);
var root = typeof (json) === "string" ? JSON.parse(json) : json;
var skeletonMap = root.skeleton;
if (skeletonMap != null) {
skeletonData.hash = skeletonMap.hash;
@ -4753,25 +4891,26 @@ var spine;
(function (webgl) {
var LoadingScreen = (function () {
function LoadingScreen(renderer) {
var _this = this;
this.logo = null;
this.spinner = null;
this.angle = 0;
this.timeKeeper = new spine.TimeKeeper();
this.backgroundColor = new spine.Color(0, 0, 0, 1);
this.renderer = renderer;
var logoImg = document.createElement("img");
logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA;
logoImg.crossOrigin = "anonymous";
logoImg.onload = function (ev) {
_this.logo = new webgl.GLTexture(renderer.gl, logoImg);
};
var spinnerImg = new Image();
spinnerImg.src = LoadingScreen.useDark ? LoadingScreen.SPINNER_DARK_DATA : LoadingScreen.SPINNER_DATA;
logoImg.crossOrigin = "anonymous";
spinnerImg.onload = function (ev) {
_this.spinner = new webgl.GLTexture(renderer.gl, spinnerImg);
};
if (LoadingScreen.logoImg === null) {
LoadingScreen.logoImg = document.createElement("img");
LoadingScreen.logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA;
LoadingScreen.logoImg.crossOrigin = "anonymous";
LoadingScreen.logoImg.onload = function (ev) {
LoadingScreen.loaded++;
};
LoadingScreen.spinnerImg = new Image();
LoadingScreen.spinnerImg.src = LoadingScreen.useDark ? LoadingScreen.SPINNER_DARK_DATA : LoadingScreen.SPINNER_DATA;
LoadingScreen.spinnerImg.crossOrigin = "anonymous";
LoadingScreen.spinnerImg.onload = function (ev) {
LoadingScreen.loaded++;
};
}
}
LoadingScreen.prototype.draw = function () {
this.timeKeeper.update();
@ -4781,9 +4920,12 @@ var spine;
var gl = renderer.gl;
gl.clearColor(this.backgroundColor.r, this.backgroundColor.g, this.backgroundColor.b, this.backgroundColor.a);
gl.clear(gl.COLOR_BUFFER_BIT);
if (this.logo === null || this.spinner === null)
if (LoadingScreen.loaded != 2)
return;
this.logo.update(false);
if (this.logo === null) {
this.logo = new webgl.GLTexture(renderer.gl, LoadingScreen.logoImg);
this.spinner = new webgl.GLTexture(renderer.gl, LoadingScreen.spinnerImg);
}
renderer.camera.position.set(canvas.width / 2, canvas.height / 2, 0);
renderer.camera.viewportWidth = canvas.width;
renderer.camera.viewportHeight = canvas.height;
@ -4799,6 +4941,9 @@ var spine;
renderer.drawTextureRotated(this.spinner, canvas.width / 2 - width / 2 + logoWidth + margin, canvas.height / 2 - spinnerHeight / 2 + 2, spinnerWidth, spinnerHeight, spinnerWidth / 2, spinnerHeight / 2, this.angle);
renderer.end();
};
LoadingScreen.loaded = 0;
LoadingScreen.spinnerImg = null;
LoadingScreen.logoImg = null;
LoadingScreen.useDark = true;
LoadingScreen.SPINNER_DATA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAYAAADwbH0HAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgtJREFUeNrsVz1LA0EQvbt8IIFoESshEBRCSsXOwhhsLBTS+jf8BSns/QtWYqeohY14lVoIpg4EAwGxMEZMkHiF5xsYdVx2z9zlksoHj8l+3Lyb2dndi2VFgO/7e/4PumDNGjdIxNejNm7hrkH4Powf2+B8DqYM9kHXtu2eGPONzoBRItoCbwUvwTUxfmeI+ChyxBzpiWZeD8FUeE4VRidSwRxX+ErB5Lj5irE3OdlRHi4bXjALR8uczmMSAcm6bJekKGOG/ROnVYdJpd0PyE5PrKXLokH4kMlUB9WIXSkg0IBYI2S5vIAD5vMwxVUET0VxHVCfNSnwC0xOcFKwOToq+3Uuf1rLa7X8YxeGaB52B8yI/jaEd2NctgTMAm1L0AObVNWbiighj8mLMQZYYFFCml7C0Yh+i8conFDaaRI2rWU7RmFPbZPwmUac1rgeo3CbDxSLtZqyqle+BiB6Yf1jHAeIsuemYDbAEh/wdc2VN8zezYid8QQfnb+E6aJX97AbRpxFV8GU6L6S4o7mOd3BUQoZcF4RJcwH3ccmDAI+CiMhqelr8RGn9v26Mnn7pfHb4zQ2lH1bDDqQTMVVFem9gdNzMU5n7rbmhfcxzxPzciK9dCA9BkaMCZTWw4AsZQ39s+CD8EOF1DE5cSIsz3vI/niEOZKG5mOwM/JfmCH3aoG/WFphRQmfAgwALNYr+OATlbkAAAAASUVORK5CYII=";
LoadingScreen.SPINNER_DARK_DATA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAAK/INwWK6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAActpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgSW1hZ2VSZWFkeTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KKS7NPQAABElJREFUWAnF1kuPlUUQxnHGO+BdCBBQZmnigkSM+g1YGHUDWzDsjRsT4lfwksjaBX4AVyYkrNywIyGoCWFnBtAII6KC3LyNz6/nrXd6TjhwZlxYyX/e6uruqurqy5y5DdNlbuha6oY8EP2fsDu8F/YGcjocDedDjYna5G5+qm9DdY6GKByw/z0YH8y3khB8PnwetoVrgTwZLod3wkLgwxx+zCFlK1+jsSnDH8FMEPyJATqbPvJuEPyKxiB0Nn2kgpn32ABdcH2jPDRqywEEezF8GF4d+k7leyScC1b6UrgRHg4ldDZ9Er8eJPRWmA9kIXwZVEoSEmol8i2D4KfDJsZObkXfE74LJ8Iz4a+gxMTKLObn8GaQ6Afh6XA7EJX4JXwUJGHuUpWjHH0co+AmcQr6xvBpUKGzYXP4I9QYOps++oEg+G/BHNAl/nYYRQKCGyDrKvujg10fnbwW6J+En8LWYNWgL4ajwZzdQeL6tEFnmw8WJPm5qkD0Nsh3mtgz1bkYDobjQSKgHwrngzFtf/O9r8hKJk64Ep0Kb4Q7oVZOt3/67KEDtxDeD5sDubH8aaukS0Q1+RSDODPGfxucKVVZqqvVGjF8HQ4HJWIDByYcCFZLqs9+/xlqK2vlP8T2cnAO2PQ/Hn4Nx8LvgY/xblcVFmP7IswHk63mq7A/nAsS5tB4VCLVjqkFcw2/CYJajETPhs/C5dBvfZor8siK2u6zg1lS1ar2vb59AAn0b0ZtrflzrQzDgOfydYBMVvIfg9UKbIX0tUhVxzyVeCVsDdpXwplwzSAZ7QxWLxBht7ffB4dwPcIHf7ZyX3AA+ST1cp6wuu3Byr0FJbJ0+FTDgVmPSIC8HrYFVSWSkoiYmwSgCFgTojbdQPu3lr03t8R8Vd0SBBRLDPDpYG5n/F9FAjeDr4xL6DJVtn5rqn+Wr/lW6cDZc1XmF3yqzqUqhQNSV8VECSmbO/tfEsj09vi8kK+troU5+N6YkxIQwEETVFum2q6hFUhovWKuf0AXgufcqj3JbtfJUL+ooi6LBCRCKqHl1vr/uk0ldEmUjA8Rg2yVyFY4uW4AcUb80Kg7zDaL8FOPG9/8+F+y6ofMZHntza5gsmSIMbZC2XxnEX52Bqvt/VgEP+PjVuWOrcmz+Su4c2Ei6sRaDemTtmUoqT5+BJ/0w7e+Ufr94UjZBS1HBtLZ6lHitC9vmqu2aS1+xh8LnMwiboiVPR/6bfLeu8oXQ7/Had5b+i2wMg9PrbhmVkX00W3F3bapqiLJ+/kRq0mfAMPV4KApo0RAd3jcBOP7ByXNJpW0baJ7/cyZ9MO3GKMY0IvMJh+l67FdChxK4KkwOS+mFtjqPS62YZqfVTdJttOkglS5apU7MkES7DXf1hjvR6gXtMZGHZMtP2yjVJDR0CmcYlJUov53VD8/VrYYJgNN85OhK9m1xox/BFBeV9jBI9r1v6MZZv3zLxT7Il2DG/taAAAAAElFTkSuQmCC";

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

File diff suppressed because one or more lines are too long

25
spine-ts/build/spine-widget.d.ts vendored
View File

@ -423,6 +423,26 @@ declare module spine {
ChainScale = 2,
}
}
declare module spine {
class SharedAssetManager implements Disposable {
private pathPrefix;
private clientAssets;
private queuedAssets;
private rawAssets;
private errors;
constructor(pathPrefix?: string);
private queueAsset(clientId, textureLoader, path);
loadText(clientId: string, path: string): void;
loadJson(clientId: string, path: string): void;
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
get(clientId: string, path: string): any;
private updateClientAssets(clientAssets);
isLoadingComplete(clientId: string): boolean;
dispose(): void;
hasErrors(): boolean;
getErrors(): Map<string>;
}
}
declare module spine {
class Skeleton {
data: SkeletonData;
@ -527,7 +547,7 @@ declare module spine {
scale: number;
private linkedMeshes;
constructor(attachmentLoader: AttachmentLoader);
readSkeletonData(json: string): SkeletonData;
readSkeletonData(json: string | any): SkeletonData;
readAttachment(map: any, skin: Skin, slotIndex: number, name: string): Attachment;
readVertices(map: any, attachment: VertexAttachment, verticesLength: number): void;
readAnimation(map: any, name: string, skeletonData: SkeletonData): void;
@ -968,6 +988,9 @@ declare module spine.webgl {
}
declare module spine.webgl {
class LoadingScreen {
private static loaded;
private static spinnerImg;
private static logoImg;
private renderer;
private logo;
private spinner;

177
spine-ts/build/spine-widget.js
View File

@ -1987,6 +1987,144 @@ var spine;
var RotateMode = spine.RotateMode;
})(spine || (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 === null || clientAssets === undefined) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader !== null)
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.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.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 img = new Image();
img.src = path;
img.crossOrigin = "anonymous";
img.onload = function (ev) {
_this.rawAssets[path] = img;
};
img.onerror = function (ev) {
_this.errors[path] = "Couldn't load image " + path;
};
};
SharedAssetManager.prototype.get = function (clientId, path) {
path = this.pathPrefix + path;
var clientAssets = this.clientAssets[clientId];
if (clientAssets === null || clientAssets === undefined)
return true;
return clientAssets.assets[path];
};
SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
for (var i = 0; i < clientAssets.toLoad.length; i++) {
var path = clientAssets.toLoad[i];
var asset = clientAssets.assets[path];
if (asset === null || asset === undefined) {
var rawAsset = this.rawAssets[path];
if (rawAsset === null || rawAsset === undefined)
continue;
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 === null || clientAssets === undefined)
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) {
var Skeleton = (function () {
function Skeleton(data) {
@ -2679,7 +2817,7 @@ var spine;
SkeletonJson.prototype.readSkeletonData = function (json) {
var scale = this.scale;
var skeletonData = new spine.SkeletonData();
var root = JSON.parse(json);
var root = typeof (json) === "string" ? JSON.parse(json) : json;
var skeletonMap = root.skeleton;
if (skeletonMap != null) {
skeletonData.hash = skeletonMap.hash;
@ -4753,25 +4891,26 @@ var spine;
(function (webgl) {
var LoadingScreen = (function () {
function LoadingScreen(renderer) {
var _this = this;
this.logo = null;
this.spinner = null;
this.angle = 0;
this.timeKeeper = new spine.TimeKeeper();
this.backgroundColor = new spine.Color(0, 0, 0, 1);
this.renderer = renderer;
var logoImg = document.createElement("img");
logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA;
logoImg.crossOrigin = "anonymous";
logoImg.onload = function (ev) {
_this.logo = new webgl.GLTexture(renderer.gl, logoImg);
};
var spinnerImg = new Image();
spinnerImg.src = LoadingScreen.useDark ? LoadingScreen.SPINNER_DARK_DATA : LoadingScreen.SPINNER_DATA;
logoImg.crossOrigin = "anonymous";
spinnerImg.onload = function (ev) {
_this.spinner = new webgl.GLTexture(renderer.gl, spinnerImg);
};
if (LoadingScreen.logoImg === null) {
LoadingScreen.logoImg = document.createElement("img");
LoadingScreen.logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA;
LoadingScreen.logoImg.crossOrigin = "anonymous";
LoadingScreen.logoImg.onload = function (ev) {
LoadingScreen.loaded++;
};
LoadingScreen.spinnerImg = new Image();
LoadingScreen.spinnerImg.src = LoadingScreen.useDark ? LoadingScreen.SPINNER_DARK_DATA : LoadingScreen.SPINNER_DATA;
LoadingScreen.spinnerImg.crossOrigin = "anonymous";
LoadingScreen.spinnerImg.onload = function (ev) {
LoadingScreen.loaded++;
};
}
}
LoadingScreen.prototype.draw = function () {
this.timeKeeper.update();
@ -4781,9 +4920,12 @@ var spine;
var gl = renderer.gl;
gl.clearColor(this.backgroundColor.r, this.backgroundColor.g, this.backgroundColor.b, this.backgroundColor.a);
gl.clear(gl.COLOR_BUFFER_BIT);
if (this.logo === null || this.spinner === null)
if (LoadingScreen.loaded != 2)
return;
this.logo.update(false);
if (this.logo === null) {
this.logo = new webgl.GLTexture(renderer.gl, LoadingScreen.logoImg);
this.spinner = new webgl.GLTexture(renderer.gl, LoadingScreen.spinnerImg);
}
renderer.camera.position.set(canvas.width / 2, canvas.height / 2, 0);
renderer.camera.viewportWidth = canvas.width;
renderer.camera.viewportHeight = canvas.height;
@ -4799,6 +4941,9 @@ var spine;
renderer.drawTextureRotated(this.spinner, canvas.width / 2 - width / 2 + logoWidth + margin, canvas.height / 2 - spinnerHeight / 2 + 2, spinnerWidth, spinnerHeight, spinnerWidth / 2, spinnerHeight / 2, this.angle);
renderer.end();
};
LoadingScreen.loaded = 0;
LoadingScreen.spinnerImg = null;
LoadingScreen.logoImg = null;
LoadingScreen.useDark = true;
LoadingScreen.SPINNER_DATA = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAYAAADwbH0HAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgtJREFUeNrsVz1LA0EQvbt8IIFoESshEBRCSsXOwhhsLBTS+jf8BSns/QtWYqeohY14lVoIpg4EAwGxMEZMkHiF5xsYdVx2z9zlksoHj8l+3Lyb2dndi2VFgO/7e/4PumDNGjdIxNejNm7hrkH4Powf2+B8DqYM9kHXtu2eGPONzoBRItoCbwUvwTUxfmeI+ChyxBzpiWZeD8FUeE4VRidSwRxX+ErB5Lj5irE3OdlRHi4bXjALR8uczmMSAcm6bJekKGOG/ROnVYdJpd0PyE5PrKXLokH4kMlUB9WIXSkg0IBYI2S5vIAD5vMwxVUET0VxHVCfNSnwC0xOcFKwOToq+3Uuf1rLa7X8YxeGaB52B8yI/jaEd2NctgTMAm1L0AObVNWbiighj8mLMQZYYFFCml7C0Yh+i8conFDaaRI2rWU7RmFPbZPwmUac1rgeo3CbDxSLtZqyqle+BiB6Yf1jHAeIsuemYDbAEh/wdc2VN8zezYid8QQfnb+E6aJX97AbRpxFV8GU6L6S4o7mOd3BUQoZcF4RJcwH3ccmDAI+CiMhqelr8RGn9v26Mnn7pfHb4zQ2lH1bDDqQTMVVFem9gdNzMU5n7rbmhfcxzxPzciK9dCA9BkaMCZTWw4AsZQ39s+CD8EOF1DE5cSIsz3vI/niEOZKG5mOwM/JfmCH3aoG/WFphRQmfAgwALNYr+OATlbkAAAAASUVORK5CYII=";
LoadingScreen.SPINNER_DARK_DATA = "data:image/png;base64,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";

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

File diff suppressed because one or more lines are too long

187
spine-ts/core/src/SharedAssetManager.ts Normal file
View File

@ -0,0 +1,187 @@
/******************************************************************************
* Spine Runtimes Software License
* Version 2.5
*
* Copyright (c) 2013-2016, Esoteric Software
* All rights reserved.
*
* You are granted a perpetual, non-exclusive, non-sublicensable, and
* non-transferable license to use, install, execute, and perform the Spine
* Runtimes software and derivative works solely for personal or internal
* use. Without the written permission of Esoteric Software (see Section 2 of
* the Spine Software License Agreement), you may not (a) modify, translate,
* adapt, or develop new applications using the Spine Runtimes or otherwise
* create derivative works or improvements of the Spine Runtimes or (b) remove,
* delete, alter, or obscure any trademarks or any copyright, trademark, patent,
* or other intellectual property or proprietary rights notices on or in the
* Software, including any copy thereof. Redistributions in binary or source
* form must include this license and terms.
*
* THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "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 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 THIS SOFTWARE, 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) => any;
constructor(clientId: string) {
this.clientId = clientId;
}
loaded() {
var i = 0;
for (var 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) => any, path: string): boolean {
var clientAssets = this.clientAssets[clientId];
if (clientAssets === null || clientAssets === undefined) {
clientAssets = new Assets(clientId);
this.clientAssets[clientId] = clientAssets;
}
if (textureLoader !== null) 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.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.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) => any, path: string) {
path = this.pathPrefix + path;
if (!this.queueAsset(clientId, textureLoader, path)) return;
let img = new Image();
img.src = path;
img.crossOrigin = "anonymous";
img.onload = (ev) => {
this.rawAssets[path] = img;
}
img.onerror = (ev) => {
this.errors[path] = `Couldn't load image ${path}`;
}
}
get (clientId: string, path: string) {
path = this.pathPrefix + path;
var clientAssets = this.clientAssets[clientId];
if (clientAssets === null || clientAssets === undefined) return true;
return clientAssets.assets[path];
}
private updateClientAssets(clientAssets: Assets): void {
for (var i = 0; i < clientAssets.toLoad.length; i++) {
var path = clientAssets.toLoad[i];
var asset = clientAssets.assets[path];
if (asset === null || asset === undefined) {
var rawAsset = this.rawAssets[path];
if (rawAsset === null || rawAsset === undefined) continue;
if (rawAsset instanceof HTMLImageElement) {
clientAssets.assets[path] = clientAssets.textureLoader(<HTMLImageElement>rawAsset);
} else {
clientAssets.assets[path] = rawAsset;
}
}
}
}
isLoadingComplete (clientId: string): boolean {
var clientAssets = this.clientAssets[clientId];
if (clientAssets === null || clientAssets === undefined) 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;
}
}
}

4
spine-ts/core/src/SkeletonJson.ts
View File

@ -39,10 +39,10 @@ module spine {
this.attachmentLoader = attachmentLoader;
}
readSkeletonData (json: string): SkeletonData {
readSkeletonData (json: string | any ): SkeletonData {
let scale = this.scale;
let skeletonData = new SkeletonData();
let root = JSON.parse(json);
let root = typeof(json) === "string" ? JSON.parse(json) : json;
// Skeleton
let skeletonMap = root.skeleton;

2
spine-ts/webgl/demos/animationmixing.html
View File

@ -21,7 +21,7 @@
<script src="utils.js"></script>
<script src="animationmixing.js"></script>
<script>
animationMixingDemo("http://esotericsoftware.com/demos/exports/", spineDemos.setupRendering);
animationMixingDemo(spineDemos.setupRendering);
</script>
</body>
</html>

28
spine-ts/webgl/demos/animationmixing.js
View File

@ -1,4 +1,4 @@
var animationMixingDemo = function(pathPrefix, loadingComplete, bgColor) {
var animationMixingDemo = function(loadingComplete, bgColor) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager;
@ -7,6 +7,8 @@ var animationMixingDemo = function(pathPrefix, loadingComplete, bgColor) {
var timeKeeper;
var loadingScreen;
var DEMO_NAME = "AnimationMixingDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1);
function init () {
@ -18,22 +20,24 @@ var animationMixingDemo = function(pathPrefix, loadingComplete, bgColor) {
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture("spineboy.png");
assetManager.loadText("spineboy.json");
assetManager.loadText("spineboy.atlas");
requestAnimationFrame(load);
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
loadingScreen.backgroundColor = bgColor;
loadingScreen.backgroundColor = bgColor;
requestAnimationFrame(load);
}
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
if (assetManager.isLoadingComplete(DEMO_NAME)) {
skeleton = loadSkeleton("spineboy");
skeletonNoMix = new spine.Skeleton(skeleton.data);
state = createState(0.2);
@ -95,12 +99,12 @@ var animationMixingDemo = function(pathPrefix, loadingComplete, bgColor) {
}
function loadSkeleton(name) {
var atlas = new spine.TextureAtlas(assetManager.get(name + ".atlas"), function(path) {
return assetManager.get(path);
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(name + ".json"));
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")[name]);
var skeleton = new spine.Skeleton(skeletonData);
skeleton.setSkinByName("default");
return skeleton;

2
spine-ts/webgl/demos/ikconstraint.html
View File

@ -17,7 +17,7 @@
<script src="utils.js"></script>
<script src="ikconstraint.js"></script>
<script>
ikConstraintDemo("http://esotericsoftware.com/demos/exports/", spineDemos.setupRendering);
ikConstraintDemo(spineDemos.setupRendering);
</script>
</body>
</html>

23
spine-ts/webgl/demos/ikconstraint.js
View File

@ -1,4 +1,4 @@
var ikConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
var ikConstraintDemo = function(loadingComplete, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -13,6 +13,8 @@ var ikConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
var isPlaying = true;
var DEMO_NAME = "IkConstraintDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () {
@ -22,11 +24,12 @@ var ikConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
input = new spine.webgl.Input(canvas);
assetManager.loadTexture("spineboy.png");
assetManager.loadText("spineboy-hover.json");
assetManager.loadText("spineboy.atlas");
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
loadingScreen.backgroundColor = bgColor;
@ -35,13 +38,13 @@ var ikConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("spineboy.atlas"), function(path) {
return assetManager.get(path);
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("spineboy-hover.json"));
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["spineboy-hover"]);
skeleton = new spine.Skeleton(skeletonData);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "idle", true);

2
spine-ts/webgl/demos/imagesequences.html
View File

@ -22,7 +22,7 @@
<script src="utils.js"></script>
<script src="imagesequences.js"></script>
<script>
imageSequencesDemo("http://esotericsoftware.com/demos/exports/", spineDemos.setupRendering);
imageSequencesDemo(spineDemos.setupRendering);
</script>
</body>
</html>

24
spine-ts/webgl/demos/imagesequences.js
View File

@ -1,4 +1,4 @@
var imageSequencesDemo = function(pathPrefix, loadingComplete, bgColor) {
var imageSequencesDemo = function(loadingComplete, bgColor) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager;
@ -8,6 +8,8 @@ var imageSequencesDemo = function(pathPrefix, loadingComplete, bgColor) {
var activeSkeleton = "Alien";
var playButton, timeLine, isPlaying = true;
var DEMO_NAME = "ImageSequenceDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1);
function init () {
@ -16,13 +18,11 @@ var imageSequencesDemo = function(pathPrefix, loadingComplete, bgColor) {
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager.loadTexture("alien.png");
assetManager.loadText("alien.json");
assetManager.loadText("alien.atlas");
assetManager.loadTexture("dragon.png");
assetManager.loadText("dragon.json");
assetManager.loadText("dragon.atlas");
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
loadingScreen.backgroundColor = bgColor;
@ -31,7 +31,7 @@ var imageSequencesDemo = function(pathPrefix, loadingComplete, bgColor) {
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
if (assetManager.isLoadingComplete(DEMO_NAME)) {
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
setupUI();
@ -87,12 +87,12 @@ var imageSequencesDemo = function(pathPrefix, loadingComplete, bgColor) {
}
function loadSkeleton(name, animation, sequenceSlots) {
var atlas = new spine.TextureAtlas(assetManager.get(name + ".atlas"), function(path) {
return assetManager.get(path);
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(name + ".json"));
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")[name]);
var skeleton = new spine.Skeleton(skeletonData);
skeleton.setSkinByName("default");

2
spine-ts/webgl/demos/meshes.html
View File

@ -27,7 +27,7 @@
<script src="utils.js"></script>
<script src="meshes.js"></script>
<script>
meshesDemo("http://esotericsoftware.com/demos/exports/", spineDemos.setupRendering);
meshesDemo(spineDemos.setupRendering);
</script>
</body>
</html>

27
spine-ts/webgl/demos/meshes.js
View File

@ -1,4 +1,4 @@
var meshesDemo = function(pathPrefix, loadingComplete, bgColor) {
var meshesDemo = function(loadingComplete, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, bounds;
var timeKeeper, loadingScreen;
@ -6,6 +6,8 @@ var meshesDemo = function(pathPrefix, loadingComplete, bgColor) {
var activeSkeleton = "Orange Girl";
var playButton, timeLine, isPlaying = true;
var DEMO_NAME = "MeshesDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1);
function init () {
@ -15,16 +17,11 @@ var meshesDemo = function(pathPrefix, loadingComplete, bgColor) {
renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager.loadTexture("orangegirl.png");
assetManager.loadText("orangegirl.json");
assetManager.loadText("orangegirl.atlas");
assetManager.loadTexture("greengirl.png");
assetManager.loadText("greengirl.json");
assetManager.loadText("greengirl.atlas");
assetManager.loadTexture("armorgirl.png");
assetManager.loadText("armorgirl.json");
assetManager.loadText("armorgirl.atlas");
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
loadingScreen.backgroundColor = bgColor;
@ -33,7 +30,7 @@ var meshesDemo = function(pathPrefix, loadingComplete, bgColor) {
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
if (assetManager.isLoadingComplete(DEMO_NAME)) {
skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
skeletons["Armor Girl"] = loadSkeleton("armorgirl", "animation");
@ -102,12 +99,12 @@ var meshesDemo = function(pathPrefix, loadingComplete, bgColor) {
}
function loadSkeleton(name, animation, sequenceSlots) {
var atlas = new spine.TextureAtlas(assetManager.get(name + ".atlas"), function(path) {
return assetManager.get(path);
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(name + ".json"));
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")[name]);
var skeleton = new spine.Skeleton(skeletonData);
skeleton.setSkinByName("default");

2
spine-ts/webgl/demos/skins.html
View File

@ -22,7 +22,7 @@
<script src="utils.js"></script>
<script src="skins.js"></script>
<script>
skinsDemo("http://esotericsoftware.com/demos/exports/", spineDemos.setupRendering);
skinsDemo(spineDemos.setupRendering);
</script>
</body>
</html>

27
spine-ts/webgl/demos/skins.js
View File

@ -1,24 +1,25 @@
var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
var skinsDemo = function(loadingComplete, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen;
var playButton, timeLine, isPlaying = true, playTime = 0;
var randomizeSkins, lastSkinChange = Date.now() / 1000;
var DEMO_NAME = "SkinsDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () {
if (pathPrefix === undefined) pathPrefix = "";
canvas = document.getElementById("skinsdemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager.loadTexture("heroes.png");
assetManager.loadText("heroes.json");
assetManager.loadText("heroes.atlas");
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "heroes.png");
assetManager.loadText(DEMO_NAME, "heroes.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
@ -28,13 +29,13 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("heroes.atlas"), function(path) {
return assetManager.get(path);
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "heroes.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("heroes.json"));
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").heroes);
skeleton = new spine.Skeleton(skeletonData);
skeleton.setSkinByName("Assassin");
var stateData = new spine.AnimationStateData(skeleton.data);
@ -211,7 +212,7 @@ var skinsDemo = function(pathPrefix, loadingComplete, bgColor) {
renderer.begin();
renderer.drawSkeleton(skeleton, true);
var texture = assetManager.get("heroes.png");
var texture = assetManager.get(DEMO_NAME, "heroes.png");
var width = bounds.x;
var scale = width / texture.getImage().width;
var height = scale * texture.getImage().height;

2
spine-ts/webgl/demos/spritesheet.html
View File

@ -21,7 +21,7 @@
<script src="utils.js"></script>
<script src="spritesheet.js"></script>
<script>
spritesheetDemo("http://esotericsoftware.com/demos/exports/", spineDemos.setupRendering);
spritesheetDemo(spineDemos.setupRendering);
</script>
</body>
</html>

23
spine-ts/webgl/demos/spritesheet.js
View File

@ -1,4 +1,4 @@
var spritesheetDemo = function(pathPrefix, loadingComplete, bgColor) {
var spritesheetDemo = function(loadingComplete, bgColor) {
var SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8);
var FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8);
@ -11,20 +11,21 @@ var spritesheetDemo = function(pathPrefix, loadingComplete, bgColor) {
var timeKeeper, loadingScreen;
var playTime = 0, framePlaytime = 0;
var DEMO_NAME = "SpritesheetDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1);
function init () {
if (pathPrefix === undefined) pathPrefix = "";
canvas = document.getElementById("spritesheetdemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager.loadTexture("raptor.png");
assetManager.loadText("raptor.json");
assetManager.loadText("raptor.atlas");
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
loadingScreen.backgroundColor = bgColor;
@ -33,13 +34,13 @@ var spritesheetDemo = function(pathPrefix, loadingComplete, bgColor) {
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
skeletonAtlas = new spine.TextureAtlas(assetManager.get("raptor.atlas"), function(path) {
return assetManager.get("" + path);
if (assetManager.isLoadingComplete(DEMO_NAME)) {
skeletonAtlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(skeletonAtlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("raptor.json"));
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").raptor);
skeleton = new spine.Skeleton(skeletonData);
animationState = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
animationState.setAnimation(0, "walk", true);

2
spine-ts/webgl/demos/stretchy.html
View File

@ -25,7 +25,7 @@
<script src="utils.js"></script>
<script src="stretchy.js"></script>
<script>
stretchyDemo("http://esotericsoftware.com/demos/exports/", spineDemos.setupRendering);
stretchyDemo(spineDemos.setupRendering);
</script>
</body>
</html>

22
spine-ts/webgl/demos/stretchy.js
View File

@ -1,4 +1,4 @@
var stretchyDemo = function(pathPrefix, loadingComplete, bgColor) {
var stretchyDemo = function(loadingComplete, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -15,20 +15,22 @@ var stretchyDemo = function(pathPrefix, loadingComplete, bgColor) {
var kneePos = new spine.Vector2();
var playButton, timeLine, spacing, isPlaying = true, playTime = 0;
var DEMO_NAME = "StretchyDemo";
if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
function init () {
canvas = document.getElementById("stretchydemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
input = new spine.webgl.Input(canvas);
assetManager.loadTexture("stretchyman.png");
assetManager.loadText("stretchyman.json");
assetManager.loadText("stretchyman.atlas");
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
loadingScreen.backgroundColor = bgColor;
@ -37,13 +39,13 @@ var stretchyDemo = function(pathPrefix, loadingComplete, bgColor) {
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("stretchyman.atlas"), function(path) {
return assetManager.get(path);
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("stretchyman.json"));
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").stretchyman);
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();

2
spine-ts/webgl/demos/tank.html
View File

@ -22,7 +22,7 @@
<script src="utils.js"></script>
<script src="tank.js"></script>
<script>
tankDemo("http://esotericsoftware.com/demos/exports/", spineDemos.setupRendering);
tankDemo(spineDemos.setupRendering);
</script>
</body>
</html>

25
spine-ts/webgl/demos/tank.js
View File

@ -1,23 +1,24 @@
var tankDemo = function(pathPrefix, loadingComplete, bgColor) {
var tankDemo = function(loadingComplete, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen;
var playButton, timeLine, isPlaying = true, playTime = 0;
var DEMO_NAME = "TankDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1);
function init () {
if (pathPrefix === undefined) pathPrefix = "";
canvas = document.getElementById("tankdemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager.loadTexture("tank.png");
assetManager.loadText("tank.json");
assetManager.loadText("tank.atlas");
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
loadingScreen.backgroundColor = bgColor;
@ -26,13 +27,13 @@ var tankDemo = function(pathPrefix, loadingComplete, bgColor) {
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("tank.atlas"), function(path) {
return assetManager.get(path);
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("tank.json"));
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").tank);
skeleton = new spine.Skeleton(skeletonData);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "drive", true);

4
spine-ts/webgl/demos/transformconstraint.html
View File

@ -22,8 +22,8 @@
</center>
<script src="utils.js"></script>
<script src="transformconstraint.js"></script>
<script>
transformConstraintDemo("http://esotericsoftware.com/demos/exports/", spineDemos.setupRendering);
<script>
transformConstraintDemo(spineDemos.setupRendering);
</script>
</body>
</html>

22
spine-ts/webgl/demos/transformconstraint.js
View File

@ -1,4 +1,4 @@
var transformConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
var transformConstraintDemo = function(loadingComplete, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -15,20 +15,22 @@ var transformConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
var lastRotation = 0;
var rotationOffset, mix, lastOffset = 0, lastMix = 50;
var DEMO_NAME = "TransformConstraintDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1);
function init () {
canvas = document.getElementById("transformdemo-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
assetManager.loadTexture("tank.png");
assetManager.loadText("transformConstraint.json");
assetManager.loadText("tank.atlas");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
loadingScreen.backgroundColor = bgColor;
@ -37,13 +39,13 @@ var transformConstraintDemo = function(pathPrefix, loadingComplete, bgColor) {
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("tank.atlas"), function(path) {
return assetManager.get(path);
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("transformConstraint.json"));
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").transformConstraint);
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();

4
spine-ts/webgl/demos/utils.js
View File

@ -3,8 +3,8 @@ var spineDemos;
spineDemos.HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.25);
spineDemos.HOVER_COLOR_OUTER = new spine.Color(1, 1, 1, 1);
spineDemos.NON_HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.5);
spineDemos.NON_HOVER_COLOR_OUTER = new spine.Color(1, 0, 0, 0.8);
spineDemos.NON_HOVER_COLOR_OUTER = new spine.Color(1, 0, 0, 0.8);
spineDemos.assetManager = new spine.SharedAssetManager("http://esotericsoftware.com/demos/exports/");
spineDemos.setupRendering = function (canvas, renderFunc) {
var isVisible = false;

4
spine-ts/webgl/demos/vine.html
View File

@ -23,8 +23,8 @@
</center>
<script src="utils.js"></script>
<script src="vine.js"></script>
<script>
vineDemo("http://esotericsoftware.com/demos/exports/", spineDemos.setupRendering);
<script>
vineDemo(spineDemos.setupRendering);
</script>
</body>
</html>

23
spine-ts/webgl/demos/vine.js
View File

@ -1,4 +1,4 @@
var vineDemo = function(pathPrefix, loadingComplete, bgColor) {
var vineDemo = function(loadingComplete, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -13,6 +13,8 @@ var vineDemo = function(pathPrefix, loadingComplete, bgColor) {
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
var playButton, timeLine, isPlaying = true, playTime = 0;
var DEMO_NAME = "vineDemo";
if (!bgColor) bgColor = new spine.Color(0, 0, 0, 1);
function init () {
@ -20,12 +22,13 @@ var vineDemo = function(pathPrefix, loadingComplete, bgColor) {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, pathPrefix);
renderer = new spine.webgl.SceneRenderer(canvas, gl);
input = new spine.webgl.Input(canvas);
assetManager.loadTexture("vine.png");
assetManager.loadText("vine.json");
assetManager.loadText("vine.atlas");
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
loadingScreen.backgroundColor = bgColor;
@ -34,13 +37,13 @@ var vineDemo = function(pathPrefix, loadingComplete, bgColor) {
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("vine.atlas"), function(path) {
return assetManager.get(path);
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("vine.json"));
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").vine);
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();

38
spine-ts/webgl/src/LoadingScreen.ts
View File

@ -1,5 +1,9 @@
module spine.webgl {
export class LoadingScreen {
private static loaded = 0;
private static spinnerImg: HTMLImageElement = null;
private static logoImg: HTMLImageElement = null;
private renderer: SceneRenderer;
private logo: GLTexture = null;
private spinner: GLTexture = null;
@ -17,19 +21,22 @@ module spine.webgl {
constructor (renderer: SceneRenderer) {
this.renderer = renderer;
var logoImg = document.createElement("img");
logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA;
logoImg.crossOrigin = "anonymous";
logoImg.onload = (ev) => {
this.logo = new GLTexture(renderer.gl, logoImg);
}
var spinnerImg = new Image();
spinnerImg.src = LoadingScreen.useDark ? LoadingScreen.SPINNER_DARK_DATA : LoadingScreen.SPINNER_DATA;
logoImg.crossOrigin = "anonymous";
spinnerImg.onload = (ev) => {
this.spinner = new GLTexture(renderer.gl, spinnerImg);
}
if (LoadingScreen.logoImg === null) {
LoadingScreen.logoImg = document.createElement("img");
LoadingScreen.logoImg.src = LoadingScreen.useDark ? LoadingScreen.SPINE_LOGO_DARK_DATA : LoadingScreen.SPINE_LOGO_DATA;
LoadingScreen.logoImg.crossOrigin = "anonymous";
LoadingScreen.logoImg.onload = (ev) => {
LoadingScreen.loaded++;
}
LoadingScreen.spinnerImg = new Image();
LoadingScreen.spinnerImg.src = LoadingScreen.useDark ? LoadingScreen.SPINNER_DARK_DATA : LoadingScreen.SPINNER_DATA;
LoadingScreen.spinnerImg.crossOrigin = "anonymous";
LoadingScreen.spinnerImg.onload = (ev) => {
LoadingScreen.loaded++;
}
}
}
draw () {
@ -43,8 +50,11 @@ module spine.webgl {
gl.clearColor(this.backgroundColor.r, this.backgroundColor.g, this.backgroundColor.b, this.backgroundColor.a);
gl.clear(gl.COLOR_BUFFER_BIT);
if (this.logo === null || this.spinner === null) return;
this.logo.update(false);
if (LoadingScreen.loaded != 2) return;
if (this.logo === null) {
this.logo = new GLTexture(renderer.gl, LoadingScreen.logoImg);
this.spinner = new GLTexture(renderer.gl, LoadingScreen.spinnerImg);
}
renderer.camera.position.set(canvas.width / 2, canvas.height / 2, 0);
renderer.camera.viewportWidth = canvas.width;