Unity UI

Unity UI (User Interface) is used to create a user interface in your game or application.

The workflow for designing Unity UI follows a slightly different path than the one we have been going through so far. For starters, UI elements are not standard GameObjects and can't be used as such. UI elements are designed differently; UI elements are designed differently; a menu button that looks correct in a 4:3 resolution may look stretched or distorted in a 16:9 resolution if not set upright.

In Unity, we cannot place the UI elements directly on the scene. They are always located as children of a special GameObject called the Canvas.

UI Canvas

The UI Canvas is like a drawing sheet for UI elements on the scene, where all UI elements will render. When you create a UI element without an existing canvas will automatically generate one.

UI Canvas acts as the master of all UI elements on the screen. Because of that, all UI elements are required to be the child game object of the canvas game object.

To add the canvas in your scene right, click on the Scene name or Main Camera from the Hierarchy tab and select GameObject -> UI -> Canvas.

Canvas Components

Let's see the canvas components:

Rect Transform

This is the top component of the canvas gameObject. It has many new properties that a standard GameObject's transform does not have.

This is because while a normal GameObject's Transform describes an imaginary point in 3D space, a RectTransform defines an imaginary rectangle. This means we need other properties for defining exactly where the rectangle is, how big it is, and how it is oriented.

Canvas Component

Canvas is the master component that holds a couple of universal options as to how the UI is drawn.

The first property Render Mode defines the method that is used to draw the canvas onto the Game's view.

Canvas Scalar

The canvas scalar component is a set of options that allows you to adjust the scale and appearance of the UI elements in a more definitive way.

Graphics Raycaster

The Graphics Raycaster component deals primarily with raycasting (link to Unity Documentation for Raycasting) the UI elements and ensuring user-initiated events like clicks and drags work correctly.