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

[ts] Added debug rendering to widget, see README.md for details on how to enable and configure it

Browse Source
This commit is contained in:
badlogic 2016-08-23 14:25:44 +02:00
parent ef4b04756c
commit 59872a1cb9
9 changed files with 76 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
spine-ts/README.md
View File

@ -99,6 +99,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.
You can specify these as attribuets on the HTML element like this:
@ -152,6 +153,7 @@ The configuration object has the following fields:
* `fitToCanvas`: 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.
* `backgroundColor`: optional, the background color to use. Defaults to `#000000` if omitted.
* `premultipliedAlpha`: optional, whether the atlas pages use premultiplied alpha or not. Defaults to `false` if omitted.
* `debug`: optional, whether to show debug information such as bones, attachments, etc. Defaults to `false` if omitted.
* `success`: optional, a callback taking a `SpineWidget` called when the animation has been loaded successfully
* `error`: optional, a callback taking a `SpineWidget` and an error string called when the animation couldn't be loaded
@ -159,4 +161,6 @@ You can also create a HTML element with class `spine-widget` and `data-` attribu
an element via JavaScript on demand.
The resulting `SpineWidget` has various fields that let you modify the animation programmatically. Most notably, the `skeleton` and `state` fields
let you modify all aspects of your animation as you wish. See the [example](https://github.com/EsotericSoftware/spine-runtimes/blob/master/spine-ts/widget/example/index.html#L21).
let you modify all aspects of your animation as you wish. See the [example](https://github.com/EsotericSoftware/spine-runtimes/blob/master/spine-ts/widget/example/index.html#L21).
You can also modify what debug information is shown by accessing `SpineWidget.debugRenderer` and set the various `drawXXX` fields to `true` or `false`.

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

@ -1222,10 +1222,12 @@ declare module spine {
state: AnimationState;
gl: WebGLRenderingContext;
canvas: HTMLCanvasElement;
debugRenderer: spine.webgl.SkeletonDebugRenderer;
private config;
private assetManager;
private shader;
private batcher;
private debugShader;
private mvp;
private skeletonRenderer;
private paused;
@ -1261,6 +1263,7 @@ declare module spine {
fitToCanvas: boolean;
backgroundColor: string;
premultipliedAlpha: boolean;
debug: boolean;
success: (widget: SpineWidget) => void;
error: (widget: SpineWidget, msg: string) => void;
}

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

@ -6210,6 +6210,8 @@ var spine;
this.batcher = new spine.webgl.PolygonBatcher(gl);
this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
this.debugShader = spine.webgl.Shader.newColored(gl);
this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
var assets = this.assetManager = new spine.webgl.AssetManager(gl);
assets.loadText(config.atlas);
assets.loadText(config.json);
@ -6248,6 +6250,8 @@ var spine;
}
if (!config.premultipliedAlpha === undefined)
config.premultipliedAlpha = false;
if (!config.debug === undefined)
config.debug = false;
this.backgroundColor.setFromString(config.backgroundColor);
this.config = config;
};
@ -6310,16 +6314,25 @@ var spine;
state.apply(skeleton);
skeleton.updateWorldTransform();
var shader = this.shader;
var batcher = this.batcher;
var skeletonRenderer = this.skeletonRenderer;
shader.bind();
shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
var batcher = this.batcher;
var skeletonRenderer = this.skeletonRenderer;
batcher.begin(shader);
skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
skeletonRenderer.draw(batcher, skeleton);
batcher.end();
shader.unbind();
if (this.config.debug) {
var shader_1 = this.debugShader;
var renderer = this.debugRenderer;
shader_1.bind();
shader_1.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
renderer.premultipliedAlpha = premultipliedAlpha;
renderer.draw(shader_1, skeleton);
shader_1.unbind();
}
if (!this.paused)
requestAnimationFrame(function () { _this.render(); });
};
@ -6396,6 +6409,8 @@ var spine;
config.backgroundColor = widget.getAttribute("data-background-color");
if (widget.getAttribute("data-premultiplied-alpha"))
config.premultipliedAlpha = widget.getAttribute("data-premultiplied-alpha") === "true";
if (widget.getAttribute("data-debug"))
config.debug = widget.getAttribute("data-debug") === "true";
new spine.SpineWidget(widget, config);
};
SpineWidget.ready = function () {
@ -6431,6 +6446,7 @@ var spine;
this.fitToCanvas = true;
this.backgroundColor = "#555555";
this.premultipliedAlpha = false;
this.debug = false;
}
return SpineWidgetConfig;
}());

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

File diff suppressed because one or more lines are too long

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

