UE5 Common Ui - How to use the Common Ui Tab List

hey everyone in this video I'm going be going over the common UI TBL list now this TBL list is a widget within the common UI plugin so we are going to be utilizing common UI now it is in the name but I'm just going to disclose that anyways but I do want to go over just before we go into all the details this video does take account that you do know how to set up the inputs so you have set up the settings correctly to work with common UI now if you don't know that yet I do recommend take a look at my common UI guide it is about an hour and a half long but if you just watch the first portion I believe it is between like 15 or 20 minutes something like that to set up the settings that way you can understand all of the settings all of the inputs now if you already know all of that and you've already set it up accordingly you could just move forward with the video now in this video I'm going to be going over the tablist with that tablist we're going to be able to use the left shoulder and right shoulder buttons for a Gamepad and you could also I guess set it up for if you wanted to do like um the up and down buttons if you wanted to change it to different Gamepad controls or keypad controls you'll be able to do that whether it is vertical or horizontal so uh I'm going to be going into explaining how to do all that functionally and then also display it to you as well now in this video I'm going be using a PlayStation 4 controller I'm just disclosing that I'm using this Gamepad if you're using other gam pads try to use the buttons according to them uh they're all roughly the same but they all have little nuances so just make sure you have the images accordingly as well as just um using the correct Gamepad buttons so anyways let's get into it so just to go over briefly on what the settings look like again I'm not going to go into brief descriptions on what everything is but I will just glance over and show you so with every common UI product obviously you need to turn on the plugin so I'm not going to just take the time to go in that but let's go into project settings the first thing is after you turn on common UI you have to search for view viewport and make sure you select the common game viewport and then it will make you restart after next we're going to go into common input settings uh so you do have to create input data and also controller data uh so this you have to start by making a input action data table which is awesome so under um I think it's shoot where is it miscellaneous and then common UI input action data table and then you create one of those after creating these you then have to create the buttons and specify which buttons and the name of them uh which you want to create so this is where we have the select the back button the tab left and the tab right and then I also add in the images of the brushes this is is also where you set the size of the brushes that is also important uh so for tab left and tab right I have the 32 sizes and then that is the input action and then if we go back to settings make sure that you create input data which is a generic input data blueprint this is where you make the click action and the click back button and then this is where where you select the data table and then the input or the row name that you want to pick afterward you have to create the controller data and then from here this is where you create the type of input so whether it is mouse keyboard Gamepad touch or whatever count is and then you put in the name of the GamePad display and this is where you put in all of the brushes again for all of the buttons uh so like the x button represents the Face bottom button and then for my left and right tab I also have here also for the brushes I put them to 150 because I'm going to be using them in the UI I want them bigger than 30 too uh so just also make sure that if you are using this data for um UI just try to scale them up a bit unless you want them specifically small and this is where you can change it as well so going into that make sure you then connect them into the controller data make sure Gamepad is first if you are supporting Gamepad this is really important for UI so that um the buttons aren't missing when you first start the game and you have a controller plugged in okay so now let's go into the widget itself so from here we're going to now go into a new folder and widgets now there are two things to do with a tab list so if we actually were to just type in Cen tab list if you hover on top of it it actually tells you that it works with a switcher so this will only work if there is a switcher in the UI uh or the same widget that the common tab is so what I recommend using is the common tab list as just the header and this is where you can actually make it modular so that it is for all your widgets so whenever you add a tabl list you can just add this widget and you don't have to create one every single time um that's what I recommend for all uis you always want to split it into things that you can reuse multiple times to save yourself time so don't put a switcher directly into the common tab list just use it for for the header and the buttons so what we're going to do first is we're going to create the header and then we're going to create a another widget that will have the switcher so going into the TBL list first we'll go into here and we'll then type just um uh let's just do like cui or common UI and we'll do tab list from here the first thing we want to set up is the tabless functions uh so what we want to do is let's turn on the autol listen for input so once it's created we do want to listen for the input now you don't want this turned on if when you create tabs you want them disabled and you want the player to unlock them at a later time so like if you want to show the tab but it is in fact disabled don't turn that on because otherwise they can move on top of it and then if it then they can't actually see the page but they can still uh use the button to like hover on top of it it will create some weird uh interactions for the player I mean you could test it out yourself to see how weird it becomes but basically don't do that so now let's set up the next Tab and the previous tab so we're going to connect our data tables and then from here we want to select the next tab so next tab is going to be tab right and then previous tab is going to be tab left so typically for English speakers you read left to right so left in this case is going to be previous and right is going to be next okay now let's go about setting up how to have buttons in our tab so what we need to do first is we need to have something to contain everything this is going to be our header and within our header we also want to display the tab right and tab left buttons we want to have that visible to the player so that they are in fact able to see what buttons to press so we're going to need to have a horizontal box and within this horizontal box we need the common action widget and we want two of them and for both of these let's just hit the fill button and turn it to like 0.1 that'll be useful later but as of right now let's go ahead and rename these to the tab left capitalize that e on accident and then we'll call this AB right these are where our icons are going to populate and this is where we'll be able to see what buttons to go to left and what buttons go to right depending on if the controller is plugged in or using a mouse so with this we're going to hit the input actions and then for tab left we want to do the exact same thing we did with the widget and do tab left and then for here we'll do the exact same thing and we'll do new tab right and then we need to have something to contain all of our buttons so all of our buttons are not actually going to exist in this widget we are going to create them within the widget that requires tabs uh that way we can utilize this multiple times and we don't actually have to specify how many um tabs that have pre-existing so we're going to go ahead and do another horizontal box in the middle and just hit fill we're going to make it a variable and call it container now let's go into our graph from our graph we're now going to delete this and we want to do specific common tab list functions so we're going to do tab creation and tab removal and what this means is that every time a tab is created what we want to do is make sure it's added into our container so whenever we have our container we want to then add child and plug that in and then we also want to remove child so every time it is created and removed we're going to be able to add it to our container so that your Tabs are always displayed correctly and this is actually all we need to do right now for this tab list now we're going to go into making our default widget uh which we'll just call it our um our our menu widget we're going to do common activatable widget we'll just call this wbp for widget blueprint and we'll call this oh autosave hit us once more we'll just call it main menu and from here we're going to need our header but first let's just throw down a canvas panel now this is only because I don't have any other type of widget currently uh never stack canvas panels upon canvas panels try to do overlays or um uh like Borders or or things like that try to not stack too many canvases and then from here we're just going to grab a border and I'm just going to do this z z z and we're just going to make it black oh that's this is the wrong one hold on brush color to Black and then from here I'm going to grab the header um I call it tabless and we're going to line it across the top and do like 20% and then we'll just do z z actually let's do like 10 10 10 10 okay so let's actually check to see if our buttons are working and being displayed so let's go ahead and go into a third person character we're going to create a debug one key and from here we're just going to create a widget we're going to make a main menu widget add the viewport get player controller and let's set show mouse cursor then lagged a bit uh game no no UI mode only that way we can see the mouse cursor and then we can also interact with it so we hit here press one we got our icons I move over here and sweet so just like that we're able to display the icons depending here now I I do know we have the left and the right mouse keys however um those are actually not going to work throughout this video due to the fact that um keyboard is actually a little different compared to Gamepad and I'm not covering that as of this moment still doing some research on it how to accurately portray the arrow keys however you can do like q and E and they work perfectly fine but for some reason arrow keys don't interact as well and that's just a Unreal Engine difficulty with keyboards at the moment but I'll do a video on that at a later time but now that we have that there we need to now handle our button buttons we need to be able to have our tabs and currently we don't have that so let's go ahead and do on construct so we'll delete these and before we create any typee of tabs we're going to grab our TBL list and we actually need a switcher so that we can switch our tabs based upon the content within our switcher and since we don't have that yet what we need to do is set linked switcher and it requires a common switcher so let's go into our design let's do a common switch and throw that down let's go into full size and then let's drag this down to the 20 and let's also set this to 10 across the board so now we'll have a container switcher here so let's just type switcher and we're just going to throw in some fake content for here and we'll do just different colors for our images just want to get rid of the white uh okay so we got different colors all around perfect names are not as important and we'll go into here where we'll plug in the switcher and then now we need to create all of our buttons but before we can create buttons we need to be able to style them and know what type of button we're creating so let's go back into our widgets we're going to go into here widget blueprint type in button click button base and select cui button base and then for all buttons they for Styles all require and overlay uh so you need an overlay because it will set based upon what the button style that we create is matching so from here we're now going to create a new blueprint new folder and we'll call this style and we'll just call it button style for the moment I'm going to close it and reopen it just because I hate seeing the graph for no reason now let's set the normal base normal hovered and press to different colors so let's go into tint we'll do kind of like a branish thing I'm going to take that color for everything okay and then now I'm going to darken the hovered to about here actually let's do a little more and then let's go to the selected hovered and then also and then for this one we'll darken it even more and then for disabled we'll just make it black okay that looks good and then from here let's go ahead grab a text grab common text now you could also do a style for the text too I'm not going to right now um because I'm just going have to the default but you would go about doing the same thing as I did for the button and then make this a variable we'll call this text block this is so that we can actually have the tab name we'll have common or custom event we'll set button text go into set text awesome and then that should be all we need to do for our button as of now oh actually we missed something I lied go into the button what we need to do is set a minimum width and height this is so that we never have our buttons too small so let's go ahead and do a minimum of 350 we're going to close this here uh we shouldn't need this anymore either but now that we have a button created we can now start creating our buttons but we also want to make sure that we only create buttons of the amount of indexes we have shown here which are four so what we're going to do is we're going to get child count and then we want to do a loop and then let's actually do minus one and plug that in and delete and the reason we're doing minus one is because it starts at zero and it doesn't start at the first index uh so we want to make sure that we Loop the appropriate amount and then from here we're going to grab our TBL list and to register any type of tab or create any tab you have to do the register tab you plug that in and then from here this is where we now set the button we created which is button base and then we actually need to get our switcher one more time let's actually give us a lot more room here because we're going need to do some stuff we are going to want to get child um index oh oops get child at and then we're going to plug this in and I think we could actually promote this to a variable to make it a bit easier on ourself because we're going to need that index a bit we'll plug that in here plug that in here and then and we're going to need to be able to set our tab name so upon this what we need to do is go from let's do to string and a pen plug that in here and we'll do Tab and space okay uh oh actually let's move that over a little in case we need to do anything after the complete and what this will do is this will now create all of the tabs a total of four with the buttons and let's click here and press one okay so we don't have the names yet but if we hit the left and the right button it looks like nothing is happening yet so let's see what happened um oh okay that that's what it was okay go into the main menu because I made a common activatable widget we need to hit the autoactivate uh if this was like a user widget you wouldn't have to worry about that but that should fix it hit the tab button okay perfect but but it looks like our tabs aren't actually working as intended because they're still staying the same color so let's actually see what's going on here uh we need to set the name to the button so let's see text two text let's do pass the button base and we're going to call that function or set button text oh I didn't mean to do that and we'll do that okay that should set the names at least but it looks like all of the colors are the same as of right now despite it actually working so let's go back into our style looks like we probably did something wrong here and it's probably because of all of the normal bases and normal hovered uh let's see the selected base let's go with um let's go with the dark darker color let's see if that actually changes anything okay there we go and like that we now have a TBL list we have names for all of the tabs uh you'll also notice that the buttons aren't actually centered uh so let's let's let's quickly fix that let's go back to our TBL list and and then for here let's see let's go into where we create our buttons I wonder if we could do container h or maybe there we go you just have to Center align it there we go that makes it nice and easy everything is centered we have all of our buttons and then we also have the icons that are being displayed as well so with that you now have a functional tabl list that works with your or game pad all right so thanks for watching this uh thanks for tuning in if you found this helpful free feel free to like subscribe join Discord all the self-promo stuff it's great having you listening and uh have a good rest of your day

Channel: MrButier

Views: 401

Keywords: common ui ue5, common ui, ue5, tutorial, blueprints, widgets, ui, commonui, basic, tab list, horizontal box, tab switcher, widget creation, gamepad controls, register tab, tab creation, quick tutorial, user interface, game design, tab widget, tab management, game development, widget design, tab removal, switcher link, event handling

Id: cvZotoHSEn4

Length: 28min 0sec (1680 seconds)

Published: Mon Apr 15 2024