Week 1: Starting To Make UI For A Mobile Game In Unity3D

Progress of the week

As I haven't had much experience with Unity's GameObject-based UI system I decided to take this week to research and develop my knowledge of this area of the Unity Engine.

Unity3D UI

Unity has two GUI systems. One is called Immediate Mode GUI (IMGUI), this is handled by calling OnGUI in scripts which implement the function. IMGUI is mainly used for debugging UI or editor tools.

The other GUI system is the focus of this post is the GameObject-Based UI System. This uses Unity's EventSystem and UIBehaviours to create a GUI in scene. This is better to use in games than IMGUI as many issues you would have to code around is handled by the Canvas Object or other layout objects, such as scaling for different screen sizes.

EventSystem

As mentioned before the UI System uses Unity's EventSystem, which is an improvement on the SendMessage, BroadcastMessage methods currently used to send events between GameObjects. The main difference is that the EventSystem uses interfaces to improve performance. It uses this system to tell GameObjects when the user presses, hovers over, drags the object.

UnityEvent

Some of these objects then execute an event when a certain action is performed. For Example: when a button is pressed an onClick event is called when the user releases the button after it has been pressed. Using the UnityEvent class, the onClick event is opened up in the inspector to allow you to assign methods on objects to be called when the event is called, this can be used to activate sound when the button is pressed.

UIManager & UIScreen

For this project I've split my main UI into Screens, using UIScreen scripts as parents for the individual parts. splitting up my UI like this can make individual parts easy to manage and easy to access from within my project, as all I would need is the screens name and the elements name to find any UI element within my main UI.

Along with this, the UIManager keeps a reference to the main canvas in the scene. This can be assigned through editor, or found if one hasn't been assigned or the old one is destroyed. It differentiates the canvas from others by looking for the first canvas with its RenderMode as ScreenSpaceOverlay. This allows for more canvases to be used throughout a scene but not be referenced as the "main UI".

Directional Pad

As the player in my project needs to be able to walk around an environment I decided to create a directional pad to allow 8-directional movement. My method of doing this is to have a background image which sprite will swap out depending on where the image is pressed to show the user what part is being used.