Design HOPA & Adventure game scenes: mind the screen ratio

   Today, virtually all the HOPA & Adventure games are made to fit two types of screens: standard screen and wide screen. Standard screen refers to the old monitors of a 4:3 ratio, while the popular wide screen ratio is 16:9 or 16:10, for new monitors and phones.

   In designing scenes for a new game, the artists should make the pictures work for both types of screens; And another situation is that we need to port an old game to new platforms. The old game supports only 4:3 display, and we want to make the pictures work for wide screens also.

   Here I have a few tips to make things work for the two situations.

In designing for a new game:

  The first thing the artist should have is a scene template like this:

The area of both standard & wide screen is circled, and the area of GUI;

There’re a few things the artists should pay attention to:

That in 4:3 screen, this would make the half of those things strangely cut away. You should include those things whole in the 4:3 area.

Below is a fine sample of design:

And you can use this solution too:

Design the pictures as wide screen pictures, then add black bars on the top and bottom, to make them 4:3 pictures. Some people may feel this is not a good solution. Anyway, for game development, this solution takes the minimum resources.

Port an old game to wide screen:                

   Essentially, you should make every 4:3 pictures of the game into wide pictures, 16:10 or 16:9.   There are a few solutions to make standard pictures wide:

Just ask the 2D artist to paint to fill the two sides of the picture. Again, don’t put important things in the extension area.

If the picture is quite detailed, paint the margin would be no small amount of work. And consider the accumulative amount of works for the whole game! So we come to another solution.

First enlarge the old picture to fill the whole width of the wide screen template, then cut away the bottom part.

After doing this, if the picture becomes blur, you would need some retouch.

Usually there’s no interactive objects at the bottom, and for most scenes this area is the ground, so it’s safe to cut this part away.

And please note, most often there is only one set of wide screen picture assets in the game, not two sets: one for standard screen and one for wide screen. That in standard screen mode, the engine would simply auto crop both side of the wide pictures to get to 4:3. So if you use this cut solution, see the above picture, in standard screen mode, the game actually uses the center-top part of the picture, not the whole of it(Although the uncropped picture itself is 4:3).

This create problems, for the graphic designers of the old game wouldn’t possibly know you would crop the pictures. That some important interactive objects would be cut away in the auto crop process. So you need to recompose the picture, move important things to the center.

And please note, you probably need both solutions for your game. For each particular scene, think it carefully which solution works best.

More of my articles about games & art production:

http://gamasutra.com/blogs/JunxueLi/940564/

Follow me on twitter...