Ace Ui Toolkit

Accessible Custom Editor (ACE) UI is a Unity development toolkit that streamlines custom editor creation and provides real-time custom UI manipulation and visualization features for both game script properties and custom UI layout.

Project Purpose

I embarked on this solo project to address my frustration with the default way UI is drawn for custom game scripts in Unity. When exposing script properties (settings) to the Inspector (the in-engine game script UI), the grouping and labeling options are very limited and produce UI that can be difficult to visually parse. More effective UI such as indented, fold-able groups and disabling UI elements via a checkbox do exist within Unity's custom editor library, but there is no simple and efficient way to access these advanced options.

The need for one of these options on even a single property requires writing a boilerplate-heavy custom editor script where every property must be manually identified, loaded, and drawn. As a result, a Unity programmer is left with only two options: accept game script UI that is functional but difficult to work with or write a time-consuming and tedious custom editor script to improve the user experience.

ACE UI solves these problems by taking the following steps to improve the game script UI experience for both the programmer and the user.

• Improving the Programmer's Experience

  Through a custom editor framework ACE UI automates the finding and loading of game script properties and provides a suite of grouping and labeling functions that require no custom editor script or code to access. It further simplifies the process by requiring only grouping to be specified, relegating all look and feel settings to an in-editor settings window.

• Improving the User's Experience

  All default custom UI layout settings are relegated to reusable Themes which are edited using a Theme Settings window in Unity. Edits to these settings are rendered in real-time, promoting experimentation through immediate feedback, and empowering the user to define the UI look and feel that works for them.

Following is a high-level list of the key components that I completed for this project:

• Custom editor framework that handles all custom editor code and includes library functions that provide advanced custom UI functionality
• Bridge that connects Unity runtime scripts to Unity Editor functionality without breaking builds by including editor code in runtime scripts
• System that stores all UI element types as objects with their properties linkable to properties within a Theme
• Theme system that links all relevant properties within all assigned custom game scripts to a theme, syncing updates in real-time in both edit and play mode
• Theme Manager that finds all custom game scripts utilizing ACE UI and assigns themes via an editor window within Unity
• Theme Settings window that utilizes its own ACE UI theme to present all the settings in the active theme
• Conversion to distributable package via GitHub and Unity Package Manager with automatic version control using Semantic Release

The two key goals of this project were to make custom editor creation more efficient and to provide grouping and labeling options to make custom UI creation more versatile.

To address the inefficiency issue, I developed a framework to automate handling of Serialized Properties. This framework utilizes inheritance and reflection to facilitate custom editor creation within the game script itself. That is, the game script inherits from a root script and specifies how its properties will be grouped by providing implementation for an inherited, abstract method.

With the custom editor creation simplified, I then developed a hierarchy of Element Info objects designed to contain all relevant data to draw various UI elements and an associated library of custom editor functions to provide grouping and labeling options.

With these systems in place, a game script could specify exactly how its properties should be drawn in Unity's UI, including grouping and labeling options, with very little code, no additional scripts, and no editor code required.

See the class diagram below for a high-level overview of how this system works.

While developing the framework for this project, I continually tested my approach to determine what was the best way to simplify the process of creating a custom editor without sacrificing the flexibility attained by manually writing a custom editor script. It was through this testing that I realized that putting the default layout settings for custom UI elements into the user's hands would not only improve the programmer's experience by requiring less code to be written, it would support accessibility by empowering the user to choose the UI look and feel that works best for them.

To implement this approach, I created the following components:

• Theme system to store settings presets in a portable and reusable format that can be applied to multiple game script UIs simultaneously
• Theme Settings window to facilitate real-time theme settings editing while Unity is in either Edit or Play mode
• Theme Manager window that:
  • Lists all game scripts utilizing the ACE UI framework
  • Shows what theme has been assigned to each game script
  • Facilitates theme reassignment, updating all attached game script UIs in real-time

I feel that the best way to showcase the effectiveness of this toolkit is to show it having a positive impact in a practical application.

After completing this ACE UI's core features, I resumed development on my Space Sim since its complex, multi-component procedural generation system would provide an excellent real-world use case and stress test for ACE UI. With the framework, I was able to produce complex game script UIs that exceeded what was possible with Unity's default custom editor scripting while taking a fraction of the time to produce. I was then able to create a unified look and feel across all components by creating and adjusting a custom Theme.

Applying ACE UI to Space Sim's game scripts helped me identify and address many edge cases that I'd missed during testing, allowing me to further refine and polish the framework. This also highlighted the need for various additional features including rendering game script data as real-time UI graphs, which I was able to quickly implement since I'd designed the framework to be extensible.

The following video shows how I utilized ACE UI to organize the Resource Manager's many settings into meaningful groups, rendering the resulting resource generation into a graph displaying resource distribution counts in real-time.