Unreal Engine - 3D Menu Tutorial

hey guys and welcome to another one of my tutorials so in this tutorial i'll be showing you how to set up this little menu system here um so it works very similarly to bioshock infinite menu system so you can see if i select options here it's going to bring me to a different section of the map that has a totally different widget that i can interact with so right now i just have a back button on it i didn't actually bother setting up options because i figured you know that's not really important for this tutorial but this is just a widget like any other widget so you could add options here to change the volume or whatever you want just like you normally would and so you can go back and that will bring you back to like the main menu widget and then we can go credits for example and it'll bring me up here and so you can basically put these little widgets wherever you want on the map and it's really easy to add new ones or move them around or adjust them once you have the whole system set up and then if we come back here so exit obviously just exits the game and play game will jump you into like a new level so for this project i'm just using the first person template level as an example but you can load up any level you want and then one other thing i want to mention before we get started is so this map that you see right here you totally do not need this map to follow along with the tutorial the only reason i'm using it is because it looks nice and i just wanted to have something to look nice in the tutorial but you can use any map you want the system will work the same no matter what map you're on but if you are curious about which map it is it is if you go to marketplace it's this modular seaside town and i got this when it was free it might not be free anymore but if you want to use it that's the one that it is and okay so now we can go ahead and jump into it so over here i have a totally fresh project so this is actually using the first person template and all i've done is i've imported in that seaside map so you can see here in the content folder i have the normal first person template stuff and then i have the seaside town and then inside of maps i've opened up the demonstration map but again you don't need this map to follow along with this tutorial at all okay so with that being said we can go ahead and start so the first thing you'll notice um well if you press play it's going to drop us in as our first person character which we don't want so we need to fix that so before we start creating blueprints i'm going to add a new folder here so right click and say new folder and we will call this 3d underscore menu so everything we're going to be doing in this tutorial is going to be inside of this folder just keep things a little bit organized so in order to fix that issue we want to add a new game mode so right click and go to blueprint class and select game mode base and then we will call this the main menu game mode because this area right here even though it's a level it's still our main menu and then inside of here we actually don't need to change anything because all the defaults are fine we just need to come over here and set this to use our gamemode base like so and now if we save all and then we run it saving takes a second on this map because it's kind of large and i hit play you can see now we spawn as this camera which we can fly around um and that's totally fine because we're not spawning as the player anymore and eventually once we add in the widgets you won't be able to fly around either so this is basically what it should look like and you also want to make sure that you have a player start in your level which i currently don't so we are going to come over here on the left and drag in a player start so the player start is basically where the camera is going to start when you press play so let me drag my other project over here because i didn't actually show you that before so you can see um my player start is located it's located like right here so even no matter where i am in the camera as long as i have it to default player start and i press play you'll see the camera is going to go here and it's going to interpolate down to this camera so press play and i spawn at players start and i go down to the camera so that's kind of what it will look like when the game first launches so it kind of does matter where you put this player start so i'm just going to throw it somewhere over here right now but feel free to put it wherever you want your camera to start okay so we have that the next thing we need to do is create our actor widgets that will represent the different menus around the world so we can right click and make a new blueprint class and we want it to be of type actor we will just call this bp underscore menu 3d and then let's go ahead and open this guy up so this needs to consist of two things it needs to have a camera and it needs to have a widget so up here at the top left let's add camera component like so and then i'm just going to go ahead and drag this back a little bit it doesn't really matter where you put this right now because we'll be changing it per widget but as a default it's nice to have it kind of back a little bit and then again so let's come up here and select default scene root and then hit add component and add a widget component like so okay and that's pretty much all we need to do for right now we're going to have to come back and fill this out later once we create our widget so let's go ahead and actually create our widgets now so let's go back here to the content folder and then inside of here i'm going to make a new folder and i'm going to call it widgets this is where we're going to put all of our widgets and then inside of here we want to right click add a user interface widget blueprint and the first one we want to add is our base class for all of our menu widgets so each menu widget whether it's the credits the options or whatever they're all going to inherit from this class so that way they can share some of this functionality and so we will call this the menu 3d widget and this is going to be the base class so let's open this guy up real quick because it's going to be actually really simple to fill out so the only two things we need to do inside of here is we need to come over here to the graph tab and then at the top we need to go to class settings or maybe it's class defaults or maybe it doesn't exist for this no it does yeah so under class settings we need to hit this little drop down button that i just hit and we want to select uh generate abstract class and the reason we're doing that is because well this is this is an abstract class meaning that it's not going to be something we're going to directly spawn into the world we're actually going to be spawning only children of it so because of that we can make it an abstract class and then the other thing we want to do is we want to add an event dispatcher so hit this little plus button on the event dispatcher and we will call this transition to linked map or not map menu so this will kind of make more sense once we actually use it but what this is going to be used for is whenever you select an option so let's say you select the credits button uh it's going to call this event or it's going to dispatch this event and it's going to tell the i think it's the level blueprint that we want to transition to this other menu right and since it's in the base class everybody will be able to use it and again it will start to make sense more once we actually start using it so for now this is all we need to do actually that's all we need to do for this blueprint for the rest of the project so we can just go ahead and close this and then come back here to the content folder and then off of this guy we want to create our child widgets so in the little example project i had three i had a main menu and i had an options and i had a credit so let's go ahead and create those three and if you want to create more this is basically exactly how you would do it so for some reason you can't right click on these and say create child widget like you can for normal blueprints so we will just have to do this the long way so let's right-click and say user interface make a new widget blueprint and we will call this the main menu widget and then we need to open this up and we need to go to the graph and then we need to go to class settings and we need to change the parent class to our bp underscore or sorry to our menu 3d widget which is the one we just created so now it is actually a menu 3d widget and then we can browse back here and so we can just duplicate this one two more times for the other two that we need so we can say right click duplicate and we'll call it the options menu or sorry options widget and then we'll duplicate that one and we will call it the credits widget and again you can make as many of these as you want um i'm just going to stick with these three for right now and then one other widget we're going to need is a widget for our buttons because i kind of have customized buttons just so it matches the scenery a little bit better so let's right click go to user interface make a new widget blueprint and we will call this the button underscore widget okay so i'm going to just file save all real quick and then we'll keep going alright so let's start with the main menu widget and the button first so actually yes let's do the button first so over here let's open up the button widget this will be pretty quick it's pretty simple widget here so on the designer tab up here we want to add a button so drag this guy in and then we want to select the button and then we want to over here on the right we want to set it to oh wait we don't want this canvas panel that's why it's looking weird so hold on delete the button and then delete this dms panel and then drag the button in and then select the button and then over here on the left up here we want to add also a text to it like so and then let's select this text and then make it a variable by clicking this little checkbox and we will call this the button text okay so obviously this isn't quite right yet so select button up here and the first thing we want to do is we want to find the background color and we want to set the alpha to zero so that is transparent and then we want to change the color and opacity and you can see if you drag this around it actually changes the color of the text so we want to make this some brownish color so i'm just going to copy what i have on my other project so for the red i have 0.37 and the green i have 0.16 and 0 for the blue so it's kind of like a brown color for the button and then i think that's all we need there um yes so now over here on the graph tab we need to hook up a few things so we want this button to be reusable and so to do that we need to expose a couple things so i'm going to go ahead and delete these two because we don't need them so over here on the left let's create a new variable and call it the text and we will make it of type text and then we'll select instant editable blueprint read only expose on spawn in private and by selecting all these well by selecting instance edible we make it so that we can actually set it in the details panel in the widget and you'll see that here in a minute and then expose on spawn is well if you ever spawn it through blueprints we probably don't actually need this one and then blueprint only because it's constant basically and then private because obviously we don't want anybody else to change it outside of our class so let's actually use this so let's drag this in and we want to assign our button text to be that text so we'll drag in our button text and say set and then we will oops not like that dragging our button text and say set text like so and then of course the text we want to set it to is this text file save and so now the next thing we want to do is we want to set up the hovered state so that when it's hovered the background changes because you'll notice in my other project here if i just run this real quick you'll see when i hover over the text the background changes to like a darker color so in order to do that we can select the button and then we can come down here and say on hovered and hit this and we also want one for on unhovered so select the button again and say on unhired so these events will get called obviously when the button is hovered and when it's done being hovered and so we want to change the color of the button so we can drag in the button or the background of the button rather and so we can say set background color and we want to set it to some color so i'm going to make this a variable as well so that we can configure it per button so i'm just going to right click and say promote to variable and then just like we did for the text we want to set this to instance editable blueprint only and private and then i'm going to call this the upper color and so when the button is hovered we set it to the hubbard color and then when it's unhovered we want to set it to invisible again so we can i'm just going to copy these two nodes and then for this i'm just going to say 0 0 0 and i'm also going to pass in 0 for the alpha like so so it should look transparent and then for the hover color we can also default this to something nice so let's open this up and again i'm just going to copy what i have in my other project so i used 0.37 zero point one six and then zero and then for the alpha i used 0.35 and we hit okay all right and then the very last thing we want to do in here is we want to add a click event so that we can kind of pass up the chain of events whenever we are clicked so we'll say button and then we'll override the on clicked event and then we will create our own event dispatcher so we'll come over here and create an event dispatcher and call it on clicked and then we will just go ahead and call it like so so whenever the button is clicked this event will get dispatched okay so now we have this button set up we can actually start using it and it'll just make our lives a lot easier because we won't have to copy and paste all this code so we can come back to our main menu widget and then let's go over to the designer tab and start setting this up so we can delete this canvas panel so we don't need that and we can add a border and then for the screen size or sorry for the thing up here at the top list we want to change this to custom so that we can view it at a custom size and we're going to use 200 oops 200 by 300 because that's about the size that we want and then inside of this border we will add a vertical box because we basically just want to lay out all of our buttons oh and let's change the color of this border so select the border and then for the brush color we want to select again i'm just going to copy what i had before so i used one red 0.69 on the green and 0.32 on blue to give it like a tan looking color let me hit ok alright so the vertical box we want to add our buttons to it so since we've created that button widget we can just come up here and search for button and make sure you get the button widget and not the button because this is the built-in one for unreal and so we can just drag this on to our vertical box like so and then all you have to do is fill out the text uh what we want to say so we'll say play game and just like that it fills out our text and it's the correct color and it looks good and this hover text if you change this it won't actually do anything right now but it will change the color of what the background changes to whenever you hover over it so you can change this as well if you like but i'm just going to leave it as how we have it set by default and then after this we want to add a little spacer so that we can have a little bit of space so let's drag that onto the vertical box as well and then for the spacer let's just set the y value to like 10. and then from there we basically just want to copy this so actually the vertical box let's add a little bit of padding to it as well so let's add like maybe 20 30 i don't know 20 to the top and 20 to the bottom and then we can take this button widget and we can duplicate it so we'll right-click and say duplicate it and let's be naming these as well so let's actually call this one the play game button and we will call this one the options button and then let's duplicate this spacer as well so we go button spacer button spacer and then for the options button let's just rename it to or not rename it but change the text to options and then again we will duplicate this and duplicate the spacer and we will call this one the credits button and then we'll call this credits and then finally we want one more for exiting so we will duplicate this we call this the exit button and then we will duplicate the spacer oops duplicate the spacer actually i guess we don't really need a spacer because it's at the end so maybe we can just delete that one and we'll just call this uh exit game and yeah exit credits options and play okay so that looks good you can tweak it obviously to meet your likings if you want but this is good for now and so now that we have each one of these we want to bind to them so that when they're clicked it actually does something but i guess before we do that let's let's go ahead and set up our scene a little bit because we can actually kind of start doing that now all right so let's come over here and this is where i added the main menu to this little like thing where it kind of looks like maybe there's supposed to be a sign hanging here so to do this what we want to do is we want to open up or we want to drag in our bp menu 3d and you can just drag it into the world anywhere it doesn't really matter and then you want to rotate it so that the camera is facing the direction of the sign and then i'm going to hit this little button up here so it changes the movement to local space and then you kind of scoot it back i kind of had it on the right but basically what we want to do here is we want to go to the details panel and we want to make this a little bit bigger and we want to select our widget and then we want to set it to our main menu widget so hit this little drop down and say main menu widget and then we also want to change the size of it because you remember we set the size in here to 200 by 300 so we want to make sure that we use the same size so that it looks the same on the screen as it does here so we'll say what was it 200 by 300 so under the draw size we will say 200 by 300 and i think it might be backwards just backwards so in order to fix that we just need to come into your come in here to our widget or our menu 3d blueprint and on the widget make sure you have the widget selected we just want to rotate this 180 degrees like so and if we compile and save and come back here to our scene you can see now it is set up correctly so the cool thing about this is you can actually move the widget independently of like where the camera is and everything so if you select just the widget over here you can move it and you can see the origin of the actor stays the same spot but the widget moves separately so we can just come over here and kind of position this wherever we want so i'm going to try to make it look like it's kind of hanging from this sign a little bit just to give it a nice artistic look and it's a little bit crooked so i'm going to change turn off my rotation snap just so i can get it perfect and something like that yeah it doesn't have to be perfect but that's the idea and you'll see it just says text block text block text block that's fine because the uh it doesn't actually assign those values until the game runs so it's going to look a little bit different when you're not running but when you actually run it it'll look correct okay so that's our first one and that looks like it's pretty good so i'm going to file save all again and the first thing we need to do here is we need to set it so that when we start the game we start at this camera or we at least we at least transition to this camera because you can see if i press play right now we're still just kind of flying around here in the middle of nowhere and we don't even have a mouse so it's not great so to do that we can do it inside a level blueprint so we'll open up the open level blueprint right here and let me open it up on my other monitor as well one second okay so inside of the begin play we want to do a couple things the first thing we want to do is we want to set the input mode to be game and ui only and we want to show the cursor so i'm going to delete this if it takes you don't need it so we can say right click get player controller and then we can say set input mode game and ui and then we also want to i'm going to copy this again and we also want to say show set show mouse cursor alright so that will show the mouse cursor and allow us to actually click on things but we want to transition to that camera so in order to do that we need to call a function here off of our bp menu 3d widget and specifically this one because this is the one we want to start at so if we just select this like i've just done and then we go back to our level blueprint you can actually right click and you'll see right here there'll be an option to create a reference to whatever the thing is that you have selected so we want to create a reference to this guy and it will do that like so so now we have a reference to it and so we basically want to tell the game to use this camera so i'm actually going to write a function in here that does that and then we'll call it from right here so we'll come back to here in a second but first let's go back to our bp menu 3d and then go to the event graph and again i'm going to delete these bottom two because we're not going to actually need them and then we're going to have a custom event here so we'll say add estimated and we will call this transition to and so what this is going to do is whenever it gets called it's going to transition the camera to you know whatever widget this is inside of so whenever we transition to a widget we also we want to move the camera there obviously but we also want to disable collision for whatever widget we were previously on and enable collision for the new widget because if you think about it like when we're running i'm going to run my other one real quick maybe i won't because it's not letting me okay maybe i won't but when you're running the project and you have a widget in front of you so say you're on the main menu widget you know say you're looking at this one you don't want to be able to click on another widget that's over here you want it to be disabled and you want only this one to be accepting input so to do that we will say set actor collision enabled and we will set this to false so this is for ourselves and then this needs to take in the new widget that we want to transition to so if we select this and add an input it will be of type um bp underscore menu 3d we can call this the new menu so this is the one that we're transitioning to um so we want to drag off of this and say set actor enable collision and for this one we want to set it to true so whichever one we're transitioning to we want to be able to have collisions that we can click on it i'm just going to double click i'm just double clicking on this line to add some reroute nodes to kind of clean it up a little bit and then finally after that we actually want to move the camera to use that camera so we can say get get player controller and we want to say set view target with blend and this will transition the camera for us and the new view target is going to be this new actor this new widget actor that we want to go to and for the blend time you can kind of set this to whatever you want it's basically how long it blends between the cameras and then like how it blends so like linear cubic i'm going to use this one so it eases in and out nicely and then we also want to set the blend i think this is exponent but you can kind of play with these numbers and see what they do but for now this is really all we need to do to get it to work um and so let's see here so let's come back to our our demonstration our demonstration level blueprint and we will just say transition two so this is a little this is a little weird use case right here because we actually want to pass this in for both of the parameters because it's actually the target and the transition to menu we'll be using this event and other places as well it'll like make a little bit more sense because we won't be using it in such a weird way but this works just fine because they're basically just telling it to transition to you know this one so now if we run this you can see our camera spawns at our player start that we added and then it smoothly transitions over to our widget but you can see there's a couple problems so first of all whenever we click it steals our mouse and it also we can't actually click on things so i think the reason for that is if we come back here to our bp menu widget we need to select our widget and we need to select receive hardware input and this will allow it to receive mouse clicks and so now if we press play and we have our mouse you can see now we can move our mouse around and we can click on things it does get hidden sometimes i think that's because we might need to select um where did we set the game mode so back in the level blueprint we might need to uncheck this because we don't want the mouse cursor to be hidden so let me just compile and save and try this again all right so oh it's still getting hidden let me figure out why oh right because we need to select uh i forgot to select this so we want to set this to true because we want to actually show the mouse cursor so now if we try this again so if we click and click the mouse stays there we can click on all these buttons but of course they don't do anything yet but at least we can click them so that's the next thing we need to do is make it so that when we click the buttons things actually kind of happen so let's first of all set up the rest of our little widgets here so i'm going to hold down alt and drag and that will make a copy of it and then i'm going to move this guy over here i think this is where i had the options just kind of get it in the general right spot something like this and i think for this one i kind of took the camera and i moved it kind of rotated it at an angle like that again feel free to you know do this however you want i'm not going to spend a whole lot of time but the important part here is you want to select the size that you want your widget to to be so we need to switch this over to options menu so switch it to options widget and then well maybe that's not such a good idea let's leave it as main menu widget just so we can actually see it first and then we'll switch it later so figure out the draw size that you want so i'll just say like 400 by 200 because you can make them all different sizes like they don't all have to be the same size so maybe we'll go with something like this for the options and then we need to kind of straighten this out a little bit so let me select the widget again and kind of straighten it out there we go something like that and then now that we have that we need to go and make our other one so again i'm just going to alt drag this guy and i think i had the credits somewhere like up here so just let me move this around something like this i kind of had it like attached to this little support thing here and then oh gosh what did i do oh i alt dragged the widget okay we don't want to do that because i accidentally added a separate widget to that widget so delete that so make sure you have the actual actor selected and then we want the alt drag that didn't work either alt drag why is this not working oh because i have the scenery okay sorry i'm like choking here so alt drag with the actual actor selected there we go okay now it created a full copy of it which is what i meant to do the first seven times and then we will put this up here and i'm just going to kind of throw this in because i don't want to spend a lot of time on this and just kind of move the camera over here something like that and then again i'm going to change the size of this one to be like something more fitting so maybe like 600 that's too big 400 by 400 like that and so and then we'll just kind of scoot this over a little bit so it's inside of this brace thing okay and we'll just pretend like this is like this is correct okay so close enough all right so now that we have our three things in place let's actually name them so their name something meaningful so let's select this guy and then up here let's name it to um made menu and then this one we will name options menu and then this one we will name credits menu okay so the next thing we need to do is make it so that we can well i guess we should probably create the options menu and the credits menu real quick so let's go to widgets and then open up the credits menu and then inside of here let's just add something real simple so let's leave this canvas panel because we want to have a border and then for the color of the border i'm actually going to copy the same color we used over here in our main menu so let me select this border and then i'm just going to say copy to copy that color and then we will just paste it here oops we can't paste it there we need to paste it uh here i think paste there we go and then it's important that you set the this up here to custom and then you set it to be the same size that you set it to in the world so for the credits what do we do for the credits so the credits is set to 400 by 400 so we want to also set this to 400 by 400 just so we can have an idea of what it looks like and then we just i'm just going to add some really simple text here so we'll add a canvas panel and then on the image panel we'll add some text and we will set the text to be top middle anchored and then we need to set this to 0 size to content and then 0.5 on the x and then maybe add a little bit to the top so it's not touching the top so something like that and then for the color we want to use that brown color so i'm just going to go back to my uh where was it my main menu widget and then let's just copy the color of uh we just copy this color this hover color because that's close enough copy that guy and then under the color and opacity we can paste that's network paste why is that not working copy this is the right color right yeah and paste okay so i guess it doesn't want to do that another way to do this is if you come over here and you click on it you can actually drag it up to the top here and it will save it so let's just do that and then we'll come back here and we will select it although i don't want the alpha to be 0.5 i want it to be 1 so it's there's no alpha to it and so that looks like that and then we will just call this the credits and we want to add our back button so we'll add a button and again use the button widget because that's the one that we created that already kind of works for us and we want to drag that onto the canvas panel and we will add for the text we'll just say back and then we want it to size to content and we want to anchor it to the bottom middle and then we just need to zero out these guys and set the alignment to 0.5 and 1 and then that looks pretty good and so now we can come back here to our level and we can select the widget and we can change this one to be our credits widget and there we go and again this will say text block down here because the button is like dynamic so it's not going to show up as back whenever you're looking at it in the level but once you start the game it will be fine and then let's also just do the options menu just to fill that one out so let's open up all right first of all let's like take a look at what size it was real quick so this guy is 600 by 200 so let's open up the options widget set it to custom set it to 600 by 200 and then we can go ahead and fill this out as well so on the left here again let's just add a quick little border and then for the color i'm just going to take this color as well where's this border i'm just going to open this up and drag this guy up here as well just to save it and then press ok and so for the border we want to select this guy for the color and then we want to add text oh we need to add our canvas panel first oops canvas panel and then for our text add that onto the canvas panel set it to top middle and then zero it out size to content 0.5 alignment we'll add 10 to the y again and then we will call it options and then for the color we will select our dark brown color and again we need to set this to one and then we will add our back button oops our button so we'll drop our button onto our canvas panel oops that's the wrong button we want our button widget drop it on and then we'll say back size to content anchor it to the bottom middle zero these guys out and then alignment we want 0.5 and 1. okay and so the only thing we need to do now to finish the options is come back out here select the widget and switch it to options widget okay so now we have i'm gonna save everything real quick so now we have all of our widgets done and they're all in the correct space so now the only thing we need to do is make it so that we transition between them we already have some of the code for that so it's gonna be pretty straightforward so in order to do that we basically need to tell this widget or this actor here that it links to both this actor and this actor up here right because it can go to either one of them so in order to do that we will go to our uh we will go inside of here so let's open up this blueprint for editing and then on the left here we want to add a variable and we will call this linked oops linked uh been used so these are all the menus that it links to and so we want to change this to a vp underscore menu 3d and we want to change it to an array and then we want to set it to instance editable blueprint read only and private and when we do that and we come back here to our world and we select it you'll see we can see linked menus over here and so we want to link it to the options and the credits so i'm gonna hit this twice and then in this drop down i'm gonna hit options for zero and credits for one and the reason i'm doing that is because options shows up first because we have play game and we have options and we have credits and we have exit right so we're going to have options and then credits and that order because the order here does actually matter and then for this one i'm going to do the same thing so i'm going to select it i'm going to only add one because this one only links back to the main menu right because we can only go back to the main menu so i'm going to select main menu and then for this one i'm going to select it and this one also only goes back to the main menu so if you have more in your game you can set them up this way and they just need to have references to whichever ones they link to and then inside the blueprints we can handle switching between them so just make sure you have all of the references set up all right so once we have that set up i guess let's go into our widgets and handle the clicking of them because the clicking of them is going to require this information so let's go to our main menu widget first of all we'll do this one first so in the graph um we want to override some events here for when we click the buttons so i think we can just delete all of these because we don't actually need these and then close that and then on the left here we have our buttons so the play game button if we click on it we can hit this little on clicked event and the reason this is here is because of the event dispatcher we made inside of our button if you go back to our button you see this on clicked that's what's showing over here and if you remember this gets clicked whenever the button gets clicked or this gets dispatched whenever the button gets clicked so if we hit this this event will run whenever the play button is clicked so when that happens we're just going to say open level and we can just open whatever level we want so i'm just going to open the first person template level let me go find what it's called here all right so i'm just going to copy this name and you can open whatever level you want but i'm just going to open this one so that's basically that um okay so the options button that's the next one so we'll click on that and hit the plus button so for this one we want to use that base event dispatcher that we created at the beginning where we transition to linked maps so if i right click and say transition right here call transition to linked menu oh and we forgot to add a parameter so actually delete this real quick we need to modify it so back here and the i think we closed it so go back to the um where is this 3d menu widgets we want to open up the 3d menu widget which again is that that base class and then on the graph tab we want to select this event dispatcher and we want to add an input parameter of type integer and we will call this the menu index because it needs to be able to specify which menu it wants to switch to and so let's compile and save that and then back here now in our main menu we can call that so again we'll say call transition to linked menu and then it takes in the menu index and so this menu index needs to correspond with whatever you have set up inside of this array so you can see our menus zero is the options and one is the credits so when they select options we want to transition to index 0 because that's the options menu so we will just leave this as zero but when they select the credits button so we'll add that we want to do the same thing except we want to pass in one like so and then when they select exit we just want to call quit game and then for the player we can just say get player controller and there we go so let's just run this and make sure everything is working actually i don't think it will because we didn't hook something up but i'll just show you that real quick so hit play come on alright so we smoothly transition if we hit options or credits nothing happens which again i know why we just need to hook one more thing up exit should exit which it does and play games should launch us into our first person game which it does okay so the reason this isn't working is because all we're doing is we're dispatching this event but nobody's actually bound to this event like nobody's actually listening to this event which is why nothing is happening so i forget actually where i do this let me double check all right so yes so in the bp menu 3d we need to come back here and we need to bind to it in the begin play so we can drag in our widget because that's the thing that has the event dispatcher that we care about and we need to say get user widget object and that gets the actual widget from it and then we need to cast it to our specific one so we'll say cast to menu 3d widget and then from here we can just say if you drag out this you can say assign transition to linked menu like so you might have to type bind i know it doesn't show yeah find event like bind and assign do the same thing one of them just creates the event for you and sometimes the sign doesn't show up not sure why i think it might be a bug but if it doesn't show up you can just find bind so we'll just use bind i guess and so what this is doing is it's basically allowing you to bind an event for when this gets called and remember this gets called whenever the button's pressed so if we drag off this we can say add custom event and i'll create an event with the matching signature and so we'll just call this something like on transition between menus something like that and then it's passing to us the index of which one it wants us to switch to so all we need to do now is we need to call a transition to with the appropriate menu based on this index so to do that first thing we want to do is we want to make sure that this index is a valid index so we can drag in our list of menus and we can say is valid index and if it is so we'll do a branch so if it is then we basically just want to call transition to on the menu at that index so i'm just going to scoop this over and then we will copy this guy and say it a copy and the index is going to be this index that's being passed in so we will do that and then we will call our transition to so let's just drag in transition to and we will hook that up like so and there we go all right so let's give this a try now and things should probably work no sign of something up so let's press play alright so we smoothly transition in and then we press options and we go over here to options and then we can hit back oh we don't actually go back um oh right because we didn't actually hook up the buttons yet so we need to do that as well so in the options widget we need to go to the graph and we can delete all this stuff we don't actually need it and the button we want to say on clicked and of course when it's clicked we want to call our transition call transition to linked menu and we want to just pass in 0 because remember 0 like it's the only index in the array if you click on this guy it only has one index zero which is the main menu so we just want to say zero there and we also need to do the same thing for the credits so go to credits the graph delete the stuff and then say on clicked and then we'll just say transition and zero and there we go so you should see how easy it is to just like hook up more buttons and transition between menus it's super simple so we can say options and it will bring us here and now when we press back you'll see it brings us back to the main menu and then credits will bring us up to the credits page that will bring us back and there we go so it's all working so i did actually forget one thing uh i'm just editing this in at the end of the video i actually forgot one little penny thing so you notice when you press play you can actually hit this back button over here which we don't want and that's just because we forgot to set the collision to disabled by default so to fix that we just need to go to the bp menu 3d and then right here in beginplay after we do this binding we just want to say set actor enabled collision and we want to leave it as false and now make sure that all the widgets are disabled by default so now if we press play you can see i can still select these guys but now this one's disabled so yeah continue back where we left off now in the other video just to kind of give you guys an overview of the whole system again just in case you're still a little bit confused like so if you wanted to add a new menu like literally all you do is you just you know copy one of these guys and then you put it wherever you want and then you change the widget to be whatever widget you want and then you go to the details panel and you select this guy and then you say whichever menus it's linked to so if you want it to go back to the main menu then you just have main menu here if you wanted to go somewhere else and you can add as many links as you want and so the only caveat thing is you got to make sure that inside of the widget that you have here that you know zero transitions to the same like they have to correlate so the zero inside of the details panel has to correlate with a zero inside of the widget just like we have set up for the main menu so yeah so that's basically it if you guys enjoyed the video i'd appreciate a like and subscribe i also have a patreon if you guys want to support me there it's always super appreciated and i also have a discord that's just filled with a bunch of game dev people basically it's in all that information is in the description of this video so feel free to check it out otherwise i will see you guys in the next video thanks

Channel: Reids Channel

Views: 119,956

Keywords: Unreal Engine, Unreal Engine 4, Unreal, Unreal Engine 5, UE4, UE5, Tutorial, How To, Blueprints, Reids Channel, Reid's Channel, 3D Menu, Bioshock Infinite, Bioshock, Camera, Menu, Moving Camera, Traveling Camera, Main Menu

Id: 4sxxe9_w9Zs

Length: 47min 21sec (2841 seconds)

Published: Wed Dec 09 2020