PROBLEM - Messy blueprint code is both hard to understand at a quick glance and inflexible to change.
GOAL - Refactor messy blueprint code so that it is easy to look at and does not cause problems when changes are made in the future.
SYNOPSIS- We have a UMG widget with some buttons. When one button is clicked, it should be highlighted and other buttons should be unhighlighted.
Also, each button will make an associated panel become visible, and hide all others.
METHOD- We will refactor the messy code, turning a big graph full of many functions into just a few nodes using the power of arrays.
-
This widget has functionality to change the background color of the buttons when clicked.
-
But the code is bad. It works, but if I change the number or order of buttons, big problems! I’ll have to go through every one of these functions and rearrange wires.
-
How can this be consolidated and also not require me to do so much tedious work if I change buttons around? Arrays!
Here is a similar widget:
and here is the guts:
At a glance, notice that the entire color changing operation is condensed to a single function. This function gets called when we click any of the buttons in the array
(strangely, I thought it would be necessary to use a For Each loop for the array to bind each element, however plugging the array directly into the Binder seems to work!)
Inside the function “Change BTN color on click”:
For each loop takes a look at each Button in the array and ask, “are you hovered?” This identifies the button we have just clicked.
(perhaps there is a more direct way to identify the button just clicked, but this is the best I’ve found and it works)
If the button was hovered, we change its color.
The FALSE of the branch node says, “if you were not hovered, then…” we change the color to default.
That’s it!
Much cleaner code and if we change the buttons down the road, there is only one place that must be updated.
(If you put the buttons into an array at runtime, you wouldn’t even need to make any changes, it would just happen automatically.)
BONUS:
Changing the color is nice, but likely you run some additional events from the button press. Here is an example of consolidating that into a single function which will swap some UI panels based on the button pressed.
Compare this to having an “on clicked” event for every individual button.
Looking back up at the function above, notice that I saved the arrays index if it was the clicked button, and I output it once the function is finished.
I’m going to use that to run some additional events to fire. The Index here tells us which button was pressed because we know where it is in the array.
Now, below, notice that index number is sent to another event as an input. Once again looping through an array. This time though, the array is made of some UI panels. It is easy to associate the buttons with a panel if I put them in an array with the same order.
Simply check if the numbers match and if they do, toggle visibility.
Easy!
You can wrap this into a function and reuse this code in other parts of your project.
Your project will have it’s own caveats of course, but this is one example of how you can clean up chunky beginner code into something more simple, reusable, and easier to maintain.
Happy developing.