The Canvas Renderer and WebGL Multi Pipeline now uses the new `render…

…RoundPixels` 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
phaserjs · Oct 10, 2024 · 79de922 · 79de922
1 parent 8e432ae
commit 79de922
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/src/renderer/canvas/CanvasRenderer.js b/src/renderer/canvas/CanvasRenderer.js
@@ -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)

diff --git a/src/renderer/webgl/pipelines/MultiPipeline.js b/src/renderer/webgl/pipelines/MultiPipeline.js
@@ -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)
         {