UI Toolkit at runtime: Get the breakdown
Let’s clarify how UI Toolkit can ensure smoother workflows while creating UI. Creating UI in collaboration with artists can be a complex task. While the artist is editing the Canvas to add colors and material, the developer adds scripts, behaviors, and OnClick listeners. Afterward, when merging occurs, merge conflicts can arise and lead to issues that require swift resolution. UI Toolkit prevents such merge conflicts by having the artist work on the UXML and USS files while C# handles all of the logic. For example, button handling is done with C# only, which queries the button using its name, and adds logic without editing any UXML or USS files. Not only does this process ease merging, it simplifies future style changes. For instance, if all project fonts suddenly had to be changed, you wouldn’t need to go through each asset, one by one, to edit the text settings. This avoids tedious work that can lead to oversight issues – and the bigger the game, the more complicated this becomes. With UI Toolkit, Panel Settings hold all of the text settings. So to change the fonts under a UI Document, you only need to edit those Panel Settings. Although Editor scripts can similarly assist with UGUI, UI Toolkit’s framework automatically handles this process. A Visual Element is the base class of every UI Toolkit element: buttons, images, text, etc. You can think of it as the GameObject of UI Toolkit. Meanwhile, UI Builder (Window > UI Toolkit > UI Builder) is a visual tool that helps create and edit interfaces without writing code. This is useful for artists and designers alike, as it allows them to visualize the UI as it’s being built. As the premiere tool for people already familiar with web technologies, UI Toolkit also improves collaboration between artists and developers by separating logic and style to refine organization and avoid file conflicts. While UI Builder takes care of the elements’ positions, style, and design, code can be handled in a distinct section of the project to query the parts of UXML that it needs, and connect logic to it.
