GDC 2004 Feature

Cross-Platform User Interface Development

UI is always the first thing a player will see, and yet it's often the last thing a developer thinks about. Just like the opening credits for a movie, the UI can help to set the mood for the rest of the game, for better or worse. If a game has a UI that looks bland, or is difficult to use, how will that impact a player's first impressions of the rest of the game?

From PC to Console

Whether you're converting a PC game to console or developing an original console title, the PC is always going to be a major part of the production pipeline. This section will illustrate some of the major differences between consoles and computers.

The Display: What You See May Not Be What You Get

Content on the PC can look very different once it's on a console. It's important to understand the differences between the displays used for PCs and consoles.

	- CRT Computer Monitors most commonly used by gamers - Variable Resolution: Typically between 640x480 - 1280x1024 - Progressive (Every line drawn) - 17"-19" in size (typically) - Small Dot Pitch - Consistent screen area(same for all models and brands) Crisp and clear display: meant to be viewed up close
	Computer Game Display

	- CRT Televisions most commonly used by gamers - Fixed Low Resolution: 640x480(typically) - Interlaced (Every other line drawn) - 19"-36" in size (typically) - Large Dot Pitch - Variable screen area (different for every model and brand) - Fuzzy and blurry: meant to be viewed from a distance
	Console Game Displays

The Tech Behind The "Tube"

TVs use electron guns to shoot tight beams of electrons onto the screen from within a vacuum tube. The screen is coated with phosphor, which glows where it gets hit by the beam.

	The Tech Behind The "Tube" - Cathode Ray Tube

What Happens When TVs Behave Badly

Screen Distortion

The pictures below, from the beta test of Jedi Academy (Xbox), show one of the distortions that can occur on televisions.

	Distortions

This is what happens when you have a lot of electrons in one line of resolution and fewer in another. Electrons repel one another because of their like electrical charge. The brighter the color, the more electrons are being fired at the screen, which will mean more electrons repelling one another. The opposite is true of darker colors - fewer electrons repelling one another. Together these lines create screen-distortion.

Suggestions:

Invest in a really cheap TV for distortion testing - the kind you get at a super market, not at Best Buy.

Avoid using bright and dark colors together, especially with thin and/or straight lines.

Screen Legibility

Text is such a common part of our daily lives that we rarely stop to notice just how complex it really is. Just think of how many polygons it would take to render a letter like "Q". There is a reason why you never see "Books On TV" - you would go blind trying to read that much text on a TV. Televisions were never designed for reading text on screen. A console developer must always test for legibility of the UI on a television, especially when concerning fonts.

Concerning Fonts

The larger and thicker the text, the easier it will be to read. It's better to have the player page down than to try and fit it all on one screen with a smaller font size.
If you can read this then you are straining your eyes J

Try to make all your letter characters the same size. That will make it easier to manage long text strings.

Avoid using lowercase letters as they are more difficult to read. Lowercase letters are also more difficult to manage since their sizes vary so much. Instead, try using smaller versions of uppercase letters.

Consider using an outline for the font. It may not look as clean, but it can go a long way towards making your text easier on the eyes.

Here are some good and bad examples for TV viewing:

	Good Bad

	Good Bad
	HUD Readouts in Jedi Academy (Xbox)

Over-Scanning

TVs tend to over-scan their screen area, which means the picture on the screen is a little larger than the display. How much the TV over-scans varies from TV to TV. To compensate, console manufactures (e.g. Sony, Microsoft, Nintendo) require that the edges of the screen not contain any important information. That means things like a heads up display, dialog boxes and UI elements must remain within the confines of a safe region. Sony, Microsoft, and Nintendo have different requirements, but none of them have restrictions on being too cautious. Microsoft requires that an Xbox title have a safe region that uses only the middle 85% of the screen (544x408) making it the most conservative. We have yet to find a TV that this safe region won't compensate for. (Note: The safe region is different for HDTV)

	Jedi Knight: Jedi Academy

The pictures above illustrate the impact the safe region (added outline) had on Jedi Academy. Note the difference it made to the HUD.

A Note on Technical Requirements
Games that do not meet manufacturers' technical requirements (such as conforming to the safe region) are not allowed to be published. Manufacturers do grant exceptions, but generally not for any really significant violations.

From Mouse to Controller

"The keyboard and mouse give you near instant response and near exact control. The controller is a far less precise, far more...well...leisurely input device."
- Warren Spector

With PC games, the player uses a mouse pointer to precisely select the item they want. With a console, however, the player has to use the D-pad or thumbstick to seek the item they want by cycling through the entire menu. It is therefore very important to make the UI menus as efficient as possible. Below are some guidelines to consider:

Make sure that anything you put in the UI is absolutely necessary.

	With a mouse this menu is no problem but a real pain for a console controller. By consolidating non-essential menu items, the player has less to seek through.

Avoid placing menus that require scrolling to see all its contents.

	This design means the player has to evaluate each choice and reject it until, they find the one they want. With all the information visible, the player may see their choice and seek to it.

Absolutely make sure that menu navigation is fast.

And when I say fast, I mean instant. Screen transition animations are one thing, but having to wait a second between each menu item is incredibly frustrating and totally unnecessary.

______________________________________________________

join | contact us | advertise | write | my profile
news | features | companies | jobs | resumes | education | product guide | projects | store



Copyright © 2004 CMP Media LLC

privacy policy | terms of service