Developing for games that run on multiple platforms and devices means handling differences in screen resolutions and aspect ratios. Here are some popular mobile devices and their resolutions.

iPhone 3G/3GS : 480 x 320 iPhone 4G : 960 x 640 HTC Droid Incredible : 480 x 800 HTC Inspire 480 x 800 Motorola Atrix : 540 x 960 iPad : 1024 x 768 Droid 2 : 480 x 854 Note that when you divide these ratios out, the aspect ratios vary between 0.56 and 0.75. There are several ways that a developer can handle these differences, each one with strengths and weaknesses. The way we've handled multiple resolutions in Wolf Toss is by designing for the iPhone retina display resolutions and aspect ratios, relying on Moai to render things in the appropriate size for the device resolution and letterboxing the game display on other platforms that have different aspect ratios. This letterboxing is accomplished by comparing the device’s aspect ratio to the game’s aspect ratio and then finding the difference between the device’s width/height to create a screen offset. When we create our viewport, we use this offset to set the location of the viewport and thus the letterboxing. This is how our code looks throughout our config files:

SCREEN_UNITS_X = 960
SCREEN_UNITS_Y = 640
SCREEN_X_OFFSET = 0
SCREEN_Y_OFFSET = 0

DEVICE_WIDTH, DEVICE_HEIGHT = MOAISim.getDeviceSize ()

local gameAspect = SCREEN_UNITS_Y / SCREEN_UNITS_X
local realAspect = DEVICE_HEIGHT / DEVICE_WIDTH

     if realAspect > gameAspect then
        SCREEN_WIDTH = DEVICE_WIDTH
        SCREEN_HEIGHT = DEVICE_WIDTH * gameAspect
     else
        SCREEN_WIDTH = DEVICE_HEIGHT / gameAspect
        SCREEN_HEIGHT = DEVICE_HEIGHT
     end

     if SCREEN_WIDTH < DEVICE_WIDTH then
        SCREEN_X_OFFSET = ( DEVICE_WIDTH - SCREEN_WIDTH ) * 0.5
     end

     if SCREEN_HEIGHT < DEVICE_HEIGHT then
        SCREEN_Y_OFFSET = ( DEVICE_HEIGHT - SCREEN_HEIGHT ) * 0.5
     end

viewport = MOAIViewport.new ()
viewport:setSize ( SCREEN_X_OFFSET, SCREEN_Y_OFFSET, SCREEN_X_OFFSET + SCREEN_WIDTH, SCREEN_Y_OFFSET + SCREEN_HEIGHT )
viewport:setScale ( SCREEN_UNITS_X, SCREEN_UNITS_Y )

This is our preferred method of adapting the game window to the device screen; with it, we don’t need to manually readjust any of our images or coordinates and the game UI is always optimal for the display. Of course there's a downside in that the game doesn't use all of the available screen space on platforms without the same aspect ratio as the iPhone 4. There's a downside in our single version retina-display-optimized art as well - namely that our game uses more disk and memory than absolutely necessary on lower-resolution devices, and could show somewhat blurry graphics on extremely high resolution devices. There are many other ways that you can develop for multiple resolutions and aspect ratios, each with their own tradeoffs. For instance, you could have multiple resolutions for your art assets and use the most appropriate size for the current device to minimize loss of detail. You could also explicitly handle aspect ratio differences by extending the background or border images and repositioning things in world space to use any extra screen real estate in the way that works best for your game. Unfortunately, there is no single turnkey solution for handling multiple device resolutions and aspect ratios that will work for every game. If you haven't thought about how to handle this in your own game yet, you might want to start with a straightforward solution like the one described here, and plan to revisit the issue later based on whether a more custom method of handling different aspect ratios and/or resolutions would add significantly to your game play experience.