How to avoid the game being resized by different heights?

[away168]

Hi,

First of all, I'm just moving to Phaser game engine to develop even more quality games.
I've been using my own game engine and I enjoyed it. But to keep up with the dev speed, developing more game engine features to follow up my need uses too much time than developing the game itself.

So I am expecting some of the features may run as my expectation. As I am just jumping to this, I wish for lots of things to learn from you guys.

--

I am currently developing a game that is expecting the game screen height not adjusting the size of the game world.

Please see below picture on what happened when I have a bigger height/resize the height (Below are samples only, please don't calculate the width/height based on the picture).


Normal, expected


Bigger height, the game UI is cut as they become larger. The game is scaled bigger, following the height.


Even bigger height, the game UI is further cut as they become larger. Same case as previous one, the game is scaled even further, following the height.

My expectation is like one of the game I made: http://cake-robot.alectora.com/
Try starting it with your desktop browser with landscape size, and then try playing with only the height. It gives example that it doesn't scale the game size (the sprite size stays the same).

The game is only resized when you play the width of the window.

I used the game.scale SHOW_ALL (and tried other options), playing with aspect ratios, and still I can't make it like the game I mentioned.

 

Any solution to this?

 

Thank you!

[Tom Atom]

Hi, I just wrote tutorial on resizing screens. As there is no more "tutorials" post in pinned topics I am sending the link here:  http://sbcgamesdev.blogspot.cz/2015/04/phaser-tutorial-manage-different-screen.html

 

Read it and I hope it will help you. If you want to preserve aspect, see all GUI and avoid black belts after increasing height you will have to add some background graphics, that will be hidden on devices with lower height and visible only on devices with higher height.

[away168]

Hi Tom, thanks for the reply. Nice tutorial! I saw your use of USER_SCALE and I'm gonna try it again as I didn't really know how it works.

 

The aspect is fine, and the background graphics is well prepared for that flexibility (created based on the the widest height I can get).

Good thing is Phaser has bounds on its camera to the world, so it's not really a problem either on that side when I need camera movement.

 

Thanks again.