Host + Server Browser + Join Widgets | 03 | Multiplayer Battle Royale | Tutorial | Unreal Engine 5

hey guys quick heads up before I start the video the link down below takes you to my patreon where you can download the project files for this video also get access to my premium tutorials and in-depth courses where we build games together from start to finish check out my patreon below gain direct access to years of experience so that you can start working on your dream game tomorrow all right guys welcome back to a new video so in the last video we set up all of these levels we set up the logic that we can go from the boot screen to the main menu uh and we set up some boot screen UI and some main menu UI so to quickly show you if I start the boot screen here hit play we'll see a nice boot screen animation and then we are in the main menu where we can click these default buttons that we have made and we can click exit to quit the game so in this video we are going to continue on this and we are going to be making the actual main menu uh widgets so uh we're going to be creating a create screen widget also known as a host screen widget and we're going to be making the server browser widget so let's go ahead and make that so inside of the main menu folder uh we see that there is a base button let's actually make a separate folder and call this base and inside of the base folder we want all the base widgets that can be reusable throughout our game so uh when moving around these types of uh Widgets or any assets in our engine let's say I have the character animations I just drag in this to other folders then sometimes you will get that your redirectors so if you right click on the content folder sometimes your redirectors will get messed up because they will have uh uh wrong references and pads to to to these assets basically so in order to ensure that you always have the correct uh pads and references like that we uh every now and then when moving assets around we want to right click to content browser click on fix up redirectors you'll see unreal do a tiny little thing or a bigger thing if you got a massive project and then hit save all and that's it so first off we're going to create our little uh uh host game screen so for that inside of the main menu folder here we're going to make something and call it sessions and then we're going to open this one up and we're going to create a widget here user widget called WB create game so that's the first one that we want so to get started here we are first going to be dragging in a border then we're going to click for full screen theal screen again and then uh inside of the Border we are going to drag a little vertical box and then the vertical box we're going to give it some space all around so we're going to give it a padding of let's say um 20 so that it has some space all around and then the Border let's actually wrap this one so if you you go right click wrap size box and then we're going to give it a default size so the width let's do 400 and the height let's set it to something like 600 for now this would kind of be the widget it's a bit tall maybe let's do 400 by 500 for now then we click on the border we're going to give this a different color so make it something gray like this something dark Mar create there we go okay next up inside our vertical box we're going to put some text and we're going to call this our create game text so that it shows what this widget is all about uh and then what we need is uh we need the ability to set how many players you want to host and we need the ability to set whether you want to use l or not and then we need a button uh to actually click that we want to create this session so let's go ahead and set up a text box in this case so drag in a text box here then we're going to right click the text box and we're going to be wrapping it with a vertical box on top of this text box we want some text so we're going to drag some text on top here and we're going to make this one say um max player amount we're going to make it a bit smaller something like 16 then we want some spacing in between this text and this uh input box here so we're going to select the top text and get some padding down let's say 20 we also want some space in between here let's say five and then we see that our editable text box became very thin so we're going to right click it wrap it with a size box we're going to give it a size of let's say a height of 40 so that we got a nice size to work with Okay so that's it for this then we're going to select our editable text box and call this the player amount text uh player Mount uncore text box we're going to set a hint text here of let's say uh 20 players and then we can barely read it so we're going to click here make it all the way dark click here make it all the way dark click here make it all the way dark we're also going to put some more padding on the left let's say 10 padding and we're going to size up the font to 15 uh or actually let's do 14 hit compile and save then it might mess up your font if that happens then we need to select the font family here if you don't see it click on the on the wheel here click on show engine content and then select the Roboto text then we can hit the wheel again and hide the engine content again there we go okay so that's great next up we want another uh one of these vertical boxes so we're going to right click it and duplicate and we want some space between these vertical boxes so we can select the first one do 15 space in between or actually let's do 20 now this time we want the text to say um uh session type and then what we want here is not a size box with an input box but we want a check box so what we're going to put in is a horizontal box next up we will put in a size box and then inside of the size box we want a checkbox and then we want some text next to the checkbox so in horizontal box we want some more text and we want this to say l question mark whether or not we want to enable lwn then we see that the checkbox is very small here so if we select it we can give the default height and width of let's say 40 and then the checkbox itself we can set it in the center like this uh and then we see that it doesn't actually skip scill up the reason it doesn't scale up is you probably have to do it with these skills over here so if we click here then we can do 25 by 25 yeah that's better so let's make it 25 by 25 copy this one actually yeah copy this one and then we can set it to all of these sizes so hold shift right click to copy and then shift left click to paste it so now we're going to just paste this size everywhere just like that all right uh and that's it now we can actually rename it so the checkbox we want to say enable lawn question markor checkbox and this font is very big so let's make it something like 16 I put it in the middle here okay and that's that it doesn't look the prettiest but you guys can style all of this yourself I'm just showing you guys the functionality of how to make this multiplayer game then the last thing that we need is our button so we already made these base buttons so we're going to drag one of those in and then we want some padding in between here as well but let's do this time something like 35 padding and then we see that the widget kind of got its own size by now so if we then select the top size box we can then remove the height over right just like this so that it will basically just fixate its height on whatever the actual height of the content is now we do see that our button becomes very uh thin here as well so we're going to wrap that guy with a little size box and give it also a overwritten height and override height I mean of uh let's say 40 and we want the text in this button to be create game and this is fine all right so that is this widget we we can then go ahead and start to code this widget uh but before we do that let's set up some more widgets so let's actually set up the whole server browser stuff so that we can also join so for this we're going to click on the browse here to bring us back to where this widget is located then we're going to duplicate this whole widgets cuz there's a bunch of stuffs in there that we can reuse and we're going to call this the server browser just like that and then we're going to make a new widget as well and we're going to call this this one the server browser item so underscore item so this this will basically be the results that we will find in the server browser so if you click in the server browser if you click refresh then we want the server browser to populate itself with these children so uh let's go ahead and open up the server browser and actually create the UI that we need for this so we do not need this session stuff we do also not need this player amount so we're going to remove this one as well we want to change the textt here to server uh browser or actually let's call it find Scheme right because that's what this widget is all about um and then we do still want a button but this time we want the button to be uh let's put it right next to here so that we can find refresh the server browser that's what we want to use this for so to do that we're going to just remove this one we're going to right click the find game here and then wrap it with a horizontal box then next to the text here we want to have the refresh button so if we go to user created drag in our base class and now we're going to make this say refresh just like that we want to put it all the way to the right so if we select the text we can then click on fill to push it over and then we do not want it to be this uh uh basically not wide we we don't want it to be this width we want want it to be way wider so we're going to put it to something like 600 or actually let's do 650 hit compile and save okay so when we click refresh we want a server list here to actually populate with those children that I was talking about so with server browser items and those are the sessions that we will find that we will be able to join so uh inside of the vertical box we're going to need ourselves a scroll box over here just like that and then the scroll scr box we want to always show the scroll bar so let's always show that and we want to rename this one to say um uh server listor SB which stands for scroll box let's make that a variable and then we actually want to rename this button here as well to be our refresh uncore button so there we go then we see that this is not really a big widget so what we do want to do in this case is give it a default height cuz this way widgets height is not going to be determined by the content like this cuz that would mean that the widget would actually scale in real time so this one we do want to give it a default height of let's say something like uh 700 might be a bit big what about 500 yeah this is fine and then if we select our server list then we do want it to fill so that it's automatically filled in just like that that's it for this then we are going to create those children that go inside of here so if we go over here back to our content browser then we can double click the server browser item and let's go ahead and make this so first of all we are going to need a size box so we're going to be using a default height for this let's set our uh screen to desired on screen and give this a height of 40 to start with we'll see if that's a nice height in a little bit now we're going to drag in a border we're going to give that a color so I'm going to use uh this color here first so if we click this control copy then go over here then we click here and contrl paste now we don't want it to be the exact same size as the server browser because then we won't be able to see it so we are just going to be making it a bit lighter that would be nice hit compile and save and then inside of here we are going to need a horizontal box and we're going to fill this horizontal box with some items so the first item that we need is going to be our text and we're going to put all of these items inside of a size box to determine a width for us so first of all put a size box in here and I put some text inside of the size box and we want this text to say session name CU that's what it's going to be displaying and let's make it a size of 14 and make sure that this whole size box is actually centered in the middle uh and then the size that we want to give this one let's say that we want this one to be 150 or actually a bit bigger let's say 350 next up we're going to duplicate this size box than this one here we wanted to show check out cact center right now steam in Early Access it's a very fun multiplayer video game cheaper than the starbig coffee so if you want to have a good time with your friends or strangers click that link down below and I appreciate every single one of you and enjoy the rest of the video [Music] bye we want this one to to show our player amount so let's type in uh like 8 out of 20 so that's how many players we have inside of the session and behind this we can still type players so eight out of 20 players then we want to show our ping so our latency so we can type uh 100 Ms let's do like this 100 Ms we don't want that one to be this big so let's put this to a size of uh 100 50 and then the player size here actually let's put that to 250 maybe 200 something like that and then the last item that we're going to need so duplicate the size books one more time it's not going to be text but you guessed it it's going to be a join button so drag in our base button again and then we're going to make this say join game um yeah and that's pretty much it so we do see that we might need a bit more padding all around the board so if we select our horizontal box then we can say let's put a default padding of eight uh and since we have the height here we can actually now also conclude that we don't want to overwrite the height anymore because it will automatically be determined based on these elements right now so that's it for this one um and then these items are going to be going into this list and we do want some padding in between these items here uh but before we do that let's go ahead and make sure that all of these items can be set in runtime so session name first of all let's make this a variable and then make it call it session name text promote it to variable then the player amount here we're going to call it the player amount uncore text promote this two variable then our latency or Ms or what do we call it our ping uncore text we want that to be a variable and this is going to be our join gamecore button hit compile and save all right then we go back to our server browser and let's try to put one of those children inside of here so if we got this the item here we can drag it in the server list to preview it now obviously we see that it gets cut off a lot and that is because uh because this we have set a width here so if we remove the width here then we'll see that the widget automatically adjust itself to the size of this child uh which is better but then what we don't want is that if we don't have a child that it looks like this so to fix that we're going to set like a default width and then it's just going to change itself a little bit so we're going to set a minimum desired width I don't know really how much uh typically you would actually look at this child element and you would calculate all the padding here and then come to an actual size that it would be so you can do that as well we're basically just uh going to take a look here at all of the padding so we got eight on the left eight on the right which makes 16 and then we got 350 so 350 + 200 makes 550 plus 150 makes 700 plus 150 makes 850 + 16 so then we got our size so then we can go back here so the minimum desired size one was uh what was it 850 + 16 which makes 866 so right now if we drag in another of the server browser items in here then yeah it still sizes up a little bit but that's fine the reason it sizes up is because obviously this widget also has its default padding here and here and here so you would also need to add the paddings of all of this to make it actually perfectly sized so for now let's just call it 900 I call it a day then we're going to duplicate this item to see what that looks like and then we see the problem that I talked about earlier so we do want some pading in between here since these are items we cannot select these and just do petting here cuz this is all going to be uh done in runtime this is all going to be dynamic so we cannot just set it here so we remove these children again and then hit compile and save then what we want to do is that we want to wrap this child with another little size box and then once we do that and click this second size box we now see the option to do some padding so we want a bit of padding on the bottom of let's say 15 so now we got some space in between if we then go back to the server browser we can drag in our item and we will see that there is some nice padding in between the items so this is basically what it will look like if you go to the server browser click on refresh and then over here you will see your items appearing and then you can basically join the sessions and this is what it looks like when you want to create the sessions so uh before we start and code this I I want to do that in the next video we are going to be adding them to the main menu now so that the whole Loop is round so if we go back here to the content browser go back inide our main menu widget then we want to make it so that when we click create game we actually see the create game panel and when we click find game we want to see the find game panel now in onrun there is plenty of ways to do this but we are going to be using a simple widget switcher so uh what we're going to do is that we're actually going to be wrapping this whole vertical box with a widget switcher so to do that we drag it into the viewport here and then we're going to put the vertical box inside of it and then this guy is going to be the one uh now responsible for everything so what we can do is we can actually anchor this uh widget switcher to be full screen so let's do that so we go uh control click shift click then we see that um it has a weird name so let's just rename it to widget switcher compile save now we see that our widget is a bit messed up in here so if we click the vertical box we then want to align it to the left and to the center and then we want to give it that padding that I had before of 100 again so there we go uh and then uh yeah so this is going to be index zero of the widget switcher now the next one is going to be our create uh game screen here so we're going to grab our user created widget create game screen drag it into the widget switcher it is now located here and we're going to do the same for the server browser drag it into the widget switcher and it's now located here now if we start to click these items it will automatically switch so that we can preview what this looks like so for the create game screen we want it to be centered so we're just going to take Center just like that and for the server browser we want it to be centered as well just like that and then we do see that we now lost our controls on the left here so we do want to get our controls back so what we're going to be making is a little button under here for both the the server browser and the create game screen to take us back to this first screen here so let's go ahead and do that we're going to go to create game screen and then we see that we have this whole item here we're going going to wrap this whole item with a vertical box and then we're going to drag in our base button and it needs to have some space so we're going to select item here the size box give it some padding let's say 15 and this button can be aligned to the left and we want to say back or you can also say return depends on what you prefer uh I prefer back so then we're going to rename this button to back button and then as we learned in the previous video we can then uh basically have this buttons on click event just like this but this time we want to return this on click event one layer back even more to the main menu here so that we can actually have uh an event over here for when we click this back button so we're going to go from an event dispatcher to another event dispatcher to be able to uh uh get that communication all the way back to the main menu here so we're going to make a new event dispatcher and call this onclicked back uh uncare button and we're going to drag that in and attach it to the onclicked of the actual base back button and then hit compile and save there we go now we need to do the same for the server browser so we're going to wrap the server browser in a vertical box over here then we're going to drag in uh a base button there we go we're going to put some padding in between here again 15 we're going to make the base button say back again we're going to rename it to back button we're going to put it to the left we're going to go all the way down click on onclicked make a new event dispatcher onclicked back button hit compile and save we want to attach this event here just just like that and to be more clear cuz now we call this one on click back button and we did the same for and we did the same for the create game screen so we actually want to give this a bit of a clearer name so let's say one clicked back server browser and then we want the one for the host screen to also say that so we want this one to say onclicked back um create game so so then we have a bit of a difference here all right we can remove these events put this nice to the top that's it now back in our main menu uh we then can click on the create game screen and we see the back event and we see the back event here as well so now we go ahead and code these buttons to actually go and switch to the corresponding widgets here so when we click on the create game button we want to get that event and then we want to do something so what is it that we want to do well we want to get our widget switcher so this one and that is this one over here we grab it drag it into the graph and then we want to set the active index so set active widget index and then the widget index that we want to set it to when we click create game uh so this one is that we want to set it to wind uh to index one so in unreal indexes a zero count right so this is index zero index one index 2 so when we click create we want to go to index one so we put that in here and then for the find game button we want to switch it not to index one but to index 2 and then we also need to handle these back button events so for the create game if we click on the back button we then want it to go to index zero but also for the server browser if we click the back button we also want this one oh this one to go to index zero so both of these guys can go into the same event which would be index Z and then we can uh basically put a little comment around this and call this navigation controls and let's put it like this it compile save and let's go ahead and test this out so if we hit play we see the main menu the reason we directly see the main menu is because we got the main menu level loaded up so let's do it all from the boot screen we hit play we see our little animation we then go into the main menu I'm going to click full screen now I can then click on the create game screen which brings us here I have the ability to type I can click on this set L checkbox yes and no I can click to create button but nothing happens yet I can click on back to bring a us back so we can do it like this and then I can click find game here and we got our beautiful server browser and we can also go back here and the last thing is that we can click the exit button which quits our game all right guys that is going to be it for this video I hope that you enjoyed this video if you did then uh be sure to check out the project files available on my patreon link down below uh in the next video we are going to actually be coding these widgets so we're going to be making sure that we create a session we want to find sessions then join sessions the sessions will bring us from the main menu connected to other players inside of the Battle Royale and then once we are in the Battle Royale we also want to have the functionality to leave the session again and we're also going to be handling traveling errors and network errors for when the clients or the server has some uh difficulties with his internet that we handle the disconnecting as well properly so that's up for the next video uh see you guys later and appreciate all of you [Music] bye

Channel: Kekdot

Views: 8,271

Keywords: Blueprints, Unreal Engine 5, Unreal Engine 4, Steam, Multiplayer, Game, Lobby, Game development, Unreal Engine, UE, Multiplayer game, Host game, Sessions, Advanced, Tutorial, Server browser, Online, Multiplayer Unreal, Replication, Replicated, MMO, Subsystem, Game Engine, Solution, Modular, Devlog, Listen server, Dedicated Server, GameMode, GameState, PlayerState, PlayerController, Widgets, RPC's, Player, Blueprint, Chat, Course, Battle Royale, Shooter, Third person, Gun, Vehicle, PUBG, First person, Loot, Spawn

Id: CUsRI1mvnPE

Length: 28min 20sec (1700 seconds)

Published: Thu Oct 19 2023