Scaling game on different devices

Phaser 3
1

Hi everybody, I’m new here and I’m working on my first phaser project.
I’m having problems with scaling and resizing the game for different devices: right now i use window.innerHeight and window.innerWidth to scale the game, and it works perfectly in every kind of mobile screen, but i want to use different mesures when playing the game from a desktop device.
Do you have any suggestions on how to size the game specifically for desktop without messing up with the way i do with other devices?
Thanks in advance

2

Scale seems to be a real pain in the a. I spent many hours with testing different scaling scenarios.

In my pixel art game, i ended up with scale.mode RESIZE and manually adjust the size of my GameObjects. Some objects need to scale x, some x/y or only change the position or the height. That is why i have to adjust it manually.
For e.g. widescreen i set a max width of 2560px and center parts of the game. Backgrounds are drawn over the entire surface.

But it depends on your game. If you have something, that could scale to the most resolutions you can use mode FIT and have an easy life.

1 Like
3

It is really a very big issue for everyone, everyone is facing this type of problem, some game distribution websites requires that your game should cover the entire space of the screen on mobile devices.

Using Phaser.Scale.FIT is good enough but leaves black spaces on the top and bottom part of the screen or on the left and the right side of the screen on some mobile devices, if the mobile is long or wide enough.

someone has to find a perfect solution for this issue.

4

One of the possible options, made by me. Youtube: phaser 3 resize\scale test - YouTube Live: https://qugurun.github.io/phaser3/scale/index.html Source: qugurun.github.io/phaser3/scale at main · Qugurun/qugurun.github.io · GitHub

Here you can specify your target resolution depending on the device