Creating a UI with the UI Toolkit

In the previous chapter, we discussed how to create user interfaces using uGUI (also known as Canvas), one of the most common Unity UI systems, but as we already mentioned, this is not the only one. While so far, uGUI is the most preferred option, Unity is working on a replacement called UI Toolkit, and even if it doesn’t have feature parity with uGUI yet, we thought it is worth covering it in this book.

The idea of this chapter is to create the same UI we created previously but with UI Toolkit, so you can get an idea of how creating a UI in Unity will look soon.

In this chapter, we will examine the following UI concepts:

• Why learn UI Toolkit?
• Creating a UI with UI Toolkit
• Making a responsive UI with UI Toolkit

By the end of the chapter, you will know how to use UI Toolkit to create basic UIs for our game, redoing the UI we did in the last chapter as a point of reference. So, let’s start by discussing...

Why learn UI Toolkit?

I know the topic of this chapter might sound a little bit confusing; we just learned how to use a whole Unity system to create our UI, and now we are learning another one! Why didn’t we just learn this new one?

Well, the first part of the answer is that UI Toolkit doesn’t have feature parity with uGUI yet, meaning that it doesn’t have all the features necessary to use it in real production environments. Another thing to take into account is that even if UI Toolkit is stable enough, it’s still a relatively new system, and there are still lots of games in development that were created on older Unity versions that don’t support it. This means that in order to land a job in this industry, we need to get a decent amount of exposure to uGUI due to most games being created with this technology. This happens because it’s not safe or practical to update an already-tested and working game with new technologies; such changes...

Creating a UI with UI Toolkit

In this section, we are going to learn how to create UI Documents, an asset that will define the elements our UI has. To do this, we are going to discuss the following concepts:

• Creating UI Documents
• Editing UI Documents
• Creating UI Stylesheets

Let’s start by seeing how we can create our first UI Document.

Creating UI Documents

When creating a UI with uGUI, we need to create GameObjects and attach components like Button, Image, or Text, but with UI Toolkit, we need to create a UI Document instead. UI Document is a special kind of asset that will contain the definition of the elements our UI will have and its hierarchy. We will have a GameObject with a UI Document component (yes, it’s called the same, so pay attention here) that will reference this UI document asset and render its contents. It’s like a mesh asset that contains information about the Mesh, and the MeshRenderer component that will...

Making a responsive UI

In this section, we are going to learn how to make the UI we created previously adapt to different screen sizes. We are going to discuss the following concepts:

• Dynamic positioning and sizing
• Dynamic scaling
• Using relative positions

Let’s start by discussing how we can make the Position and Size of our objects adapt to the screen size.

Dynamic positioning and sizing

So far, we have used the Left and Top position attributes in order to specify the x and y positions of our elements with respect to the top-left corner of the screen, and then Width and Height to define the Size. While essentially that’s all that’s needed to define an object’s position and size, it is not very useful in all cases, especially when we need to adapt to different screen sizes.

For example, if you need to place an object in the top-right corner of the screen, knowing its size is 100x100 pixels and the screen size...

Summary

In this chapter, we had an introduction to the key concepts of UI Toolkit and how to create UI Documents and Stylesheets. Regarding UI Documents, we learned how to create different elements like images, text, and buttons and how to position and size them using different methods, like absolute and relative positioning, and pixel or percentual units. Also, we saw how to make the UI adapt to different sizes using different combinations of Position attributes. Finally, we learned how to use USS Stylesheets to share styles between different elements to easily manage our whole UI skinning.

Essentially, we learned again how to make UIs with a different system. Again, please note that this system is still in the experimental phase and is not recommended for real production projects. We used all these concepts to recreate the same UI created in Chapter 15, User Interface Design.

In the next chapter, we are going to see how to add animations to our game to make our character...