For this chapter, you will need the following:

Unity 2020.3.26f1 or later

So, what exactly do UI and GUI stand for, and what’s the difference? UI stands for user interface and GUI (pronounced “gooey”) stands for graphical user interface. To interface means to interact with, so the UI is the set of devices that let a player interact with a game. The mouse, keyboard, game controller, touch screen, and so on are all part of the UI. The GUI is the subset of the UI represented by graphics. So, onscreen buttons, dropdown menus, and icons are all part of a game’s GUI. As the GUI is a subset of the UI, many people (myself included) tend to just refer to the GUI as the UI. Unity also refers to all the GUI items they provide templates for as the UI.

This book will focus primarily on GUI design, but it will discuss some non-graphical aspects of UI controls, such as accessing data from the mouse, screen tap, keyboard, or controller. This chapter specifically will look at some basic design considerations for different interface types.

When you say “game UI,” most people think of the heads-up display (HUD) that appears in front of all the in-game items. However, there are actually four different types of game interfaces: non-diegetic, diegetic, meta, and spatial.

Fagerholt and Lorentzon first described these four different interface types in the 2009 paper Beyond the HUD: User Interfaces for Increased Player Immersion in FPS Games: Master of Science Thesis. Since then, the terminology has been widely used throughout the field of UI game design. You can find the original publication at http://publications.lib.chalmers.se/records/fulltext/111921.pdf.

The distinction between the four is determined by a cross of the following two dimensions:

• Diegesis: Is it part of the story?
• Spatiality: Is it in the game’s environment?

The following diagram demonstrates the cross relationship between the two questions and how they define the four types of interfaces:

Figure 1.1: Four types of interfaces

A game’s HUD falls into the non-diegetic category. This information exists purely for the player to view and the characters within the game are not aware of its presence. It exists on the fourth wall of the game view and appears to be on the screen in front of everything. The examples of this type of UI are endless, as nearly every game has some non-diegetic UI elements.

Alternatively, a diegetic interface is one that exists within the game world and the characters within the game are aware of its presence. Common examples of this include characters looking at inventory or maps. The most widely referred-to example of diegetic UI is the inventory and health display within Deadspace. The inventory displays on a holographic display window that pops up in front of the playable character, and he interacts with it as you select his weaponry. His health is also indicated by a meter on his back. The inventory of Alone in the Dark (2008) is displayed in a diegetic way as well. While there are some UI elements that only the player can see, the main character views inventory within their jacket pockets and interacts with the items. Uncharted Lost Legacy and Far Cry 2 both use maps that the characters physically hold in the scene and interact with. Fallout 3 and Fallout 4 use a diegetic interface to display the inventory and map on the character’s Pip-Boy, which is permanently attached to their arm. Games also use this type of display when characters are in a vehicle or suit, where various displays appear on the shield, window, or cockpit.

Meta interfaces are interfaces that the characters in the game are aware of, but they are not physically displayed within the scene. Common examples of this are speed displays for racing games. Forza 7 actually uses a combination of meta and diegetic displays for the speedometer. A meta speed indicator is persistently on the lower-right corner of the screen for the player to see. Since the character is constantly aware of how fast they are driving, they would be aware of this speed indicator, therefore making it a meta interface. There is also a diegetic speedometer in the car’s dash that is displayed when playing in first-person view. Another common usage of this type of display is a cell phone that appears on the screen but is implied the playable character is interacting with. Persona 5, Catherine, and Grand Theft Auto 5 all use this interface type for cell phone interactions.

The last type of interface, spatial, exists in the scene, but the characters within the game are not aware of it. Interfaces that exist in the scene but that the characters are not aware of are incredibly common. This is commonly used to let the player know where in the scene interactable items are, what the in-game character is doing, or information about characters and items in the scene. For example, in Legend of Zelda: Breath of the Wild, arrows appear over the heads of enemies, indicating who Link will attack. Link is not actually aware of these arrow icons; they are there for the player to know who he is focusing on. Xenoblade Chronicles 2 uses a spatial interface to indicate where the player can dig by displaying a shovel icon over the diggable areas.

