# Making a 2D game with responsive resolution

I am making a 2D game, however I wish for it to be resolution agnostic.

My target resolution i.e. where things look as intended is 1600 x 900.

My ideas are:

Make the HUD stay fixed to the sides no matter what resolution, use different size for HUD graphics under a certain resolution and another under a certain large one.

Use large HD PNG sprites/backgrounds which are a power of 2, so they scale nicely. No vectors.

Use the player's native resolution. Scale the game area (not the HUD) to fit (resulting zooming in some and cropping the game area sides if necessary for widescreen, no stretch), but always fill the screen.

Have a min and max resolution limit for small and very large displays where you will just change the resolution(?) or scale up/down to fit.

What I am a bit confused though is what math formula I would use to scale the game area correctly based on the resolution no matter the aspect ratio, fully fit in a square screen and with some clip to the sides for widescreen.

Pseudocode would help as well. :)

• If you want to know which power of 2 sprite to use, log2() is your best friend. – Panda Pajama Dec 13 '12 at 10:55
• Pixel art often scales very badly. An alternative would be to use vector graphics. – Philipp Dec 13 '12 at 11:49
• One thing you would definitely have to do is place all your HUD elements as relative percentages to the screen dimensions (think percentage placement in HTML) instead of absolute pixel locations. – Casey Dec 13 '12 at 12:58
• Are you expecting your game to run on vertical screens as well? – Panda Pajama Feb 10 '13 at 7:17
• I've no clue what you mean with point 4 – o0'. Feb 10 '13 at 10:24

You can scale the game image like follows.

width_scale = screen_width / game_width
height_scale = screen_height / game_height

scale = minimum(width_scale, height_scale)

game_on_screen = scale * game


The following image depicts the scaling effect of the game (left), in a portrait (center) and landscape (right) screen respectively

What I'm doing, as I target various mobile device sizes, is to find a common area (proportion-wise, not pixel-wise) for all of them and include crucial things only inside this minimum area. I then draw all things in the biggest size of all (so that e.g. a more unimportant cave wall may be visible on the iPhone 5, but only a little bit of it on the iPhone 4 or iPad). I then provide 2 sizes of graphics if needed and tell my platform, Corona, to zoom in and crop edges for every device, thus I have never black letterbox borders.

For mobile, my preferred work resolution is thus 2424 x 1536. I then resize most things to 50% for exporting. (iPad Retina would require 100%, which can be saved as eg. @2x, but you may decide not to add too many huge graphics.) Full-size PNG attached below. Imagine e.g. an iPhone 5 would cover the full width but would have it's upper and bottm parts cut off, but would be "safe" inside the white rectangle.