TOPICS

Editor Essentials Scripting Graphics & Visual Effects 2D Mobile & Touch XR Physics User Interface For Educators AI & Navigation

Content Type

Pathways

Build skills in Unity with guided learning pathways designed to help anyone interested in pursuing a career in gaming and the Real Time 3D Industry.

View all Pathways

Courses

Explore a topic in-depth through a combination of step-by-step tutorials and projects.

View all Courses

Projects

Create a Unity application, with opportunities to mod and experiment.

View all Projects

Tutorials

Find what you’re looking for with short, bite-sized tutorials.

TOPICS

View Tutorial Content

Steps

UI Components

Tutorial

Beginner

+0 XP

1 Hour15 Mins

(557)

Summary

This tutorial covers User Interface (UI) Components available in Unity, including Canvas, Button, Image, Text, Slider, and more.

Select your Unity version

Last updated: April 13, 2022

4.x

Language

English

1.UI Button

What are UI Buttons made of and how do they function?
This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.
Type caption for embed (optional)

2.UI Image

The UI Image component is the main graphic element of the UI system in Unity, and is used for everything from button and panel backgrounds to slider handles and speedometers!
This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.
Type caption for embed (optional)

3.UI Text

The Text component, used to render text onscreen for various purposes such as labels, buttons, and other information.
This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.
Type caption for embed (optional)

4.UI Events and Event Triggers

In Unity 4.6 we add the new Event System to trigger things in code from your UI. This tutorial is a quick overview of the system and how it works.
This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.
Type caption for embed (optional)

5.UI Slider

UI Sliders can be used for various purposes from settings menus to health bars.
This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.
Type caption for embed (optional)

6.UI Transitions

UI transitions are available to several different UI components, this tutorial explains how they work and what they can do.
This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.
Type caption for embed (optional)

7.UI ScrollRect

The Scroll Rect is a rect that can be scrolled horizontally or vertically to create masked spaces with hidden content in your UI.
This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.
Type caption for embed (optional)

8.UI Scrollbar

Scrollbars can be used to control scroll rects to navigate content in your UIs.
This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.
Type caption for embed (optional)

9.UI Mask

This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.
Type caption for embed (optional)

Masks are used to hide part of a UI Image element. They can be used to define an area to animate images into, or in conjunction with the Scroll Rect component to achieve a scrollable space.

UI Components

General Tutorial Discussion

1. UI Button

2. UI Image

3. UI Text

4. UI Events and Event Triggers

5. UI Slider

6. UI Transitions

7. UI ScrollRect

8. UI Scrollbar

9. UI Mask