Phaser 3 text not shown great after switching orientations

[gio_nole]

I have this line of code.

const width = this.cameras.main.width;
const height = this.cameras.main.height;
let loadingText = this.make.text({
            x: width / 2,
            y: height / 2 - 50,
            text: 'Loading...',
            style: {
                font: '20px monospace',
                fill: '#ffffff'
            }
        });
        loadingText.setOrigin(0.5, 0.5);

So this means that before the actual game starts, i have a loader which shows loading text. Now, the thing is this works well if the user opened the game in portrait mode. But let’s imagine that while loading... text appearing and user opened it in portrait mode, he decided to change the orientation to landscape before the game got loaded. What’s gonna happen is loading is gonna end up in a very bad places. I am putting two images. just remember that user opened the app in portrait mode first and while the loading text is appearing, he quickly changed the portrait to landscape and this is how the text ends up.

The thing is in Phaser 2, I am a noob, i just found this on one of the phaser 2 games, there was this function

Phaser.World.prototype.displayObjectUpdateTransform = function() {
  // console.log(PIXI.DisplayObject.prototype.updateTransform, " rotation");
  // console.log(this, " this");
  // console.log(game.camera);
  if(!game.scale.correct) {
    this.x = game.camera.y + game.width;
    this.y = -game.camera.x;
    // console.log(Phaser.Math.degToRad(Phaser.Math.wrapAngle(90)));
    this.rotation = Phaser.Math.degToRad(Phaser.Math.wrapAngle(90));
  } else {
    this.x = -game.camera.x;
    this.y = -game.camera.y;
    this.rotation = 0;
  }

  PIXI.DisplayObject.prototype.updateTransform.call(this);
}

and i am sure this code is exactly what solves the problem , but in phaser 3 , there’s nothing like that. So what do I have to do in this case so that text appears great? Any ideas?

[samme]

Honestly, I would just finish the game first and worry about that afterwards. Use scale mode FIT for now.

[gio_nole]

Game is finished ! some other developers wrote it. All I had to do now is scale it and add a loading screen. What about the answer ? what should I do? Thanks mate.

[samme]

• Does the game have a preferred orientation and aspect ratio?
  • Yes:
    • How do you want the game to appear in the “wrong” orientation?
      1. Scale to fit
      2. Scale to fill
      3. Something else
  • No:
    • Do you want to position game objects based on available space?
      • Yes:
        • DIY using this.scale.gameSize

[gio_nole]

I am uploading how the game itself looks like. you will have a better idea of things. and by the way, because user might change orientation, I listen to that event and adjust accordingly.

this.game.scale.on('orientationchange', (e: string) => {
            switch(e) {
                case 'portrait-primary':
                    this.game.scale.displaySize.aspectRatio = GAME_HEIGHT/GAME_WIDTH;
                    this.game.scale.setGameSize(GAME_HEIGHT,GAME_WIDTH);
                    break;
                case 'landscape-primary':
                    this.game.scale.displaySize.aspectRatio = GAME_WIDTH/GAME_HEIGHT;
                    this.game.scale.setGameSize(GAME_WIDTH,GAME_HEIGHT);
                    break;
                default:  
            }
        })

So Game exactly (i mean exactly fits) the screen in both modes. because of my listener and setGameSize it also behaves as I want after changing orientation. But if you look at my first post on this link, you will realize that same thing not happening for loading text. Why? and what should I do?

[samme]

Reposition the text (by the camera viewport) in the ‘orientationchange’ handler.