 Hello everyone, I want to update you on a little thing, I'm working on a new game and I hope I will be able to make some dev vlogs 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 a UI and you can apply this 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 display some messages like in any role-playing game or anything like that. These kind of chats are very popular on games like World of 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 add a new chat node. 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 label 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 will consist of two nodes. So let's do a horizontal box container, inside of it let's add a label, in this case let's start with the default player, just what the player will see and for our final node the line edit which will get the input from our player, okay. 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 chat box size, okay so we have it here and if you notice the rich text label doesn't have any height and we want to modify the flags of this node you see it's very very like thin it's only one pixel so here in size flags you can set different flags for how the node will behave inside a container in 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 is this height the rich text label will occupy everything it can and the rest will be used by the other nodes inside this so if I resize this to this bigger size now if we check again it's always occupying the most of what it 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 feel everything it can so inside size flags we set to horizontal expand and vertical expand so we have a really basic setup for this I think it looks okay for now okay so now that we have all the nodes ready let's make so that this 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 will be your game for now but let's see box container layout full rect so it will try to use all the space it can and inside chat box let's resize it to a standard size for a chat box okay so now this is the node that we have and let's attach a script to it I'm gonna call it chatbox.gd nothing really fancy that way we 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 label node this label node and this line edit a lot but the containers might change maybe you want to change it in the future and you want to displace it somewhere else so if we reference these nodes by its name so for instant right now it would be the dollar sign and then here you 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 on ready var and then I set up a name for it so in in this case we want to get the chat log which will be this rich text label and we do get node and we get the rich text label already input label get node we go to the label okay now already input field this is where the player types so get node and we go to the line edit so right now I will have these three variables available to the code 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 chatbox.tsc and let's start with some other variables that we want in these kind of chats we have usually groups in which you chat with people and 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 team ones and depending of which one you are using it has a different color so let's create just three examples of them groups and let's say it's going to be a dictionary and see the name it's going to be team and the color is going to be anything let's generate a color what I use usually to create colors is go here I add a color red node and I use this color picker to see what kind of color 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 to the match and let's create just a neutral one like a 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 orangey 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 going to be group index and the username 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 hard-code it here so username and I'm gonna name myself Amelia which is my name so okay when we run the game let's see let's run this scene if you see like if I type anything I'm not under on the inputs 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 we'll 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 out of sight of this box so you will now be able to go back to your game so let's fix that first let's create a new function which is called input and inside this let's get if the event is input key event key so if the input is going to be a key and if event pressed so if that key is pressed and the event 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 go dot 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 going to be using actions but you can also use actions and call it in a different way but for this particular part I prefer to use this scan scan code so we need to get the input field which remember was the node that we have like a line of it and use the method grab 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 we duplicate that line of code we replace here escape and instead of grab focus we release it release focus okay so now let's try it out again I'm 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 it node we have text changed which is every time the yeah here we have a description 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 line ready input field which is the node that we wanted we connect this is basically connecting the signal and the name of the signal so in this case is text enter we connect it to self which is this script and the name of this function that we're gonna create can be I don't know text enter the same okay let's create an function text enter and by default if you check here on the signal it has like a new an argument which is going to be a string new text okay so you have that cover 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 whenever we 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 hello enter and we see it on the 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 go 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 funk add 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 rich text label there is an option that you can enable which is called bbcode we will enable it this will allow you to create custom styles for instance here if you say 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 this 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 tag we can enter the code like so bbcode 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 username and the text is going to be the text that we 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 gonna be working if i tap something and i add it 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 and and this will create a new line so every time we send the message we are creating a new line let's try it out hello yes it works it works yeah it is worse for sure okay now we want to add the colors and we can now start working with the 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 it's 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 actually using 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 add 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 add the closing tag okay so this should give us the color and the last thing will be our name we usually display names like this and inside there we get the name of the player so username and at the end let's add like just like colon 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 that 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 we said like you see this error there 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 to so group index let's add the value so that way you can add plus or minus or whatever value you want and 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 get a better 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 we're zero here one here two here if we go to three we want to go to zero back again that way whenever you're pressing tab you are like going through all of them but you don't go 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 groups size minus one because we start by zero in index but the size is three index 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 are starting with team chat so input label right yeah input label was the one that we want yeah input label text is equal to and we do the same we want to have this small box and inside of it the groups group index which is the variable that we're 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 a bb code enable label you need to change the color here from a different place this case custom colors font color the problem is that 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 node that you want and use the set function okay so now you can write the property that you want custom colors font color and the value that you want to set it to since it's not a string that you need to append you need a real got out color we need to use the color function which will create a got out color and inside there you can do the string in this case the string that we want is same as we have here the current index but instead of the name we want the color 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 what a 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 smile 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 here a placeholder this is like a transparent text and 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 that annoying okay okay and we have everything we need to have a 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 godot is going to be talking and it's gonna say the engine and the group is going to be zero so we don't really need to use this so whenever we open the game we will see a message from godot 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 deleted the text that it's inside here and it always gets copied from the bb code enable one but you actually need to remove it from the bb code there now we won't see the text anymore i think that whenever you are modifying this rich text so it displayed here it has to be here on the text value i know it's confusing but hear 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's that's how it is so i will remove both and let's try it out again okay the engine okay so we have our chat node and we can use this into any scene that we have so for instance if we have our game scene let's see it's a 2d scene let's add an image i'm doing this off screen sorry okay here i added an image imagine like this is your game ooh this is so big okay so okay actually it 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 it's going to be 200 no more let's say 500 yes and 300 okay this is to be okay this is way to be for that chat on the game but okay let's play the let's save the scene game so in your place you have like the text and you can type there and the player will see it there's 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 at once 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 the rich text label and scroll following is enable you can also enable selection enabled which will do exactly what it says it will do but let's see now that scroll 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 slash h which is a very common one like the help one let's reset it and set the username help group index is going to be two which is global we can create that separate one for that but let's say with two and there is no help written yet and smile face now I'm writing smile 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 slash h I will get that there is no help written yet I'm also sending the message which if you don't want that to show up you can return so this will end the script here and it will not go to sending actually the message so if we run it again and when I type the 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 preproduction 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 Godot 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 Godot 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 in 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 bye