When laying out the UI for your game, I strongly recommend checking other games of the same genre and seeing how they implemented their UI. Play the game and see whether it feels good to you.

If you are unsure of how to lay out your game’s UI, I recommend dividing the game’s screen into a guttered grid, like the one shown in the following diagram, and placing items within the non-guttered areas:

Figure 1.2: A guttered grid

You can use as many grids as you want, but laying out the items with reference to the grid will help ensure that the UI is arranged in a balanced way.

In most cases, the HUD items should remain at the outer edges of the grid. Any UI that displays in the center grids will restrict the player view. So, this area is good for pop-up windows that pause the gameplay.

The device your game will be played on is important when determining the layout. If your game is designed for a mobile device and has a lot of buttons the player will interact with, the buttons are generally best suited for the bottom or side portions of the screen. This is due to the way players hold their phones and the top-center part of the screen is the most difficult area to reach with their thumb. Additionally, reaching for this area will cause them to block the majority of the game view with their hand. We will discuss designing UI for mobile more thoroughly in Chapter 2.

You’ll note that when you play computer games, they tend to have much smaller and more cluttered UI than mobile and console games. This is due to visibility and interaction. Clicking on small objects with a mouse is significantly easier than tapping them with a finger or selecting them with the D-pad. Also, the screen resolution is much bigger, which allows for more space to be taken up by the UI.

When trying to determine the size and relative location of UI items, you can reference Fitts’ Law. Fitts’ Law can mathematically calculate how long it will take a user to navigate to a UI item based on its size and distance away from the user’s starting position. I won’t go over the math here (despite the math teacher in me desperately wanting to), but the lessons that can be garnered from Fitts’ Law are as follows:

• Don’t make interactable UI small and far apart
• Make the most important interactable items the largest and near each other

Next, we’ll look at resolution and aspect ratio.

A game’s resolution is the pixel dimension of the screen on which it plays. For example, a game could run at 1,024x768. This means that the game is 1,024 pixels wide and 768 pixels tall. The aspect ratio of a game is the ratio of the width and height (expressed as width:height). This aspect ratio is determined by dividing the resolution width by the resolution height and then simplifying the fraction. So, for example, if your game has a resolution of 1024x768, the aspect ratio would be as follows:

1024px/768px=4/3

Here, the fraction 4/3 is the aspect ratio 4:3.

The following table provides a list of common aspect ratios and related resolutions:

Figure 1.3: Common aspect ratios and resolutions

When designing your UI, the resolution and aspect ratio will play an important role in how your UI will look. Knowing the resolution and aspect ratio of your target device will be an important first step in designing your UI for two reasons:

• It will determine the layout of your UI
• The way you build the UI within Unity will be determined by how many resolutions and aspect ratios you plan to support

If you build to a single resolution/aspect ratio, the UI will be much easier to build as you won’t have to make sure all the elements maintain their relative position at multiple aspect ratios. However, if you build a game that will run at multiple resolutions/aspect ratios (for example, a mobile project or a web game that scales within a window), you want your UI to scale and move appropriately. You’ll also want to be able to easily change the resolution during testing so that you can make sure the UI is positioned appropriately as its display window morphs.

Even if you will allow your resolution and aspect ratio to vary, you should still decide on a default resolution. This default resolution represents the resolution of your ideal design. This will be the resolution that your initial design and UI layout are based on, so if the resolution or aspect ratio varies, the UI will try to maintain the same design as best it can.

Note

Since all televisions sold today have a 16:9 aspect ratio, any UI you make for a console game should be developed with a 16:9 aspect ratio in mind.

Changing the aspect ratio and resolution of the game view

You can easily switch between different resolutions and aspect ratios in the Game tab. This will allow you to see how your UI scales at the different resolutions and aspect ratios:

