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.
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
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?