Common Button and Common Activatable widget Unreal Engine 5

all right before i get started i wanted to say that this will require some previous knowledge of umg i do bounce around up a little bit i apologize this is a very weird uh undocumented subject uh so i'll probably do a video in the future and a little bit better done template that i'll release all right with that let's get into it all right so here is the common button versus the standard button as you can see the common ui button has a lot more events to it and we'll be getting into those later uh but i wanted to show you that just how much more functionality it has built in and that's how all of the common ui buttons are is it takes the standard base whatever widget and extends it to add what common functionality is well commonly used okay let's switch over to the editor and here's one example that right away you can see and it's that there is this uh in the plugin section you can set these template styles and if you've ever set up a umg you already know what these are with the button one it's the color and tint when it's pressed and then with the text it's the font the font size etc and the border same as the button okay and you can set this up as a template so that way you can use one all over the place and that's what the common ui stuff's all about so let's move on to creating our first button using this and how to apply it okay so here i'm going to create a common button base uh you're gonna notice they're empty uh by default and that's because after you add something it's gonna create its button base for you now i'm gonna kind of speed through here um but i'm gonna add a text and then a common action i am somewhat assuming you guys know what you're doing the only thing different is how you're gonna set the style instead of having style drop down you're gonna have a style file that you apply on a common text as well as the common button the same thing is in the blueprint you're gonna set the defaults and you're just going to set the default style so for the button base itself you're going to have to go to graph and then class defaults and you're going to notice that style button and from here you just assign the style you're going to notice though and what's more important is there's a lot of check boxes here and it's to hide the input action it's and basically there's a couple other ones to make it selectable or not and then kind of a little more finite controls of whether it should be hidden with a keyboard etc or if we use a default button um and those are something you can explore and you can basically feed that to the child input action uh to make sure that it's hidden when it needs to be you see here that i've added two things i've added a set text so that when we place the button we can set the text and then i've also added a set input action and this is setting the common action widget be the input action that is assigned to the button base because that's exposed when placing another blueprint all right for this part we're going to be making a common activatable widget so i've already made a little template uh it's just confirm or close with the with a mouse we're just going to open the menu then we have the option to close the menu with the gamepad it works the same way except why do we need the common activatable widget uh this is basically used in place of just a standard uh user widget and it's going to contain anything that we want activated and deactivated that's where this comes in really handy so what do i mean by that um this is where i think my example could probably go even further you can have it where you have multiple things on your screen and based on your button selections other things you do you activate only certain widgets at the same time and when activated you can give it focus as you can see here uh the way we're actually removing it is using the activation deactivation um so all i do is deactivate the widget when i hit that button now uh so the class settings for the activatable widget are a little different than the button and that is that they have this backhandler which will automatically handle pressing back for you and what i mean by a handling back for you is using the common input setting uh back action um but then you also have the choice of whether or not these widgets should automatically activate which we can have activation events so we can choose to do different things on activation which i have it set to automatically activate and then when it's created it's in focus all right and then there is these buttons here this is the activated visibility and the deactivated visibility basically depending on what it is it's going to be visible or not and as you can see we auto activate so it would be automatically visible if we use these settings um now we could change that and we can make it where it doesn't auto activate and we would have a different scenario where say we want it to only be activated well after we hit a certain button we hit that button we tell it to activate and now that's in focus now because activation is exposed you can control a lot of things and some other common widgets also use it so you could use like the common widget switcher um and like this is where it's kind of hard to make a template for this because it's basically you're going to create a menu and then you're going to decide whether or not something should be activated or not and i wish i had a little bit better of an example of this i apologize i'll work on that and then i think that's it for now i'm going to be making another video on some other common input actions and i think once we get it all together maybe i'll release a template that's a little more fleshed out if you do want to learn a little bit more about how some of this works i do recommend opening the code in visual studio or whatever your choices and

Channel: Volkiller Games

Views: 13,859

Keywords: gamedev, Gaming, UE4, Indiedev, Volkillergames, Indiegame, indiegaming, Game Development, Unreal Engine, Unreal Engine 5, Unreal Early Access, UE5, button, UMG, Slate, Common UI, UI blueprints, Common ui, common input, icons, button icon, common button

Id: HUGtsOqTIp8

Length: 5min 35sec (335 seconds)

Published: Sat Jul 16 2022