mobile issue (iPhone xS max) about no-place-like HOT 6 OPEN

@medecau @tedbigham @benhalverson Any ideas on how we could create some sort of generalised UI class that could handle watching for viewport resizes and populate those changes throughout the whole game real-time?

I'm sure at some point we'll be hooking into document.addEventListener('resize', () => { ... }); to watch for the viewport changes... But I'm just thinking about the best approach for architecture.

I just don't want us to end up in a situation where we're juggling 9999999 different functions for resizing each little component of the game.

One thought I had was maybe we could do something along the lines of:

1. Resize canvas to viewport
2. Call the create() function of the current scene again (but somehow prevent duplicate sprites, etc. being added?)

from no-place-like.

Confident Phaser already has the necessary infrastructure to handle viewport resizes.

Could it be that we have a Camera like object? I need to dive into the game code and read the docs a little bit.

from no-place-like.

from no-place-like.

It seems like there's three things we care about here:

• Gameplay objects. These need to be scaled but not moved (their world position is not changing).
• UI objects. This need to be moved to stay in the same relative position on the screen (reactive) and probably scaled
• The camera. This might need to be zoomed to maintain a constant physical side for the MC, and will probably be specific one-time code.

I'm thinking that instead of setting x, y, and displaySize when you add stuff to the scene, you could add new fields that give relative values for x, y, and displaySize. Then add a method to GameObject (polyfill ?) that calculates x, y, and displaySize based on the current canvas size. You'd call this method immediately when creating objects (mostly in create() ). You'd also loop over all living game objects and call it every time the game is resized.

You might end up with 2 or 3 types of that method depending whether the object is gameplay, or UI, or whatever high level type you have (i usually only have 2).

from no-place-like.

some docs for the scaling games from Phaser 3
https://github.com/samme/phaser3-faq/wiki#how-do-i-scaleresize-the-game-canvas
A demo link is here. https://labs.phaser.io/100.html?src=src\scalemanager\fit%20running%20game.js

from no-place-like.

Instead of having a listener on resize() which will end up affecting you in the long run if you want to resize objects on the fly might be better to add the event listener on screen.orientation Docs.

As for the resizing @tedbigham solution would work to add on to that you can use CSS to resize the main canvas and build the x and y relative to that.

from no-place-like.