Menu Close

UE5 Common UI Tutorial via @Mike_Prinke

Time for another quick Common UI tutorial in #UnrealEngine5! Last time we made changeable button icons. This time we'll make onscreen buttons respond directly to button presses on your controller.

#UE5 #UI #Tutorial #Gamedev

What you need:

– Data table with Common UI Input Actions

Nice to have:
– Controller Data Info assets defining icon sets for your controllers, plugged into Project Settings > Game > Common Input Settings > Controller Data
– Gamepad must have the correct name ("Generic")

You also need to go into Engine – General Settings and change the Game Viewport Client class to CommonGameViewportClient. This is a special viewport class from Common UI that provides the input routing system!

Basically, with input routing, the viewport is responsible for capturing the user's UI input. Widgets added directly to the viewport are considered "root nodes." The viewport routes input to a root node, the root node routes it to children.

But specifically…

… The input routing system ONLY routes input to the topmost visible root widget in your hierarchy. This means if you open one menu on top of another menu, the top menu is going to be the one that has input focus.

This is one of the key features that makes Common UI capable of handling really extensive nested menus, such as those in #Fortnite, without screwing up what the player is supposed to be able to click or navigate.

All of that is a bit of an aside! But helpful to know why the special viewport client is needed. Don't forget it or you miss out on one of Common UI's best quality of life features!

Now back to buttons and input actions.

Make a new widget class based off the CommonButtonBase class. There's a few classes that can capture "bound actions" from your controller directly, and this is one of them.

Do not use CommonBoundActionButton — I'm pretty sure this isn't fully Blueprint exposed yet.

When you start the Common Button will be blank. Add a Canvas widget and you'll see the generic button background. I use a Custom width/height to get the canvas to a sensible size.

Add text, add the Common Action Widget.

Browsing through the details inherited from Common Button Base will give you insight into a LOT of useful built-in features, but we want to set the Triggering Input Action. I've set it to a generic "Confirm" action here.

It's worth pointing out that multiple UI input data tables are totally a thing you can do, and you should separate them based on what context they're used in. This helps keep version control conflicts to a minimum.

Make sure to set the triggering action for both the button input's base Details and for the Common Action widget. You don't need Common Action to get the functionality here, just the icon.

After setting up both buttons with the needed input info, throw together a quick menu that uses them. This menu is based off the Common Activatable Widget class, and you have to set "Auto Activate" to true.

And before I forget — testing these with just some print string shenanigans.

Add this to your viewport however you like ingame, and tap the buttons! Voila, you've got controller-to-button direct interaction.

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


Comments are welcome.

%d bloggers like this: