RSS Link

Tweet

Carl S. Blog

Send Private Message Posted December 28, 2009 2:16 pm

In Part I, I discussed several strategies for creating full-screen art for casual games on netbooks. Of those strategies, here at Robot Super Brain our favorite is to create custom full-screen art at a fixed resolution, then scale that uniformly to fill the screen, cropping any pixels that extend off-screen. In Part II of this post, I'd like to share some examples.

We're targeting Windows Netbooks, so the set of resolutions we need to support is 1024x576, 1024x600, and 1600x768. If your app is going to run on MID's, you'll also need to support 800x480.

Note that each of these resolutions has a different aspect ratio. When you scale up uniformly to fill the screen, these varying aspect ratios will cause portions of the original art to be cropped. For example, here is some full-screen background art from an upcoming Robot Super Brain netbook game, created at 1024x600:

The critical gameplay area is the interior paper; the tools and book provide atmosphere but can be cropped. In the next image the black bars represent the area that will be off-screen when this source art is rendered on a 1024x576 screen:

Note that these are not visible letterboxes, but rather portions of the source art that will extend off the top and bottom of the screen. Here is the crop area when the original background is scaled up to fill a 1600x768 screen:

These images demonstrate how the background is scaled and cropped to fit various screen resolutions. The second half of this approach is to design your user interface elements to "float" over your background art. For example, in the following screenshots you will see a fossil piece container, a back button, and a sound toggle button. Notice that each element is aligned over a slightly different portion of the background art at each resolution. The back button is positioned relative to the lower left corner of the screen, and the sound button is positioned relative to the lower right.

Here is what the background with interface elements will look like at 1024x600:

And here it is at 1024x576:

And finally here it is at 1600x768:

Hopefully these examples will help illustrate our approach to creating custom full-screen art that can be targeted at multiple resolutions.