From 79de922e5dc751fb8b26343681330da0be87c61b Mon Sep 17 00:00:00 2001
From: Richard Davey <rich@photonstorm.com>
Date: Fri, 11 Oct 2024 00:41:43 +0100
Subject: [PATCH] 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

---
 src/renderer/canvas/CanvasRenderer.js         | 44 ++++++++++---------
 src/renderer/webgl/pipelines/MultiPipeline.js |  4 +-
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/renderer/canvas/CanvasRenderer.js b/src/renderer/canvas/CanvasRenderer.js
index f60c29148..08c34b970 100644
--- 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
index 9a0ae492f..015cde3d1 100644
--- 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)
         {