Creating a Chat Box in Godot Engine

hello everyone I want to update you and a little thing I'm working on a new game and I hope I will be able to make some dev vlog here to show you how the progress is going and I started working on a thing that I can also help you guys in your games which is a simple chat box I'm going to be showing you how to create the UI and you can apply these chat box in whatever game you have and if you have multiplayer you can connect it to it and if not you can always use it as a terminal or you can get the input from a player or just play some messages like in any role-playing game or anything like that these kind of shots are very popular on games like Warcraft overwatch or Counter Strike you know like you see different colors from your teammates different chat groups the name of the players and basically anything you want to display to a player even status or warnings so let's go ahead and create a user interface scene which will contain our chat box let's rename it chat box okay and let's new channel so the first thing we want to do is lay out all the elements that we need and then when we have all the elements on the screen we can start with the code so what we will need first is a container box container and a horizontal box container this element will automatically stack all the nodes that you give them and it's going to do them one over the other so that way we can have the chat box with the text that people write and the input that the player has below so let's create that text label and we want to use the rich-text level which will enable us to use colors and we really want colors for that so let's create it and now we will need the input which it will consist of two notes so let's do a horizontal box container inside of it let's add a label in this case let's start with a default player which is what the player will see and for our final note the line edit which will get the input from our player ok so right now everything is really like pushed there at the corner like you cannot see much so let's resize this to be more or less a chatbox size ok so we have here and if you notice the rich text level doesn't have any height and we want to modify the flags of this node you see it's very very like teeny it's only one pixel so here in size flags you can set different flags for how the node will behave inside a container this case we wanted to expand to all the horizontal space available and to the vertical space available so this way is if our container it's this height the rich text level will occupy everything it can and the rest will be used by the other nodes inside these so if I resize this to this bigger size now if we check again it's always occupying that most of I can use same we want to do with the input so the input right now lives inside this horizontal container and we wanted to grow to fill everything it can so inside size flags we set horizontal expand and vertical expand so we have a really basic setup for this I think it looks ok for now ok so now that we have all the nodes ready let's make so that box container is the same size as the parent which is the chat box which is covering all the screen and we don't want that we're going to be using this node as a instance in another scene which would be your game for now but let's see box container layout full rect so you will try to use all the space it can and inside chat box let's resize it to sundar size for a chat box okay so now this is to know that we have and let's attach script to it I'm gonna call it chat box that GD nothing really fancy that way would keep it clean and now I'm gonna show you a few things that I usually do when I'm working with these kind of nodes we will want to access this rich text level node this level node and this line is it a lot but the containers might change maybe you want to change it in the future and you want to place it somewhere else so if we reference this nodes by its name so for instance right now it would be the dollar sign and then here we have like all the available options like let's see label if we reference it like this and we change it in the future you will lose the reference so you will have to update this every time you want to access that part of the code so what I usually do is I create a variable outside these variables have to be called already var and then I set up a name for it so in this case we want to get the chat glove which will be this rich text label and we will get no now we get a rich text label already input label get nose will go to label okay now already in put field this is where player types so get know and we go to the line edit so right now I will have these three variables available to decode and whenever I change the position of any of these I can go here update this line of code and that's it I don't have to go back and do crazy things with it okay let's save now this as chat box that TS scene and let's start with some other variables that we want in this kind of chats we have usually groups in which you talk with people or modes depending on what kind of game for instance you in most Blizzard games you have like the group chat whispers the public ones Tim ones under pending of which one you're using has a different color so let's create just three examples of them groups and let's say it's gonna be a dictionary and see the name it's going to be team and the color it's going to be anything let's generate a color what I use usually to create colors is so here I add color right now and I use this color picker to see what can I follow I like let's select like a blue I don't know something like this should be okay now I can copy this color code and add it here so we have our first group let's create two more and that should be fine let's see I copy and paste it let's see I don't know much so this one will only talk to your teammates this will talk too much and that's create just a neutral one like global where you can chat with everybody it doesn't matter if it's in your game or not so we need like two other colors let's go back to the color rect and let's see like yellow or ng okay this is going to be for match and let's see for the global let's use white very standard thing to use okay I can now remove this because I don't need the color selector anymore but that's okay okay so we have our groups now I think that we will need to track is which of those groups we are using so in this case into the group index and the user name in this case you can populate this if you're running a game from a server you will get this variable from your server otherwise you can start all this year so user name and I'm gonna name myself Amelia which is my name so okay when we run the game let's see this run this scene if you see like if I type anything I'm not on there on the input because the focus of the UI will be in your game so if you're moving with your keys you don't want them to be pressing and typing at the same time and if you click here you can type pressing enter will try to send a signal which right now is not bind to anything but since we don't have any other UI element we cannot get the focus outside of it even if we press escape or anything like that I cannot get outside of this box so you will never be able to come back to your game so let's fix that first let's create a new function just called input and inside this lets get if the event is input T event key so if the input is going to be a key and if event press so if that key is pressed and the even scan code is key enter so in this case you have here the event which is called every time you see any input signal from garage inputs in this case are moving the mouse pressing click pressing buttons and so on you get the event in this case if it is a key we want to check that that key is pressed and the code of that key is going to be key underscore enter which is the enter key I'm not gonna be using actions but you can also use actions and cut it in a different way but for this particular part I prefer to use this kind scandal so we need to get the input field which remember was to note that we have like us line with it and use the method graph focus so this will make sure that no matter where you are the focus of the UI is going to be going to that input field same we want to do the opposite but with the Escape key so to placate that line of code we replace here escape and instead of grab focus we release it free lease focus okay so now let's write out again playing the game pressing Keys and I press Enter okay I'm there in the chat box and now I don't want I want to continue press escape and yes so we only need one thing left for here and it's what happens when you press Enter we want the text to be shown here on the chat so let's bind this input signal if you check here and line elite now we have text change which is every time the yeah you have a scription every time like you press anything in there and text enter that's when you press enter into the input field we can connect it from here using the regular connect but since we always do this in tutorials I'm gonna do a different way this time I'm going to do I'm going to do it from code ready ready input field which is to note that we wonder will connect this is basically connecting the signal and the name of the signal in this case is text and we connect it to self which is this script and the name of this function that we're going to create can be I don't know text entered say okay let's create an function thanks and by default if you check here in the signal it has like any an argument which is going to be a string new text text okay so you have that car so let's do for now that every time we press Enter I'm going to print the text the content and the input field text equal to nothing so that way when I will press ENTER we create the illusion that the text is sent and we send it actually we show it on the terminal just for debugging let's see press Enter oh hello enter and we see their own terminal yeah it is working okay now we want that text to be displayed inside the rich text label but since this is going to be connected to other systems we don't want to call that here because a lot of other nodes can interact with this rich text label for instance if you have a multiplayer server and you want to send a signal from the server to the game client you don't want to simulate that the player is doing that so let's create a separate function for the message this case func message okay and for now let's say we will need a username and the text okay so we can go and select our chat log let's add some code in this case I'm gonna be using here if you click on the read rich text label there is an option that you can enable which is called DB code we will enable it this will allow you to create custom size for instance here if we use a hello world you see there but if you want to change the color you can add this color and as you can see now the world looks in different way because you have these special tags which acts similar to what you do in HTML or CSS and you can add custom style without doing a lot of crazy things with themes or things like that so we want to be using these kind of tags in our messages so now that we enable the BB type we can enter the code like so PB code text and instead of removing everything we want to add because if we set it to equal it will always replace it but we want to add to whatever it already exists and we want to add the text that we wrote there that way after we print we can add the message with our username which is a variable that we already have name and the text is going to be the text away written so let's see how this looks there's a thing that we have to add but I want you to follow this step by step that way you can learn otherwise if I tell you everything so it's not going to be working if I tap something and I added to the string it will all be in the same line and we don't really want that because every message is usually in a different line the same way as we have it here on the output terminal to add a line break you can add this backward slash and N and this will create a new line so every time we send a message we are creating a new line let's try it out hello yes it works it worse yeah it is worse for sure okay now we want to add the colors and we can now start working with groups remember we want to send different messages depending on the group that we are in and also another important thing we want to use the username we are not using it for now the group is going to be selected to team but we need to check in which group we are currently working so let's add a new variable group and by default is going to be zero if we don't set anything to group the default value is going to be zero and we want to set the add message here to group index which is what the user is at ryuuzan which is zero right now but it could be one two or whatever you prefer so now that we are using the group we can actually before adding the line break let's actually separate this into different lines let's first we add the line so we are in a separate thing now we add the color tag color equal to and inside here we want to know the color from that group so groups the index of that is going to be group is this variable remember and now that we have the group selected we want to get the color variable inside this dictionary so another small box and color after we use the color tag and everything we have to close it so duplicate this line but I have the closing tag okay so this should give us the color and the last thing will be our name we usually display names like these and inside there we get the name of the player so use her name and at the end let's add like just like it : and a space so let's review everything here we add the new line we set the color that we want to use for our message we set the name from who is sending a message the text that the message has and we close the color so that way we don't keep tainting everything after this let's try it out and the color should be a blue like we said because it's the team chat so this is the message and wizard like you see this right like if I'm not in focus and I press enter like it sends an empty message so let's prevent that here let's check if text is not equal to nothing so this will be checking and avoiding that kind of sending the empty string things okay so now that when I press Enter okay hello this text is in blue okay that seems okay but I want to be able to change groups and you can usually do that pressing the key tab so we need to add the input event here and create a function for the changing of the groups so let's go function change group the value that we want is I don't know like the index of the group that we want to change it so group index let's add the value so that way you can add plus or minus or whatever buddy you want we need to make sure that if we are adding and we're going like in this way let's let's get the key in first so we could have an idea so if the key is tab we are going to change group by one so that way we are adding one to this index which is what the player gets and we want to make sure that if were serial here one here two here if we go to three we want to go to serial package and that way whenever you're pressing tab you're like going through all of them but you don't know outside of it because if you try to access the group number three which doesn't exist it will give you an error so to avoid having that error let's add a check so if group index is bigger than group's size minus one because we start by zero in index but the size is three in X equal to zero so whenever group index is bigger than these numbers here it will go back to the first one that way you can add all of the ones you want here and you don't have to worry about encountering any problems with the sizes of the arrays there now I want to actually let's let's change this label to instead of saying who is talking let's say what kind of chat you're talking to so in this case we're starting with team chat so in food label right yeah input level was the one that we want yeah input level text is equal to and we do the same we want to have these small box and inside of it the groups group index which is the variable that were using right now and like we did before but instead of using the color we want to get the name okay so now that we get that we can also set the color of that and since this is not be because enable label you need to change the color here from a different place this case custom colors font color the problem mister we cannot access this from code very easily and for accessing those kind of variables which are if you hover you see this property custom colors slash font color you can access those properties if you write them like that but you have to first select the note that you want and use the set function okay so now you can write the property that you want custom colors font and the value that you want to set it to this is not a string that you need to append you need a real good color we need to use the color function which will create a garage color and inside there you to the string in this case the shrink that we want is same as we have here the current index but instead of the name we want it with this we should get the value changing of the group index variable the text updating in the input field and setting the color to know in which group you are sending this let's try it out okay we start on team but it's white it's not a real color because we haven't changed it yet so okay solution for this would be on the ready function just change group to zero so we don't change any of the values but we update the text to be whatever the current group is and we update the color so let's go back to it yes hello there this is yellow or orange or whatever and this is a global smiley face okay it seems to be working we can change through them we can type we can press escape we can continue playing when we press ENTER we can go back to the chat and we can type whatever so let's remove whatever I had here as a placeholder let's hear placeholder this is like a pretty transparent text in this case let's I don't know say something like press tab to change groups so that way the player knows that they can press tab let's make it a little bit more transparent it's not annoying okay and we have everything we need to have chat box in the game maybe you want to start by populating it with some messages so you can always use this function here and let's say we want to add like a add message let's create a username like God is gonna be talking I was gonna say the engine and the group is going to be serious oh we don't really need to use this so whenever we open the game we will see a message from God saying the engine yes you see it there oh I made a mistake remember that we deleted this copy here so this is a bit confusing but I tell you leave the text that it's inside here and it always gets copied from the biblical enable one but you actually need to remove it from the B because there now we want to text anymore I think that whenever you are modifying this rich text so it displays here it has to be here on the text value I know it's confusing but give me out like you see it got copied from here to here I don't know if that's a bar I don't know if that's intended but it that's how it is so I will remove both and let's try it out again okay the engine Wow okay so we have our chat node and we can use this into anything that we have so for instance if we have our game scene that see it's a 2d scene let's add an image I'm doing this off screens sorry okay here I added an image imagine like this is your game this is a big ok so ok like actually was smaller okay so imagine that this is your game that you have here and you just add instance a child scene in this case is the chat box and we can set this size minimum size is going to be 200 not more let's say 500 yes and 300 okay this is to be okay that is way to be further chat on a game but okay let's play the let's save this in game so in your place you have like the text and you can type there and player will see it this one last thing that we have to fix and in this case is that if your chat box is very small which will usually happen let's see the minimum size to 100 because you don't want okay you don't want to be covering all the screen other ones imagine that there's a lot of people chatting let's simulate that by typing a lot you see the scroll bar here it's not following the text but you can easily change that if you select a rich text label and scroll following is enabled you can also enable selection enabled which will do exactly what it says they will do but let's see now that's called follow is there if I run the game again and I spam the chat it is following the text you can connect this note to anything you really want you can create system messages you can do that whenever the player picks an item it will display a message in your text box you can also do custom messages let's say that we want to do here if the text is equal to /h which is a very common one like to help one let's reset it and set the username help group index is going to be 2 which is global we can create that separate one for that but let's say with 2 and there is no help written yet and smiley face now I'm writing smiley faces everywhere okay so that will do that whenever a player press H it will add a message with whatever you want you can actually capture the input from player and do commands so if you want the player to be sending inputs to the game from here you can also do that so in this case if I'm typing whatever nothing happens but if I press the /h I will get that there is no help written yet I'm also sending the message which if you don't want it that to show up you can right turn so this will end the script here and it will not go to sending actually to message so if we run it again when I type my type H I don't see the message saying H so that's cool and that's it for now I hope you like this tutorial and sorry I haven't been able to upload a lot but as I told you I'm working on a new game I hope that I can share with you the progress of how that game is going for now in a pre-production phase and I don't have anything to show yet but I'm sure that this chat will come in handy whenever I made it I also want to showcase a game made by a viewer called meant to head up or something like that I hope I'm getting that name right I'm going to leave a link in the description but he actually made a game which uses the borderless window capabilities of corrode and he uses it very clever to navigate the player around the screen so it's changing the view size of the game whenever the player goes outside of that boundary so you basically have like a level that it's being created in front of your desktop using your screen as a playground I think it's a very nice experiment and I encourage you to subscribe to him and see how the progress goes and see whatever happens with this cool idea if you have anything to showcase please send me a link and I will gladly show it in my channel and I especially really like what you guys do with the tutorials I have and if you want to learn what how to do this kind of effect I have some videos that I will link in the description as well on how you can do borderless windows in garage thank you very much to all the patrons and I really want to make a lot of tutorials but most of the time they are already there so what I'm thinking about doing the next ones is maybe a compilation of other people's tutorials and if you are looking for some help you can always go to those channels to see them and that's it thank you very much

Channel: Emilio

Views: 10,107

Keywords:

Id: 7c7aZTUITD4

Length: 35min 35sec (2135 seconds)

Published: Tue Dec 24 2019

Reddit Comments

[u/pollolucha]

Thanks for this. I couldn't figure why I couldn't make new lines in a rich text label so i just stacked a bunch of regular labels haha.

[u/Assimilation]

Just yesterday I started working on a chat feature for my project so great timing. Thanks for the tips!

[u/Cobrapitz]

Thank you for sharing, looks great!

[u/Teobaldooo]

Awesome tutorial! Nice work

[u/whipbryd]

The design of that boxes makes me want to write gg ez in them to see what it would be replaced with. :D

[u/blendender]

Colors totally not inspired by overwatch...