Responsive game size in mobile browser

Phaser 3
21

Hi Qugurun,
I tried your most recent adaptive example using onResize but I cant get the background image to work like it does in the scale example (update()). Seems like Game.onResize is anchored to the virtualWidth and virtualHeight config elements and this causes a problem. I like the onResize way better its much more cleaner and less code for the scenes to implement. Can you update your latest example using a background image so I can get a better idea of what’s happening?

Thank you,
Jon

1 Like
22

https://qugurun.github.io/phaser3/adaptive2/index.html

I hope this helps you. In fact, virtual resolution is needed for internal calculations, and based on the settings, one of the values will always have the same value as set in the virtual resolution settings. Since the window is not proportional, the second value is calculated proportionally, while the first one is always constant. This allows, let’s say, displaying a 640*480 layout on the entire screen with the only condition that one side will have a floating value while the other will be fixed and taken from the virtual value. :nerd_face:

23

Thank you Qugurun!

I was finally able to try you example but I am going crazy trying to get rid of the scroll bars.
I copied pretty much all your code but this keeps happening to my code.

I have packaged and attached my code - can you try it out please?

Let me know what I am missing.

Thanks again,
Jon

mygame.zip (4.5 MB)

24

mygame_adaptive_mobile.zip (2.4 MB)

Thank you for paying attention to my solution. Currently, the previous code has some issues on mobile devices. Although it is responsive, it somehow degrades the quality of the image output. I have provided an example that solves this problem by modifying the GAME.onResize function. The actual logic remains the same, and this is exactly what I am currently using in my projects.

25

In your example, actually all it lacked were CSS styles. That would have solved the scrollbar issue. But, as I mentioned earlier, the problem was much deeper. Unfortunately, I didn’t discover it immediately, but I have fixed everything now, and I hope you’ll like it as much as I do.

* {
    padding: 0;
    margin: 0;
    overflow: hidden;
}
26

I didnt want to add any CSS styles because I was following your example and you have a basic CSS. The new style works as expected but I don’t understand why I needed to add it.

I’ll keep working at my game thank you

Jon