User Interface

The user interface is the part of the game that the user directly interacts with, either by clicking on with a mouse, entering data via the keyboard, or using some other input device. In this section, we’ll look at the specific UI elements we use in our sample game and a couple of others that you might want to consider.

Button

We start with the button because it’s the easiest thing to use for a main menu, and that’s usually the first interaction the player has with a game. Figure 11 shows what our menu will look like.

Figure 11: Main Menu

The menu is simply two buttons and a Text object. Not AAA quality, obviously, but we’re merely looking for something to get the job done and a button provides all the interaction we need without being overly complicated to implement. There’s a bit more behind these two buttons and we’ll look at it shortly, but this is what players see when they first start the game.

The Button class has a lot of configurability to it. You can modify the properties of the displayed text, the image that makes up the button, and more, as Figure 12 shows.

Figure 12: Button Properties

The check box (or toggle, as Unity calls it) at the very top, which will show and hide the button, and the Interactable check box, which will enable and disable allowing the user to click it, are a couple of properties you should get to know.

The other important property is the On Click section, which allows you to attach code to the button in order to allow it to do something. The + and – icons at the bottom of the section allow you to add and remove handlers for your code. Once you add a handler, the section below the Runtime Only drop-down is used to link to the object containing the script that holds the method you want to use for the click event. Normally, you simply drop your scripts in the Canvas holding the button, then you drag the Canvas from the Hierarchy into the control (as shown above). This will populate the drop-down to the right with the methods in the script. Simply select the method to use.

Typically, you’ll have only one handler for the Click event, but you can have as many as you’d like. They’ll be called in the order they are added to the On Click section.

Text

The text control is a simple label that doesn’t have any user interaction. We use this for the title of our main menu scene. You can change the text properties, as with the button in Figure 13.

Figure 13: Text Properties

Panel

There will be times when you’ll want to group UI elements together so that you can easily change them all at once. A panel allows you to do this. We use this to hold the controls that are displayed when the game is over, as shown in Figure 14.

Figure 14: Game Over Panel

The panel is deactivated by default, which hides the buttons and Text object it contains. We’ll also use a panel in the menu to allow the player to select the game’s difficulty.

Input field

When you want to allow the user to enter text for items such as logging in, entering a name for a high score, etc., you’ll want to use an input field, as in Figure 15.

Figure 15: Input Field

This control has many more properties than we’ve seen before. Figure 16 shows the properties specific to the control.

Figure 16: Input Field Properties

There are a number of other controls that you may find useful:

• Toggle (or check box)
• Slider
• Scrollbar
• Drop-down (or combo box)
• Image

If you have any app development experience, getting the hang of these controls shouldn’t be too difficult.

Completing the game UI

Along with the buttons and Text object in the main menu, we also have elements for allowing the player to select the game’s difficulty. These UI elements are in a panel that is hidden until the player starts the game.

If you’ve already added the Play and Quit buttons and text component for the Title to the main menu scene, add a panel and drag the buttons into it. If you haven’t, now add a panel, then add the buttons to it. You should probably name the panel—as you should do with all your components. I’ve called it MainPanel.

Add another panel to the scene and name it DifficultyPanel. Next, add four more buttons. These will be for easy, medium, and difficult difficulty levels along with a cancel button. You may find it easier to work with the elements in this panel by hiding the main panel. Lay out the controls to look something like Figure 17, setting the text of the buttons as you go:

Figure 17: Main Menu Difficulty Controls

When you’re done, you should have something that looks like Figure 18 (when both panels are visible).

Figure 18: Main Menu Scene

The UI in the game scene isn’t much more complicated than the menu. There are three text components and the Game Over panel that we saw earlier. Figure 19 shows the three text components.

Figure 19: Game Scene Text Components

The pause text is set to a width and height of 500 and 60, respectively. The text font size is 24, horizontally centered, and the horizontal overflow is set to Wrap.

The score text is set to an X/Y position of 25/-25 with the anchor presets set to top left. The box in the upper-left portion of the Rect Transform set of properties is the anchor presets. Clicking on anchor presets will expand the box to show all the possibilities. After setting the X and Y values, hold the Shift and Alt keys while clicking on the top-left preset. The text will move into place.

The health text is set to -25/-25 with the anchor preset set to top right. Simply repeat the steps from the score text, clicking on the top-right preset.

The text for the Game Over is set to a Y value of 166, a width of 400, and a height of 75. The Play Again button has a width of 160 and a height of 30 and is set to an X/Y position of -100/25. The Exit button is set to an X/Y position of 100/25.

Coding the UI

The UI elements won’t do anything without adding some code, so let’s add it now.

Add a script to the scripts folder called Menu, drag that script from the Project to the Canvas in the Hierarchy, and open it in your code editor. Add the code from Code Listing 4 to the file.

Code Listing 4: Main Menu Code

If you look at the methods, you’ll notice there is only one for the difficulty buttons. All three buttons will call this method. The index parameter will tell us which one was clicked. So, how do we get the button to pass something to the method? Let’s go over that now.

Select all three of the buttons in the Hierarchy and add a handler to them by clicking + at the bottom-right of the On Click part of the buttons’ properties in the Inspector. Drag the Canvas from the Hierarchy to the control at the bottom-left of the handler, where it should say “None (Object).” Select the DifficultyButton_Click method from the drop-down in the upper-right of the handler for all three buttons. At the bottom-right of the handler section, you will now see a text box in which you specify the parameter value to be passed to the method. Select each button in order—from easy to difficult—and set the values to 0, 1, and 2, respectively.

You can test to ensure that everything is working correctly by putting a breakpoint on the first line of the method and examining the value of the parameter. If you’re using Visual Studio, this will require some extra steps to link it to Unity for debugging. If VS is set up correctly, you should see a button on the toolbar of the IDE with the text “Attach to Unity,” as shown in Figure 20.

Figure 20: Visual Studio IDE Unity Debugging

If you didn’t install Visual Studio Tools for Unity when you installed Unity, you can do so with relative ease. It’s available as a separate install here.

The menu code uses a global variable to hold the selection of the difficulty. Create a new script file called Globals and add the following from Code Listing 5.

Code Listing 5: Difficulty Level Variable

The script for the game scene is in a script file called, unsurprisingly, Game. After creating the script, drag the icon for it in the Scripts folder to an object in the Hierarchy. I used the level sprite rather than the normal Canvas object simply because the level sprite is always displayed. You can use the Canvas if you wish. There’s only a small amount of code in it that is UI related.

Code Listing 6: Game Scene UI Declarations

The first using statement is added automatically when you create the script in the Unity IDE, but you’ll have to add the other two manually in order for the code to change scenes back to the main menu.

The GameOverPanel member should be self-explanatory. Drag the panel from the Hierarchy window into its spot in the Inspector. The next three members are the Text objects for the score, player health, and pause texts. Drag them from the Hierarchy window into their spots in the Inspector.

All that’s left is adding the Update method code and button handlers, as in Code Listing 7.

Code Listing 7: Game Panel Code

If the player presses the Esc key and the game isn’t already paused, we set a switch variable to stop any game-related code from running. The Text object that lets the player know the game is paused is then shown. If the game is already paused, the Esc key exits the game and we load the Menu scene. If the Enter key is pressed while the game is paused, we unpause the game and hide the Pause Text object.

The Exit and Play Again buttons are displayed when the game is over. Clicking the Exit button loads the Menu scene. Clicking the Play Again button hides the Game Over panel and resets the game.

We now have the skeleton for our game. In the next chapter, we’ll add the sprites so that the player will have something to look at.