To improve my skills working with Editor Utility Widgets in Unreal, I spent some time building a system that allows users to create presets for use with custom tools.
In addition to the preset functionality, I also pushed myself to learn new design techniques for my widgets. I implemented animations and other visual feedback for the user to better understand the tool and the status of their presets.
The Goal
When creating a custom tool, the functionality of the tool itself is one thing, but quality of life features that make a tool easy to work with can greatly increase user experience and efficiency. My focus here was to explore the creation of user input presets, as well as some associated UI and additional features.
I decided to test this by making “retarget presets” for a batch retargeting and sequence creation tool. The preset itself is a struct with three values: Name, IK Retargeter, and Control Rig. Since I ultimately wanted to have a list of presets, I used an array of these structs to act as that central list of saved presets.
Saving User Inputs by Editing the Default Value
When variables are set using the normal setter Blueprint node, this new value will not be saved if the variable’s Blueprint instance is destroyed, re-compiled, or refreshed in any other way. All variables are restored to their default value whenever a new instance of the Blueprint is constructed. So, I knew that I wanted to allow the user to edit the default value of a variable through the UI. This simple python script lays the groundwork for that functionality.

Syncing Data Between the Main Panel and the Presets Editor Panel

The Presets Editor is a pop-up window that provides more management options for the presets. This editor is its own Blueprint, so it was crucial that all data is consistent between it and the main Blueprint.
However, the List View Widget I was using to populate the Presets Editor could not directly take retarget preset struct data, so I set up a work around that spawns blueprint actors which act as data containers. The data from these actors are then sent to the Presets Editor Blueprint, and then the actors are destroyed.

Feedback with Widget Color and Animation
To provide the user with feedback on the status of their presets, I added changing colors and animations to the UI. For example, a red outline appears around invalid preset entries, or, in the Preset Editor, a yellow outline will denote edited presets. A blinking save icon will animate when a preset has been edited to show that there are changes that are not saved.

Other features include a blue text box background in the Preset Editor to show which preset is currently active, as well as a subtle “expansion” animation when the expandable drop down menus are opened to smooth out that transition.
Looking for a Technical Animator / CG Artist? Let’s collaborate! Hit me up: sheldoneffects@gmail.com