The Canvas Renderer and WebGL Multi Pipeline now uses the new renderRoundPixels boolean to determine if it can render a Sprite or a Texture with rounded position values, or not. This fixes an issue where black lines would appear between tightly grouped sprites or tiles at non-integer Camera zoom values. Fix #6907

This commit is contained in:
Richard Davey 2024-10-11 00:41:43 +01:00
parent 8e432aee8d
commit 79de922e5d
No known key found for this signature in database
2 changed files with 26 additions and 22 deletions

View file

@ -782,6 +782,12 @@ var CanvasRenderer = new Class({
var gx = sprite.x;
var gy = sprite.y;
if (camera.roundPixels)
{
gx = Math.floor(gx);
gy = Math.floor(gy);
}
spriteMatrix.applyITRS(gx, gy, sprite.rotation, sprite.scaleX * flipX, sprite.scaleY * flipY);
camMatrix.copyFrom(camera.matrix);
@ -804,10 +810,10 @@ var CanvasRenderer = new Class({
// Multiply by the Sprite matrix
camMatrix.multiply(spriteMatrix);
if (camera.roundPixels)
if (camera.renderRoundPixels)
{
camMatrix.e = Math.round(camMatrix.e);
camMatrix.f = Math.round(camMatrix.f);
camMatrix.e = Math.floor(camMatrix.e + 0.5);
camMatrix.f = Math.floor(camMatrix.f + 0.5);
}
ctx.save();
@ -827,26 +833,24 @@ var CanvasRenderer = new Class({
if (frameWidth > 0 && frameHeight > 0)
{
var fw = frameWidth / res;
var fh = frameHeight / res;
if (camera.roundPixels)
{
ctx.drawImage(
frame.source.image,
frameX, frameY,
frameWidth, frameHeight,
Math.round(x), Math.round(y),
Math.round(frameWidth / res), Math.round(frameHeight / res)
);
}
else
{
ctx.drawImage(
frame.source.image,
frameX, frameY,
frameWidth, frameHeight,
x, y,
frameWidth / res, frameHeight / res
);
x = Math.floor(x + 0.5);
y = Math.floor(y + 0.5);
fw += 0.5;
fh += 0.5;
}
ctx.drawImage(
frame.source.image,
frameX, frameY,
frameWidth, frameHeight,
x, y,
fw, fh
);
}
if (sprite.mask)

View file

@ -400,7 +400,7 @@ var MultiPipeline = new Class({
// Multiply by the Sprite matrix, store result in calcMatrix
camMatrix.multiply(spriteMatrix, calcMatrix);
var quad = calcMatrix.setQuad(x, y, x + frameWidth, y + frameHeight, camera.roundPixels);
var quad = calcMatrix.setQuad(x, y, x + frameWidth, y + frameHeight, camera.renderRoundPixels);
var getTint = Utils.getTintAppendFloatAlpha;
var cameraAlpha = camera.alpha;
@ -584,7 +584,7 @@ var MultiPipeline = new Class({
// Multiply by the Sprite matrix, store result in calcMatrix
camMatrix.multiply(spriteMatrix, calcMatrix);
var quad = calcMatrix.setQuad(x, y, x + width, y + height, camera.roundPixels);
var quad = calcMatrix.setQuad(x, y, x + width, y + height, camera.renderRoundPixels);
if (textureUnit === undefined || textureUnit === null)
{