How can I support both multiple resolutions and multiple orientations in a game?

Question

I am writing a mobile Android and iOS game. This game is similar to Doodle Jump, but without scrolling. In my game I display a background image that should cover the entire screen. On top of that I draw some 32x32 tile images that make up the platforms. I have three control buttons that are displayed at the bottom of the screen. The score is displayed at the top of the screen.

I am trying to ensure that this game will work on any resolution and can be rotated from landscape to portrait mode and vice versa. The player should be able to change orientations without losing sight of any platforms.

I have found several methods for doing this, however they only seem to work if you lock the orientation or skew the images.

• Scaling the content
  Won't work because it will skew images too much and look unprofessional.

• Scaling the content and keeping the aspect ratio via letterboxing
  The black bars that this introduces can become overwhelming. For example, if I rotate a 960x640 resolution device to portrait, the new resolution will be 640x960. When I tried implementing this, it gave me horrible results.

Portrait:

Landscape:

• Scaling the x,y axis with separate values

  scaling factor (on x-axis) = screen width in pixels / target width in pixels
  scaling factor (on y-axis) = screen height in pixels / target height in pixels
  

  This method changes the bounds of the coordinate system, which I am trying to avoid.

• Using a virtual viewport
  I like this idea, however it still doesn't seem to work with orientation changes. The variation of aspect ratios seems to be to large when you try this approach for landscape and portrait.

Some good links I found on the topic can be found here
http://blog.gemserk.com/2013/01/22/our-solution-to-handle-multiple-screen-sizes-in-android-part-one/
http://v-play.net/doc/vplay-different-screen-sizes/#approaches-for-content-scaling

I have also thought about only stretching the background image and recalculating the new positions for everything else (player and platforms) when the orientation changes. However, I'm not sure how this would affect collision detection and jumping in real-time. I would rather solve this with a different technique if possible.

It seems like most people just lock their game in one orientation. I am trying to avoid this, if possible.

The bottom line is that all of the methods I listed look to only solve the resolution issue if you lock the orientation. Is there a way I can support both orientations?

Answer 1

I think that your constraints of "don't letterbox" and "support the same viewable area in both orientations" are irreconcilable. I think you need to relax one of those constraints somewhat, and then your question devolves into the already-asked-and-answered question of handling multiple resolutions (see the "Related Questions" sidebar for a collection of links).

That said, I think how you relax those constraints is an interesting topic on its own. Obviously you can't relax "support both orientations" much. That's a binary issue: you either support them or you don't.

But the letterboxing and viewable area issues are more flexible. Since your game will be relatively unique in supporting both orientations (most games require one or the other), you should further emphasis this point by incorporating some unique gameplay aspects that leverage the decision of which orientation to use. Some things to consider:

• Fill the black letterbox UI with additional, useful UI in portrait mode. Add score multipliers for finishing the level without this "assistant" UI.
• Show less of the playfield horizontally and more vertically when in portrait, and make some levels taller than they are wide. Add score multipliers for finishing levels in the "awkward" orientation.
• If "taller" levels don't make much sense, zoom in a little during portrait mode (still clipping horizontally a bit) but slow down time to compensate for the shorter visual range.
• Further, perhaps portrait mode "pauses" the action entirely, showing controls for selecting different brushes or whatever for painting on the level. So you switch to portrait, paint your platforms, and switch back to landscape.

And so on. By combining some of the above (or coming up with better tweaks more suited to the overall vision of your game), you can leverage what appeared to initially be a disadvantage into something that highlights the uniqueness of your game.