Ease of Building UI Elements in Unity
Unity User Interface or short UI provides a toolkit for developing user interfaces for games and applications. This system allows you to control UI elements such as text, images, buttons and other user controls that will add functionality for the user. Unlike standard GameObjects, UI elements are not directly placed in the scene itself but are displayed on a “2D area” that overlaps the Camera View.
GameObject-based system that uses Components and the Game View to arrange, position and style user interfaces.
Canvas
The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object with a Canvas component on it, and all UI elements must be children of such a Canvas.
The Canvas area is shown as a rectangle in the Scene View. This makes it easy to position UI elements without needing to have the Game View visible at all times. It uses the EventSystem object to help the Messaging System. By default, you will not be able to modify the shape of the canvas area, and it will be a comparatively gigantic rectangle around your scene.
Draw order of UI elements
UI elements in the Canvas are drawn in the same order they appear in the Hierarchy. The first child is drawn first, the second child next, and so on. If two UI elements overlap, the later one will appear on top of the earlier one. The order can also be controlled from scripting.
Render Modes
The Canvas allows us to set a Render Mode, which changes the way the UI is being displayed. There are three types;
- Screen Space - Overlay
This render mode places UI elements on the screen rendered on top of the scene. If the screen is resized or changes resolution, the Canvas will automatically change size to match this. - Screen Space - Camera
Similar to Screen Space - Overlay, but in this render mode the Canvas is placed a given distance in front of a specified Camera. The UI elements are rendered by this camera, affecting the appearance of the UI. - World Space
Mainly useful for a UI element that is meant to be a part of the game world. UI elements will render in front of or behind other objects in the scene based on 3D placement and behave as any other object in the scene.
Placing UI Elements
For layout purposes, every UI element is represented as a rectangle which can be moved, resized and rotated in the Scene View using the Rect Tool.
Rect Transform
Similar to a regular Transform Component it stores its position, rotation and scale, but in addition it also stores a width and height, used to specify the dimensions of the rectangle. They also make use of Pivot and Space, affecting the outcome of the element orientation.
Resizing vs Scaling
When the Rect Tool is used to change the size of an object, both in 2D and 3D Mode, it will change the local scale of the object. However, when it’s used on an object with a Rect Transform on it, it will instead change the width and the height, keeping the local scale unchanged.
Anchors
Anchors are points that other entities can “lock” onto in the Canvas. This means that if a UI element (for example an image) is anchored to the Canvas, resizing the Canvas will ensure that the image is always orientated relative to a specified location on the Canvas.
You can anchor elements in various ways and have presets for it, for more information about anchoring you can click here.
Components
UI Elements are usually made by combining Visual and Interaction able components, additionally it supports Animation Integration, adding Auto Layouts and Rich Text. This being an introduction to the Unity UI System, we’ll examine each individual component as we make progress in this DevDiary. Below you can find a swift overview.
Visual Components
Basic components that help you create GUI specific functionality, the building blocks of the user interface.
- Text
- Image
- Raw Image
- Mask
- Effects
Interaction Components
Interaction components handle user interaction such as mouse or touch events, interaction with a keyboard or controller. These components are not visible on their own and need to be combined with visual components in order to work correctly.
- Common Functionality
Most of the interaction components have some things in common. They are selectables, having shared built-in functionality for visualising transitions between states (normal, highlighted, pressed, disabled) and for navigation to other selectables using the keyboard or a controller. The interaction components have at least one UnityEvent that is invoked when the user interacts with the component. - Button
- Toggle
- Toggle Group
- Slider
- Scrollbar
- Dropdown
- Input Field
- Scroll View (Scroll Rect)
For more information about each individual Component, you can visit the Unity Documentation.
