Common UI Input system in Unreal Engine 5

hey how's it going today we are going to be looking at the common input which is part of the common ui it basically dynamically will change the icon shown on the screen based on what kind of input type you have in alright so sit back hit that subscribe button and let's uh get into this okay so step one we are going to open up plugins and enable the common ui plugin and once we enable that we are going to restart the engine okay now that we're back into the editor after it restarted we're going to go into project settings under engines we're going to find general settings we're going to change the viewport mode common game viewport client this is going to change how the how input is routed so that now it is routed automatically to the highest widget think of like a store in a game and a pop-up confirmation pops up it will automatically route it to that pop-up it's really nice and it enables better navigation okay now to actually set up the common input settings uh first we're gonna set up this input data now a good way to get started is to duplicate the generic one built-in i'm personally gonna we're gonna make our own and then we're gonna copy some from the library project okay so we're gonna make our own input data uh hitting the new button doesn't work at the moment but let's hit blueprint new and then let's come down here and just look up common ui and we'll get this common ui input data and that's what we're going to create and let's name it our input data now that that is made uh let us set our input data to the one we created ourselves all right and now let's uh set that data up basically in here this is going to use our a data table that is going to have all of our common ui inputs in it and that's what we're going to set up next but this input data only needs the action and uh like the call action and the back action and that's basically going to be the confirm deny other widgets we can set any action to uh here's an example of the generic uh widget and that has all of the buttons assigned but here you go let's make one uh just so you can see and we're gonna call it r common gamepad okay and let's just add one this is gonna be for our input confirm and then we're gonna create another for input back this took me a minute so i'm gonna skip over it but the you can look at the generic data table to see how i filled it out all right now we're just going to assign those buttons here so the data tables are data table and then the row is going to be whatever you call it except back and then the back button once all that's set up you can actually now fill out the platform specific data this is where this is really powerful you can use it to basically automatically remap and re and change the widget that's being displayed depending on the platform so like windows you can have both your keyboard maps that need to be shown as well as your gamepad maps and depending on which input is being used it's going to swap between the two or not show a widget or show a widget depending on how you set it up uh but this is what we're gonna set up now we're gonna create a new widget and these are called the common input base controller data and basically what they support they store is the images of the buttons that we're gonna be pressing uh for each controller and that way when we swap a controller it can show the correct icons we can also select what type of input it is so if it's a gamepad keyboard touch etc alright let's just let's pretend i filled all that out and now what we're going to do is we just make sure that that platform data is assigned to the correct platform uh in our common input settings that is all we would need to do with those is assign the icons and then assign them here if you need an example open up the library project and they have full button maps for xbox pc etc okay now we're going to create a widget to display what exactly is happening i'm going to skip over the part of me adding this widget to the level um the level blueprint just because i'm just making it auto spawn but here we go so we're just going to add a widget we're going to add the common common action widget once we have that added we're just going to go over here and we're going to assign its input action this this reads the data table that we created and then we tell it which action should be assigned to this now we're not going to see it in the editor but now if we show this widget and we had a gamepad connected it's going to show it here we go here i'm switching from xbox controller to pc when i just use my keyboard it shows nothing because i have nothing assigned when i have the xbox controller it shows that button and that's pretty much it that's all we have to show like the buttons are that easy to set up and it is automatically switching here's kind of an example of fortnite where they would use it like this x button or the dynamic uh controller buttons that disappear depending on if you're using a controller or not um as an example of where you could have it the lyra project has some as well and there's other common ui widgets that aren't part of this common input that i hope to cover in the future but yeah hopefully that covered the basics of it for you i know i skipped around a lot if you want to look at the data tables things like that look at the liver project it has fully filled out ones and i wish you guys luck

Channel: Volkiller Games

Views: 19,315

Keywords: gamedev, Gaming, UE4, Indiedev, Volkillergames, Indiegame, indiegaming, Game Development, Unreal Engine, Unreal Engine 5, UE5, ui, widgets, Common ui, Common Inputs, Game input, game icons, show widget, input button, enhanced input, common input, input plugin, lyra, lyra input, solo dev, tutorial, learning content, game making, controller

Id: q05jmFyeb0c

Length: 5min 53sec (353 seconds)

Published: Mon Jul 11 2022