Hi! In this video, I will show you Unity's new UI creation
and development tool, the UI Toolkit. For those who are still unfamiliar with
it, especially UI artists in the field, it will be an opportunity to foresee
the future changes in the production. The UI Toolkit is Unity’s 3rd generation UI. Unity says their new UI system is inspired by web technology.
Typically, three languages, HTML, CSS, and Java Script,
are used together to create web pages. The UI Toolkit takes a similar approach. A new language called UXML is responsible
for structure and layout just like HTML. And USS is for style, and the C
Sharp plays the role of Java Script. Let’s experience
how these structural changes affect the UI work process
through making a simple but working UI. A new project is created
and a scene is prepared. The scene contains
a space-themed background made of a Particle System. irst of all, create a UXML file
which will contain the information about a UI’s structure and layout. In
order to draw our UI on top of the scene,
we need some settings in the scene. Create an empty GameObject
and add a UI Document Component. And then connect the UXML file to
the Source Asset field of the Component. There is a warning sign. It says a Panel Settings
Asset is required. Panel Settings defines
how the UI is rendered on the screen. You could think of it
as the Canvas in UGUI. Create a Panel Settings Asset. You can see a lot of properties in the
Inspector from style to sorting order. Leave all the default settings as they are
except one. It’s the Scale Mode right here. It decides how to resize our UI
according to the screen aspect ratio. You may think of the Canvas
Scaler in UGUI. Because this example uses
a fixed resolution, 1920 by 1080, here select Constant Pixel Size. Connect the newly created Panel Settings
Asset to the component. We have finished all the settings
in the scene. Double-click
the UXML file to open the UI Builder. In the Hierarchy pane on the left
is the UXML file I just created. This is where the Hierarchy of the UI
is shown. It’s different from the editor’s
Hierarchy. In the editor,
all the GameObjects in a scene are listed, but only the elements that make up
the UI are listed here. The Library pane at the bottom shows
all the available UI elements. You can see familiar names
like Label, Button, Toggle and so on. After a while, we are going to create a UI
using those elements. The Viewport pane in the center
is where you can see the UI at work. There is one thing to check here,
the theme. Initially, the UI Builder was used
to create Editor extensions. And it’s
still being used for that purpose. So, when creating a Runtime UI,
make sure that the Unity Default Runtime Theme is selected. Otherwise, the UI may look
a little different at runtime. Then, I will match the screen size
and Canvas Size in the Inspector. When creating individual
UI controls such as a pop-up window or HP bar,
you can manually enter the size here. If your UI covers the entire screen like
now, check the Match Game View checkbox. It’ll resize the UI to match the game view
resolution. The canvas background below
allow you to set a backdrop for your UI. You can assign a color, or load an image. If you select the camera menu at the end
and select the main camera of the current scene,
the game view is rendered beneath your UI. Drag a Visual Element
from the Library to the Hierarchy. The Visual Element is the most basic
building block in the UI Toolkit. It plays the role of UGUI’s
GameObject and Image Component together. If you are familiar with HTML,
you might think of ‘Div’ tag. Though a new Visual Element is listed
in the Hierarchy, I can't see it in the Viewport. That's because properties like size
and color don't have any values yet. With the Visual Element selected,
go to the Inline Styles in the Inspector. This is where you set the style of a Visual Element,
such as its size, color, layout and so on. Go to the Background
and change the color to red. It’s still invisible. Because it doesn't have any size
value yet. Go to Size above and enter
300 for Width and Height. A red square appears in the upper left
corner of the Canvas. If the UI is not updated in the Game
View, play the scene briefly. Next, we make this square cover
the entire screen. It’ll be the parent of all the UI elements
we’re going to make. You can change the size
by dragging the handle on the Viewport, or you can directly enter the size
corresponding to the screen resolution. There is a more convenient way. It's using percentages, not pixels. If you enter 100% for the Width and
height, you can create a visual element that completely covers the entire screen
as the its resolution changes. I just got a message that Match Game View
was disabled. It’s because I changed the resolution. In this case, you need to go back to Canvas
and check the Match Game View Box again. Change the color of the Visual Element
to transparent, and add a new Visual Element
as a child below it. Specify size and color. Copy that Visual Element. Change the color,
and make two more copies. When you copy GameObjects in U G U I, they are stacked
overlapping in the same location. However, in UI Toolkit,
Elements are stacked from top to bottom as if using a Vertical Layout Group. The reason lies with the parent. There is a Flex section in the inspector. This is where you manage
the layout of the children. In Web, several other modes are supported
other than Flex, but Unity supports
only Flex mode at the moment. First, let's look at the Flex's
Direction property. The arrow icon on
the button is pointing down. It’s “Column”, so the copied
Elements are stacked vertically. If you change to “Row,”
they are arranged horizontally. And if you change the setting of Align Items or Justify Content, you can also change how they are aligned
in the cross-axis or main axis. Looking at the design of our UI, the screen is largely divided
into two parts, top and bottom. Delete no loner necessary elements
that we made for the test. Set both of the Parent’s Align Items
and Justify Content to Flex Start. Select the first child. Set it to 100% in Width and 50% in height so that it always occupies
the top 50% of the screen. The visual element at the bottom
is also set to 100% Width and 50% height. Change the color of each. The top is transparent,
the bottom is white. It’s time to place an astronaut
and a robot to match our design. Add two Visual Elements
as children of the top one. The astronaut image
is going to be animated in the next video. We’ll find the astronaut with its name. So give it a name
that can be easily recognized. Load the prepared image in Background. Then, enter the Width and height in Size. It's time to place the images. In our design, an astronaut
and a robot stand facing each other. The Flex properties of the parent decides
whether to stack the children vertically or horizontally. In the parent’s Flex, select ‘Row’. Now the two images are facing each other
horizontally instead of vertically. It's time to bring the two images
down to the floor. In Align Items, select ‘Flex-End’. Two images lowered to the floor
are glued to the left side of the screen. This is because the Justify Content
property are left in the default state, ‘Flex-Start’. To make these two images
face each other with proper spacing based on the vertical center line, We need to use ‘Space-Between’
or ‘Space-Around’. Try ‘Space-Between’. The two images got stuck
at either end of the screen. ‘Space-Between’ is an option
to place the children at regular spacing. But now, since there are only two children,
they are stuck to both ends of the screen. Select the ‘Space-Around’ instead. ‘Space-Around’ is an option that allows children to have equal space
both left and right. That's why you can have
equal spacing towards both ends. With the Flex layout, the UI Toolkit can make
UIs that respond to various resolutions. At the bottom, we need a title text, body text,
and a button to open a pop-up. Take two Labels
and one button from Library and attach them as children of the bottom
Visual Element. We will increase the font size
of the label. Increase the size to about 80. Insert the text prepared in advance
into the label. To put text in the Label, enter the desired text in the Text
field of the Inspector. In the same way, select the Label for the body and paste a prepared string
into the Text field. In this case, it would be nice to have
a long text that can have line breaks. After inserting the text,
increase the font size to about 36. For line wrapping, under the Text section
select Normal instead of the No Wrap. Enter 100 in the button's Height. Change the Color to white
and increase the Size to about 45. Change the Color to Blue in Background. As in the design, let’s
make a rounded button. In UGUI, a texture is required
for a Rounded button. However, in the UI Toolkit,
a Rounded button can be made without a texture
as it can be done in the Web design. You only need to specify Radius. Enter 20 in Radius. The button in the design
was a fully rounded one. Enter 50 for the height,
which is half of 100 in height. Let's zoom in. You can see a thin gray line
drawn around the button. This is because Boarder’s
Width has a default value. Change the Width to 0. There is one thing to note here. Even though the button is enlarged, pixels are not broken
like when the Bitmap Image is enlarged. When Unity says that you can create
UI without texture, it’s what they’re talking about. All the necessary
UI elements at the bottom are ready. Select the parent Visual Element
and go to Align’s Justify Content. The layout in the example seems impossible
because the three elements are separated. Add two Visual Elements below the parent. And put the title and body Label into one Visual Element
and the button into another. Then select Space-Between
from Justify Content. In this way,
you can create two large groups. Let's add some empty space
around those groups. For distinction, I will name each label
Title and Paragraph. Proper empty space in your layout has a huge impact
on both readability and visibility. In order to create empty space in
UI Toolkit, you need to understand
the concept of Margin and Padding. Select Paragraph and create a 4 Pixel
thick outline in Border. Go to Margin and Padding. Enter 0 to override the default style’s
values. Enter 20 for Margin. 20 pixels of space around
the Label is created. More precisely, the space is outside
the Border. Margin means the space outside the border. Then, this time,
let's put 20 in Padding as well. Another 20 spaces are added
outside the Label. However, if you look more closely,
this space is inside the red border. Contrary to Margin, Padding
refers to the space inside the border. In the UI Toolkit, Padding is shown in light
green and Margin in light orange color. Let's create proper
spacing between the elements. Revert the tested part. Make top and bottom
paddings of 40 for the Title. Then, make top and bottom paddings of 20
for the Paragraph. Though proper spacing for the top
and bottom is made, it still fills the screen
completely on the left and right. Add padding of 80 on the left and right. Reset the default
Margin and Padding of the button to 0. If you look at the example, buttons
also have appropriate spacing around it. Go to the button’s parent. Enter 100% in Width to fill the screen
horizontally. Enter 240 pixels for Height,
not a percentage. You can put values in pixels
by appending PX after the number. Select ‘Center’ in Justify
Content to center the button. And add a padding of 60 on the left
and right. Finally, we add a padding of 40
top and bottom of the parent. Now it should look pretty
much like the example. This has introduced you to the basics
of working with layouts in the UI Toolkit. Typography
and fonts are an integral part of UI. So let's take a quick
look at how UI Toolkit uses fonts. I prepared a regular font and a bold font. Select
Font Asset Creator from the top menu. Put the prepared font in
Source Font field at the top. Create a Font Atlas without touching any other settings,
then save to a file. Make another font asset for the bold
font in the same way. In Project Pane,
there are two font assets. Select the regular Font Asset. If you look in the Inspector
there is a section called Font Weights. Connect the Bold Font Asset
created earlier to the Bold field. This makes it easy to apply bold style
in UI Builder. Next, go to Generation Settings. Change the Atlas Population Mode
from Static to Dynamic and check Multi Atlas Textures. Click the Apply button. Set the bold font in the same way. To use the desired font in UI Builder,
first select a Label. If you go to Text in the Inspector,
there is a Font Asset field, where you can select the Font Asset
you want. You can change the font
and see that the bold style is applied. However, in UI Toolkit,
there is another way other than applying fonts
to individual labels. Undo the Font change
and go to the topmost Visual Element. And apply the font to the visual element. After doing this, you can see that the title and paragraph’s
font have been changed. The reason for this is that UI
Toolkit has adopted the Cascade style
system used in web development. The font applied at the top
node is applied to all elements below it. Therefore,
if you want to change the font in this UI, you do not have to find and change
each label one by one, just change the font
only in the top visual element. And if you want to use a different font
only for a specific Label, apply the font only to the Label. Apply bold style to the title and button. It is not impossible in the UGUI, but having the cascade style
system seems to be a clear advantage. Run the scene and see what's been made
so far. The UI is drawn well in the game
as it was in the UI Builder. However, there is one regret. There is no response at all
when the button is clicked. Let’s make the button respond
when it’s hovered over or clicked. To do this, we need to understand
the concept of style and style sheet, which are the core features of the UI
Toolkit. Select the button and go to Inspector. I made a button like this
using various properties in Inline Style. However,
there are things I didn't tell you. In the Inspector, some properties
have a white line in front of them. The white line means the property’s
default value is overridden with another value. These overridden properties
and their values are saved along with structure
and layout information in UXML. Open the UXML file in Visual Studio
or any other document-editing program. If you look at the code,
there is a part called ‘UI: button’. This is the very button
we added in UI Builder. After text, there is another button
in quotation marks. This is the string we put in the button’s
label. Height, 100Pixel is the height
assigned to the button. All the overridden properties are here. Styles stored in UXML are called ‘Inline
Styles’. Let’s restore the values stored in Inline
Style back to their default ones. Right click
the property’s name and select Unset. If the unset is done well, the white line
and the related code in UXML will disappear. In fact, if you look at the viewport,
the button’s height has returned to the default value, and the related code
has gone in UXML as well. If you enter 100 again,
a white line will appear, and if you save in this state,
it will be saved as Inline Style. This Inline Style has the advantage
of being quick to apply when needed. However, in order to maintain
the consistency of the UI style, the use of a style sheet is recommended. Let's take a quick look at how to create a style sheet
and how to use it. First, go to the style sheet in the top
left corner of the UI Build. Press
the plus button and select Create New USS. The USS file appears in the Style
Sheet pane. Now it contains nothing. I’m going to move the button’s
Inline Style to the style sheet. Go to the Style
Sheet section in the Inspector. Enter the name of the new style
class in the empty field. Then press the ‘Extract Inlined Styles
to New Class’ button. A new style class is registered
in the Style Sheet’s Class List. All the white lines
in front of the properties disappeared. Instead, the selector of the style
class appeared in the Style Sheet. Let's take a look at the UXML file
and the Use file as well. Previously, there was a long code
about the button’s style. But they are all gone, and only the newly
created style class’s name is there. By this name, the details from the style
sheet are applied to the UI elements. Then,
if you go to the USS file, the things previously in the Inlined Styles
are made into a class. Let me explain why the style sheet is more suitable for systematic management
through a simple example. Let's assume a situation where we need to
create another button just like this one. Add a Button. You have to adjust all related properties,
such as color, margin, padding, font, and so on. However, with the style sheet,
it can be done quite easily. Drag the selector from the Style
Sheet pane and drop it on button. Another button
with the same style is created. If you look at the Class List,
you will see a class called button-blue. You can remove a class from the class list
by clicking the X next to it. When the class was removed,
the button returned to its default shape. Let's apply the class in another way
this time. Write button-blue again
in the empty field. Click the Add Style Class to List button. Styles can be applied to UI elements
just like dragging the selector. This time, let's assume a situation
where we need to change the color of many buttons
throughout the UI. If the buttons share a style,
it can be solved readily. Select the selector in the Style sheet. Change the Background Color. The change is reflected in all the buttons
which share the same style. Because of this reusability
and ease of maintenance, style sheets are a key feature of UI Toolkit. Let’s go a little further here
and use the pseudo class provided by the UI Toolkit
to make a visual feedback when the mouse hovers over a button
or clicks it. You can define the style of a UI element’s
state by using a pseudo class. This is a list of pseudo classes
currently supported by Unity. Here, we will use two types: hover,
which means the mouse pointer is over the button, and active, which indicates
when the button is clicked. To use a pseudo class, add colon
after the existing selector and add a pseudo class name. Select the selector, and create
the appearance of its hover state. I'll increase the scale a bit. Go to Transform
and increase the scale by 10%. Let's check if hover works well. Even if you don't play the scene, you can
check it by using the preview function. It gets bigger each time
the mouse pointer hovers over the button. Then I’ll make an active pseudo class
which make its color a bit brighter when clicked. The active state also works well. The two states have their own style. There is another way to enrich our visual feedback
besides the pseudo class. When a UI element’s
state or style changes, we can interpolate a property’s value. It’s the transition animation. Select the selector
and go to Transition Animation. This is where you decide how to animate
the value of a particular property when its state changes. The Property at the top is where you select a property
to apply transition animation to. I’ll leave it as all. The followings must be familiar
to those who have used DOTween Pro. Duration is the time the transition takes,
Easing is the type of easing function, and Delay is the time to delay
the transition. Leave Duration at 0.5 seconds, Easing at ‘EaseOutElastic’, and Delay at 0
so you can clearly see the animation. Let's check the transition in action. When the pointer moves over the button,
the animation plays as expected. Open the USS file. Two pseudo classes have been added. And at the end of the style class, properties related to transition
animation are also included. Animations are somewhat exaggerated
to show the transition clearly. I’ll adjust the animation a little. Set Duration to 0.1 and select ‘EaseOut’
for easing. Also lower the scale increases to 5%. That's all for this video. In the next video, I will introduce
how to make a bottom sheet using Absolute Positioning and animate
the UI elements through scripting. Thank you for watching.
