[ts][canvas] Closes #1114, alpha tinting support for triangle rendering.

This commit is contained in:
badlogic 2018-05-17 13:43:09 +02:00
parent df45ae9d22
commit 3598f51a65
5 changed files with 45 additions and 2 deletions

View File

@ -6726,7 +6726,17 @@ var spine;
if (slotBlendMode != blendMode) {
blendMode = slotBlendMode;
}
var skeleton_2 = slot.bone.skeleton;
var skeletonColor = skeleton_2.color;
var slotColor = slot.color;
var attachmentColor = attachment.color;
var alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * attachmentColor.r, skeletonColor.g * slotColor.g * attachmentColor.g, skeletonColor.b * slotColor.b * attachmentColor.b, alpha);
var ctx = this.ctx;
if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) {
ctx.globalAlpha = color.a;
}
for (var j = 0; j < triangles.length; j += 3) {
var t1 = triangles[j] * 8, t2 = triangles[j + 1] * 8, t3 = triangles[j + 2] * 8;
var x0 = vertices[t1], y0 = vertices[t1 + 1], u0 = vertices[t1 + 6], v0 = vertices[t1 + 7];
@ -6745,6 +6755,7 @@ var spine;
}
}
}
this.ctx.globalAlpha = 1;
};
SkeletonRenderer.prototype.drawTriangle = function (img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2) {
var ctx = this.ctx;

File diff suppressed because one or more lines are too long

View File

@ -6726,7 +6726,17 @@ var spine;
if (slotBlendMode != blendMode) {
blendMode = slotBlendMode;
}
var skeleton_2 = slot.bone.skeleton;
var skeletonColor = skeleton_2.color;
var slotColor = slot.color;
var attachmentColor = attachment.color;
var alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * attachmentColor.r, skeletonColor.g * slotColor.g * attachmentColor.g, skeletonColor.b * slotColor.b * attachmentColor.b, alpha);
var ctx = this.ctx;
if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) {
ctx.globalAlpha = color.a;
}
for (var j = 0; j < triangles.length; j += 3) {
var t1 = triangles[j] * 8, t2 = triangles[j + 1] * 8, t3 = triangles[j + 2] * 8;
var x0 = vertices[t1], y0 = vertices[t1 + 1], u0 = vertices[t1 + 6], v0 = vertices[t1 + 7];
@ -6745,6 +6755,7 @@ var spine;
}
}
}
this.ctx.globalAlpha = 1;
};
SkeletonRenderer.prototype.drawTriangle = function (img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2) {
var ctx = this.ctx;

File diff suppressed because one or more lines are too long

View File

@ -146,8 +146,27 @@ module spine.canvas {
blendMode = slotBlendMode;
}
let skeleton = slot.bone.skeleton;
let skeletonColor = skeleton.color;
let slotColor = slot.color;
let attachmentColor = attachment.color;
let alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
let color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * attachmentColor.r,
skeletonColor.g * slotColor.g * attachmentColor.g,
skeletonColor.b * slotColor.b * attachmentColor.b,
alpha);
let ctx = this.ctx;
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);
}
for (var j = 0; j < triangles.length; j+=3) {
let t1 = triangles[j] * 8, t2 = triangles[j+1] * 8, t3 = triangles[j+2] * 8;
@ -169,6 +188,8 @@ module spine.canvas {
}
}
}
this.ctx.globalAlpha = 1;
}
// Adapted from http://extremelysatisfactorytotalitarianism.com/blog/?p=2120