Mô tả

This course is a deep dive into Unity's UI Toolkit. You will learn most of the components that make up UI Toolkit and be able to create complex UI Systems for your games or apps. 


This course uses a mix of theory and practice. We will create dozens of little UI-Components and examples. Furthermore, we will have a course project on which we will practice what we learned in the particular chapters. Finally, we will bring it all together and create a fully functional UI-based game.

While this course is not explicitly covering Editor Scripting most of the content in the course will also apply to it.


Here are some of the topics that we will cover:


Understanding UXML and USS Files

Understand the basic building blocks of UI Toolkit. We will talk about the concept of a visual tree and why it's a good idea to separate structure, styling and behavior.


Layouts with FLEXBOX

UI Toolkit uses the Flexbox system which is also used in web technologies.


Templates

We will learn how we can reuse pieces of our layout with templates.


Events and Event Propagation

No UI System can function without events. UI Toolkit has its own Event-System with modern features like event-propagation which we can use to our advantage.


UQuery

Unity is still a game engine, so more often than not most of your work will be done through scripts. U need an efficient way to connect your scripts and your UI and manipulate certain elements of your UI. In order to do that you first need to find those elements. UQuery provides a comfortable way how you can do that.


Data Binding

While for editor scripting there is already a system in place which helps you bind your data to your components, this is not the case for runtime. Therefore we will look at some tools and techniques how you can do this manually.


Custom Components

UI Toolkit has a library of several build-in controls, but obviously, those can not cover every use case that you might come across. In this section, we will see how to create our own controls and thereby create our own little library of reusable UI Elements.


Manipulators

One rule of good software development is the separation of concerns. In this section, we will learn how we can group the behavior of particular elements into manipulators.


and much more...


Bạn sẽ học được gì

Create modern and reusable User Interfaces in Unity

Understand all UI Toolkit components

Manipulate your UI from scripts

Combine your UI and gamelogic

Yêu cầu

  • Some basic programming and Unity knowledge. If you worked with Unity for about 5 hours you should be fine.

Nội dung khoá học

15 sections

Introduction

8 lectures
What Is UI Toolkit?
00:57
What Is This Course About?
03:07
What Is This Course NOT About?
02:49
Who Is This Course For?
03:05
Comparison Of Unity's UI Systems
06:13
Unity Versions
00:39
Course Resources
00:40
Course Updates
00:53

Workflow (Update)

7 lectures
Meet UI Builder: The new Unity UI Editor
12:49
Workflow: Big Picture
02:34
Step 1: Layout
04:45
Step 2: Styling
05:58
Step 3: Functionality
02:30
Connect Your UI To A Game Scene
03:56
Workflow Summary
02:34

From Theory To Practise

15 lectures
How To 'Read' The Posters
04:07
Section Poster
Processing..
Visual Trees
11:46
Advantages Of Visual Trees
10:02
From Visual Trees To UXML
12:13
More UXML
09:12
Understanding Stylesheets
07:14
USS Files In UI Builder
11:28
More USS
08:00
Simple Selectors
11:46
Selector Precedence
14:46
Complex Selectors - Part 1
10:12
Complex Selectors - Part 2
14:57
Pseudo Selectors
08:55
Bringing It All Together
10:37

Layout and Flexbox

25 lectures
Section Poster
Processing..
Terminology
02:07
Containers And Items
03:38
Understanding The Main-Axis Concept
06:58
Understanding Flex Direction
08:57
Flex Direction In UI Builder
09:03
The Flexbox Rabbit Hole
11:23
Flex Direction Example 1
05:09
Flex Direction Example 2
06:23
Justify Content
06:52
Align Items
05:29
Align-Properties Example
06:20
Flex Basis
07:20
Definition For Flex Basis
04:00
Pixel. Percentage or Auto
04:55
Competition For Space
06:38
Shrink & Grow
06:03
Shrink & Grow Units
01:44
Understanding Flex Basis
07:29
Flexbox Wrapup
04:02
Simple Flexbox Pattern Example
09:55
Simple Flexbox Pattern Example 2
05:20
Simple Flexbox Pattern Example 3
06:27
Positioning
15:34
Friendly Request
00:20

Introducing The "Course Project"

