Problem at orientation change

Phaser 2 / CE
1

I’m trying to implement portrait and landscape mode for my game.
At boot state I have:

this.scale.scaleMode = Phaser.ScaleManager.RESIZE;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;

In index.html I have:

$(window).on("orientationchange", function (event) {
  resizeGame();
});

function resizeGame() {
var height = $(window).height();
var width = $(window).width();
TopDownGame.game.width = width;
TopDownGame.game.height = height;
TopDownGame.game.stage.getBounds.width = width;
TopDownGame.game.stage.getBounds.height = height;
if (TopDownGame.game.renderType === Phaser.WEBGL) {
    TopDownGame.game.renderer.resize(width, height);
}
}

I init game this way:

TopDownGame.game = new Phaser.Game($(window).width(), $(window).height(), Phaser.AUTO, 'canvasContainer', null, false, true);

When I turn phone from portrait mode to landscape, there is black blackground at the right. As it is seen in second image yellow goal sprite is on top of black background. It seems that tilemap didn’t refresh. Why this is happening?

q8GP_pwB35E
q8GP_pwB35E.jpg720×1280 158 KB
dljVUtwn0b0
dljVUtwn0b0.jpg1280×720 102 KB

2

Hi @microspace,
You need to resize your tilemap layer in the function resizeGame() with the method resize(width, height).
This is an official phaser example modified for this case:

See the Pen [Phaser CE] Resize tilemap by Juan Jose Capellan (@jjcapellan) on CodePen.

Regards.

1 Like
3

I found it normal to have spaces when I resize a game in canvas, so it’s important to center the canvas
I mostly use

Phaser.ScaleManager.SHOW_ALL;

The RESIZE scale mode will create a Canvas element for your game that is the same size as the
parent container.

4

Also, use game.scale.setGameSize() instead.

5

Thank you very much! Totally helpful answer! Also I need to resize each layer of Tilemap.
And I replaced setResizeCallback to onSizeChange.