It’s all in here: The ultimate guide to creating UI interfaces in Unity
Thousands of people have preregistered and now it’s finally here: Our biggest e-book yet, User interface design and implementation in Unity, is available to download. Get ready to dive into over 130 pages of advanced instruction in UI design.
Your game’s user interface is perhaps the most direct way you can communicate with and guide your players – like a folded map you hand to them that reveals clues, key details, and directions as they progress. Whether you’re using more traditional elements like health bars and pop-up messages, or elements completely embedded in the game world, such as showing stats on the back of a player’s survival suit, the UI is integral to immersing players in your game’s story, realm, and artistic style.
We’re thrilled to announce that our latest technical e-book, User interface design and implementation in Unity, is available to download for free. Thousands of people have already signed up for it, and just as many have downloaded its companion piece, the demo project, UI Toolkit sample – Dragon Crashers, to date. Now it’s your turn.
The interest in this e-book is understandable. As it says in the introduction, “User interface is a critical part of any game… a solid graphical user interface (GUI) is an extension of a game’s visual identity… [and] modern audiences crave refined, intuitive GUIs that seamlessly integrate with your application.”
The guide begins by covering UI design and art creation fundamentals, and then moves on to in-depth instructional sections on UI development in Unity. Written and reviewed by technical and UI artists – external and Unity professionals alike – the e-book unpacks both Unity UI, the default solution, and the newer UI Toolkit.
The emphasis, however, is on the latter toolset, as UI Toolkit now provides many benefits for projects with complex, fullscreen interfaces. Think of projects that require a scalable and performant system for runtime UI. To help you choose the right solution for your project, please refer to this section of the Unity manual.
The e-book is a treasure trove of information for professional UI designers, artists, and other Unity creators who want to deepen their knowledge of UI development. Here’s a snapshot of what’s inside.
The first section aims to inspire with foundational tips for making effective UI. It looks at examples of diegetic UIs, where UI elements can be found right in the story, making parts of the game world function as a user interface. It explains how elements can either contribute to or break the immersion that a player experiences. We even turned this section into a blog post that you can read here.
The guide then turns to the roles and responsibilities of a UI designer, and what tools and methods they employ such as UI wireframing, art creation through mockups, fonts, and grey-boxing. There’s also a chapter on asset preparation and exporting graphics from Digital Content Creation (DCC) tools. These earlier sections in the guide are helpful no matter what game engine and UI solution you’re using.
An extensive chapter is devoted to Unity UI. Unity UI is our longtime system for creating in-game UIs, and currently the go-to solution for positioning UI in a 3D world or using GameObject-based Unity systems.
This section outlines Unity UI fundamentals for prototyping and integrating assets in-Editor: the Canvas, prebuilt UI elements, TextMesh Pro, and Prefabs, among others. We recently updated an article on advanced optimization techniques for Unity UI, where you can find tips on related topics.
UI Toolkit is made for maximum performance and reusability with workflows and authoring tools informed by standard web technologies. UI designers and artists will likely find it familiar, especially with prior experience designing web pages.
Three major sections of the guide highlight instructions for developing runtime UI with UI Toolkit. There’s a thorough explanation of the parts that comprise UIs made with UI Toolkit, including the Unity Extensible Markup Language (UXML) and Unity Style Sheet (USS) using UI Builder.
You’ll explore how UI Toolkit positions visual elements based on Yoga, an HTML/CSS Layout engine that implements a subset of Flexbox. Flexbox architecture provides advantages, such as responsive UI, enabling you to adapt your UI to different screen resolutions and sizes. Through both UXML and USS, you can decouple the styles applied to UI layouts (and switch those styles up as needed), while logic and functionality continue to live in code. Workflows for visual elements, the fundamental building blocks of each interface, are also discussed in great detail – from positioning, size, and alignment settings, to margins and padding.
The chapter on styling shows you how to define reusable styling for visual elements with Selectors, override styles and define unique attributes with inline styles, and create animations and effects with USS animation and a Camera Render Texture. It also demonstrates how you can thematize UI elements for holidays and other special events.
That’s when the e-book gets into UI Toolkit sample – Dragon Crashers, with different sections that depict how the UI was made; from the menus and custom controls like radial counters or tabbed views, to embedded UXML templates and more.
Finally, the guide concludes with a mini profile of the studio Mechanistry’s UI migration to UI Toolkit for their new game, Timberborn. This brief study showcases how their lean team managed to scale and keep their game consistent across various menus and screens.
At 137 pages, the UI e-book is not a light read. As with the other technical e-books released this past year, use it as a reference on an ongoing basis.
Along with the e-book, check out a couple of recently released resources filled with useful tips for leveraging Unity UI and UI Toolkit:
- The Unite 2022 session, Extending the Unity Editor with custom tools using UI Toolkit, shows programmers how to use UI Builder to create a custom Inspector for real-time Play Mode debug data visualization.
- The webinar, Best practices for mobile UI design, gathers experts from Outfit7, Samsung, and Unity to share strategies for maximizing the creativity and flow of your mobile games.
Bookmark one or both of these pages. They compile all of our technical e-books and advanced content:
We hope that you enjoy this latest e-book and look forward to your feedback in this forum.
