How to use the Common Action Widget | Unreal Engine 5 Tutorial

so you want buttons that switch automatically depending on the input just like this it's not that hard and I'm going to show you how to make it in under 10 minutes before we start you're gonna need to go into edits plugins search for a common and make sure that your common UI plugin is enabled first go into miscellaneous and create a common UI input action data table let's just call this DT underscore input actions this data table will contain the name of your abilities and the keybind associated with those abilities let's just open this and now let's click add to add a new row drag this out double click on the name and let's call our first ability interact let's add another ability and call this reload so these are my actions and now I will go into the row editor and I will assign a key for my action so for interacts I'm going to click on the key and press f and for the GamePad let's just choose something face button bottom is fine with me now the display name is not the same as the row name up here the row name is the name used in the engine and will be used by the programmers however the display name is the name that will be seen by the player if you ever display the name of the ability on screen for this example we will just call it interact let's also set the keys for reload I will put this on r let's choose face button right for this display name will be reload here now let's save this the next thing you will need is a blueprint that Associates keybinds with your button icons let's right click and create a new blueprint class search for common and select common input based controller data let's call this keyboard controller data hit Ctrl D to duplicate this and let's call this one Gamepad controller data the reason we need two blueprints is because as you can see here the input type is specific for each instance so for your keyboard controller data make sure that your input type is set to mouse and keyboard let's go down to input brush data map and add a new index expand this and here we have our key so if you go back to our DT input actions we see that we have interact on F and reload on r so let's create one for f and one for r now if we expand this key brush here we can select our texture for our button so for f i will select my f image and for r i will select my R image now let's compile and save this and go back to our Gamepad controller data almost the same thing here but our input type it needs to be set to gamepad and important here for our Gamepad name set this to generic let's expand our input brush data map and let's go back to our DT input actions and we see for interact we have the GamePad face button bottom there we go and we have another one and we had face button right there we go and for our face button bottom I will select my a and for the right I will select my b perfect let's compile and Save and now our controller data blueprints are set up now we're almost done the only thing we need to do now is to go into edit project settings go into common input settings expand the platform input and go into windows and here it's important that supports mouse and keyboard is checked and support Gamepad is also checked here we will change our default Gamepad name to generic now here you can see an array called controller data this is the same as our keyboard controller data and Gamepad controller data so here we will add two elements and we will select our keyboard and our Gamepad controller data now as you might have figured out we can add as many elements as we want to this array so if you want you can have as many keyboard and Gamepad controller data blueprints as you want that was it for the project settings let's close this now the final thing we need is a HUD to display our widgets let's go into user interface create a widget blueprint I'm just going to call this BP HUD let's drop in a canvas and let's also drop in two common action widgets I will anchor this to the lower right and I will also scale these because they can appear kind of small all right now let's go into our first Common action widgets expand the input actions by adding new element and for our data table we will select the data table that we created first the DT input actions now for the row name this relates to the actions in our input actions data table for example interact and reload so for the first one let's just select interact and for the second one we will do the same thing and for this one we will select reload now we're all set up now we can just compile and save and test this out as you can see I just connected my controller now let's play and test this out so you can see I have my f and R key down in the bottom and if I now touch my controller it's going to switch to the GamePad buttons lastly I will show you how to add the text beside the button which tells you what kind of action it is let's go back into VB HUD select both of these and move them a bit to the side now we want two text blocks and for the first text block let's bind the text and for the return value we will select our first Common action widget and we will call a function called get display text let's connect this and then we will do the same thing for the second text block select the second common action widgets get display text and connect this up perfect let's not forget to Anchor these to the bottom right now let's try it out there we go we got interact on F and reload on r let's see what happens if I use my controller there we go a for interact and B for reload perfect now just one last thing before the end it's important to remember that the keys and keybinds we set up for the common input is not related to the input for the player character and is not related to enhanced input in any way the input you use in the common UI plugin is purely for UI and it will not relate to any other type of input system alright guys that's it for this tutorial thank you for watching and I will see you later

Channel: UnrealForge

Views: 7,013

Keywords: unreal engine, UE5, game development, programming, umg, ui, common input, input, controller, key guide, common action widget, widget, plugin

Id: am5XZblZ7Qg

Length: 9min 42sec (582 seconds)

Published: Thu Jun 01 2023