Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
October 19, 2017
arrowPress Releases

If you enjoy reading this site, you might also want to check out these UBM Tech sites:


Design HOPA & Adventure game scenes: mind the screen ratio

by Junxue Li on 05/14/14 08:10:00 am   Expert Blogs   Featured Blogs

1 comments Share on Twitter    RSS

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.


   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:

  1. From aesthetic point, the composition should look fine in both screens;
  2. 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;
  3. Don’t put hidden objects in this area also;
  4. And don’t put game play objects and hidden objects behind GUI area also.
  5. 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.

  1. 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:

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

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


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:

Follow me on twitter...



Related Jobs

Schell Games
Schell Games — Pittsburgh, Pennsylvania, United States

Amazing Game Producer
Square Enix Co., Ltd.
Square Enix Co., Ltd. — Tokyo, Japan

Experienced Game Developer
Giant Enemy Crab
Giant Enemy Crab — Seattle, Washington, United States

Technical Producer
Bohemia Interactive Simulations
Bohemia Interactive Simulations — Prague, Czech Republic

Product Owner / Team Leader

Loading Comments

loader image