Wanted to know if anyone had experience with making a game with “Resize” Scale Manager mode.
My goal is to support any phone screen size, and “resize” properly adjusts the game view. However, how do I make sure my UI looks generally the same on most of the screen sizes? I have a relatively simple UI, a general game board that needs to be on the top 1/3 of the screen, centered, and a row of buttons towards the bottom of the screen.
Would I just make every xy coordiante some sort of multiple of game.scale.width or height ?
Is there an easier way to layout the positions that always account for whatever the screen size is?
Is “Resize” even the proper scale manager mode for this? I usually use “Fit”… I have read through the docs but am unclear what would be the best to use in this case.
I normally use FIT because I usually need my canvas to stay with the same aspect radio, but that depends on your needs. If you dont care about the aspect ratio changing, RESIZE will fill all the screen with your game.
Regarding the other questions I always use percents for positioning content on the games and UIs, so yes I’d multiply game.scale.widthor heightby a factor to set positions.
Yeah for sure! I usually use FIT when making web games, but I am trying to do a somewhat “responsive” mobile game to account for a variety of screen sizes. Using percentages of the width / height seems like the best way to go, although it’s a little messy. Thanks!
Dealing with percentages is not that messy if you think all positions and sizes in percentages of either game width or height from the beginning. You can define a function like this:
function relativeX(xPercent) {
return Math.floor(scene.scale.width * xPercent / 100);
}
and use it like this every time you want to set a position
player.x = relativeX(30);
Do the same for y, width and height and you are all set.
That’s a good point! I could definitely build those functions out pretty easily! Building that out from the start seems like the way to go. Thanks again!