Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-24 21:53:59 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/renderer/canvas/CanvasRenderer.js
View file

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

4
src/renderer/webgl/pipelines/MultiPipeline.js
View file

@ -400,7 +400,7 @@ var MultiPipeline = new Class({
// Multiply by the Sprite matrix, store result in calcMatrix // Multiply by the Sprite matrix, store result in calcMatrix
camMatrix.multiply(spriteMatrix, 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 getTint = Utils.getTintAppendFloatAlpha;
var cameraAlpha = camera.alpha; var cameraAlpha = camera.alpha;
@ -584,7 +584,7 @@ var MultiPipeline = new Class({
// Multiply by the Sprite matrix, store result in calcMatrix // Multiply by the Sprite matrix, store result in calcMatrix
camMatrix.multiply(spriteMatrix, 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) if (textureUnit === undefined || textureUnit === null)
{ {