Coping with Different Aspect Ratios

Replica Island performs a cheap but very useful magic trick in order to deal with the aspect ratio problem. The game was originally designed for everything to fit on a 480! 320-pixel screen, including all the sprites (e.g., the robot and the doctor), the tiles of the world, and the UI elements (e.g., the buttons at the bottom left and the status info at the top of the screen). When the game is rendered on a Hero, each pixel in the sprite bitmaps maps to exactly one pixel on the screen. On a Nexus One, everything is scaled up while rendering, so 1 pixel of a sprite actually takes up 1.5 pixels on the screen. In other words, a 32! 32-pixel sprite will be 48! 48 pixels big on the screen. This scaling factor can be easily calculated by scaling factor (on x-axis) = screen width in pixels / target width in pixels and scaling factor (on y-axis) = screen height in pixels / target height in pixels

The target width and height equal the screen resolution that the graphical assets were designed for; in Replica Island, that's 480! 320 pixels. For the Nexus One, this means that we have a scaling factor of 1.66 on the x-axis and a scaling factor of 1.5 on the y-axis. But why are the scaling factors on the two axes different?

This is due to the two screen resolutions having different aspect ratios. If we simply stretch a 480! 320-pixel image to an 800! 480-pixel image, the original image will be stretched on the x-axis. For most games, this won't make too big of an impact, so we can simply draw our graphical assets for a specific target resolution and stretch them to the actual screen resolution on the fly while rendering (remember the Bitmap.drawBitmap() method).

For some games, however, you might want to get a little fancier. Figure 5-3 shows Replica Island simply scaled up from 480! 320 to 800! 480 pixels, and overlaid with a faint image of how it actually looks.

Figure 5-3. Replica Island stretched from 480x320 to 800x480 pixels, overlaid with a faint image of how it is actually rendered on a 800x480-pixel display

Replica Island does something very intelligent here: it performs normal stretching on the y-axis with the scaling factor we just calculated (1.5). But instead of using the x-axis scaling factor (1.66), which would make the image look squished, it uses the y-axis scaling factor. This neat little trick allows all objects on the screen keep their aspect ratio. A 32! 32-pixel sprite becomes 48! 48 pixels instead of 53! 48 pixels. However, this also means that our coordinate system is no longer bounded between (0,0) and (479,319). Instead it now goes from (0,0) to (533,319). And this is why we see more of the world of Replica Island on a Nexus One than on an HTC Hero.

Note, however, that using this fancy method might not be appropriate for some games. For example, having the world size depend on the screen aspect ratio could give an unfair advantage to players with wider screens. This would be the case in a game like Starcraft 2. Also, if you want the entire game world to fit onto a single screen (like in Mr. Nom), it would be better to use the simpler, stretching method. With the fancier version, we'd have blank space left over on wider screens.

Was this article helpful?

0 0


  • rosamunda
    How replica island different resolutions?
    8 years ago

Post a comment