Game Development Reference
In-Depth Information
Another important design technique for UI on multiple resolutions is to “dock” them to
corners of the screen (
Figure 3-6
). Here are two examples of how the UI realigns itself based
on the screen size.
Figure 3-6. Here is the UI and camera clipping at 800×480 pixels for the Web version of the game.
As you can see in
Figure 3-7
, the UI elements on the left-hand side always move to the left
corner of the screen and the right-hand side elements move to the right. The pause button,
which is a critical UI element, is centered inside of the empty space between each side's UI.
Another technique you can use on Windows 8 is to completely hide the pause button and
non-critical UI and expose them through the commands bar, which you access by swiping up
from the bottom of the screen or right clicking. I tend to avoid doing this because, while
modern UI standards dictate all non-essential UI should be hidden from view, games get a lot
more leeway during approval. In a game, you want instant access to pausing the game, so
make it easy for the player to hit it. If you rely on a gesture, you could make the player do
something in the game that would potentially cause a problem.
