Game Development Reference
In-Depth Information
Main Menu and Aspect Ratio
The relative
anchoring system
created in the previous section works insofar as it will
position
graphical elements on the screen consistently across multiple resolutions, as we'll see shortly. The
system could, of course, be taken even further to support hierarchical anchoring with multiple local
spaces and embedded offsets. But this kind of elaboration and additional complexity will not be
required for CMOD. Here, the system will be used to position a menu and its buttons on the screen.
The menu is shown in Figure
8-4
.
When considering the main menu graphic, as well as any other GUI graphic, a new problem presents
itself. Even though the menu will always be positioned at screen center (0.5, 0.5), there are still
questions: What should the
size
and the
dimensions
of the menu be? Should we simply render the
menu at its default size (559×549 pixels) for every resolution? Or should we
scale
the graphic up or
down to always encompass the same screen
proportions
for every resolution (a relative size)? If we
accept the first solution (an absolute size), then (like absolute positioning) we place concrete limits
on the number of resolutions we can practically support: specifically, we cannot support resolutions
smaller than the menu graphic, otherwise the menu will not fit entirely on the screen (the edges will
be cut off). Additionally, if the screen resolution is much larger than expected, the menu may appear
much smaller than desired at the screen's center. Now, the second option is to use
scaling
. This is
one route we could take to support every possible resolution, but it entails complications due to
aspect ratio. What are those complications? How do we overcome them? And what is
aspect ratio
anyway?
Aspect ratio is the
relationship
between the screen width and the screen height in pixels. Aspect
ratio can be calculated using the formula
AR = Screen Width/Screen Height
. This decimal can
resolve to a simplified ratio. The most common ratios are: 4:3, 5:4, 16:10, and 16:9 (widescreen).
The problem with aspect ratio regarding image scaling is that an image (like the menu) made at
one resolution and aspect ratio cannot be up- or downscaled to a different size and aspect ratio
without distortion. Specifically, an image scaled across multiple aspect ratios will scale nonuniformly:
it'll either appear more squashed or more expanded in one dimension only. This can lead to ugly
graphics. So, the solution that developers have traditionally sought has been to either create multiple
versions of GUI graphics at different aspect ratios, switching between the versions at runtime to
accommodate the active resolution,
or
to scale the graphics uniformly (in both dimensions) within
certain constraints to accommodate the active resolution to an extent, but avoiding graphical
distortions at the same time.
For CMOD, however, we'll take the former approach of avoiding the scaling issue altogether. We'll
use a fixed size for the menu, setting the minimum resolution at 1024×768, meaning that the menu
will show at this resolution and higher. With this solution in mind, we can create the following new
GUI class for rendering the menu graphic (see Listing 8-3).
