Phaser 3 scale SHOW_ALL

Phaser 3
1

I am trying to mimic one game that was written for phaser 2. i am trying to mimic because it handles screen resizing and all that so perfectly and i want the same behaviour for phaser 3.

This is what I found in that game’s code i am trying to mimic.

 game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

But couldn’t find SHOW_ALL for phaser 3. Any idea how to do the above 3 lines exactly for phaser 3?

Basically, I need the same screen as http://game.webxinxin.com/tacit/

My game screen should behave the same as shown on that link. I have seen examples here for phaser 3:
https://labs.phaser.io/index.html?dir=scalemanager/&q= but none of them actually do the same as that game

2 
new Phaser.Game({
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
  }
});
3

Thanks for your suggestion. I need help with one more thing and this is the most important part. If you look at this game (tacit) , when you go to portrait mode, it doesn’t show the game in a portrait mode, but still shows in landscape mode even if you’re in a portrait mode. So if you’re in a portrait mode, you still have to rotate the screen in order to play.

When I did this,

mode: Phaser.Scale.ENVELOP,
autoCenter: Phaser.Scale.CENTER_BOTH,

It shows the game in portrait mode directly which just is bad because it shows the game in a bad shape. So is there a way to show the game in a portrait mode as on that game link I posted?

The way this is handled in that game link is the following code:

Phaser.World.prototype.displayObjectUpdateTransform = function() {
if(!game.scale.correct) {
this.x = game.camera.y + game.width;
this.y = -game.camera.x;
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);
}

but i have no idea how to implement this code in phaser 3. what is even PIXI? or Phaser.World? this code directly doesn’t work in Phaser 3. Any idea?

4

My mistake, Phaser 2 SHOW_ALL is Phaser 3 FIT, not ENVELOP.

5

Using FIT is even worse. The only (at least a little bit help) was ENVELOP. Should i be using any other things aside FIT just to mimic the above website ?

6

You need to take this step by step.

  1. Remove all the scale configuration except width and height. Check the game in portrait and landscape orientations. The whole game should fit within the viewport. Not an exact fit, but without overflowing. If it overflows, stop here and adjust the viewport.

  2. If you want to use FIT or autoCenter, add those. Now the game should fit exactly within the viewport or container. If it doesn’t, stop here and adjust your HTML/CSS.

  3. If you want to fake orientation lock (like Tacit), you can rotate the scene’s main camera “against” the orientation rotation. Start with scalemanager/orientation check.

7

I am still suffering from this. Could you help me correct the code? You can add whatever you want and just upload the updated version. I’d really appreciate it since I can’t still find the solution.

https://github.com/novaknole/phaser This is the github url.

Thank you in advance.

8

https://github.com/novaknole/phaser/blob/ef9ccd8196cae56f66625abf746343ad8d4b37e3/main.js#L48-L73

9

Yeah, Thanks @samme . I think I made it work. Last issue i got remaining is the following link: maybe you can take a look: Typeroots not working on ubuntu