How to change background color

[captainHook]

Does anyone know how to use the CanvasRenderer class ( https://photonstorm.github.io/phaser3-docs/Phaser.Renderer.Canvas.CanvasRenderer.html )?

I would like to do things like easily resize canvas, modify canvas background-color, etc - without having to use directly html5 canvas API. Is it possible?

[rich]

The Canvas Renderer is automatically used if you create a game with the renderer config set to CANVAS, or the browser doesn't support WebGL.

The sort of things you describe doesn't sound like what the Canvas Renderer is for.

[captainHook]

Thanks for quick response. Is there an other way then to access canvas context in phaser3? For example I used  Game.resize() method to resize the canvas, but dont find how to change other parameters (like background color I mentionned above). Where to search in Phaser API / any examples ?

[samme]

http://labs.phaser.io/edit.html?src=src/camera\background color.js

[captainHook]

That is what I was looking for. Thanks.

myScene.cameras.main.setBackgroundColor('#000000')

https://rexrainbow.github.io/phaser3-rex-notes/docs/site/camera/

[rodrigezer]

I did it with this line

this.cameras.main.backgroundColor.setTo(255,255,255);

https://photonstorm.github.io/phaser3-docs/Phaser.Display.Color.html

[8Observer8]

And we can use this line:

this.cameras.main.backgroundColor = Phaser.Display.Color.HexStringToColor("#3498db");

 

[Eivan92]

This is link of git for change background:

https://github.com/photonstorm/phaser-examples/blob/master/examples/display/game background color.

Example:

function create() {

    //  You can set the background color of your game in the following ways:

    game.stage.backgroundColor = "#4488AA";
    // game.stage.backgroundColor = 0x4488aa;
    // game.stage.backgroundColor = 'rgb(68, 136, 170)';
    // game.stage.backgroundColor = 'rgba(68, 136, 170, 0.5)';

    game.add.image(game.world.centerX, game.world.centerY, 'hotdog').anchor.set(0.5);

    //  Click for a new background color
    game.input.onDown.add(changeColor, this);

}

 

Edited July 13, 2021 by Eivan92
No show coding