Improve pixel perfect rendering of games (#1432)

Can help with the issue of "bleeding" tiles.

GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.js

@@ -39,6 +39,7 @@ gdjs.RuntimeGamePixiRenderer.prototype.createStandardCanvas = function(
     this._game.getGameResolutionHeight(),
     {
       preserveDrawingBuffer: true,
+      antialias: false,
     }
   );
   parentElement.appendChild(this._pixiRenderer.view); // add the renderer view element to the DOM
@@ -122,7 +123,8 @@ gdjs.RuntimeGamePixiRenderer.prototype._resizeCanvas = function() {
     canvasHeight = maxHeight;
   } else if (
     (isFullPage && this._keepRatio) ||
-    canvasWidth > maxWidth || canvasHeight > maxHeight
+    canvasWidth > maxWidth ||
+    canvasHeight > maxHeight
   ) {
     var factor = maxWidth / canvasWidth;
     if (canvasHeight * factor > maxHeight) factor = maxHeight / canvasHeight;

newIDE/app/src/InstancesEditor/index.js

@@ -59,10 +59,18 @@ export default class InstancesEditorContainer extends Component {
     // if the project changes).
     const { project } = this.props;
 
+    //This prevents flickering on some mobile devices
+    PIXI.glCore.VertexArrayObject.FORCE_NATIVE = true;
+
+    //Create the renderer and setup the rendering area for scene editor.
+    //"preserveDrawingBuffer: true" is needed to avoid flickering and background issues on some mobile phones (see #585 #572 #566 #463)
     this.pixiRenderer = PIXI.autoDetectRenderer(
       this.props.width,
       this.props.height,
-      { antialias: true } //fixes jaggy edges
+      {
+        preserveDrawingBuffer: true,
+        antialias: false,
+      } // Disable anti-aliasing to avoid rendering issue (1px width line of extra pixels) when rendering pixel perfect tiled sprites.
     );
     this.canvasArea.appendChild(this.pixiRenderer.view);
     this.pixiRenderer.view.addEventListener('contextmenu', e => {

newIDE/app/src/ObjectsRendering/Renderers/RenderedTiledSpriteInstance.js

@@ -74,8 +74,8 @@ RenderedTiledSpriteInstance.prototype.update = function() {
     );
   }
 
-  this._pixiObject.x = this._instance.getX() + this._pixiObject.width / 2;
-  this._pixiObject.y = this._instance.getY() + this._pixiObject.height / 2;
+  this._pixiObject.x = this._instance.getX() + (this._pixiObject.width / 2);
+  this._pixiObject.y = this._instance.getY() + (this._pixiObject.height / 2);
   this._pixiObject.rotation = RenderedInstance.toRad(this._instance.getAngle());
 };