Object 1 Object 2

COVID-19 Support:
We’re providing all users three months of complimentary access to Unity Learn Premium, from
March 19 to June 20, 2020.
Projects
Courses
Tutorials
Learn Live
Topics

Premium

Creating Basic UI with uGUI - 2019.3

Tutorial
Beginner
10 Mins
Overview
Details
2
Your progress
Where am I?
1.
Introduction
2.
Creating Text
3.
Importing UI Images
4.
Creating UI Images
Summary
With the introduction of the UI system, new Components have been added that will help create GUI
specific functionality. Some of those elements include text, images, buttons, etc. In this tutorial, you
will learn to create and use basic UI.
Recommended Unity versions
2019.3 and Above
Topics we'll cover
User Interface
Industry
AEC
Automotive
Film
Games
Language
English

Tutorial
Creating Basic UI with uGUI - 2019.3
2
1.Introduction
If you are using Unity 2019.2 or below, click here.

Remaining Time -3:12

1x

Unity’s user interface (UI) system allows you to control elements such as text, images, buttons, and
other user controls that will add functionality for your users. But before any elements can be
created, they must be added to the Canvas.

2.Creating Text
The Text component, which is also known as a Label, has an area for entering display text. It’s
possible to set the font, font style, font size, and whether or not the text has rich-text capability.
There are options to set the alignment of the text, settings for horizontal and vertical overflow —
which control what happens if the text is larger than the width or height of the rectangle — and a
Best Fit option that resizes the text to fit the available space.
1. Select the Canvas in the Hierarchy.
2. Click Create > UI > Text.
3. Change the text in the Text Box.
4. The font can be changed using the Font radio button.
5. Modify the font parameters to change the size, alignment, and color (Figure 01)
Figure 01: UI Text parameters
3.Importing UI Images
Images used for UI components are called Sprites. When initially imported, they’re marked as the
default texture type. Sprites provide extra functionality that’s useful for 2D projects as well as UI.
1. Select the 2D asset in the Project Window.
2. In the Inspector, change Texture Type to Sprite (2D and UI). (Figure 02)
Figure 02: Texture Type set to Sprite (2D and UI)
4.Creating UI Images
An image has a Rect Transform component and an Image component. A Sprite can be applied to the
Image component under the Target Graphic field, and its colour can be set in the Color field. A
Material can also be applied to the Image component. The Image Type field defines how the Sprite
will appear. The options are:
• Simple: Scales the entire Sprite equally.
• Sliced: Uses the 3x3 Sprite division so resizing doesn’t distort corners and only the center
part is stretched.
• Tiled: Similar to Sliced, but tiles (repeats) the center part rather than stretching it. For
Sprites with no borders, the entire Sprite is tiled.
• Filled: Shows the Sprite in the same way as Simple, except it fills in the Sprite from an
origin in a defined direction, method, and amount.
To create a UI image:
1. Select the Canvas in the Hierarchy.
2. Click Create > UI > Image.
3. Change the Source Image to a desired image. (Figure 03)
 Figure 03: UI Image parameters

There are various UI Elements that can be used to create your own User Interfaces. Try creating a
basic UI layout using text and images.
Creating Basic UI with uGUI - 2019.3
General Tutorial Discussion
6
2
1. Introduction
0
0
2. Creating Text
0
0
3. Importing UI Images
0
0
4. Creating UI Images
0
0
Copyright © 2020 Unity Technologies
Legal
Privacy Policy
Cookies
Language:

English
简体中文
한국어
日本語
Русский
Español
Français
Deutsch
Português