Make responsive

[geekingreen]

There are several ways we could approach this, this article explains some options we could use: http://www.netexl.com/blog/making-of-a-responsive-game-in-phaser-part-1/

1. This is definitely the easiest where we shrink the view to the size of the screen, preserving the aspect ratio but not the apparent size of our assets.

2. Stretch our view across the entire display and make it look distorted.

3. This is the best, but also most complex option would calculate how much screen real estate is available and render our assets at a size that would appear nearly identical on all screens. That while visually would look best might limit the visibility of players on mobile devices compared to their desktop rivals.

I'd like to implement 3, but I'm worried it might be more complex than I'm thinking, but also that it limits players with less real estate in terms if being able to see what is going on around them. So while I like 3 perhaps 1 is the best for now? Or maybe some sort of combo of the two?

[ignacioxd]

Responsiveness should definitely be a goal.

I think that article applies to Phaser 2, and I'm not sure what the new Scale Manager in Phaser 3 will provide. We could maybe take advantage of the new camera system in Phaser 3 to zoom in and out based on the size of the screen/window.

Another approach would be to initialize the game to the size of the screen. Since the camera is always following the character, parts of the game would be cropped, but the game will still look full screen regardless of window size. The problem with this approach is that HUDs or other UI elements that are anchored to a corner will also be clipped.

Check out the "Scale Manager" section on https://phaser.io/phaser3/devlog/111

[BrianFreemanAtlanta]

Need to have key screens respond to window resize or screen rotation

• title screen
• character selection
• battle area (gamescene)
• single player area
• DOM screens

For smaller screens may need to scale characters more.