Game Development Reference
In-Depth Information
6.3.7 Layout
The display of the player interface on the screen should follow graphic design
principles. This assists the player develop a spatial sense of the layout, which
enhances his performance. Things to consider in your design include the
presentation of key information in prominent locations, using sizing and
contrast to distinguish elements, grouping related actions and data, and
using fixed locations for certain types of information and actions. In addition,
the layout should be well organized. Graphic designers use a grid system
of evenly spaced horizontal and vertical lines to group and align related
This key principle is known as CRAP (contrast, repetition, alignment, and
proximity). Contrast makes some elements more dominant than others and
more important items easier to find on the screen. Repetition refers to the
repeated use of design elements, such as using the same font, sizing, and
colors. This creates unity and consistencies, making the interface appear
whole. Alignment connects the elements and creates a visual flow for the
eye to follow. Proximity refers to grouping similar and related elements
of the interface in the same place on the screen.
Furthermore, to add with alignment, the screen is ruled into equal-sized parts
with smaller gutters dividing each area. How many sections you need on the
screen is entirely up to you. If the smallest area holds your smallest screen
object, then larger objects can span multiple areas.
An example screen layout illustrating the CRAP rule with ruled sections
is shown in Figure 6.6 . Contrast is achieved through the use of a white
and gray color scheme. It is sometimes difficult in FPS environments
to display information on the screen without a background color as
the text can get lost in the 3D scene behind it. In this case, a partially
transparent gray is used to define the edge of the HUD and also give
more definition to the white text. Never use black text on a HUD
without a background, as it is almost impossible to see. Buttons and
textboxes also have contrast between the fill color and the outline. In
addition, contrast is used in the weapon selection area to distinguish
between the current weapon and other weapon choices. Repetition
occurs in the reuse of the same font for all the text, the same color for
items, the shape of items, and the graphical bar used to represent the
health and armor strength. Alignment is achieved through the use of
ruled lines. These lines make it clear where things are placed on the
screen, taking away any guesswork. The text and input boxes on the
Options window are also aligned. Textboxes should all be the same
size and text labels left aligned to meet the box. In other designs you
may find the text label above the box. Finally, proximity is achieved by
grouping related elements. Information important to the player, that
being their health and armor strength, is positioned together with
weapon selection nearby.
Search Nedrilad ::

Custom Search