Modern Unity UI with UI Toolkit

A Complete Overview Of Unity’s New UI System UI Toolkit

Download Links and Watch in Description

Loading

Welcome to our comprehensive course on Unity’s UI Toolkit! Whether you’re creating games or apps, UI design is a critical part of any project, and UI Toolkit provides a powerful set of tools for creating complex UI systems.

Throughout this course, you’ll dive deep into the UI Toolkit, learning the ins and outs of its various components and how to use them to create amazing UI designs. We use a combination of theory and practice, creating a variety of UI components and examples, as well as working on a course project that puts your skills to the test.

Here are some of the topics we’ll cover:

  • Understanding UXML and USS Files: Learn the building blocks of UI Toolkit, including the visual tree, and how to separate structure, styling, and behavior.
  • Layouts with FLEXBOX: Explore the Flexbox system used in web technologies and how it’s used in UI Toolkit.
  • Templates: Discover how to reuse portions of your layout with templates.
  • Events and Event Propagation: Learn how events work in UI Toolkit and how to take advantage of features like event propagation.
  • UQuery: Connect your scripts and your UI and manipulate UI elements efficiently with UQuery.
  • Data Binding: Learn how to manually bind data to your components for runtime use.
  • Custom Components: Create your own controls and reusable UI elements for your projects.
  • Manipulators: Group the behavior of particular elements into manipulators for a clean, organized design.

And much more!

While this course doesn’t explicitly cover Editor Scripting, most of the content applies to it as well. By the end of this course, you’ll have a strong foundation in UI Toolkit and the skills you need to create amazing UI designs for your Unity projects.

Watch online or Download for Free
01 – Introduction

01 – What Is UI Toolkit
02 – What Is This Course About
03 – What Is This Course NOT About
04 – Who Is This Course For
05 – Prerequisites
06 – Comparison Of Unitys UI Systems
07 – Lets Get Started

02 – Introduction Part 2 From Theory To Practise

10 – Detailed Course Overview Sections 27
11 – Section Overview
12 – UI Toolkit Workflow
13 – Visual Trees
14 – Advantages Of Visual Trees
15 – From Visual Trees To UXML
16 – More UXML
17 – Understanding Stylesheets
18 – USS Files In UI Builder
19 – More USS
20 – Simple Selectors
21 – Selector Precedence
22 – Complex Selectors Part 1
23 – Complex Selectors Part 2
24 – Pseudo Selectors
25 – Bringing It All Together

03 – Layout and Flexbox

26 – Section Overview
27 – Terminology
28 – Containers And Items
29 – Understanding The MainAxis Concept
30 – Understanding Flex Direction
31 – Flex Direction In UI Builder
32 – The Flexbox Rabbit Hole
33 – Flex Direction Example 1
34 – Flex Direction Example 2
35 – Justify Content
36 – Align Items
37 – AlignProperties Example
38 – Flex Basis
39 – Definition For Flex Basis
40 – Pixel Percentage or Auto
41 – Competition For Space
42 – Shrink & Grow
43 – Shrink & Grow Units
44 – Understanding Flex Basis
45 – Flexbox Wrapup
46 – Simple Flexbox Pattern Example
47 – Simple Flexbox Pattern Example 2
48 – Simple Flexbox Pattern Example 3
49 – Positioning

04 – Introducing The Course Project

50 – Introducing The Course Project
51 – Optional Course Project Setup Part 1
52 – Optional Course Project Setup Part 2

05 – BuildIn Controls

53 – Section Overview
54 – Buttons
55 – Add Basic Functionality To Controls
56 – Working With Text
57 – Themes
58 – Complex Controls Slider
59 – UI Toolkit Debugger
60 – Styling Controls
61 – Using The Slider
62 – Project Practice Simple Controls Part 1
63 – Project Practice Simple Controls Part 2
64 – Optional Using The Documentation

06 – Templates

65 – Section Overview
66 – Working With Visual Elements In Scripts
67 – Templates in UI Builder
68 – Templates In Scripts
69 – Loading Assets In Scripts
70 – Project Practice Templates

07 – Finding Elements With UQuery

71 – Section Overview
72 – Why are there 3 different ways
73 – Setup Explained
74 – UQueryBuilder
75 – How To Find Single Elements With Q
76 – How To Find Any Element With Query
77 – Swiss Army Knife For Queries
78 – Project Practice Queries

08 – Events in UI Toolkit

79 – Detailed Course Overview Sections 814
80 – Section Overview
81 – Events Overview
82 – Event Data
83 – Understanding Event Propagation
84 – Event Propagation In Code Part 1
85 – Event Propagation In Code Part 2
86 – Event Example 1
87 – Event Example 2

09 – Data Binding

88 – Section Overview
89 – Data Binding Intro
90 – Simple UI Binding
91 – Adding A Data Class
92 – System Events and C Properties
93 – Creating A Card Component
94 – Simulating Data
95 – Using VisualElementuserdata
96 – Dynamically Adding Elements

10 – Data Binding With Special Controls

097 – Section Overview
098 – Simple Dropdown
099 – Project Beyond BuildIn Controls
100 – Project DropdownController
101 – Project Displaying The Fractions
102 – ListView
103 – Project List Preparation
104 – Project ListController
105 – Project Displaying Selected Items
106 – Small Correction On The Last Video

11 – Custom Controls

107 – Section Overview
108 – Our First Custom Control
109 – Add Styling To A Custom Control
110 – Custom PopupWindow Part 1
111 – Custom PopupWindow Part 2
112 – Adding Custom Attributes
113 – Adding Functionality To A Custom Control
114 – Project Adding A Custom Star Control Part 1
115 – Project Adding A Custom Star Control Part 2

12 – Manipulators

116 – Section Overview
117 – Motivation
118 – Creating Our First Manipulator
119 – Understanding MotionBehavior Like Dragging
120 – Manipulator For Dragging
121 – Manipulator For Resizing
122 – Project Adding A Tooltip Manipulator Part 1
123 – Project Adding A Tooltip Manipulator Part 2
124 – Project Adding A Tooltip Manipulator Part 3

13 – Extra Epoch Carousel

125 – What are we going to build
126 – Assembling The Carousel
127 – Adding Content To The ScrollView
128 – Lets Implement The Scolling Behavior
129 – Display The Prior And The Next Epoch
130 – Adding The Epoch Bullets

14 – Game Project

131 – What are we going to build
132 – Basic Layout
133 – Content For Top Containers
134 – Content For Bottom Containers
135 – Adjusting The Fonts
136 – Adding Placeholders For The AnswerIcons
137 – Lets Talk About Dragging
138 – Simple Dragging Pattern
139 – Dropping The Icons
140 – Game Architecture
141 – Game Data and State
142 – Implementing The Game Logic
143 – Connecting The Game Controller
144 – Connecting The First UI Pieces
145 – Add Some Data aka some questions
146 – The Next Hint Button
147 – Adding The Manipulator To The Icons
148 – Load Real Icons Dynamically
149 – Checking Answers
150 – Lets Provide Some Feedback To The Player
151 – Add Pressure With A Timer
152 – Thank You

Project Files: Link 1 Link 2

 

Reviews

There are no reviews yet.

Be the first to review “Modern Unity UI with UI Toolkit”

Your email address will not be published. Required fields are marked *

Shopping Cart
AdBlocker Image

Please disable Ad Blockers
Looks like you're using an ad blocker or popup blocker. We rely on advertising to help fund our site.