UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 15:24:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][widget] Added jsonContent and atlasContent fields to widget configuration. Allows to pass content directly instead of fetching it from a URL. See README.md. Closes #844

Browse Source
This commit is contained in:
badlogic 2017-03-02 13:33:00 +01:00
parent 7e0df8fa6d
commit 8a7ac93f6f
10 changed files with 6489 additions and 6458 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spine-ts/README.md
View File

@ -161,7 +161,9 @@ new spine.SpineWidget("my-widget", {
The configuration object has the following fields:
* `json`: required, path to the `.json` file, absolute or relative, e.g. "assets/animation.json"
* `jsonContent`: optional, string or JSON object holding the content of a skeleton `.json` file. Overrides `json` if given.
* `atlas`: required, path to the `.atlas` file, absolute or relative, e.g. "assets/animation.atlas"
* `atlasContent`: optional, string holding the content of a file. Overrides `atlasContent` if given.
* `animation`: required, the name of the animation to play back
* `imagesPath`: optional, the location of images on the server to load atlas pages from. If omitted, atlas `.png` page files are loaded relative to the `.atlas` file.
* `atlasPages`: optional, the list of atlas page images, e.g. `atlasPages: ["assets/page1.png", "assets/page2.png"]` when using code, or `data-atlas-pages="assets/page1.png,assets/page2.png"` on case of HTML instantiation. Use this if you have a multi-page atlas. If ommited, only one atlas page image is loaded based on the atlas file name, replacing `.atlas` with `.png`.

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

@ -79,6 +79,7 @@ declare module spine.canvas {
private ctx;
triangleRendering: boolean;
debugRendering: boolean;
private tempColor;
constructor(context: CanvasRenderingContext2D);
draw(skeleton: Skeleton): void;
private drawImages(skeleton);
@ -1540,7 +1541,9 @@ declare module spine {
}
class SpineWidgetConfig {
json: string;
jsonContent: any;
atlas: string;
atlasContent: string;
animation: string;
imagesPath: string;
atlasPages: string[];

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

@ -213,6 +213,7 @@ var spine;
function SkeletonRenderer(context) {
this.triangleRendering = false;
this.debugRendering = false;
this.tempColor = new spine.Color(0, 0, 0, 1);
this.ctx = context;
}
SkeletonRenderer.prototype.draw = function (skeleton) {
@ -226,37 +227,48 @@ var spine;
var drawOrder = skeleton.drawOrder;
if (this.debugRendering)
ctx.strokeStyle = "green";
ctx.save();
for (var i = 0, n = drawOrder.length; i < n; i++) {
var slot = drawOrder[i];
var attachment = slot.getAttachment();
var regionAttachment = null;
var region = null;
var image = null;
if (attachment instanceof spine.RegionAttachment) {
var regionAttachment = attachment;
regionAttachment = attachment;
region = regionAttachment.region;
image = (region).texture.getImage();
image = region.texture.getImage();
}
else
continue;
var skeleton_1 = slot.bone.skeleton;
var skeletonColor = skeleton_1.color;
var slotColor = slot.color;
var regionColor = regionAttachment.color;
var alpha = skeletonColor.a * slotColor.a * regionColor.a;
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * regionColor.r, skeletonColor.g * slotColor.g * regionColor.g, skeletonColor.b * slotColor.b * regionColor.b, alpha);
var att = attachment;
var bone = slot.bone;
var w = region.width;
var h = region.height;
var offsetX = attachment.offset[0];
var offsetY = attachment.offset[1];
ctx.save();
ctx.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
ctx.translate(offsetX, offsetY);
ctx.translate(attachment.offset[0], attachment.offset[1]);
ctx.rotate(attachment.rotation * Math.PI / 180);
ctx.scale(attachment.scaleX, attachment.scaleY);
ctx.translate(region.width / 2, region.height / 2);
ctx.translate(w / 2, h / 2);
ctx.scale(1, -1);
ctx.translate(-region.width / 2, -region.height / 2);
ctx.drawImage(image, region.x, region.y, region.width, region.height, 0, 0, w, h);
ctx.translate(-w / 2, -h / 2);
if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) {
ctx.globalAlpha = color.a;
}
ctx.drawImage(image, region.x, region.y, w, h, 0, 0, w, h);
if (this.debugRendering)
ctx.strokeRect(0, 0, w, h);
ctx.restore();
}
ctx.restore();
};
SkeletonRenderer.prototype.drawTriangles = function (skeleton) {
var blendMode = null;
@ -7895,8 +7907,10 @@ var spine;
this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
this.shapes = new spine.webgl.ShapeRenderer(gl);
var assets = this.assetManager = new spine.webgl.AssetManager(gl);
assets.loadText(config.atlas);
assets.loadText(config.json);
if (!config.atlasContent)
assets.loadText(config.atlas);
if (!config.jsonContent)
assets.loadText(config.json);
if (config.atlasPages == null) {
assets.loadTexture(config.atlas.replace(".atlas", ".png"));
}
@ -7908,10 +7922,10 @@ var spine;
requestAnimationFrame(function () { _this.load(); });
}
SpineWidget.prototype.validateConfig = function (config) {
if (!config.atlas)
throw new Error("Please specify config.atlas");
if (!config.json)
throw new Error("Please specify config.json");
if (!config.atlas && !config.atlasContent)
throw new Error("Please specify config.atlas or config.atlasContent");
if (!config.json && !config.jsonContent)
throw new Error("Please specify config.json or config.jsonContent");
if (!config.animation)
throw new Error("Please specify config.animationName");
if (!config.scale)
@ -7958,14 +7972,16 @@ var spine;
else
throw new Error("Failed to load assets: " + JSON.stringify(assetManager.getErrors()));
}
var atlas = new spine.TextureAtlas(this.assetManager.get(this.config.atlas), function (path) {
var atlasContent = config.atlasContent === undefined ? this.assetManager.get(this.config.atlas) : config.atlasContent;
var atlas = new spine.TextureAtlas(atlasContent, function (path) {
var texture = assetManager.get(imagesPath + path);
return texture;
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
skeletonJson.scale = config.scale;
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(config.json));
var jsonContent = config.jsonContent === undefined ? assetManager.get(config.json) : config.jsonContent;
var skeletonData = skeletonJson.readSkeletonData(jsonContent);
var skeleton = this.skeleton = new spine.Skeleton(skeletonData);
var bounds = this.bounds;
skeleton.setSkinByName(config.skin);

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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

@ -1470,7 +1470,9 @@ declare module spine {
}
class SpineWidgetConfig {
json: string;
jsonContent: any;
atlas: string;
atlasContent: string;
animation: string;
imagesPath: string;
atlasPages: string[];

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

@ -7482,8 +7482,10 @@ var spine;
this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
this.shapes = new spine.webgl.ShapeRenderer(gl);
var assets = this.assetManager = new spine.webgl.AssetManager(gl);
assets.loadText(config.atlas);
assets.loadText(config.json);
if (!config.atlasContent)
assets.loadText(config.atlas);
if (!config.jsonContent)
assets.loadText(config.json);
if (config.atlasPages == null) {
assets.loadTexture(config.atlas.replace(".atlas", ".png"));
}
@ -7495,10 +7497,10 @@ var spine;
requestAnimationFrame(function () { _this.load(); });
}
SpineWidget.prototype.validateConfig = function (config) {
if (!config.atlas)
throw new Error("Please specify config.atlas");
if (!config.json)
throw new Error("Please specify config.json");
if (!config.atlas && !config.atlasContent)
throw new Error("Please specify config.atlas or config.atlasContent");
if (!config.json && !config.jsonContent)
throw new Error("Please specify config.json or config.jsonContent");
if (!config.animation)
throw new Error("Please specify config.animationName");
if (!config.scale)
@ -7545,14 +7547,16 @@ var spine;
else
throw new Error("Failed to load assets: " + JSON.stringify(assetManager.getErrors()));
}
var atlas = new spine.TextureAtlas(this.assetManager.get(this.config.atlas), function (path) {
var atlasContent = config.atlasContent === undefined ? this.assetManager.get(this.config.atlas) : config.atlasContent;
var atlas = new spine.TextureAtlas(atlasContent, function (path) {
var texture = assetManager.get(imagesPath + path);
return texture;
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
skeletonJson.scale = config.scale;
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(config.json));
var jsonContent = config.jsonContent === undefined ? assetManager.get(config.json) : config.jsonContent;
var skeletonData = skeletonJson.readSkeletonData(jsonContent);
var skeleton = this.skeleton = new spine.Skeleton(skeletonData);
var bounds = this.bounds;
skeleton.setSkinByName(config.skin);

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

File diff suppressed because one or more lines are too long

16
spine-ts/widget/src/Widget.ts
View File

@ -78,8 +78,8 @@ module spine {
this.shapes = new spine.webgl.ShapeRenderer(gl);
let assets = this.assetManager = new spine.webgl.AssetManager(gl);
assets.loadText(config.atlas);
assets.loadText(config.json);
if (!config.atlasContent) assets.loadText(config.atlas);
if (!config.jsonContent) assets.loadText(config.json);
if (config.atlasPages == null) {
assets.loadTexture(config.atlas.replace(".atlas", ".png"));
} else {
@ -91,8 +91,8 @@ module spine {
}
private validateConfig (config: SpineWidgetConfig) {
if (!config.atlas) throw new Error("Please specify config.atlas");
if (!config.json) throw new Error("Please specify config.json");
if (!config.atlas && !config.atlasContent) throw new Error("Please specify config.atlas or config.atlasContent");
if (!config.json && !config.jsonContent) throw new Error("Please specify config.json or config.jsonContent");
if (!config.animation) throw new Error("Please specify config.animationName");
if (!config.scale) config.scale = 1.0;
@ -127,7 +127,8 @@ module spine {
else throw new Error("Failed to load assets: " + JSON.stringify(assetManager.getErrors()));
}
let atlas = new spine.TextureAtlas(this.assetManager.get(this.config.atlas) as string, (path: string) => {
let atlasContent = config.atlasContent === undefined ? this.assetManager.get(this.config.atlas) as string : config.atlasContent;
let atlas = new spine.TextureAtlas(atlasContent, (path: string) => {
let texture = assetManager.get(imagesPath + path) as spine.webgl.GLTexture;
return texture;
});
@ -137,7 +138,8 @@ module spine {
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
skeletonJson.scale = config.scale;
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(config.json) as string);
let jsonContent = config.jsonContent === undefined ? assetManager.get(config.json) as string : config.jsonContent;
var skeletonData = skeletonJson.readSkeletonData(jsonContent);
var skeleton = this.skeleton = new spine.Skeleton(skeletonData);
var bounds = this.bounds;
skeleton.setSkinByName(config.skin);
@ -307,7 +309,9 @@ module spine {
export class SpineWidgetConfig {
json: string;
jsonContent: any;
atlas: string;
atlasContent: string;
animation: string;
imagesPath: string;
atlasPages: string[];