Resolution-Independent UI

When working on mobile devices, one of the things that you’ll need to spend a fair bit of time on is the user interface (UI). Unlike when developing projects for a PC, where you only need to care about a single resolution or aspect ratio, there are many different devices out there with different resolutions and aspect ratios when building for mobile. For instance, we have phones that can fit in one of our pockets, and also tablets, which are huge. Not only that but mobile games can also be played horizontally or vertically. Some new phones even allow you to fold them to either increase or decrease the screen size dynamically.

A graphical user interface (GUI) is the way that players interact with games. You’ve actually used a GUI in all of the previous chapters (the Unity Editor) and also when interacting with your operating system. Without a GUI of some sort, the only way you’d be able to interact with a computer is with a command-line...

Technical requirements

This book utilizes Unity 2022.1.0b16 and Unity Hub 3.3.1, but the steps should work with minimal changes in future versions of the editor. If you would like to download the exact version used in this book, and there is a new version out, you can visit Unity’s download archive at https://unity3d.com/get-unity/download/archive. You can also find the system requirements for Unity at https://docs.unity3d.com/2022.1/Documentation/Manual/system-requirements.html in the Unity Editor system requirements section.

You can find the code files present in this chapter on GitHub at https://github.com/PacktPublishing/Unity-2022-Mobile-Game-Development-3rd-Edition/tree/main/Chapter04.

Creating a title screen

Now, before we start adding UI elements to our game, let’s first set up some groundwork and foundational knowledge by creating something that we will need anyway – a title screen:

1. To start, we’ll go ahead and create a new scene for us to work with by going to File | New Scene. There will be a window that pops up asking which template should be used. In this case, we will select Basic (Built-in) and then click on the Create button.

Figure 4.1 – Creating a Basic scene

When dealing with a UI, we will often want to see a visual representation of what will be drawn on the screen, so we will want to make use of 2D mode to have a better representation of what our UI will look like in the final version of the game.

2. To do that, go to the Scene view tab – you’ll see the control bar menu with a 2D button on it underneath that. Click on it, and you should see the camera automatically...

Working with buttons

Unlike our title, for things that we want our players to touch, it’s a good idea to make the buttons the same size in each device, as our fingers are the same size, no matter what device we are using. To show a possible solution for this, we will create a new Canvas using a different scaling technique:

1. Stop the game if it is currently running. We will first rename our current Canvas object Canvas - Scale w/Screen. This way, we can easily tell whether we are using the correct Canvas for this or not.
2. Now that we have that one ready, we can create our new one. Go to the top menu bar and then select GameObject | UI | Canvas. Rename this new Canvas Canvas - Scale Physical. Then, under the Canvas Scaler component, change UI Scale Mode to Constant Physical Size:

Figure 4.20 – Creating a Physical Canvas

Using this method, Unity will attempt to scale the size of this Canvas so that each element has the same physical...

Adding a pause menu

When playing games, especially mobile games, there may come a time when you need to stop playing them at any moment. Having a pause menu will allow our players the convenience of deciding when they want to stop the game in its current state and resume it at a time that is convenient for them. This will also allow us to dive into some additional concepts in using Unity’s UI system, so with that in mind, let’s start building one:

1. Open up the Gameplay scene by going to the Project window, opening the Assets/Scenes folder, and double-clicking on Gameplay, saving the MainMenu level if you didn’t do so already:

Figure 4.30 – Opening the Gameplay scene

Before we worry about how we are going to open our pause menu, let’s go ahead and create the pause menu that we’ll be opening first.

2. The first thing we’ll do is dim our screen when we enter the pause menu. An easy way to do...

Pausing the game

To get the game to pause correctly, we will tweak some scripts we’ve written previously using the following steps:

1. Open the PlayerBehaviour script and add the code highlighted in bold to the FixedUpdate function:

   /// <summary>
   /// FixedUpdate is a prime place to put physics
   /// calculations happening over a period of time.
   /// </summary>
   void FixedUpdate()
   {
       /* If the game is paused, don't do anything */
       if (PauseScreenBehaviour.paused)
       {
           return;
       }
       // Check if we're moving to the side
       var horizontalSpeed = Input.GetAxis("Horizontal")
           * dodgeSpeed;
       // Rest of the FixedUpdate function...

The added code makes it so that if the game is paused, we will not do...

Summary

With that, we’ve got a good foundation to build on when creating UI elements for a mobile game. We first covered how to create a title screen, making use of buttons and Text objects. We then covered how to use panels, buttons, text, and layout groups to make your menus adapt to the size of your elements. We also touched on how layout groups can arrange our objects to fit in a pleasing manner.

In the next chapter, we will continue our exploration of UIs for games by seeing how we can add a pause screen button and an on-screen joystick, and adapting our GUIs for notch devices.