Unity new UI and Events
Published 2 years ago
From Unity 4.6 the new UI system have been rivisited to give the developer a new way to define UI elements, animations and events. Before this update there was only one way to design the UI: using the OnGUI event inside a custom script.
For exaple if you want to create a Texture on screen:
using UnityEngine; using System.Collections; public class ExampleClass : MonoBehaviour { public Texture2D textureToDisplay; void OnGUI() { GUI.Label(new Rect(10, 40, textureToDisplay.width, textureToDisplay.height), textureToDisplay); } }
That was so frustrating for a UI designer, or for any developer, for different reasons:
  • No UI Preview inside the editor
  • Needs to Run to see results, no prototyping permitted
  • Needs more code to works, you need to define inside the OnGui the layout and behaviours
  • UI Customization is really hard, the developer needs to define a GUISkin to customize the UI
Now with the new UI the developer can design and set the UI directly in Editing mode, so this helps a lot while designing and testing.
The developer doesn't need to create a GUISkin because it ca use custom images or color while editing the UI.
The new Unity UI gives the developer another helps, with events and animations management.
Before the new UI it was really hard to define whenever a player trigger a button or change a Text, but with the new Unity UI this process is simplified.
Each UI element (button, text, ...) has a custom built it events, wich can call another Class function passing the value or just nothing, only to trigger an action.
Now you hae 2 different ways to define a custom action to run on an Event triggered on an UI Element, for example a button click.

Method 1. Using the Inspector in Editor mode

As you can see in the image you can define an OnClick method under the Button property of a button.
You need to add 2 elements to this property to make it works:
  1. An object with the script to call
  2. The script and function to call, you can call static or dynamic function. The dynamic functions receive a parameter as input, for example a Text element will call a function wich accept a string parameter as input, and the input is the Text field value. Instead the static function didn't receive any parameter as input, for example a button clicked needs to trigger an action, but it hasn't any value to store.

Method 2. Defining an onClick function inside a custom script.

You can define a custom onClick event on a custom script, accessing to the button Button script:
using UnityEngine; using UnityEngine.UI; using System.Collections; public class ClickExample : MonoBehaviour { public Button yourButton; void Start() { Button btn = yourButton.GetComponent<Button>(); btn.onClick.AddListener(TaskOnClick); } void TaskOnClick() { Debug.Log("You have clicked the button!"); } }


The two methods explained are equals, there is no difference on performance or other creepy things.
I think the only difference between the two methods is the way you want to work.
The method 1 is used when you want to delegate all the UI behaviours on a single object, for example if you have this hierarchy:
  • PlayerUI
  • inGameUI
  • inPauseUI
  • inSettingsUI
and you want to let the PlayerUI be the UI controller it's a good practice to group all the UI events and methods under a script attached to the PlayerUI, and than the input/submit elements will call PlayerUI custom script functions. So in the PlayerUI scripts you can manage shared variables (e.g. the player name) and every UI element can access to it.
The second method is useful when you want to manage an element as a Custom reusable element, with different properties but not behaviour.
For example a Calculator has N buttons, and each button has a value and an action to trigger, so you can create a custom script (e.g. CalculatorButtonKey) wich define an onClick method to call and a value to use, instead of define a function for each Button inside Calculator and assign each Button to it.
Unity Developer - iOS Developer - Programmer