Sign in to follow this  
eddieone

Phaser 3 show_all responsive example?

Recommended Posts

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.