top of page

Unity Editor UI Builder Tool

Writer's picture: Mary LutherMary Luther

Overview

The integration of UIToolkit and the UI Builder tool revolutionized UI development within Unity, addressing the limitations of the legacy uGUI system. The new framework incorporates front-end web technologies, allowing for responsive UI design that is easy to theme and style. While this transition required developers to learn new principles, it ultimately provided a more robust solution for creating intuitive user interfaces.


The UI Builder with some UI from the Dragon Crashers demo project open
The UI Builder and Dragon Crashers demo project


Project Goals and Objectives


  • Improve UI Scalability: Transition from uGUI to UIToolkit to enable developers to create responsive and flexible UIs that adapt to various screen sizes.

  • Simplify UI Development: Introduce the UI Builder tool to facilitate an intuitive drag-and-drop interface, streamlining the design process.

  • Educate Users: Provide comprehensive resources and documentation to help developers learn UIToolkit and UI Builder, minimizing the learning curve.


Role and Responsibilities

In spearheading this initiative, my responsibilities included:

  • Leading the design and development of the UI Builder tool during the first year to ensure it met user needs and facilitated seamless UI creation.

  • Collaborating with cross-functional teams to integrate UIToolkit within Unity, addressing developer feedback and challenges.

  • Hiring and managing a small team of awesome designers to improve and add more robust features to the Unity UI solution space. Transitioning to the role as design manger.

  • Managing the team as they produce educational materials to assist users in adapting to the new framework, including tutorials and documentation.


User Research and Insights

We conducted interviews and surveys with Unity developers to identify common UI challenges and desired features. Key insights included:


  • Need for Intuitive Tools: Developers wanted a system that allowed them to create consistent, intuitive tools for their production teams.

  • Feedback on Responsiveness: Users expressed frustration with uGUI's limitations and highlighted the importance of responsive design capabilities in modern game development.


Collaboration with Production Teams

A crucial aspect of developing UI Toolkit involved extensive collaboration with production teams across various game projects, including "Just Dance 2023 Edition." By engaging directly with developers, we gathered insights into their UI needs and challenges. This partnership ensured that UI Toolkit was tailored to streamline workflows, allowing teams to create responsive, high-quality interfaces efficiently. The feedback loop established during this collaboration was instrumental in refining UI Toolkit’s features and usability, ultimately enhancing the development experience for Unity users.


Image of the Unity Editor scene view of the UI in the Dragon Crashers demo
Image of the Unity Editor scene view of the UI in the Dragon Crashers demo


These insights guided the development of UIToolkit and the UI Builder, ensuring they aligned with user expectations.


Key Deliverables: UIToolkit and UI Builder


  1. UIToolkit Framework

    • Introduced a new way to build user interfaces using HTML-like syntax and USS, enabling responsive design and enhanced theming capabilities. Including a robust color variable system.

  2. UI Builder Tool

    • Developed a drag-and-drop UI Builder that simplifies the design process, allowing developers to create UIs visually without extensive coding knowledge.

  3. Comprehensive Documentation

    • Provided thorough documentation and tutorials to help users transition from uGUI to UIToolkit, including best practices for responsive design and practical examples.



Image of the UI Builder with a button and text field on the canvas
Image of the UI Builder with a button and text field on the canvas

User Feedback Highlights

  • “UIToolkit has streamlined our UI process; it feels much more aligned with modern development practices.” – Developer feedback

  • “The UI Builder makes designing interfaces intuitive and faster; it's a significant improvement over the old system.” – Unity Forum post

  • “Learning UIToolkit was a challenge, but the documentation made it manageable. The benefits are worth the effort.” – Internal feedback


This feedback emphasized the positive reception of UIToolkit and the UI Builder among developers, despite the initial learning curve.



Challenges and Solutions


Challenge: Developers needed to relearn UI tools and adapt to a new workflow.

Solution: Created extensive documentation, tutorials, and sample projects to ease the transition and provide practical examples of UIToolkit in action.


Challenge: Ensuring the new system was flexible enough to accommodate future features and improvements.

Solution: Designed UIToolkit to be modular and extensible, allowing for easy updates and additions as user needs evolve.


Results and Impact


  • Enhanced Development Efficiency: Developers reported reduced time spent on UI design and increased satisfaction with the new tools.

  • Improved Responsiveness: The introduction of UIToolkit enabled the creation of more responsive UIs, aligning with modern user expectations.

  • Positive Adoption Rates: Several games have successfully transitioned to UIToolkit, validating its effectiveness and versatility.



Conclusion

The implementation of UIToolkit and the UI Builder tool transformed Unity's approach to UI development. By embracing modern web technologies, these resources not only improved developer workflows but also elevated the overall quality of user interfaces in Unity, laying a strong foundation for future growth and innovation.


This project reflects the impact of UIToolkit and the UI Builder on Unity's design capabilities and the overall user experience.

8 views0 comments

Recent Posts

See All

Comentários


bottom of page