@ -1152,10 +1152,12 @@ declare module spine {
state: AnimationState;
gl: WebGLRenderingContext;
canvas: HTMLCanvasElement;
debugRenderer: spine.webgl.SkeletonDebugRenderer;
private config;
private assetManager;
private shader;
private batcher;
private debugShader;
private mvp;
private skeletonRenderer;
private paused;
@ -1191,6 +1193,7 @@ declare module spine {
fitToCanvas: boolean;
backgroundColor: string;
premultipliedAlpha: boolean;
debug: boolean;
success: (widget: SpineWidget) => void;
error: (widget: SpineWidget, msg: string) => void;
}

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

@ -5789,6 +5789,8 @@ var spine;
this.batcher = new spine.webgl.PolygonBatcher(gl);
this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
this.debugShader = spine.webgl.Shader.newColored(gl);
this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
var assets = this.assetManager = new spine.webgl.AssetManager(gl);
assets.loadText(config.atlas);
assets.loadText(config.json);
@ -5827,6 +5829,8 @@ var spine;
}
if (!config.premultipliedAlpha === undefined)
config.premultipliedAlpha = false;
if (!config.debug === undefined)
config.debug = false;
this.backgroundColor.setFromString(config.backgroundColor);
this.config = config;
};
@ -5889,16 +5893,25 @@ var spine;
state.apply(skeleton);
skeleton.updateWorldTransform();
var shader = this.shader;
var batcher = this.batcher;
var skeletonRenderer = this.skeletonRenderer;
shader.bind();
shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
var batcher = this.batcher;
var skeletonRenderer = this.skeletonRenderer;
batcher.begin(shader);
skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
skeletonRenderer.draw(batcher, skeleton);
batcher.end();
shader.unbind();
if (this.config.debug) {
var shader_1 = this.debugShader;
var renderer = this.debugRenderer;
shader_1.bind();
shader_1.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
renderer.premultipliedAlpha = premultipliedAlpha;
renderer.draw(shader_1, skeleton);
shader_1.unbind();
}
if (!this.paused)
requestAnimationFrame(function () { _this.render(); });
};
@ -5975,6 +5988,8 @@ var spine;
config.backgroundColor = widget.getAttribute("data-background-color");
if (widget.getAttribute("data-premultiplied-alpha"))
config.premultipliedAlpha = widget.getAttribute("data-premultiplied-alpha") === "true";
if (widget.getAttribute("data-debug"))
config.debug = widget.getAttribute("data-debug") === "true";
new spine.SpineWidget(widget, config);
};
SpineWidget.ready = function () {
@ -6010,6 +6025,7 @@ var spine;
this.fitToCanvas = true;
this.backgroundColor = "#555555";
this.premultipliedAlpha = false;
this.debug = false;
}
return SpineWidgetConfig;
}());

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

File diff suppressed because one or more lines are too long

1
spine-ts/widget/example/index.html
View File

@ -17,6 +17,7 @@ new spine.SpineWidget("spine-widget", {
atlas: "assets/spineboy.atlas",
animation: "run",
backgroundColor: "#000000",
debug: true,
success: function (widget) {
var animIndex = 0;
widget.canvas.onclick = function () {

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

@ -34,12 +34,14 @@ module spine {
skeleton: Skeleton;
state: AnimationState;
gl: WebGLRenderingContext;
canvas: HTMLCanvasElement;
canvas: HTMLCanvasElement;
debugRenderer: spine.webgl.SkeletonDebugRenderer;
private config: SpineWidgetConfig;
private assetManager: spine.webgl.AssetManager;
private shader: spine.webgl.Shader;
private batcher: spine.webgl.PolygonBatcher;
private debugShader: spine.webgl.Shader;
private mvp = new spine.webgl.Matrix4();
private skeletonRenderer: spine.webgl.SkeletonRenderer;
private paused = false;
@ -71,6 +73,8 @@ module spine {
this.batcher = new spine.webgl.PolygonBatcher(gl);
this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
this.debugShader = spine.webgl.Shader.newColored(gl);
this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
let assets = this.assetManager = new spine.webgl.AssetManager(gl);
assets.loadText(config.atlas);
@ -100,6 +104,7 @@ module spine {
}
}
if (!config.premultipliedAlpha === undefined) config.premultipliedAlpha = false;
if (!config.debug === undefined) config.debug = false;
this.backgroundColor.setFromString(config.backgroundColor);
this.config = config;
}
@ -165,22 +170,30 @@ module spine {
state.apply(skeleton);
skeleton.updateWorldTransform();
// Bind the shader and set the texture and model-view-projection matrix.
// Draw the skeleton
let shader = this.shader;
shader.bind();
shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
// Start the batch and tell the SkeletonRenderer to render the active skeleton.
let batcher = this.batcher;
let skeletonRenderer = this.skeletonRenderer;
shader.bind();
shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
batcher.begin(shader);
skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
skeletonRenderer.draw(batcher, skeleton);
batcher.end();
batcher.end();
shader.unbind();
// Draw debug information if requested via config
if (this.config.debug) {
let shader = this.debugShader;
let renderer = this.debugRenderer;
shader.bind();
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
renderer.premultipliedAlpha = premultipliedAlpha;
renderer.draw(shader, skeleton);
shader.unbind();
}
if (!this.paused) requestAnimationFrame(() => { this.render(); });
}
@ -253,7 +266,8 @@ module spine {
if (widget.getAttribute("data-y")) config.y = parseFloat(widget.getAttribute("data-y"));
if (widget.getAttribute("data-fit-to-canvas")) config.fitToCanvas = widget.getAttribute("data-fit-to-canvas") === "true";
if (widget.getAttribute("data-background-color")) config.backgroundColor = widget.getAttribute("data-background-color");
if (widget.getAttribute("data-premultiplied-alpha")) config.premultipliedAlpha = widget.getAttribute("data-premultiplied-alpha") === "true";
if (widget.getAttribute("data-premultiplied-alpha")) config.premultipliedAlpha = widget.getAttribute("data-premultiplied-alpha") === "true";
if (widget.getAttribute("data-debug")) config.debug = widget.getAttribute("data-debug") === "true";
new spine.SpineWidget(widget, config);
}
@ -290,7 +304,8 @@ module spine {
y = 0;
fitToCanvas = true;
backgroundColor = "#555555";
premultipliedAlpha = false;
premultipliedAlpha = false;
debug = false;
success: (widget: SpineWidget) => void;
error: (widget: SpineWidget, msg: string) => void;
}