2024 Guide to UIToolkit for Unity games (part 2)

by

(if you missed it, read Part 1: "Understanding UI Toolkit" first)

Part 2: Getting the best out of UI Toolkit and Flexbox

Benefits to UI Toolkit

  • Layout is easy and automatic (using CSS rules)
  • Can be built in code or in visual editor

Downsides to UI Toolkit

  • Incompatible with most/all existing UI packs, art-packs, asset-packs
  • Missing many core parts of CSS Layout
  • Cannot live-preview and live-edit in-game, have to restart
  • Drag-and-drop doesn't work, requires custom solutions
  • World-space rendering doesn't work (yet)

Best of both worlds: Flexbox with Unity UI

Benefits to Unity UI / FlexBuilder

  • Layout is easy and automatic (using CSS rules)
  • Can be built in code or directly in UnityEditor and Unity Scene View
  • Includes a full implementation of CSS Flexbox, with all layout features
  • World-space rendering works 100% correctly (thanks to Unity UI)
  • Fully supports all existing UnityUI kits, textures, code and features

Downsides to Unity UI / FlexBuilder

  • Commercial asset you have to purchase from the Asset Store

Building A User Interface Using UI Toolkit

Step-by-step Guide for Building UI

First, begin by opening the Unity Editor and create a new Scene. Within this scene, create a UI Document which will serve as the container for your UI elements.

Next, use the UI Builder to drag and drop VisualElement components into the UI Document. This visual editor simplifies layout design and lets you arrange components like buttons, text fields, and images directly within the scene. Set up the structure of your UI using UXML, which is similar to HTML but different (google for examples of common setups) for defining the UI elements. For each element, specify properties and relationships in the UXML to establish the basic layout.

Once the structure is set, style your UI using USS. This is like CSS but different, and involves defining the visual appearance of your UI elements, such as colors, fonts, and margins. USS allows for styling elements similarly to CSS in web design.

Finally, integrate the event system to handle user interactions. Add event listeners to your UI elements to respond to clicks, drags, or keyboard input. This can be done directly in the UI Builder or through scripts, but requires learning the proprietary events that UIToolkit uses (not compatible with core Unity).

Exploring Built-in UI Components

Unity UI Toolkit comes equipped with a variety of built-in components that cater to a wide range of UI needs. Key components include:

  • Button: A versatile component used for triggering actions.
  • Textfield: Allows input from the user, suitable for forms and settings.
  • Slider: Offers a graphical slider interface, ideal for adjusting settings like volume or brightness.
  • Toggle: Enables users to switch an option on or off.

Each component is designed for easy integration and customization within your UI. Many components also support advanced features like tooltips, which can provide additional information when hovered over, or masks, which can be used to limit the visibility of certain elements within the UI. By combining these components, you can build complex UIs that are both functional and responsive.

Building a User Interface Using FlexBuilder/UnityUI

Step-by-step Guide for Building UI

Building a user interface with FlexBuilder starts with setting up a RootFlexContainer, which acts as the primary container for your layout. Inside this container, you can begin constructing your UI by adding an initial FlexContainer. From here, populate your layout with nested FlexContainers and FlexItems, each configured for specific layout behaviors like alignment and spacing. This modular setup allows for the creation of complex, responsive UIs. FlexItems are used to control the dimensions and placement of UI elements like buttons, images, and text, ensuring a cohesive visual and functional experience.

Exploring Built-in UI Components

FlexBuilder integrates seamlessly with all existing (and custom) Unity UI components, enhancing the process of UI development. Key components include:

  • Button: A versatile component used for triggering actions.
  • Textfield: Allows input from the user, suitable for forms and settings.
  • Slider: A graphical slider, ideal for adjusting settings like volume or brightness.
  • Image: Any texture or sprite
  • RawImage: RenderTextures, typically connected to a Unity Camera to provide live camera feed
  • ScrollRect-Flexbox: upgraded version of UnityUI's ScrollRect that integrates it deeply with CSS Flexbox, providing automatic content-sizing and re-layout when needed

This framework simplifies the management of UI elements, allowing developers to focus on creating engaging and dynamic interfaces. FlexBuilder’s structure promotes flexibility and scalability in UI design, making it an excellent tool for developers looking to craft sophisticated user interfaces efficiently.

FAQ

Conclusion

Flexbox's significance

Flexbox stands as a pivotal tool in game development and beyond, offering a highly efficient and scalable solution for creating sophisticated user interfaces within Unity environments. Its significance lies in its ability to streamline UI design and implementation, facilitating a quicker development process and ensuring that UI elements perform optimally across various platforms and devices.

FlexBuilder vs UI Toolkit

While both FlexBuilder and Unity UI Toolkit serve the critical function of UI development within Unity, they cater to slightly different needs and preferences. FlexBuilder emphasizes a flexible, fast, graphical, approach to layout management, which can be particularly beneficial for developers looking to spend less time building UI and more time building their games. In contrast, Unity UI Toolkit provides a comprehensive suite of custom editors and two proprietary languages that are powerful and can save time for teams that repeatedly build the same UI.

Future Predictions and Developments

The future of UI development in Unity looks promising, with continuous enhancements anticipated for both systems. Predicted developments include more advanced interaction models, better integration with Unity’s asset workflows, and enhanced performance optimizations. As virtual and augmented reality technologies advance, there is also a strong potential for Flexbox to be used in ways that further support immersive environments, making UI creation for VR and AR more intuitive and powerful. These advancements will likely drive more innovative uses and broaden the appeal to a wider range of developers.