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

[ts][widget] Added transparent canvas widget support

Browse Source
This commit is contained in:
badlogic 2016-11-02 13:44:31 +01:00
parent 73beae2c15
commit 43efcaf373
9 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spine-ts/README.md
View File

@ -166,6 +166,7 @@ The configuration object has the following fields:
* `x`: optional, the x-coordinate to display the animation at. The origin is in the bottom left corner. Defaults to `0` if omitted. Irrelevant if `data-fit-to-canvas` is `true`.
* `y`: optional, the y-coordinate to display the animation at. The origin is in the bottom left corner with the y-axis pointing upwards. Defaults to `0` if omitted. Irrelevant if `data-fit-to-canvas` is `true`.
* `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.
* `alpha`: optional, whether to allow the canvas to be transparent. Defaults to `true`. Set the alpha channel in ``backgroundColor` to 0 as well, e.g. `#00000000`.
* `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.

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

@ -1548,6 +1548,7 @@ declare module spine {
scale: number;
x: number;
y: number;
alpha: boolean;
fitToCanvas: boolean;
backgroundColor: string;
premultipliedAlpha: boolean;

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

@ -7819,7 +7819,7 @@ var spine;
element.appendChild(canvas);
canvas.width = element.clientWidth;
canvas.height = element.clientHeight;
var webglConfig = { alpha: false };
var webglConfig = { alpha: config.alpha };
var gl = this.gl = (canvas.getContext("webgl", webglConfig) || canvas.getContext("experimental-webgl", webglConfig));
this.shader = spine.webgl.Shader.newColoredTextured(gl);
this.batcher = new spine.webgl.PolygonBatcher(gl);
@ -7868,6 +7868,8 @@ var spine;
config.premultipliedAlpha = false;
if (!config.debug === undefined)
config.debug = false;
if (!config.alpha === undefined)
config.alpha = true;
this.backgroundColor.setFromString(config.backgroundColor);
this.config = config;
};
@ -8030,6 +8032,8 @@ var spine;
config.premultipliedAlpha = widget.getAttribute("data-premultiplied-alpha") === "true";
if (widget.getAttribute("data-debug"))
config.debug = widget.getAttribute("data-debug") === "true";
if (widget.getAttribute("data-alpha"))
config.alpha = widget.getAttribute("data-alpha") === "true";
new spine.SpineWidget(widget, config);
};
SpineWidget.ready = function () {
@ -8062,6 +8066,7 @@ var spine;
this.scale = 1.0;
this.x = 0;
this.y = 0;
this.alpha = true;
this.fitToCanvas = true;
this.backgroundColor = "#555555";
this.premultipliedAlpha = false;

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

@ -1478,6 +1478,7 @@ declare module spine {
scale: number;
x: number;
y: number;
alpha: boolean;
fitToCanvas: boolean;
backgroundColor: string;
premultipliedAlpha: boolean;

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

@ -7398,7 +7398,7 @@ var spine;
element.appendChild(canvas);
canvas.width = element.clientWidth;
canvas.height = element.clientHeight;
var webglConfig = { alpha: false };
var webglConfig = { alpha: config.alpha };
var gl = this.gl = (canvas.getContext("webgl", webglConfig) || canvas.getContext("experimental-webgl", webglConfig));
this.shader = spine.webgl.Shader.newColoredTextured(gl);
this.batcher = new spine.webgl.PolygonBatcher(gl);
@ -7447,6 +7447,8 @@ var spine;
config.premultipliedAlpha = false;
if (!config.debug === undefined)
config.debug = false;
if (!config.alpha === undefined)
config.alpha = true;
this.backgroundColor.setFromString(config.backgroundColor);
this.config = config;
};
@ -7609,6 +7611,8 @@ var spine;
config.premultipliedAlpha = widget.getAttribute("data-premultiplied-alpha") === "true";
if (widget.getAttribute("data-debug"))
config.debug = widget.getAttribute("data-debug") === "true";
if (widget.getAttribute("data-alpha"))
config.alpha = widget.getAttribute("data-alpha") === "true";
new spine.SpineWidget(widget, config);
};
SpineWidget.ready = function () {
@ -7641,6 +7645,7 @@ var spine;
this.scale = 1.0;
this.x = 0;
this.y = 0;
this.alpha = true;
this.fitToCanvas = true;
this.backgroundColor = "#555555";
this.premultipliedAlpha = false;

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

File diff suppressed because one or more lines are too long

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

@ -14,13 +14,13 @@
<script>
new spine.SpineWidget("spine-widget", {
json: "assets/spineboy.json",
atlas: "assets/spineboy.atlas",
animation: "run",
backgroundColor: "#000000",
atlas: "assets/spineboy.atlas",
animation: "run",
backgroundColor: "#00000000",
debug: true,
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;

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

@ -66,7 +66,7 @@ module spine {
(<HTMLElement> element).appendChild(canvas);
canvas.width = (<HTMLElement>element).clientWidth;
canvas.height = (<HTMLElement>element).clientHeight;
var webglConfig = { alpha: false };
var webglConfig = { alpha: config.alpha };
let gl = this.gl = <WebGLRenderingContext> (canvas.getContext("webgl", webglConfig) || canvas.getContext("experimental-webgl", webglConfig));
this.shader = spine.webgl.Shader.newColoredTextured(gl);
@ -106,6 +106,7 @@ module spine {
}
if (!config.premultipliedAlpha === undefined) config.premultipliedAlpha = false;
if (!config.debug === undefined) config.debug = false;
if (!config.alpha === undefined) config.alpha = true;
this.backgroundColor.setFromString(config.backgroundColor);
this.config = config;
}
@ -272,6 +273,7 @@ module spine {
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-debug")) config.debug = widget.getAttribute("data-debug") === "true";
if (widget.getAttribute("data-alpha")) config.alpha = widget.getAttribute("data-alpha") === "true";
new spine.SpineWidget(widget, config);
}
@ -306,6 +308,7 @@ module spine {
scale = 1.0;
x = 0;
y = 0;
alpha = true;
fitToCanvas = true;
backgroundColor = "#555555";
premultipliedAlpha = false;