Unity UIToolkit : Democratizing Game UI
Unity UIToolkit is a major step in the modernization and democratizing of game UI. Adding the ability to create immersive UX experiences within Unity using modern and familiar front-end development stacks, they are coining the terms UXML, USS and UQuery, Unity twins to the commonly used XML, CSS and JQuery.
AAA game studios have been pushing the boundaries of game UI by using front-end frameworks like React.js in tandem with languages like Typescript. Although Unity has not quite adapted the latest and greatest frameworks and languages, UIToolkit is one of the greatest revamps to game UI development the Unity Engine has seen in coming close to a decade.
So with all that said, let’s figure out why does using UXML,USS and Uquery even matter? After all, the current Unity UI system has been in place since for nearly 7 years, since Unity 4.6 in 2014. To realize why Unity would want to change their common and well-adapted UI system, you have to remember Unity’s mission statement of democratizing game development. By Unity moving to a popular web development stack like UXML, USS and UQuery, it allows developers from all backgrounds, ranging from full-stack, front-end, and even some back-end developers, the opportunity to enter the game industry. Utilizing Unity’s new UIToolkit, users can create amazing UX experiences without the learning curve often associated with changing languages, frameworks, and industries.
Traditionally, when using Unity UI, it required a series of parent/child relationships, as well as a common manager/controller as shown below:
Now with UIToolkit, this can all be cleaned up into one GameObject (a fundamental class in Unity). It manages itself, allowing developers to have an easier time abstracting logic and implementing solid principles. Thanks to the UIToolkit no longer will you need to dig through a tree of GameObjects just to find that one text input that is causing you grief. The new UIToolkit workflow can be seen below:
You might notice a complicated-looking system in the middle of our picture, this is called UIBuilder. To the untrained eye, it might look fancy and intimidating, but it’s even simpler than XML and CSS because of the amazing GUI Unity made for us.
I encourage you all to look at the roadmap Unity has created for the future of UIToolkit. It includes amazing additions like shaders and UI animations.
TIP: If your team takes advantages of prototyping UI web tools like Figma, UI designers can now just open up Unity and finally change the color of the button that’s been bothering them this last week, after all in essence it’s just CSS and XML.
Was this interesting to you? Follow our series and give me a clap to help support me on this journey into Unity’s UIToolkit.
Let’s chat —
Email: keilaloia@outlook.com
Twitter: https://twitter.com/keilaloia1337
Linkedin: https://www.linkedin.com/in/keilaloia
