One of my first tasks in our new game is to simply create a skeleton UI with five buttons that can be exclusively toggled, similar to radio buttons in HTML. The Unreal Engine 4 has buttons, it has got check boxes, but it no radio buttons. I guess it’s not that usual use case for game UI.
As a JavaScript developer I got really comfortable and confident with the ReactJS. That kinda set a bar of a rather high expectation when designing user interface. Diving into UMG (Unreal Motion Graphics) I realized that this gonna be rather different ride.
To get anything like UI displayed to the player, you need to create User Widget. That’s easy part. There is a nice visual designer that wouldn’t probably surprise any desktop developer working with eg. Windows Forms. For a JavaScript developer it’s sort of a breeze. Instead of taking guess about actual outcome when editing text file, you can see it right away.
There are some really nice options to layout everything neatly on the screen. I think that single User Widget can be easily compare to a React Component. Along the Designer, there is also a Graph which is just a regular blueprint for creating logic of that widget.
So I made my five buttons and then it struck me. We would need to style them later and there will be some common styling for sure. I’ve started looking around, but could not found anything that would at least resemble good ol’ CSS. Do we need to change every single button manually?
The most elegant solution I was able to find is to essentially create another widget which holds just that button with required styling. This widget can be then used in another widget repeatedly. That seems like a good solution, very similar to how ReactJS works actually. Of course it needs little bit of blueprinting to expose values you want to be able change.
Generally it works ok, but there is a small caveat. The text entered within designer is not actually rendered in there. Apparently code within that blueprint is not executed when designing widget. It’s not a huge problem for a text, but later it might be somewhat obstructing and resembling the way how web apps are developed: write code & reload the page.
To actually make a button change its appearance based on which one is active, the most straightforward solution is to simply loop over all of them and compare against currently selected one. Since our set of buttons is not dynamic, I have just created enumeration representing this set. Then on a player character I can have a variable with currently selected button and widget can ask about its value or change it through exposed function.
There is also need for keyboard shortcuts for these buttons. These will be handled within player character object to keep all input in one place and for that reason the event has to be exposed for toolbar widget to see that change and update its visuals accordingly.
I am storing there also previous tool, so it can be easily switched back with another keyboard button press.
I am looking forward to creating more complex UI cases. I believe that UMG is a good tool to make anything possible.
