Advanced Mobile UI

In the last chapter, we were introduced to the Unity UI system and how to build resolution-independent UI elements, which are useful for all game projects that utilize different aspect ratios and resolutions. In this chapter, we will be exploring some mobile-specific aspects of working on a UI, such as requiring on-screen controls and adapting our UI to fit devices with notches.

This chapter will be split into a number of topics. The chapter is a simple step-by-step process from beginning to end. The following is the outline of our tasks:

• Adding a pause screen button
• Implementing an on-screen joystick
• Adapting GUIs for notch devices

Over the course of this chapter, we will take the pause screen that we implemented in the previous chapter and adapt it to work on a mobile device. We will then implement an on-screen joystick as an additional movement option, and lastly, have our UI automatically adapt to fit mobile devices that have notches...

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/Chapter05.

Adding a pause screen button

While many mobile games do support controllers through Bluetooth, most, if not all, of them allow the users to control the game via just the device. Increasingly, many mobile games will include on-screen buttons or analog sticks that players can use to control their avatars. In this section, we will see just how we can implement that if we wish.

To start off, let’s build a pause menu button:

1. Since we are going to be creating multiple types of on-screen controls, let’s create a panel to hold them all. From the Hierarchy view, right-click on the Canvas object and select UI | Panel. Rename the object to On Screen Controls. From the Inspector view, remove or disable the Image component, as we don’t need to see the image.

For this version of our controls, we will be using some 2D sprites to make it easier to tell what the various UI elements are. The sprites are included in the example code for this book if you’d...

Implementing an on-screen joystick

To implement this on-screen joystick, we will utilize two images: a background image and then a joystick image placed on top of it. We will then write code to allow the player to simulate that they are physically moving the joystick. Later, we learn how we can have the simulated joystick actually affect the game properly:

1. Right-click on the On-Screen Controls object and create an image by selecting UI | Image. We will then rename the object to Joystick Background.
2. From the Image component, set Source Image to the analogStickBackground sprite and click on the Set Native Size button.
3. From the Rect Transform component, hold down Alt + Shift and use the Anchor Presets menu to move Joystick Background to the bottom-left option.
4. Next, right-click on the Joystick Background object and create another image by selecting UI | Image. We will then rename the object to Joystick.
5. From the Image component, set Source Image to the analogStick...

Adapting GUIs for notch devices

Since the first edition of this book, there have been many phones that have come out with sensor housings, more commonly known as “notches.” Made popular with the iPhone X, this has grown to be a part of many phones that are out right now. While some people online state that entire-screen displays are the future, iOS devices, Android devices running 9.0 and above, and Unity have added support for notches built into devices, and we can use the Screen.safeArea property in Unity to ensure that all of our content is visible.

To get started, we will first go to the main menu to tweak the menu text:

1. Go to the Project view and open up the MainMenu Scene in the Scenes folder. In the Adding a pause menu section, we saw how we can use the Panel object in order to hold the contents we want to display. We will use this concept to account for the safe area.
2. With the level opened, go to the Hierarchy view and create a child panel for our...

Summary

In this chapter, we integrated the pause menu into our game itself and made it work with everything in our project. We then saw how we could create on-screen controls to give players another way to interact with the game using mobile devices. Finally, we saw how to have our game automatically adapt to fit within the allotted safe areas to handle the notches on phones. We will be exploring the previous concepts more deeply in later chapters, so keep these explanations in mind.

In the next chapter, we will dive into monetization and take a look at just how we can add Unity ads to our project.