# Getting started with UI toolkit

Ui Toolkit của Unity đem tới rất nhiều lợi thế so với hệ thống Unity UI (uGUI). Đây là một giải pháp thay thế hiện đại, linh hoạt, và tới hướng hiệu suất cao, có khả năng mở rộng tốt hơn cho hầu hết các hệ thống. Đây cũng là hệ thống UI sẵn sàng cho tương lai của Unity 6 và các phiên bản sau này.

Tuy nhiên, vì nó lấy cảm hứng từ các công nghệ trên nền tảng web, quá trình học UI Toolkit có thể hơi khó khăn nếu bạn không quá quen thuộc với các ngôn ngữ đánh dấu siêu văn bản như HTML/XML và CSS. Phải thừa nhận rằng, rất nhiều thứ cũng đã thay đổi trong những năm qua khi các chức năng mới được thêm vào UI Toolkit. Nhưng với việc Unity 6 đã ra mắt, đây là thời điểm tuyệt vời để cân nhắc sử dụng nó cho dự án của bạn.

Trong vài năm qua, Unity đã phát hành một số dự án hướng dẫn toàn diện như [QuizU](https://assetstore.unity.com/packages/essentials/tutorial-projects/quizu-a-ui-toolkit-sample-268492) và [Dragon Crashers UI toolkit sample.](https://assetstore.unity.com/packages/essentials/tutorial-projects/dragon-crashers-ui-toolkit-sample-project-231178) Chúng tôi cũng đã phát hành một [e-Book](https://unity.com/resources/user-interface-design-and-implementation-in-unity?isGated=false) miễn phí với hơn 130 trang có thể giúp bạn bắt đầu với UI Toolkit.

Tuy nhiên, nếu bạn hoàn toàn mới với UI Toolkit và chỉu đang tìm kiếm một phần giới thiệu đơn giản thì bài viết này rất tốt để bắt đầu.

# UI Toolkit là gì???

Hãy cùng dành một vài phút để hiểu các thành phần tạo nên bộ công nghệ (tech stack) UI Toolkit

UI Toolkit là tập hợp của các assets, tools và systems.

[![image.png](https://knowledge.thanhdv.com/uploads/images/gallery/2025-06/scaled-1680-/cDrimage.png)](https://knowledge.thanhdv.com/uploads/images/gallery/2025-06/cDrimage.png)

- ****UI Assets:**** <span style="white-space:pre-wrap;">Hãy xem UI Assets như những UI building blocks. Những assets này bao gồm các file Unity XML (UXML) và Unity Style Sheet (USS). </span>  
      
    UXML files đại hiện cho các nội dụng và cấu trúc của UI tương tự như HTML và XML.  
      
    <span style="white-space:pre-wrap;">USS files lấy cảm hứng từ CSS (Cascading Style Sheets), được dùng để khai báo giao diện và style cho nội dung. </span>**Bạn sẽ sử dụng cả hai loại assets trong bài hướng dẫn này.**  
      
    [![image.png](https://knowledge.thanhdv.com/uploads/images/gallery/2025-06/scaled-1680-/Ihbimage.png)](https://knowledge.thanhdv.com/uploads/images/gallery/2025-06/Ihbimage.png)
- ****UI Tools:**** <span style="white-space:pre-wrap;">Để tăng tốc quá trình làm việc với UI của bạn. UI Toolkit đi kèm với một số công cụ. Chúng bao gồm </span>****UI Builder****<span style="white-space:pre-wrap;"> - một editor giúp bạn dễ dàng xây dựng UI từ các khối trực quan thay vì viết code. Tuy nhiên, bạn vẫn có thể tạo content bằng UXML và USS thông qua code. Hoặc bạn có thể kết hợp cả 2 cách tuỳ sử thích. Công cụ quan trọng thứ 2 là </span>****UI Debugger****<span style="white-space:pre-wrap;"> được sử dụng để debug :D</span>
- ****UI Systems:**** là một tập hợp bao gồm các công cụ giúp bạn dễ sàng xử lý các events, rendering, styles và layout.