iTranslated by AI
[UE5] Tips for Designing Professional-Looking Editor Utility Widgets
Environment for Article Writing
| Item | Version |
|---|---|
| Unreal Engine | 5.7.4 |
| OS | Windows 11 |
| Platform | Windows |
Overview
I often create tools using EditorUtilityWidget (EUW) to improve efficiency in various tasks. When doing so, there are several points I keep in mind to ensure the tool doesn't end up looking "clunky" or being difficult to use. This article shares those points.
Sample Created
The scenario I have in mind is a common one: "a tool that selects assets, chooses some options, and executes a process."
At Runtime
Hierarchy
Key Points to Keep in Mind
1. Make the window scrollable when elements overflow
This is not enabled by default, but it is quite important. You can implement this simply by adding an EditorUtilityScrollBox and setting the Size to "Fill."
Without this, you get the result above. It can lead to a situation where "the tool becomes unusable when the window is small," which is quite unpolished.
2. Use VerticalBox or HorizontalBox for button and text placement
Related to point 1 regarding window resizing, if you place buttons freely, the layout will easily break. While you could design it to prevent this, the best approach for tool UI layout is to have it look decent at a low cost. Therefore, it is best to use VerticalBox or HorizontalBox as parents and place buttons or text underneath them, as they handle layout automatically to some extent.
Combining points 1 and 2 results in a hierarchy like the one shown in the figure below. This generally leads to a tool layout that looks professional.
3. Utilize SinglePropertyView and DetailView when displaying and adjusting parameters on the tool
While it is possible to line up SpinBoxes and CheckBoxes to adjust parameters, this involves extra effort—placing a HorizontalBox, adding Text as a child, setting padding with a Spacer, placing a SpinBox, and so on. By using SinglePropertyView or DetailView, you can provide users with the UI layout and operational feel of the default Unreal Engine interface.
In the sample image, the Static Mesh settings and Options are displayed using SinglePropertyView and DetailView.
4. Displaying logs of executed results
Points 1 through 3 are almost essential, but from here on are things that I find "make the tool look a bit more convenient."
When using an EUW, you are likely performing some batch processing, so it is helpful to display the results in the Output Log and within the tool itself. Since few people keep the Output Log open constantly, this helps in verifying whether the tool worked correctly or investigating issues if something goes wrong.
In such cases, display text in an EditorUtilityMultiLineEditableText and set IsReadOnly to ON. You must set IsReadOnly to ON, otherwise, the text intended for logging could be edited. Also, I recommend wrapping the EditorUtilityMultiLineEditableText in a Border to give it a "log area" look.
By setting the Border's DrawAs to Border and the Margin to 0 or more, it becomes a Border that encloses the text area.
5. Placement of the tool's name and help button
Give the tool a name that indicates "what this tool does" and display it at the top of the tool. On the far right of that area, place a button that jumps to the usage documentation page.
I think the placement of the help button is actually more important than displaying the tool's name. You will likely prepare documentation on how to use the tool, but if it isn't linked to the tool itself, it will end up being a "tool used only by those who know how to use it." There is a node called LaunchURL in Blueprints, so if you enter the document URL there, the browser will open and jump to the URL when the button is pressed.
Conclusion
EUW is extremely convenient because it allows you to consolidate useful functions into a tool. However, if the tool's appearance or ease of use is lacking, it will rarely be used, which is a waste after putting in the effort to create it. I recommend keeping these points in mind, as they will help your tools look and feel professional.
Promotions
I felt it was troublesome to launch EditorUtilityWidgets as their number increased, so I am currently distributing a tool on Fab that allows you to register shortcuts for EUWs.
The code is also publicly available.
References
EditorUtilityWidgetPetitDeepDive | Docswell
[UE5] Various things about UE5 EditorUtilityWidget | Kinnaji's Blog
UE5: Tool creation techniques utilizing Editor Utility | CG and Video Specialty Site | CGWORLD.jp
Editor Utility Widget & Editor Extension | UE5 Strategy Link
Discussion