HCI (UI User Interface / UX User eXperience)

Adding a Canvas and UI to a scene

You don’t have access to this lesson
Please register or sign in to access the course content.

You can have multiple Canvas’ on a scene.

Open a scene.

Go to GameObject > UI > Canvas

This adds the Canvas and the EventSystem objects

Select EventSystem

In the Standalone Input Module component click the button Replace with InputSystemUIInputModule.

This enables the UI to work with the Input System

Often you want the Canvas to scale with the screen resolution.

Select the Canvas object.

Change the Canvas Scales component’s render mode to Scale with Screen Size

Also change the target resolution. 1920 x 1080 is reasonable.

Add UI objects to the Canvas.

Most are self explanatory. Text boxes to type in are Input Field objects.

By default objects are placed in the middle of the canvas.

Click on the Rect Transform component to adjust where the object origin will be.

Note that you also want to change the Pos X and Pos Y values as well as the Pivot.

A pivot value of 0.5 will place the origin / rotation point of the canvas object 50% of the way through the object.

You can use Panels to group objects.

To line up objects in a grid on these add the Grid Group Layout

You can now set the properties for the grid here.

Add in buttons to test this.