How to create a character selection - Unreal Engine 5

[Music] welcome in this tutorial we're going to be going through how you can set up a character selection it's going to be fairly simple but still be both uh scalable and modular and and will be very easy to to build on further and is pretty clean as well doesn't have a whole lot of code and no knickknacks so what we see here is essentially the the created crafted character selection that we have we simulate having a main menu because we don't actually have a main menu so we just throw out the character selection immediately and we have three different characters to select from and once we choose one of these characters we're going to make sure that the game instance keep this information so it persists for us so we can travel to a completely different level and then we'll have a unique character depending on which character that we chose which then spawns in on that level so that's what we will be creating today so here we are inside of an UNR engine 5.3 version project uh the only thing that I've done in this project is that in the content folder I have created a folder called character selection and added some images to use for the character selection this is based on or made from a third person template meaning that if if we were to play we have a third person character that we can run around with doesn't really matter what kind of project you have uh it it is completely indifferent to it essentially um but yeah so uh starting off what we want to do we want to create a character selection screen so let's start off with actually doing that so we'll go to user interface and widget blueprint and we'll click a user widget we'll name it w character select section something like that so this will represent the widget that we will present to the player uh where they can make a selection of characters essentially so inside of this one we're going to keep it fairly simple we're going to be uh in in this case again uh canvas panels should be used sparingly uh I'm just using this for Simplicity sake here um to to display how different things are going to be organized in relation to each other so inside of a canvas panel we want to have uh our uh different characters to select now you could start off with doing something like uh taking uh buttons just placing buttons here and having them be certain sizes for the different characters something like that copy paste have to buttons and then hook on to these on click events and then just from here you just write your code here and then duplicate your code over here this this is a bit of a rookie move of course because not only will we get duplicated code we will also be limiting the scalability of this character selection already uh so we don't want to do anything like that so we're going to get rid of both of these buttons and is Click events because we don't need them like so what we're instead are going to do to keep our modularity up is create a widget for our actual character selection individuality uh so we'll make another user interface another user widget we'll call this one W character select so this will represent one selection of a character opening that up uh we can now structure how we want this to look so um we we'll keep it fairly simple we'll we'll do something like a vertical box so that we can place a few different objects within it um and and have it structured in a way we want it uh we could put a size box inside of it so we can determine a little bit how much space we want it to take up so the size box we could already override the width and height and do something like I don't know 300 pixel width and 500 pixel height something like that and then we do click over here and desired on screen and we'll get get the actual um screen space it will be taking up once it's done then inside of this we can put something like an overlay an overlay will allow us to put objects uh with different positions within them so that we can have this space out with uh different parts in different areas if we wanted to later on for now we we don't really need uh too much of this but we're going to have an image to begin with uh an image image in the overlay to have a as a visual representation for the images that I imported so if you want to use an image here you can do that again um the the representation of of how your character selection is going to look uh doesn't really matter all that much you you could have a a turntable of characters you could have a bunch of different images for character selection the visuals of it is not that important there would be some some minor differences here and there of course but it's not the main focus on this so for now we're going to take this image we're going to fill it in both axes that way we'll take up all of the space and we're going to add a button to this uh so adding a button will allow us to uh make sure that we have an event to interact with on this character selection we'll make sure that it's also covering everything so now it's gray on top of the one which means that it's a button on top of the image which is what we want we want to go to background color here and set the alpha to zero so that we see the the image below so it will essentially be a invisible button on top that will be listening for clicks uh for us to interact with in addition to that we can also take a text or something like that and we can add it to the vertical box and we can uh Center this and we can call this something like um character selection text we'll click it as a variable we'll go to the image and we'll call this uh character selection image so now we have two different variables that we can interact with in here so uh moving on we want to actually be able to fill these things um so what we'll do is we'll go to our graph and we want to remove our pre-construct and we want to remove our tick uh in here we want to essentially say we want to set our values to be whatever uh character that is supposed to be here so how do we get that character because now we have made a widget that is uh if we do it like this we compile save make sure to compile and save this one as well and in our character selection one we can go to uh user created now we can drag in a a character select for example so if we were to drag them in like this this is what they're going to be looking like right now if we take size to content they're going to be having the the size that they are actually going to be um but what um what we want inside of these is we want an ability to easily populate data inside of these character selection widgets and how we can do that is by expanding on modularity again and scalability and create a data table so we'll have a data table as sort of our lookup for the information and then we'll just reference these widgets to have that data table reference so that it knows a I'm I'm this specific thing so to start off we need to create a uh structure for that so we'll go to Blueprints and we go to structure call this sore character sele there we go and to this we want to add a few different variables we can add two of them for now the first one we want to add is going to be of the pawn class reference so we go to pawn and get the class reference which is the purple one this one will be our uh selected character class uh the second one we can have something like a description so we can have the type text so it can be localized as well if you wanted to and we can call this uh let's just call it description the third one uh we can have as our image that we created so we'll go in here and we'll type in uh texture 2D make it an object reference and we can just call this image now with that done we have our structure completed so we can close this we can open up our content folder we right click and go to miscellaneous and we go to our data table and we say that we want to have a row structure of the character selection we just created we click okay we call this dtore character selection so in this case we want to have three different character characters we want to have Luke Leia and Vader as our three different characters so let's click on the first row and we call that one Luke and as a class we don't have one right now so let's start creating some classes um we'll open up our content folder go to third person uh folder and inside of blueprints we have a third person um character blueprint um in this case let's assume that we have something like U three different characters that all have similar Behavior but slightly different Behavior so we have um this as our parent class with all the unified behavior and then we have some some child classes for all the different classes that we can use so uh in this case we'll just create a child of this blueprint class we can call this um bpor luk and we'll create a duplicate of that one and call that one layer and we'll create duplicate of that one and call it Vader so now we have three different characters that are children of the third person character blueprint okay these characters now just to make them a little bit different from each other we're going to go into the Leia one and inside of this one if we open the blueprint editor and the viewport we can see that it looks like this to make it look a little bit different we can take one of these materials and choose something different Maybe Pink for this one so the pink one here will be Leia in this case we'll make sure to save it and close it down this is just to make it visually different so we can see that we're actually getting the characters that we're choosing later on so look we can go and let's change the first element and go for something like I don't know what colors do we have let's take something yellow so that will be our Luke character and and lastly we'll take our Vader character and we'll change up uh the first material and we'll pick something that's uh black like this viewport so this is what Vader looks like so now we have three distinctly different visually looking characters at least so back in our data table we have a Luke now we can say that we want to have BP Luke and we want a description that says well Luke we can choose an image in this case I've imported luk Laya Invader texures so if you want to do the same you can do the same or have whatever you want to have in yours uh we'll make the second character which is Leia we're going to choose the Leia blueprint we're going to have a description that says Leia and we're going to have an image that is of Leia lastly we're going to rename by pressing you rename by pressing F2 if I didn't mention that Vader and then you have the Vader character and we call it Vader and then we have Vader image over there so now we have created the data table as our sort of lookup for our information so now we're done with that so now we can close that down going back to our character select now we want to read out this data so what we want to do is create a variable to allow us to get this data so we'll create a um character data let's call it and this is going to be of the type data table rope handle and saving it like so and inside of this one um you can see that we can choose a data table here and we can choose a row name and the row name doesn't show up unless we choose a data table if we choose a data table like this we can see what values that we have available from that data table so to make this a little bit clean and uh avoid some code application we're going to be creating a function now to get this information um we're going to call this function uh just get data simple enough inside of this one we're going to be taking this character data and getting it and then we're going to say we want to break it and then we want to um right click and um get data table row like so and now we can choose which table to read and what row name to read um we're not going to be taking this data table and the reason for that is if we just choose it choose a data table here and a row name here this output here is a wild card it doesn't specifically know what information is inside of it if we disconnect the data table and make sure that we're using the character selection one this output row will be of a specific type and it knows that these are the different variables that it will have available as readable uh so that's what we're going to do we're going to have the data table hardcoded like this and then just have the row name Dynamic like so uh then we'll create a return node and we'll say that if we have found the row we're going to return the class the description the image and if we do not find the row everything is going to be blank okay now going back to our code we can say in our construct here we can say we want to get the data H just calling get data now or actually just dragging it out like so will give us a a function that is not pure uh which is just something that I prefer to do when you're just reading information you want to keep it pure generally so we're going to go back into the the function click on it somewhere like on the return node and then click the checkbox for Pure compile save go back it is now now a pure data uh reading node from here we can say that okay we get this information how do we want to make use of it well we have our character let's see character selection text we can get that variable and we can say um set um text so to set text node and it takes in a text so we'll just and in the description from here we also want to show the image so we'll take the character selection image and we set this brush by texture or set brush from texture is what it's called and it takes a texture so we'll send in the image that we have and now we should when this widget is created be uh setting these variables immediately uh however this character data information over here is currently local it only exists within the widget we want it to be exposed so it's editable outside so we'll click on the little I over here so it opens up that way it's exposed and we can show this by going to our character selection clicking on one of these widgets now you can see that we have on default here we have a character data available which is the data table and the the row name that we spoke about earlier so that's good so that means that we can just go in here and click on one of these ones and say that I want this one to be luke I want this one to be Vader and I want this one to be Leia and it's very easy to expand upon this also because later on if you want to add characters you just add characters and then uh add them to the data table add another character selection here so it's super easy to scale um from this we want to continue and actually have some functionality as well now so in our character select we created a button we created it and we call it 84 so we can rename this to selected button and if we go back to the graph actually here on um if you have the the button selected you can click on the plus icon and it will get an event for it so this means that this this character has been clicked so now we want to convey that this character has been selected now who might this be of interest to well we want to store it somehow because we're going to be taking this character from our um well supposedly our menu screen which is going to be one level and then into our first starting level uh so we will be opening a completely different level and opening a new level means that we will break down all the the information that is on this level and nothing will be saved until the next one so how do we make that persist between levels that we've made the selection well we have two different options one of the options is we can make use of save game we can actually save to to our save game that uh this is going to be our character that we have selected and then when we enter the New World We can load that save game another option is to make use of a game instance a game instance is the only blueprint class that lives throughout the whole playing session so let's make use of a game instance to store this information to reach our game instance we can go to edit and project settings and you can see that we have have here under maps and modes something called a game instance we want to create a new one because this one is the default One clicking on the plus will allow us to create a new one and we can choose to save it in the character selection just to have everything organized together we'll call this bpor game instance like so saving it so now we're inside of the game instance so we want to save the information here of the class so we want to say that uh selected character is a variable that we want to save and it should be of the type pawn and it should be of the type class reference because that is what we're saving um now we want to be able to access this information somehow we want to be able to set it from the character selection and we want to read it somewhere else so how do we do that then well we could do some costs and stuff like that or we could make it a little bit more clean and Skip some dependencies so inside of our character selection okay right click go to blueprints click create a blueprint interface we call it BPI uncore character selection double click to open that up and here we can create a function called um get selected character and then we'll create a um return from that one which is going to be able to type pawn and pawn class reference and we'll we say selected character class so this will be what we return from this we add another function which we call set Char um selected character and this one in difference from the other one will just have an input which we call the selected character class like so so now we have an interface where we can set an gets this information so that's all we need here so we'll close that one down we'll go back to our game instance we'll go to class settings we'll go to our implemented interfaces and see there's nothing here but we'll add one so we'll add our BPI character selection that we have over here which allows these two interface methods to appear we'll right click on the first one implement it say in set selected character we want to set this variable that we have over here compile and Save then we open up the other one and say opening graph and from here we say we want to return this character selection that we have so now we have created in our game instance the ability to save over this information and read it out when we want to so that's all we want from the game instance so we are now done with it and can close it down we can close the project settings as well so inside of the click here we can now say that okay we have selected a character which character have we selected well the one that we actually clicked on because this is a widget which represents it right so we will do the get data again like so and then we want to get our game instance so right click and get game instance like so and then we say in the get game instance we want to set selected character and the character class that it wants as an input is going to be this get data character that we have from the data table which means means that we're done here now theoretically but let's say we wanted to place the information here also that immediately when we select on a character we want to start the game this is normally not what you want to do you do it from the menu when you say like start game or something like that but in this case since I don't have a main menu created let's keep this a bit uh tutorial a little bit short by not creating a lot of extraneous things we'll just H add the functionality here so we'll create an open level by name and here we can name a level that we want to open currently we do not have a different level we only have the third person map here but if we go to our uh map folder in the third person you can see here we if we right click we can't duplicate because we're currently in an editing this one so we'll just go to file save current level as we'll go to actually let's put it in the same folder structure here so in maps and let's call this one other map or something so other map save like that okay so now we're in the other map but let's go to our third person map because this is what represents or is supposed to be our uh main menu it's representing I'm doing quotation marks in the air here you can't see that but I'm I'm totally doing that um so this will be our main menu and the other map is supposed to be our starting level so going back to our character select now we can say that the other level or the level name here is what we're going to be moving to so I'm going to type in other map this is case to make sure that you name it exactly like you have named the map or level um now with that done once we select now we should be traveling to that part so we lack the ability to interact with this so far uh because we don't actually see this this menu or this character selection at the point so to simulate that we have a main menu we're going to go to blueprint for our third person character which is the character that we spawn in as um on this third person map when we click play here this is the third person character because it didn't have any different colors right um so third person character inside of that one let's create a simple event just to have something that simulates uh our men menu being shown so we'll just right click and type in keyboard and one and so on the one key we're going to be creating a m main menu to show so we'll write click and create widgets like so we'll make it of the type character selection because character selection is the one that has all the selections inside of it um then we want to theoretically we also want to keep track of our uh player controller which we can see over here it's getting the controller casting it to player controller uh so we probably want to save this one as well so we can make use of it as a reference later so we'll just be right clicking here promote variable hooking it up like so so that it's doing all of this and then we'll call this variable uh player controller ref okay so now we have a player controller ref and the player controller ref is what we want to send into our character selection just to be neat tidy and organized like so uh and then we want to stop the input of the character because we're supposed to be a a a menu right so we're going to set the input mode to be UI only like so and our player controller is over here widget we want to focus on is this one we just created and then we want to add this to the viewport so we're going to drag off from here and add View Port like so hook it up and then double click to create a reroute node to make it a little bit tidier like so okay so now if we were to start playing we can see that by pressing one we get our character selection and we have our different characters that we created and we can see that it has read out the names Leia look inv Vader and the different corresponding images for these so so it all work as expected from the data table now and if we were to click on one of these nothing seems to really be happening we are uh out of control and uh currently can't do anything right so oh let's there we go now even though we have um set the the character in the game instance that we if we go to our character select we have set the character uh in the game instance we're not actually reading this out at any point now right uh what we want to do is essentially on when we get to this new map the other map we want to say that when we start playing here and this map is identical to the other one since we just saved uh when we were in the third person map we want to say that we want to play as that character um now this map doesn't know anything about it and what we could do if we wanted to be a little bit novice is we could go to uh the level blueprint and we could say something like begin play here we can like spawn our character and stuff like that but first of all you should you should almost never use the the level blueprint it's for very rare uses you shouldn't be using it as a crutch it usually leads to bad things and what we really should be doing is essentially just saying um make use of functionality that already exists in the engine right um in the case if we go over here to our world settings we are now in the other map we can see that we have a game mode override called BP third person here if we open up our blueprints in our third person character we can see that we have the BP third person game mode over here double click you can see here it's the game mode um the game mode here if we expand it a little bit uh this is the game mode that exists in both of these levels it's the default game mode and how this one works is this one can determine a lot of different things of functionality for you among other things the pawn that you want to be playing as um if we go to our functions here we can click on the override and we can see that there are a bunch of functions here available to us one of them is the get default Pawn class 4 controller if we click on this one we can see that we get the following we have a get default Pawn class for controller and then it's calling its parent to see what it gets as a class over there and then it says that this is the pawn it's supposed to be using in our case we can make a little bit of an exception here because if we have if we do a get game instance and we choose to get selected character we get this uh function node that we created earlier from our interface um we can say that we want to execute this instead and we can say that if this class is valid and have a branch for it like so then we can say that okay well if it is valid then we want to return let's actually do it this way so it's little bit clearer so when it is valid we want to make use of whatever we have saved in our game instance so we'll do it like so reroute a little bit and if it is not valid so we haven't set anything in the game mode we want to make sure that we're using whatever is the default by the game mode already right so we don't actually break anything like so so this game mode exists in both Maps so it's it's not going to be a problem in the case when we are uh when we're starting at the third person game map when we press play over here we're getting this character because this is what we don't have anything in the game instance right now saying that this is our select character which means we get the default one which is set up inside of the settings for uh this game mode which is uh going to be the third person character blueprint right here right but now that we're in here and we press one and we get our character selection and press on Vader you can see that we get teleported to the other map and inside of here we have our new character um which is black like the character we assigned in our data table so it has properly loaded in that character inside of here so now that works and we can do the whole transition thing right the only thing that remains now is that we don't have the control of our character when we come to the new level and the reason for that is because when we choose to in our third person character we set the game mode uh the the input mode to be UI only this still persists if we go to our character select we can make sure that we actually get that back just before we transition to our new level so if we just right click and get owning player like so and then we say that we want to set uh mode uh game only like so and then then run and then we have our menu and we click our character and we're in new level and we can run around like normal so that's essentially the whole character selection bit all wrapped up so let's just reiterate on what we've done we have created or imported our images to have for a character selection we have created our game instance which has a user inter an interface in it to allow us to save the variable of our selected character so we have a a get and ass set for it we have created that interface which is called BPI character selection which just has those two methods in it we created a data table that holds the information of the the different characters that we want to be able to select we have created a structure that has the the structure of data for that data table we have created a character select widget which is going to be the overarching one and of course this one doesn't look super pretty because it's just uh sketchy put together to show you the functionality but this is the the main character selection widget that you will be showing when um when you have your characters available to be shown and we also have the individual character select widget which is the the widget which represents one of these character selections and has a exposed variable for the uh what's it called um let's go over here so I can actually find it so the character data and the character data itself uh is used in the widget over here to read from the data table and read out the information that it wants to provide it back to us so that we can when the widget is constructed set that information in the form of text and an image and also when we click on it to set the the selected class inside of the game instance so that the game instance can keep that class alive for us until we reach to a new level which we open over here so I hope that this was sensible to you and and you were able to learn a lot that's going to be all for now keep on learning take care a big thank you to all of you who like comment subscribe and share my videos or through other means support this channel you are what makes this channel grow and become a resource for other people to learn from

Channel: LeafBranchGames

Views: 8,722

Keywords: learning hub, unreal engine, tutorial, unreal engine 5, blueprints, game design, game dev, unreal engine 5 tutorial, unreal engine 5 beginner tutorial, ue5 beginner tutorial, building user interfaces for unreal, engine ui design, user interface, design ui, design tutorial, building user interfaces, unreal engine user interface, Leafbranchgames, Good habits, Best practice, How to build menus and UI for Unreal engine 5, the right way, UE4, UE5, Reuse, Recycle, character select

Id: tNO4G4mYZkQ

Length: 35min 31sec (2131 seconds)

Published: Sun Nov 26 2023