Merge pull request #6993 from pavle-goloskokovic/initial-bg-color

Applying config background color immediately
phaserjs · Jan 2, 2025 · d4be345 · d4be345
2 parents d847fdf + c4871a0
commit d4be345
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 20 deletions.
diff --git a/src/renderer/canvas/CanvasRenderer.js b/src/renderer/canvas/CanvasRenderer.js
@@ -14,6 +14,7 @@ var Events = require('../events');
 var GetBlendModes = require('./utils/GetBlendModes');
 var ScaleEvents = require('../../scale/events');
 var TextureEvents = require('../../textures/events');
+var GameEvents = require('../../core/events');
 var TransformMatrix = require('../../gameobjects/components/TransformMatrix');
 
 /**
@@ -54,7 +55,8 @@ var CanvasRenderer = new Class({
             clearBeforeRender: gameConfig.clearBeforeRender,
             backgroundColor: gameConfig.backgroundColor,
             antialias: gameConfig.antialias,
-            roundPixels: gameConfig.roundPixels
+            roundPixels: gameConfig.roundPixels,
+            transparent: gameConfig.transparent
         };
 
         /**
@@ -113,8 +115,8 @@ var CanvasRenderer = new Class({
         this.gameCanvas = game.canvas;
 
         var contextOptions = {
-            alpha: game.config.transparent,
-            desynchronized: game.config.desynchronized,
+            alpha: gameConfig.transparent,
+            desynchronized: gameConfig.desynchronized,
             willReadFrequently: false
         };
 
@@ -143,7 +145,7 @@ var CanvasRenderer = new Class({
          * @type {boolean}
          * @since 3.20.0
          */
-        this.antialias = game.config.antialias;
+        this.antialias = gameConfig.antialias;
 
         /**
          * The blend modes supported by the Canvas Renderer.
@@ -226,7 +228,24 @@ var CanvasRenderer = new Class({
      */
     init: function ()
     {
-        this.game.textures.once(TextureEvents.READY, this.boot, this);
+        var game = this.game;
+
+        game.events.once(GameEvents.BOOT, function ()
+        {
+            var config = this.config;
+
+            if (!config.transparent)
+            {
+                var ctx = this.gameContext;
+                var gameCanvas = this.gameCanvas;
+
+                ctx.fillStyle = config.backgroundColor.rgba;
+                ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
+            }
+
+        }, this);
+
+        game.textures.once(TextureEvents.READY, this.boot, this);
     },
 
     /**
@@ -787,7 +806,7 @@ var CanvasRenderer = new Class({
             gx = Math.floor(gx);
             gy = Math.floor(gy);
         }
-    
+
         spriteMatrix.applyITRS(gx, gy, sprite.rotation, sprite.scaleX * flipX, sprite.scaleY * flipY);
 
         camMatrix.copyFrom(camera.matrix);

diff --git a/src/renderer/webgl/WebGLRenderer.js b/src/renderer/webgl/WebGLRenderer.js
@@ -419,7 +419,7 @@ var WebGLRenderer = new Class({
         /**
          * If the browser supports the `ANGLE_instanced_arrays` extension, this property will hold
          * a reference to the glExtension for it.
-         * 
+         *
          * This is populated in the `setExtensions` method.
          *
          * @name Phaser.Renderer.WebGL.WebGLRenderer#instancedArraysExtension
@@ -432,7 +432,7 @@ var WebGLRenderer = new Class({
         /**
          * If the browser supports the `OES_vertex_array_object` extension, this property will hold
          * a reference to the glExtension for it.
-         * 
+         *
          * This is populated in the `setExtensions` method.
          *
          * @name Phaser.Renderer.WebGL.WebGLRenderer#vaoExtension
@@ -853,6 +853,7 @@ var WebGLRenderer = new Class({
         gl.enable(gl.BLEND);
 
         gl.clearColor(clearColor.redGL, clearColor.greenGL, clearColor.blueGL, clearColor.alphaGL);
+        gl.clear(gl.COLOR_BUFFER_BIT);
 
         //  Mipmaps
         var validMipMaps = [ 'NEAREST', 'LINEAR', 'NEAREST_MIPMAP_NEAREST', 'LINEAR_MIPMAP_NEAREST', 'NEAREST_MIPMAP_LINEAR', 'LINEAR_MIPMAP_LINEAR' ];
@@ -931,11 +932,11 @@ var WebGLRenderer = new Class({
 
     /**
      * Queries the GL context to get the supported extensions.
-     * 
+     *
      * Then sets them into the `supportedExtensions`, `instancedArraysExtension` and `vaoExtension` properties.
-     * 
+     *
      * Called automatically during the `init` method.
-     * 
+     *
      * @method Phaser.Renderer.WebGL.WebGLRenderer#setExtensions
      * @since 3.85.2
      */
@@ -958,14 +959,14 @@ var WebGLRenderer = new Class({
 
     /**
      * Sets the handlers that are called when WebGL context is lost or restored by the browser.
-     * 
+     *
      * The default handlers are referenced via the properties `WebGLRenderer.contextLostHandler` and `WebGLRenderer.contextRestoredHandler`.
      * By default, these map to the methods `WebGLRenderer.dispatchContextLost` and `WebGLRenderer.dispatchContextRestored`.
-     * 
+     *
      * You can override these handlers with your own via this method.
-     * 
+     *
      * If you do override them, make sure that your handlers invoke the methods `WebGLRenderer.dispatchContextLost` and `WebGLRenderer.dispatchContextRestored` in due course, otherwise the renderer will not be able to restore itself fully.
-     * 
+     *
      * @method Phaser.Renderer.WebGL.WebGLRenderer#setContextHandlers
      * @since 3.85.0
      *
@@ -982,7 +983,7 @@ var WebGLRenderer = new Class({
         {
             this.canvas.removeEventListener('webglcontextlost', this.previousContextRestoredHandler, false);
         }
-        
+
         if (typeof contextLost === 'function')
         {
             this.contextLostHandler = contextLost.bind(this);
@@ -1014,7 +1015,7 @@ var WebGLRenderer = new Class({
      *
      * @method Phaser.Renderer.WebGL.WebGLRenderer#dispatchContextLost
      * @since 3.85.0
-     * 
+     *
      * @param {WebGLContextEvent } event - The WebGL context lost Event.
      */
     dispatchContextLost: function (event)
@@ -1037,7 +1038,7 @@ var WebGLRenderer = new Class({
      *
      * @method Phaser.Renderer.WebGL.WebGLRenderer#dispatchContextRestored
      * @since 3.85.0
-     * 
+     *
      * @param {WebGLContextEvent } event - The WebGL context restored Event.
      */
     dispatchContextRestored: function (event)
@@ -1111,10 +1112,10 @@ var WebGLRenderer = new Class({
 
         event.preventDefault();
     },
-    
+
     /**
      * Create temporary WebGL textures to stop WebGL errors on macOS.
-     * 
+     *
      * @method Phaser.Renderer.WebGL.WebGLRenderer#createTemporaryTextures
      * @since 3.60.0
      */