How to make Multiplayer Chat | Replication Tutorial | Kekdot | 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 hello everybody my name is whim and in this video I want to show you how you can make a multiplayer chat in honoral engine so right now I got a basic uh empty project here and I want to take you guys uh through this step by step and in the end of the video we will have a functional multiplayer chat so first of all I got my empty content browser then I made myself a folder called cact chat tutorial and in there I made three folders that are all empty right now so a blueprint folder a widget folder and a level folder and this is just a default level that you get over here under basic so the first thing to do when we want to have a chat is that we need to have some basic classes set up here inside of the world setting such as a game mode and a player controller so let's create that one first so we're going to right click in the content browser go to blueprint class and then we're going to click on all classes and type in game mode this is the preferred game mode for working with multiplayer games as it comes with more handy events so we are going to use the game mode instead of the game mode base which is more suitable for single player games so we're going to click game mode hit select and then give it a name so I'm going to call it BP which stands for blueprint game mode chat so this is my chat game mode as a tutorial purpose we're then going to drag it in here to assign it to the world then we're going to make another class so click on blueprint player controller call this bppc which stands for player controller and then chat there we're going to hit save then we need to assign the chat to this game mode so that this player controller class also gets initialized whenever we hit play so to do that simply going to drag it in here and that's it so right now if we go up here we can click on play Standalone new editor Pi we get ourselves one window where we can simply fly around that's all it is so far um then next up we need to make some UI and then after we made the UI we're going to go back to the player controller where we then create the UI and handle the input of pressing enter to enter your text message then be able to chat so inside of widgets we have to make two widgets so we're going to go over to user interface widget blueprint user widget going to type in WB which stands for widget blueprint uh chat panel then we're going to make another one and that's going to be the actual chat message so here we're going to do WB chat uh and then let's call it a chat message so this is the parent widget and this is the message that gets populated inside of this widget now first of all we're going to open up the chat panel here let's make this full screen and then we are going to grab ourselves a canvas panel in this case if you already have a canvas panel and some other um uh UI layouts basically then that's all fine but this is just the basics of how to set up the functionality for chat so we're going to get ourselves a canvas panel next up uh is a border and then this is basically our chat panel here so I'm going to Anchor it to the bottom left hold control and click hold shift and click those controls that I'm seeing stand right here then we're going to put this guy out of the corner a little bit so we're going to say 50 to the right and then minus 50 up and we are going to give it a size of let's say 300 by uh hundreds that might be very small yeah that's actually very small so let's do 500 by like 350 Heights or now and we're going to style this then we're going to go over to the brush color make it some type of gray color like this and that's fine for now the next thing that we need is going to be a scroll box in which the chat messages appear and we're also going to need an input box in which we can type so to get that first of all we're going to have to put a vertical box in here uh once we get the vertical box we can give a little bit of outside padding here so let's say we have 10 padding all around the board that's this padding that you see here here then next up will be our uh little scroll box here so drag the scroll boox item in here and this scroll boox item is going to you can click here on always show scroll box then you see the scroll Box by default and this is going to contain all of those uh children basically so we're going to click here on the name of the scroll box and call this chatore scrollbox then make sure that you make this a variable so hit is variable true if you don't do that you won't be able to see the item over here so if you take it off and then go to the graph here then you won't see it and if you do turn it on then you see it appear over here which means we can drag it in which means we can code it such as adding children to it and the children that we're going to be adding to it are going to be our chat messages that are incoming uh next up we're going to want to make this scroll box fill so we want to make it fill all the way then we're going to get our input items under the input category we're going to get ourselves a little text box over here drag that into the vertical box and this will be where we input the chat as you see when you drag it in it becomes very uh uh like not tall basically so we're going to click wrap and then wrap it with a size box to give it a default height and I would say that a height of 50 is a bit big but a height of 40 will do the trick then we want a little bit of spacing between the chat and the chat box here so click on the scroll box and give it let's say 10 padding below and then this the editable text box here will'll get a weird name but it's already a variable by default as it is an input so unreal defaults it to be a variable uh and change this to chat input box that's simple enough hit compile and save next up we want to change the font here a little bit and we want to preview some hint text to show the user that they can chat here so over in the hint text we're going to type in enter chat and then as you see it's barely visible so to make it more visible we're going to click here on the foreground color and turn turn this all the way down this one here on the right to make it black we're also going to make the read only color all the way black and the focused foreground color all the way black as well then as we see the chat is a little bit small and a lot to the side here so let's give it 10 padding on the left and the font we're going to make it a tiny bit bigger so let's say 12 is looks nice for me um then when you hit compile on save it might turn your text into this uh so to fix that we're going to have to click here and select the font if you don't see any fonts over here click the little scroll wheel then go over to show engine content and there you should see some fonts to select so let's do Roboto uh and then after that worked then click here again and turn it off hit compile and Save once more and everything is now fixed next up we're going to make the items that are going to appear in this box over here so back to our content browser we are going to click widget blueprint chat message over here we're going to need ourselves a little let's say um a horizontal box because we want our chat to go from left to right then we're going to click on fill screen desired on screen zoom in a bunch this will actually show you what that size will be in the horizontal box we're going to need a text this will be the uh the name of the player so let's call this player name let's make it say player name and then we're going to call it over here player name unor text make sure that is a variable as we need to code it and edit it next up we're going to duplicate this player name and then this is going to be our text chat so actually let's call it chat text comes here so that is this and then the variable over here we call it chat message undor text so that's the chat message text then as we see there's no space between these guys and they're uh rather large so if we click on font we're going to change this to 12 and the message as well there we go hit compile and save now we want a bit of space in between here or perhaps some default Dots here so what I'm going to do is duplicate this one once more this does not have to be a variable we're just going to call it dos text and this will simply be the divider dots like this now after these dots so if we click them we want a little bit of padding on the right so let's say five padding on the right and perhaps uh two on the left something like that right all right going to hit compile and save uh then next up we want the ability to be able to set the player name and set the chat message so let's do that right now we're going to go over to the graph get our event constru event and then we grab in our player name and we grab our chat message text we're going to drag off of it and type in set text then we click this one hook it up just like that we're going to copy paste this event over here hook up the chat message text and then we're going to promote this one to a variable and we call this player name so this our player name variable and this one here promote that to variable to call it chat message now in order to be able to uh to set the values of this we're going to need to go uh and expose these so what that means is if you click the variable over here we're going to need to click on instance editable true and expose to spawn expose on spawn to true as well now what that means is once we are in the chat panel over here and then go to the graph what we're going to do here in a little bit is uh we're going to do create widgets because we want to create widgets which are the chat message widgets and we want to add them into the chat panel so in order to do that um if we then type in here for the class we can now select the chat panel message hit compile and save then out of here once we create them we want to basically set this player name and this chat message but as you see now there's no way of setting it except for behind here so here we can now say set chat message and then it will pop up or we can say set um player name and then it will pop up but what you can also do is expose them and they will appear here so I'll show you that if we click on the player name hit instance editable expose on spawn do the same for the chat message instance editable expose on spawn hit compile save now if we go back here then if we right click this note and refresh it you'll see that the names appear so now when we create the message items then the player name will actually be able to plug it in here and same for the chat message we're now going to leave the chat message alone for a little bit so let's go ahead and close that and then we're going to code the functionality for this actual chat widget over here so we go back to the graph then we want to delete all of these events because we don't need them this we're going to put it to the side uh and then what we need up next is the ability to actually type in the chat so if we select the chat input box here we're going to scroll down and we'll get two events here on text change and on text committed so when the text changed we then want to click on that event we want to save the chat that we want to submit so out of here comes the chat that we want to submit and then um if we click enter on the chat box that that is the event for on text committed so we're going to get that event as well so here we can see what the text is that we're committing and the method that we are committing so if we put this to this side a little bit then let's put this up here okay so for on text committed we want to get a commit method which is if we drag out of here we can then switch type in switch on text and then you can see that there are different types of commit methods but the one that we want is when we click enter what we can also do in that case is drag off of here and say equal equal enum and if it is equal to enter that means we want to actually submit the chat so if this is true we want to send the chat that comes out of here and those events we're going to code those inside of the player controller to be able to actually communicate to the player controller send a chat message and then retrieve a chat chat message now as a second thought we actually do not need to onext changed event as this on text committed event already gives us the chat as well so what we're going to do is delete this on text changed event for now hit compile and save we will leave this alone for now and then we're going to uh so this will be the sending of the chat and then this event right here will be the receiving of the chat so right now let's uh actually code an event for receiving the chat so we're going to right click here inside of the event CFT and we're going to type in custom event uh and let's call it update uncore chat and what we want to update when the chat comes through is the player name that we want to send and then the message that we want to send so if we then uh click on the inputs we're going to add a new parameter here of the type text and this will be the player name that we want to come through in this event and then we're going to click inputs again and this will be the chat message that we want to be sent through so when we are updating our chat we then want to basically uh create uh a message here so grab your create message widget hook up the player name and the chat and then simply if we get the chat scroll box we want to type in ADD child and then this child is what we want to add over here just like that so that's how we can receive the chat and then when chat comes in so when we are updating the chat so we are receiving a new chat message then we also want to scroll the chat box to the bottom so when more chat comes in from here here here here here we want to keep scrolling the chat bar to the bottom so to do that we're going to grab the chat scroll box here check out cact center right now steam in Early Access it's a very fun multiplayer video game cheaper than the Starbucks 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 and then we want to drag off of here and type in scroll to end then we want to get this function and hook it up here so when we received chat we want to scroll all the way down hit compile and save then we can close the chat panel for a while and go over to our player controller class so in here first of all let's make sure that we uh get that chat inside of our screen so on event begin play we want the local player controller to basically set up this chat inside of the player screen here so uh what that means is that the player controller exists on the server and on the owning client and we only want the owning client or the local version of the player controller to set up this chat inside of its screen as we do not need the server to create a widget for uh the server s side version of the player controller so off of begin player we're going to right click and type in is local player controller we're going to Branch off of here and hook this one up we're then going to drag off here and type in create widget now the widget that we want to create is the chat panel the owning player is ourselves as the player controller Out of Here Comes our chat panel so we're going to promote it to variable call it widget blueprint chat panel just like that and once we created it we want to add it to the viewport there we go hit compile and save now we're going to test this logic so if we hit play and make this full screen we'll then see that our chat appears over here we also see that we are in the ground here and we don't want that so to fix that really quickly inside of this project I'm going to grab myself a little camera here so let's do Place actors typing camera we're just going to drag a camera actor into the world it's not going to look too pretty but that's fine then we're going to go to the level blueprint over here right click get a reference to the camera actor you can do that when the camera actor is selected here you can right click at a reference we're then going to go off begin play and type in blend view take this context sensitive off and get this note set view Target with blend the new view Target is the camera actor and we want to do this as our player controller so we click this one on again get player controller here we go now we compile save and hit play we're up in the sky and we have a chat here we see that there's a little flying ball in the ground to fix that we can remove the default ball here and we also see that the camera actor is uh is constrained here so if we click here on constrain aspect ratio then hit play then we finally get what we want um then we're going to check if the client also can make its own chat widget so we're going to click here on two players players listen server hit play We're then going to put the server to the right and the client to the left and as we see both the client on the left have a chat panel and the server on the right has a chat panel too so that's great next up we want to have the enter event here so we're going to make an input so that we can handle clicking enter and then focusing the chat being able to type in our text message and then being able to click enter again to submit it so we are going to right click here then type in keyboard enter to get this enter over here and then when we press enter we want to focus our chat panel and then specifically what we want to focus is this uh chat input box over here so that's what we're going to do right now so grab in your chat panel variable which is this one then what we're going to do is right click to validate it so if we have a valid widget in our screen over here then what we're going to do is that we're going to get the chat input box so out of here to get chat input box and then what we want to do is that we want to set the keyboard Focus so uh out of here set keyboard focus and then is valid we're going to hook it up to this uh and that's basically all we want to do so if I hit play here and I click here on the right on the widget if I do enter then we see that now I'm focusing on the chat here and then let's check that same for the for the client here as well so let's make it a bit bigger so if I click enter we see that we now start to focus the chat and I can then start typing inside of the chat here so that's great now what we want is that when we press enter again we will actually submit the chat so uh to be able to submit the chat we need to code some custom events inside of the player controller here so right click type in custom event call this Sr which stands for Server submit chat and then what we want to submit when we do that is our uh username and the chat message so yet again we go over here create ourselves an input of the text type call it player name then the next thing that we want to send is our chat message now we're going to hit compile and save and where we want to send that to is to inside of the chat panel here to this event basically so for every person that has the chat panel we want to update their chat to add this element and then scroll to the end so if we click this event make sure that we set it to run on the server reliably then hit compile and save uh and that's it for now now we go back to the chat panel over here and then what we want is that what we want is that when uh we commit the text here so that's this one with an enter then we want to call this event inside of the player controller which will then send the chat to all other player controllers and thus update the chat so over here inside of our chat panel widget what we want to do is right click and type in get owning player now this return the uh player that owns the widget and the player that owns the widget is ourself as the local player controller cuz we pluged that in over over here and then from the owning player we want to cast to our blueprint player controller chat so we're going to type in cast to BP PC chat we're going to hook this up to True uh and then what we want to do is that we want to call this event over here called Sr submit chat so Sr submit chat and then we see that we need to fill in two options here so we need to fill in the player name and the chat message well the chat message comes out of here and then the question is how do we get the player name well the player name exists inside of the player state in onal engine and each player controller has a player state so out of the player controller here we're going to uh drag off of here and type in get player State and we got this one over here and then out of the player State you can drag and type in get player name and this name over here uh by default default if you use the standard onal engine subsystem it will return your PC name but then if you hook up something like steam or EOS so epic online services then this will return automatically return your steam name when you correctly set up a steam subsystem so when you implement something like uh steam Advance session change your config file to steam then this will automatically return the player's steam uh username so that's basically it now we're going to hit compile and save and then let's take take a look and see uh how that works right now so we click enter we get the owning player cast to it get the player State get the player name we get the chat message that we want to send and then we're going to send it so we're going to click s our chat submit and now this event handle is on the server and then we want the server to send a message to all of the other player controllers to update their chat so in order to do that we're going to need to have a reference of all of the other existing player controllers inside of our online session so to do that we're going to typee in get game state so this is the state of the game now the game State uh contains a reference to all of the existing player States and as we know the player States they contain a reference to all of the existing player controllers and a reference to all of the player names inside of your game so out of here we can then type in get player array which is a default variable inside of onal engine and when we take a look at this variable it says array of all players States maintain both on the server and the clients so once we know all of the players here we're done going to do a for each Loop so drag off of the array type in for each Loop so for each player array we want to do the following logic first of all we want to get their player controller so get player controller and then next up we want to cast to their player controller so that is the bbpc chat cast to bbpc chat hook this up like this and then what we want to do is that we want to call an event called update chat so that event has to exist on the owning client so not on the server version but on the owning client version of the player controller and that one will then communicate with the chat widget here and we'll call this event to update the chat so right now we're going to install that event so if we right click here custom event we type in OC for owning client update chat and then yet again what we want to uh to send through here is a text type variable called player name and the next one is the chat message then click your event and make sure that it is run on owning client reliable that's the event that we want to call so hit compile save and we're going to do OC update chat then just oh and we straighten these lines out a little bit just like that so in here goes the player name and in here goes the chat and that's pretty much it um after that we basically call this update chat event over here and this is then supposed to communicate with your chat panel to call this event so to do that we're going to get our chat panel again and then we're going to validate it real quick so right click and validate to ensure that the player controller that we are communicating to has actually already created this so let's say you connect in the beginning you haven't created this properly yet then we want to ensure that we validated here here we're going to drag out and call the update chat event and we want to update the chat with the incoming player name and the incoming chat message that's it in short now we're going to hit compile and save and let's take a look at this logic so if we hit play put the clients here to the left server to the right then the server is going to hit enter and going to say hey how are you hit enter both on the right and on the left we're going to see Wim PC that ends in number 17 send hey how are you so we both receive it but we do still see that the server still has to chat in here so that needs to be cleared and then on the left here we're going to have the client which is going to type uh back I am fine thank you and then we see that the client sends that chat and then the client receives it himself and the server receives it here as well and then we do indeed still see that this needs to be cleared so let's fix that really quickly we go back to the chat panel back to our on text committed event and once we have submitted our chat we basically want to clear it um so to do that we're basically going to drag in our chat input box and then we're going to say set text and then here we go set text so after sending our chat we want to set the text to be empty again so let's take a look at it now so like this we click enter on the right and we say hey how are you and then we see that the chat is gone again so that's perfectly fine uh and in simple this is how you make a multiplayer chat I hope you guys enjoyed this video make sure to like And subscribe and I'll see you guys in the next one bye-bye [Music] call

Channel: Kekdot

Views: 6,012

Keywords: Blueprints, Unreal Engine 5, Unreal Engine 4, Steam, Multiplayer, Game, Marketplace, Lobby, Game development, Unreal Engine, UE, Multiplayer game, Host game, Sessions, Advanced, Tutorial, Server browser, Sessions Steam, Ready up system, 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, Patreon, Course, Chatting

Id: PcfJiD6RTmo

Length: 28min 47sec (1727 seconds)

Published: Mon Oct 16 2023