Before we go ahead with creating our UI, we need to make a few assumptions here. Remember that planning is very important. From now on, we will be using the term view a lot. In simple words, a view is a portion of the application UI that is visible to the user at a particular time:
- Our simple game will contain three simple views: the Menu view, the InGame view, and the GameOver view
- Each view will contain all UI elements, such as buttons, labels, and so on
- Only one view can be displayed to the user at a time
Unity draws UI elements in a way similar to its rendering of 3D meshes. What I mean by this is that all rendering happens in the 3D space. To draw UI elements, Unity requires a game object with the Canvas component on it. All this new information might be a bit confusing to you, so it's best if we create a view as an example. We will start with the Menu view.
In our Menu view, we will have only a Play button. The Menu view is the first view that the user will see after they launch our game. Follow these steps:
- Create a new game object and call it
UI. It will be a root of our UI, which means that all views and UI elements will be children of this view. This will help keep the UI and the actual game separate. - Create a new child game object and call it
MenuCanvas. - Add a Canvas component to the
MenuCanvasgame object with the following settings:
The Canvas component represents the abstract space in which the UI is laid out and rendered. All UI elements must be children of a
GameObjectthat has a Canvas component attached.The reason we chose the Screen Space - Overlay in the Render Mode is that it does not require any additional camera. As we are trying to keep our first Unity game as simple as possible, this is an obvious choice.
- Add the Canvas Scaler component to the
MenuCanvasgame object with these settings:
The Canvas Scaler component is used to control the overall scale and pixel density of UI elements in the Canvas. This scaling affects everything on the Canvas, including font sizes and image borders.
Yet again, to keep things simple, we will pick the easiest scaling mode—Scale With Screen Size.
When creating a UI for your game, you need to decide what screen resolutions and aspect ratio you want to support. Most modern games support multiple screen resolutions in order to support a variety of games, monitors, and touchscreen devices.
We are focusing mainly on coding in this book. Creating dynamic UI layouts to fit a number of screen resolutions is possibly a subject for another book. In this case, we will stick to the easiest solution and choose the static canvas resolution as 960 pixels by 600 pixels.
All interactions with the user interface occur through the Event System. Actions such as button clicks, drag-and-drop UI elements, and swipe gestures require the Event System to be present in the Unity scene all the time.
The Event System is a way of sending events to objects in the application based on the input, whether a keyboard, mouse, touch, or custom input.
To add the Event system to our game, we simply navigate to GameObject | UI | Event System, as shown here:
When you add an Event System component to a GameObject, you will notice that it does not have much functionality exposed. This is because the Event System itself is designed as a manager and facilitator of communication between Event System modules.
We are missing one more component in the view. Add the Graphic Raycaster component to the Menu Canvas game object. The Raycaster looks at all graphics on the canvas and determines whether any of them have been hit.
Great! Our Menu Canvas contains all the elements necessary to render and allow user interaction with UI elements.
Our MenuCanvas game object should look like this:
