Intro to UE5 Editor Utility Widgets
Efficient workflows are very important in game dev.
Making repetitive daunting tasks efficient or partly automated can make all the difference in the iteration process.
Editor Utility Widgets allow us to create custom editor functionality and user interfaces using UMG right within Unreal Editor, without the need of C++.
This is very powerful and enables Technical Sound Designers to come up with custom tools to improve the workflow of the team.
I personally often use them to bulk edit/validate audio related options on actors that are part of a larger system when working with the Outliner and Details Panel is not sufficient or daunting.
For example when you need to adjust properties of Actor Components.
HINT: Did you know you can bulk edit selected objects from the Outliner using the Property Matrix :)?
In this tutorial we'll be using UE 5.3
and
Project Lyra
to implement a custom EUW from scratch.
To follow along create a new Project Lyra game first. We will be using
the L_Expanse
level for testing.
NOTE: I chose this mainly to have a practical example for you to play around with. It might not necessarily be the best use-case for a custom editor utility widget.
You can find a finished version of it on my github.
Creating a EUW from scratch
The following is the UEW we will be creating in this tutorial.
It will have the following features:
- list all
B_AbilitySpawners
-
expose the
Sound
properties of theirAudio Component
-
select and focus the viewport to a
B_AbilitySpawner
when clicking it's name in the EUW
In your preferred folder in the Content Browser, create a new Asset of
the type
Edit Utilities/Editor Utility Widget
. Let's call it
EUW_AbilitySpawnerEditor
, if we're asked for a root
widget select Stack Box
.
HINT: Your developer folder is usually a good place for tools.
If you've ever done anything with
UMG
this should look familiar. When opening the EUW, we're presented with
a
Designer
tab where we can layout the UI elements and a
Graph
to setup the logic.
We'll create the following structure, setting the
StackBox
Orientation
to
Vertical
and adding a Button
with
Horizontal Alignemnent
Left
and child
Text
, and a ListView
.
I gave both the Button
and the List View
a
padding of 8.0
.
If we try to compile the EUW we will get an error because our
ListView
doesn't have a
EntryWidgetClass
specified. Let's change that.
Back in the Content Browser create a second
Editor Utility Widget
and call it
EUW_AbilitySpawnerEditor_ListViewEntry
. Again we choose
Stack Box
layout.
Open the WBP and the Graph
, then to the
Class Settings
and navigate to the
Interfaces
section in the details. To use this WBP as a
List View Entry
it needs to implement the
UserObjecctListEntry
interface.
Back in our the first EUW we created, we can now set the
Entry Widget Class
property of the
List view
to our newly created widget.
Finally our EUW should compile again.
Getting the Level Actors
In order to populate our ListView
with entries we need to
somehow get the Actors we want to edit from the level.
Lets select our Button
in the Designer
and
add a On Pressed
event.
This will take as straight into the Graph
view. For
editor scripting, there exists a plethora of
Editor Subsystems
. We will be using the
EditorActorSubsystem
.
As the name suggests it allows us to interact with
Actors
in a level, which is exactly what we want.
We use this subsystem to get all actors in the level and then filter
them by the class we're interested in, which in our case is
B_AbilitySpawner
.
Let's run our main widget for the first time, by right clicking on the
EUW blueprint asset in the Content Browser and selecting
Run Editor Widget
.
When we click the refresh button we should see the number of
B_AbilitySpawners
in the level printed to the
Output Log
.
Now that we have a way to find our the Actors, it's time to modify our
List View Entry
widget.
The List View Entry
The List View Entry
widget is responsible for displaying
the information we want to access for each of our
B_AbilitySpawners
.
To display properties, we have two options, the
Single Property View
and the Detail View
.
The Single Property View
allows for displaying one single
property, whereas the Details View
allows to either
display just specific categories and/or individual properties.
In the Designer
we will create the following layout. A
Common Text
that we will use to display the actor name
and a Details View
for the properties of the
Ability Spawner
. .
To be able to change the text of the Commmon Text
we need
to add a variable binding. Select the Common Text
, go to
the details panel and use the bind
dropdown next to the
Text
property to create a new binding.
In the newly created function drag of the Return Value
,
select promote to variable
and name it
ActorNameText
.
Then we implement the On List Item Object Set
method
provided by the Object List Entry
interface we added
earlier, to update the VolumeNameText
variable with the
DisplayName
of the Volume
our widget will
hold.
Finally we need to go back to the 1st widget created and add the
volumes to the List View
.
If we press the Refresh
button on our EUW now, we should
see the AbilitySpawners
which are in the level.
We're almost done! In the our list view entry widget, change the font
size of AudioVolume_Text
to sth. less big, ie.
9.0
.
Back in the Designer
tab of our entry widget, select the
Details View
, search for Categories to Show
ยด
and add Sound
to this array.
Next we expand the On List Item Object Set
event. We try
to cast the incoming List Item Object
to
LyraWeaponSpawner
, that's the class the
B_Spawner
Actor Blueprints in the level are derived from.
From there we try to get the Audio Component
and use that
with Set Object
on the Details View
.
NOTE: If we want we can add some error handling here, but for the purpose of this tutorial I'll leave this up to you.
If we finally re-run our EUW we should get
Sound
properties from the
Audio Components
of the B_AbiliySpawner
that
are present in the level listed in our List View
.
This lets us directly edit the properties of these
Audio Components
without having to navigate to them using
the regular Details
panel.
It would be cool if we could click the name of the
B_AbilitySpanwer
in the ListView
and the
viewport would focus it, so we know where we are in the level.
To do this, we assign an Event to the
On Item Clicked
delegate in our EUW when we add the
B_AbilitySpawner
to the ListView
.
Now when we click on the name of the B_AbilitySpawner
in
our EUW, the camera will select and focus the actor in the viewport.
And that's all there is to it.
NOTE: Of course we could tweak the appearance of our tool a bit by adding some padding between the actor name and the details for instance and adjusting the button font size etc. I'll leave it up to you.
I hope this should help you get started leveraging editor utility widgets to speed up your and your teams workflows :).