1
\$\begingroup\$

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. :)

\$\endgroup\$
5
  • \$\begingroup\$ If you want to know which power of 2 sprite to use, log2() is your best friend. \$\endgroup\$ Dec 13, 2012 at 10:55
  • 5
    \$\begingroup\$ Pixel art often scales very badly. An alternative would be to use vector graphics. \$\endgroup\$
    – Philipp
    Dec 13, 2012 at 11:49
  • 1
    \$\begingroup\$ 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. \$\endgroup\$
    – Casey
    Dec 13, 2012 at 12:58
  • 1
    \$\begingroup\$ Are you expecting your game to run on vertical screens as well? \$\endgroup\$ Feb 10, 2013 at 7:17
  • \$\begingroup\$ I've no clue what you mean with point 4 \$\endgroup\$
    – o0'.
    Feb 10, 2013 at 10:24

2 Answers 2

1
\$\begingroup\$

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

enter image description here

\$\endgroup\$
0
\$\begingroup\$

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.

enter image description here

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .