UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-11 17:48:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Added ability to specify multi-page atlas images in widget. See README for details. Closes #786.

Browse Source
This commit is contained in:
badlogic 2016-12-01 11:47:55 +01:00
parent f4a65fdcd4
commit 52d60bae82
8 changed files with 41 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
spine-ts/README.md
View File

@ -75,8 +75,8 @@ setup a development environment, follow these steps.
* **WebGL**: `tsc -w -p tsconfig.webgl.json`, builds `core/src` and `webgl/src`, outputs `build/spine-webgl.js|d.ts|js.map`
* **Canvas**: `tsc -w -p tsconfig.canvas.json`, builds `core/src` and `canvas/src`, outputs `build/spine-canvas.js|d.ts|js.map`
* **THREE.JS**: `tsc -w -p tsconfig.threejs.json`, builds `core/src` and `threejs/src`, outputs `build/spine-threejs.js|d.ts|js.map`
* **Widget**: `tsc -w -p tsconfig.widget.json`, builds `core/src` and `widget/src`, outputs `build/spine-widget.js|d.ts|js.map`
6. Open the `spine-ts` folder in Visual Studio Code. VS Code will use the `tsconfig.json` file all source files from core and all
* **Widget**: `tsc -w -p tsconfig.widget.json`, builds `core/src` and `widget/src`, outputs `build/spine-widget.js|d.ts|js.map`
6. Open the `spine-ts` folder in Visual Studio Code. VS Code will use the `tsconfig.json` file all source files from core and all
backends for your development pleasure. The actual JavaScript output is still created by the command line TypeScript compiler process from the previous step.
Each backend contains an `example/` folder with an `index.html` file that demonstrates the respective backend. For development, we
@ -90,7 +90,7 @@ python -m SimpleHTTPServer
Then navigate to `http://localhost:8000/webgl/example`, `http://localhost:8000/canvas/example`, `http://localhost:8000/threejs/example` or `http://localhost:8000/widget/example`
### Using the Widget
To easily display Spine animations on your website, you can use the spine-ts Widget backend.
To easily display Spine animations on your website, you can use the spine-ts Widget backend.
1. Export your Spine animation with a texture atlas and put the resulting `.json`, `.atlas` and `.png` files on your server.
2. Copy the `build/spine-widget.js` file to your server and include it on your website `<script src="spine-widget.js"></script>`, adjusting the src to match the location of the file on your server.
@ -114,7 +114,7 @@ To specify the configuration of a Spine Widget via HTML, you can use these HTML
* `data-fit-to-canvas`: optional, whether to fit the animation to the canvas size or not. Defaults to `true` if omitted, in which case `data-scale`, `data-x` and `data-y` are irrelevant. This setting calculates the setup pose bounding box using the specified skin to center and scale the animation on the canvas.
* `data-background-color`: optional, the background color to use. Defaults to `#000000` if omitted.
* `data-premultiplied-alpha`: optional, whether the atlas pages use premultiplied alpha or not. Defaults to `false` if omitted.
* `data-debug`: optional, whether to show debug information such as bones, attachments, etc. Defaults to `false` if omitted.
* `data-debug`: optional, whether to show debug information such as bones, attachments, etc. Defaults to `false` if omitted.
You can specify these as attribuets on the HTML element like this:
@ -139,12 +139,12 @@ Then create a new `spine.SpineWidget`, providing a [`SpineWidgetConfiguration`](
```JavaScript
new spine.SpineWidget("my-widget", {
json: "assets/spineboy.json",
atlas: "assets/spineboy.atlas",
animation: "run",
atlas: "assets/spineboy.atlas",
animation: "run",
backgroundColor: "#000000",
success: function (widget) {
var animIndex = 0;
widget.canvas.onclick = function () {
widget.canvas.onclick = function () {
animIndex++;
let animations = widget.skeleton.data.animations;
if (animIndex >= animations.length) animIndex = 0;
@ -160,6 +160,7 @@ The configuration object has the following fields:
* `atlas`: required, path to the `.atlas` file, absolute or relative, e.g. "assets/animation.atlas"
* `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`.
* `skin`: optional, the name of the skin to use. Defaults to `default` if omitted.
* `loop`: optional, whether to loop the animation or not. Defaults to `true` if omitted.
* `scale`: optional, the scaling factor to apply when loading the `.json` file. Defaults to `1` if omitted. Irrelevant if `data-fit-to-canavs` is `true`.

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

@ -1543,6 +1543,7 @@ declare module spine {
atlas: string;
animation: string;
imagesPath: string;
atlasPages: string[];
skin: string;
loop: boolean;
scale: number;

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

@ -7899,7 +7899,14 @@ var spine;
var assets = this.assetManager = new spine.webgl.AssetManager(gl);
assets.loadText(config.atlas);
assets.loadText(config.json);
assets.loadTexture(config.atlas.replace(".atlas", ".png"));
if (config.atlasPages == null) {
assets.loadTexture(config.atlas.replace(".atlas", ".png"));
}
else {
for (var i = 0; i < config.atlasPages.length; i++) {
assets.loadTexture(config.atlasPages[i]);
}
}
requestAnimationFrame(function () { _this.load(); });
}
SpineWidget.prototype.validateConfig = function (config) {
@ -8082,6 +8089,8 @@ var spine;
config.animation = widget.getAttribute("data-animation");
if (widget.getAttribute("data-images-path"))
config.imagesPath = widget.getAttribute("data-images-path");
if (widget.getAttribute("data-atlas-pages"))
config.atlasPages = widget.getAttribute("data-atlas-pages").split(",");
if (widget.getAttribute("data-skin"))
config.skin = widget.getAttribute("data-skin");
if (widget.getAttribute("data-loop"))

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

File diff suppressed because one or more lines are too long

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

@ -1473,6 +1473,7 @@ declare module spine {
atlas: string;
animation: string;
imagesPath: string;
atlasPages: string[];
skin: string;
loop: boolean;
scale: number;

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

@ -7478,7 +7478,14 @@ var spine;
var assets = this.assetManager = new spine.webgl.AssetManager(gl);
assets.loadText(config.atlas);
assets.loadText(config.json);
assets.loadTexture(config.atlas.replace(".atlas", ".png"));
if (config.atlasPages == null) {
assets.loadTexture(config.atlas.replace(".atlas", ".png"));
}
else {
for (var i = 0; i < config.atlasPages.length; i++) {
assets.loadTexture(config.atlasPages[i]);
}
}
requestAnimationFrame(function () { _this.load(); });
}
SpineWidget.prototype.validateConfig = function (config) {
@ -7661,6 +7668,8 @@ var spine;
config.animation = widget.getAttribute("data-animation");
if (widget.getAttribute("data-images-path"))
config.imagesPath = widget.getAttribute("data-images-path");
if (widget.getAttribute("data-atlas-pages"))
config.atlasPages = widget.getAttribute("data-atlas-pages").split(",");
if (widget.getAttribute("data-skin"))
config.skin = widget.getAttribute("data-skin");
if (widget.getAttribute("data-loop"))

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

File diff suppressed because one or more lines are too long

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

@ -80,7 +80,13 @@ module spine {
let assets = this.assetManager = new spine.webgl.AssetManager(gl);
assets.loadText(config.atlas);
assets.loadText(config.json);
assets.loadTexture(config.atlas.replace(".atlas", ".png"));
if (config.atlasPages == null) {
assets.loadTexture(config.atlas.replace(".atlas", ".png"));
} else {
for (let i = 0; i < config.atlasPages.length; i++) {
assets.loadTexture(config.atlasPages[i]);
}
}
requestAnimationFrame(() => { this.load(); });
}
@ -264,6 +270,7 @@ module spine {
config.json = widget.getAttribute("data-json");
config.animation = widget.getAttribute("data-animation");
if (widget.getAttribute("data-images-path")) config.imagesPath = widget.getAttribute("data-images-path");
if (widget.getAttribute("data-atlas-pages")) config.atlasPages = widget.getAttribute("data-atlas-pages").split(",");
if (widget.getAttribute("data-skin")) config.skin = widget.getAttribute("data-skin");
if (widget.getAttribute("data-loop")) config.loop = widget.getAttribute("data-loop") === "true";
if (widget.getAttribute("data-scale")) config.scale = parseFloat(widget.getAttribute("data-scale"));
@ -303,6 +310,7 @@ module spine {
atlas: string;
animation: string;
imagesPath: string;
atlasPages: string[];
skin = "default";
loop = true;
scale = 1.0;