1. If you navigate to your Game tab, you will see the words Free Aspect. Clicking on Free Aspect will reveal a menu that shows various aspect ratios and resolutions:
   

   Figure 1.4: Selecting Free Aspect mode from the Game view

   The items displayed in this list are the most common aspect ratios and resolutions for the build target you currently have selected. In the preceding screenshot, my build target was PC, Mac & Linux Standalone, so the most common monitor settings are displayed. If I were to change my build target to iOS, I would see a list of popular iPhone and iPad screen dimensions.

   Free Aspect means that the game’s aspect ratio will scale relative to the window of the Game view. So, by moving the frame around on the Game window, you will change the aspect ratio.

2. You can easily see the effects of Free Aspect on your game’s aspect ratio, by setting your Editor’s layout to one that shows both the Screen and Game tabs open simultaneously. For example, setting Layout to 2 by 3 will do this. Select the Layout dropdown in the top-right corner of the Unity Editor to change the layout.
   

   Figure 1.5: Changing the Editor Layout

   Now the Game and Scene tabs will both be visible on the left-hand side of your screen.

   

   Figure 1.6: Results of the 2 by 3 layout

3. Now, reduce the size of the Game tab so that it is a very small thin rectangle. You will see that the main camera in the Scene view is now also displaying as a very small thin rectangle:

Figure 1.7: Results of resizing the Game view in Free Aspect mode

4. You can select one of the aspect ratios in the dropdown and see that, as you rescale the game window, the blue area representing the actual game will maintain the ratio you selected and black bars will fill in any extra spacing. The camera will also maintain that ratio.
5. Full HD (1920x1080) will attempt to emulate the 1,920x1,080 resolution. It’s pretty likely that the window you have set for the Game tab is not big enough to support 1,920x1,080 pixels; if so, it will be scaled as indicated in the following screenshot:

Figure 1.8: Game view scale

6. If the resolution or aspect ratio you want to use is not available in the resolution dropdown menu, you can add your own item to this menu by selecting the plus sign at the bottom of the dropdown. If you want to create a set resolution item, set Type to Fixed Resolution. If you want to create a set aspect ratio item, set Type to Aspect Ratio.
   

   Figure 1.9: Adding a new resolution or aspect ratio preset

   For example, if you wanted to make a game that was reminiscent of an old Game Boy game, you could add a 160x144 pixels preset:

   

   Figure 1.10: Creating a fixed resolution preset

7. Once you hit OK, the new preset will item will be displayed at the bottom of the list. When you select it, the camera and visible area of the Game tab will maintain the aspect ratio created by a 160x144 resolution:

Figure 1.11: Selecting a custom preset

Building for a single resolution

If you are creating a game that you plan to build on the PC, Mac, & Linux Standalone target platform, you can force the resolution to always be the same. To do so, go to Edit | Project Settings | Player. Your Inspector should now display the following:

Figure 1.12: PC, Mac & Linux Standalone Player resolution settings

You may have more or fewer platforms displayed here; it depends on the modules you have installed with Unity.

To force a specific resolution on a PC, Mac, & Linux Standalone game, deselect Default is Native Resolution. The option to input Default Screen Width and Default Screen Height will be made available to you and you can enter the desired resolution values. Then, when you build your game, it will play at the size you specified.

The following screenshot shows the settings for forcing a PC game to play in a window with Game Boy Color dimensions:

Figure 1.13: Setting a specific PC, Mac, & Linux Standalone Player resolution

You can also force a specific resolution with a WebGL build. There are fewer options to worry about, but the general concept is the same. The following screenshot shows the settings for forcing your game to display at 160x140 in the Player Settings for WebGL:

Figure 1.14: Setting a specific WebGL resolution

In Chapter 2, we will discuss how to set the resolution properties for mobile games that have varying resolutions that you cannot pre-define.

This chapter discussed some basic design principles and terminology related to UI. You should now be able to distinguish between GUI and UI and define the four types of interfaces: diegetic, spatial, meta, and non-diegetic. Additionally, you should understand some basic rules of laying out UI and how to work in different resolutions and aspect ratios.

The next chapter will expand upon these design principles and look at some important considerations for designing UI for mobile games.