Create an in-game inventory UI with UI Toolkit

Introduction

Last Update: Feb 2, 2021

unity UI-Toolkit UI-Elements C#

Project Files

You will need Unity 2020.2.2f1 to follow along. This tutorial assumes knowledge of C# and Unity.

A great UI is one of the most important parts of any game. It needs to be responsive and intuitive while looking awesome. In this tutorial, you’ll learn the basics of Unity’s new UI system, called UI Toolkit, by creating an in-game inventory system where your player can drag and drop items to move them around.

Example

Learning Outcomes

What is great about learning UI Toolkit is you can apply the same skills to create custom UI and extensions for the Unity Editor, runtime debugging tools, and runtime UI for your games. At the end of this tutorial you will be able to:

  • Design UIs by using the UI Builder tool.
  • Design UIs through C# and USS (for styling).
  • Instantiate your UI at runtime.
  • Manipulate VisualElement styles at runtime, including setting a new position.
  • Register and handle events for the UI.

Prerequisites

  1. You need Unity 2020.2.1f1 or later to follow along with this tutorial.
  2. This tutorial assumes you have basic knowledge of Unity and intermediate knowledge of C#.
  3. Download the starter project from the GitHub repository.

Resources

This project uses assets from Game-Icons.net and inspiration from from Wenrexa’s free UI Kit #3 for the design.

  1. Game-Icons.net
  2. Wenrexa: Free UI KIT #3