Menu Close

UE5 Common UI Action via @Mike_Prinke

Originally tweeted by Mike Prinke (@Mike_Prinke) on 12/03/2022.

Playing with the Common UI plugin in #UE5 Preview 2. Starting things off with this unassuming white square. What could it do…?

First thing to do is make a Data Table with CommonInputActionDataBase as the row struct.

Yep that name is a mouthful, but bear with me. This struct contains input mappings SPECIFICALLY for UI input, separate from the legacy input or advanced input systems.

This table lets you map abstract actions to multiple different sets of controller inputs, including overrides specific to different devices, and alts for using keyboards.

The Input Overrides would be what you'd use if, say, a controller you want to support has the A and B face buttons flipped, and you always want "A" to be confirm and "B" to be a back/cancel button.

I've got these all mapped to face buttons as needed, and I'm falling back to 1/2/3/4 on the keyboard.

Next we make a Blueprint based on CommonInputBaseControllerData.

Another mouthful, but basically this is an asset that lets us create a library of icons and images for the controller.

Some quickie generic icons I put together in photoshop. These will be the "defaults" for these buttons.

Also doing this for mouse and keyboard — putting together the 1/2/3/4 icons for the battle picker. Note that these map keys, not actions, so it'll always be consistent to the button itself.

To make all our juicy bindings visible, we go into Project Settings > Game > Common Input Settings. We plug in the Action list under Input Data, and we plug in the controller data for each individual platform.

Note that I've got the Gamepad listed as the default, but I also have the Keyboard alts listed.

Now we hop back to the mysterious white square in my picker icon widget. That's the Common Action Widget. You tell it which data table to reference and which UI Input Action it's supposed to look at in that table.

Small correction — the Gamepad Name in the Project Settings has to match the name it's got in the Controller brush data — otherwise it won't pick up. I had it as "Windows" but I need to call it "Generic."

And finally — Hit play after binding all our Actions.

For some reason my video for this isn't uploading, but — Tap buttons on the gamepad, the icons switch to the gamepad buttons. Tap the keyboard or use the mouse, they switch to the keyboard buttons. It is instant.

Back during my previous projects I engineered a system that did this from scratch. It didn't detect analog stick axes or mouse movement — and we NEVER got separation between UI inputs and ingame inputs working as cleanly. This tool saves probably a month of debugging.

This isn't the only thing the Common UI plugin brings to the table — it also has window focus management tools and a variety of other common pieces of UI functionality seen in games. Loading throbber, placeholder images — lots of stuff people keep having to re-make.

Originally tweeted by Mike Prinke (@Mike_Prinke) on 12/03/2022.


Comments are welcome.