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

This commit is contained in:
badlogic 2017-04-11 13:38:33 +02:00
parent 848f3d382c
commit 0733ce8af2
7 changed files with 9697 additions and 9644 deletions

View File

@ -362,6 +362,7 @@ declare module spine {
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
loadTextureData(path: string, data: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
get(path: string): any;
remove(path: string): void;
removeAll(): void;

View File

@ -1824,6 +1824,30 @@ var spine;
error(path, "Couldn't load image " + path);
};
};
AssetManager.prototype.loadTextureData = function (path, data, success, error) {
var _this = this;
if (success === void 0) { success = null; }
if (error === void 0) { error = null; }
path = this.pathPrefix + path;
this.toLoad++;
var img = new Image();
img.src = data;
img.onload = function (ev) {
var texture = _this.textureLoader(img);
_this.assets[path] = texture;
_this.toLoad--;
_this.loaded++;
if (success)
success(path, img);
};
img.onerror = function (ev) {
_this.errors[path] = "Couldn't load image " + path;
_this.toLoad--;
_this.loaded++;
if (error)
error(path, "Couldn't load image " + path);
};
};
AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path;
return this.assets[path];
@ -8061,9 +8085,14 @@ var spine;
}
else {
for (var i = 0; i < config.atlasPages.length; i++) {
if (config.atlasPagesContent && config.atlasPagesContent[i]) {
assets.loadTextureData(config.atlasPages[i], config.atlasPagesContent[0]);
}
else {
assets.loadTexture(config.atlasPages[i]);
}
}
}
requestAnimationFrame(function () { _this.load(); });
}
SpineWidget.prototype.validateConfig = function (config) {

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

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