mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-03-26 22:49:01 +08:00
[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:
parent
848f3d382c
commit
0733ce8af2
1
spine-ts/build/spine-widget.d.ts
vendored
1
spine-ts/build/spine-widget.d.ts
vendored
@ -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;
|
||||
|
||||
@ -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
@ -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];
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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(); });
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user