Dark area appears when I use game.scale.resize()

Phaser 3
1

Hello,

When I use game.scale.resize() to resize the game to be larger than the initial size.
Somehow, the canvas has dark area over the screen. What is wrong?
This doesn’t happen when I scale it to be smaller than the initial size.
Am I missing something?

The scaleMode is Phaser.Scale.NO_SCALE.
The order of the functions I call is the following:
parentHtmlElement.style.width = width + “px”;
parentHtmlElement.style.height = height + “px”;
…
canvasElement.style.width = width + “px”;
canvasElement.style.height = height + “px”;
…
game.scale.resize(width, height);

Btw, I’m using version 3.16.2.

50
Screen Shot 2562-02-11 at 21.49.50.jpg844×1224 318 KB

06
Screen Shot 2562-02-11 at 21.50.06.jpg940×1396 337 KB

2

I’ve found that if I use Phaser.CANVAS, the problem is gone.

How to prevent this problem when I use Phaser.WEBGL?

3

I am using RESIZE mode and have the same issue, I just haven’t had time to look into it. My guess is we will need to call setViewport() on the camera with the updated canvas size. Let me know if you try it out.

4

I went ahead and verified that the camera viewport not being updated is indeed the issue.

Here’s some code to resolve:

this.scale.on(Phaser.Scale.Events.RESIZE, (gameSize: Phaser.Structs.Size) => {
    this.cameras.main.setViewport(0, 0, gameSize.width, gameSize.height);
});

Or for you JS heathens:

this.scale.on('resize', function (gameSize) {
    this.cameras.main.setViewport(0, 0, gameSize.width, gameSize.height);
}, this);
5

Thank you, sky-coding. Your solution works perfectly!