3 lectures
Introducing The "Course Project"
07:32
(Optional) Course Project Setup Part 1
12:13
(Optional) Course Project Setup Part 2
15:33

Build-In Controls

12 lectures
Section Poster
Processing..
Buttons
10:45
Add Basic Functionality To Controls
12:31
Working With Text
13:32
Themes
04:00
Complex Controls - Slider
08:50
UI Toolkit Debugger
06:46
Styling Controls
08:44
Using The Slider
08:38
Project : Practice Simple Controls Part 1
08:14
Project : Practice Simple Controls Part 2
08:26
(Optional) Using The Documentation
14:24

Templates

6 lectures
Section Poster
Processing..
Working With Visual Elements In Scripts
16:38
Templates in UI Builder
14:39
Templates In Scripts
10:50
Loading Assets In Scripts
11:28
Project: Practice Templates
11:09

Finding Elements With UQuery

8 lectures
Section Poster
Processing..
Why are there 3 different ways?
11:24
Setup Explained
11:05
UQueryBuilder
08:51
How To Find Single Elements With Q
12:43
How To Find Any Element With Query
12:47
Swiss Army Knife For Queries
07:43
Project: Practice Queries
11:16

Events in UI Toolkit

8 lectures
Section Poster
Processing..
Events Overview
15:41
Event Data
09:02
Understanding Event Propagation
12:09
Event Propagation In Code Part 1
11:16
Event Propagation In Code Part 2
08:00
Event Example 1
05:45
Event Example 2
15:40

Data Binding

9 lectures
Section Poster
Processing..
Data Binding Intro
08:41
Simple UI Binding
12:11
Adding A Data Class
05:15
System Events and C# Properties
08:47
Creating A "Card Component"
14:13
Simulating Data
11:43
Using VisualElement.userdata
11:51
Dynamically Adding Elements
15:33

Data Binding With Special Controls

10 lectures
Section Poster
Processing..
Simple Dropdown
16:28
Project: Beyond Build-In Controls
08:26
Project: DropdownController
12:30
Project: Displaying The Factions
09:27
ListView
17:17
Project : List Preparation
07:38
Project : ListController
09:27
Project: Displaying Selected Items
14:33
Small Correction On The Last Video
01:59

Custom Controls

9 lectures
Section Poster
Processing..
Our First Custom Control
09:59
Add Styling To A Custom Control
08:10
Custom PopupWindow Part 1
09:55
Custom PopupWindow Part 2
08:44
Adding Custom Attributes
12:35
Adding Functionality To A Custom Control
10:18
Project : Adding A Custom Star Control Part 1
13:00
Project : Adding A Custom Star Control Part 2
14:49

Manipulators

9 lectures
Section Poster
Processing..
Motivation
04:22
Creating Our First Manipulator
09:17
Understanding Motion-Behavior Like Dragging
05:52
Manipulator For Dragging
14:34
Manipulator For Resizing
04:56
Project : Adding A Tooltip Manipulator Part 1
07:49
Project : Adding A Tooltip Manipulator Part 2
08:06
Project : Adding A Tooltip Manipulator Part 3
11:42

Extra: "Epoch Carousel"

6 lectures
What are we going to build?
05:00
Assembling The Carousel
04:25
Adding Content To The ScrollView
10:39
Let's Implement The Scolling Behavior
07:53
Display The Prior And The Next Epoch
04:18
Adding The Epoch Bullets
09:17

Game Project

22 lectures
What are we going to build?
04:12
Basic Layout
12:19
Content For Top Containers
07:21
Content For Bottom Containers
07:48
Adjusting The Fonts
05:17
Adding Placeholders For The Answer-Icons
03:54
Let's Talk About Dragging
06:39
Simple Dragging Pattern
21:40
Dropping The Icons
05:56
Game Architecture
04:04
Game Data and State
06:01
Implementing The Game Logic
08:15
Connecting The Game Controller
06:15
Connecting The First UI Pieces
06:51
Add Some Data (aka some questions)
04:23
The "Next Hint Button"
05:09
Adding The Manipulator To The Icons
09:19
Load Real Icons Dynamically
09:36
Checking Answers
09:59
Let's Provide Some Feedback To The Player
11:44
Add Pressure With A Timer
12:20
Thank You!
03:10

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.