Design HOPA & Adventure game scenes: mind the screen ratio

Today, virtually all the Hidden objects & Adventure games are made to fit two types of screens: standard screen and wide screen. This article offers some tips of how to make one set of graphics fit to both screens.

Junxue Li, Blogger

May 14, 2014

4 Min Read

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:

From aesthetic point, the composition should look fine in both screens;
Don’t put game play objects in the 16:10 screen margin (green area), that players with a standard screen won’t see them, and it would become a glitch;
Don’t put hidden objects in this area also;
And don’t put game play objects and hidden objects behind GUI area also.
Don’t let the 4:3 screen border line (the green line) run though important elements, like this:

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.

And don’t let the green line overlap edges of large objects, like the vertical edge of large furniture, buildings; This would weaken the modeling of those things.

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:

Fill solution:

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.

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