Phaser 3 show_all responsive example?

[eddieone]

Hi, I'm looking around for how to handle full page scaling in phaser 3, anyone know of a tutorial or code example?

 

I know with css, the canvas can go 100% However, I haven't found a way to scale in-game objects and have them centered.

 

Thanks

[eddieone]

Ah, I'm too early. have to wait for phaser 3.16 probably ?

[tijuinem]

any update about this -- ?

[Rudrabhoj Bhati]

On 11/18/2018 at 2:50 AM, eddieone said:

Hi, I'm looking around for how to handle full page scaling in phaser 3, anyone know of a tutorial or code example?

 

I know with css, the canvas can go 100% However, I haven't found a way to scale in-game objects and have them centered.

 

Thanks

1. Find the golden ratio (ideal height / window.innerHeight) (Or width, see 2nd point)
2. Resize the game in a way you either use entire height. To do that, divide your ideal height by golden ratio, then divide your ideal width with the golden ratio.  (or do the opposite, if it doesn't fit like that. You can know this if width you get is larger than window.innerWidth)
3. Now, use your golden ratio to reinterpret where you would place your objects. x = 20 in a 1280x720 game becomes 10 in a 640x360 game. You get the golden ratio of 2 (720/360). 20 /2 = 10.
4. You have to use the golden ratio to reinterpret the scale too. In the above example, you would divide whatever scale you have by 2.

Tips:
1. Abstract away the phaser sprite as a component of your new Sprite type.
2. Use getters and setters when you send and receive values for the x and y properties of the sprite component. When you get them, divide it by the golden ratio and then change it in the sprite component. When you are asked for them, multiply from the value in the sprite component and send. Do save the original values privately.
3. Do the same for the scale.
4. Every resize updates everything.
5. Ensure that you don't deal with actual values directly, you have to always deal with assuming x = 20 (not 10), actual values should only work internally.
6. See the example of how to handle different values internally, and sending different values through getters.

 

get x() {
  let gRatio = this._getGoldenRatio();
  return this._sprite.x * gRatio;
}

get y() {
  let gRatio = this._getGoldenRatio();
  return this._sprite.y * gRatio;
}

set x(xVal) {
  let gRatio = this._getGoldenRatio();
  this._sprite.x = xVal / gRatio;
}

set y(yVal) {
  let gRatio = this._getGoldenRatio();
  this._sprite.y = yVal / gRatio;
}

EDIT:
Make sure to store golden ratios internally too, and when the global ratio changes (because of a resize) update everything. By x and y getters you would get ideal values, divide it by new golden ratio. Update values on the sprite component and then update the stored golden ratio.

[eddieone]

Yeah, here the trick.

Update to Phaser 3.16.2+ probably in package.json or the index.html

Update the Phaser config.

config = {
  parent: 'phaser',
  type: Phaser.AUTO,
  autoCenter: 1,
  scaleMode: 3
};

game = new Phaser.Game(config);

Restart server if you need to (remove any scaling plugins).

and then magic scaling thanks to Rich.