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

[ts][canvas] Added support for alpha tinting, rgb tint is ignored

Browse Source
This commit is contained in:
badlogic 2017-03-02 11:41:45 +01:00
parent f5b4310350
commit d5cc4d598a
7 changed files with 45 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spine-ts/README.md
View File

@ -22,7 +22,7 @@ spine-ts works with data exported from Spine 3.5.xx.
spine-ts WebGL & Widget backends supports all Spine features.
spine-ts Canvas does not support color tinting and mesh attachments. Experimental support for mesh attachments can be enabled by setting `spine.canvas.SkeletonRenderer.useTriangleRendering` to true. Note that this method is slow and may lead to artifacts on some browsers.
spine-ts Canvas does not support color tinting and mesh attachments. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting `spine.canvas.SkeletonRenderer.useTriangleRendering` to true. Note that this method is slow and may lead to artifacts on some browsers.
spine-ts THREE.JS does not support color tinting and blend modes. The THREE.JS backend provides `SkeletonMesh.zOffset` to avoid z-fighting. Adjust to your near/far plane settings.

1
spine-ts/build/spine-canvas.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);

16
spine-ts/build/spine-canvas.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,18 +227,27 @@ 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();
}
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;
@ -251,10 +261,14 @@ var spine;
ctx.scale(1, -1);
ctx.translate(-w / 2, -h / 2);
ctx.drawImage(image, region.x, region.y, w, h, 0, 0, w, h);
if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) {
ctx.globalAlpha = color.a;
}
if (this.debugRendering)
ctx.strokeRect(0, 0, w, h);
ctx.restore();
}
ctx.restore();
};
SkeletonRenderer.prototype.drawTriangles = function (skeleton) {
var blendMode = null;

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

File diff suppressed because one or more lines are too long

2
spine-ts/canvas/example/assets/spineboy.json
View File

File diff suppressed because one or more lines are too long

2
spine-ts/canvas/example/index.html
View File

@ -18,7 +18,7 @@ var skeleton, state, bounds;
var skeletonRenderer;
var skelName = "spineboy";
var animName = "idle";
var animName = "test";
function init () {
canvas = document.getElementById("canvas");

26
spine-ts/canvas/src/SkeletonRenderer.ts
View File

@ -37,6 +37,8 @@ module spine.canvas {
public triangleRendering = false;
public debugRendering = false;
private tempColor = new Color(0, 0, 0, 1);
constructor (context: CanvasRenderingContext2D) {
this.ctx = context;
}
@ -52,17 +54,30 @@ module spine.canvas {
if (this.debugRendering) ctx.strokeStyle = "green";
ctx.save();
for (let i = 0, n = drawOrder.length; i < n; i++) {
let slot = drawOrder[i];
let attachment = slot.getAttachment();
let regionAttachment: RegionAttachment = null;
let region: TextureAtlasRegion = null;
let image: HTMLImageElement = null;
if (attachment instanceof RegionAttachment) {
let regionAttachment = <RegionAttachment>attachment;
regionAttachment = <RegionAttachment>attachment;
region = <TextureAtlasRegion>regionAttachment.region;
image = (<CanvasTexture>region.texture).getImage();
} else continue;
let skeleton = slot.bone.skeleton;
let skeletonColor = skeleton.color;
let slotColor = slot.color;
let regionColor = regionAttachment.color;
let alpha = skeletonColor.a * slotColor.a * regionColor.a;
let color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * regionColor.r,
skeletonColor.g * slotColor.g * regionColor.g,
skeletonColor.b * slotColor.b * regionColor.b,
alpha);
let att = <RegionAttachment>attachment;
let bone = slot.bone;
let w = region.width;
@ -76,9 +91,18 @@ module spine.canvas {
ctx.scale(1, -1);
ctx.translate(-w / 2, -h / 2);
ctx.drawImage(image, region.x, region.y, w, h, 0, 0, w, h);
if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) {
ctx.globalAlpha = color.a;
// experimental tinting via compositing, doesn't work
// ctx.globalCompositeOperation = "source-atop";
// ctx.fillStyle = "rgba(" + (color.r * 255 | 0) + ", " + (color.g * 255 | 0) + ", " + (color.b * 255 | 0) + ", " + color.a + ")";
// ctx.fillRect(0, 0, w, h);
}
if (this.debugRendering) ctx.strokeRect(0, 0, w, h);
ctx.restore();
}
ctx.restore();
}
private drawTriangles (skeleton: Skeleton) {