Godot Tutorial - Dialog Box

good morning afternoon or evening wherever and whenever you are my name is Benjamin and welcome to a Godot tutorial video in this video I'm going to be showing how to create a dialog box in the Godot engine Godot engine is an open source engine that works really well for 2d and I'm excited to show you this video real quick so I want to mention the platformer shooter video that I'm planning on doing in game maker studio 2 is for sure going to happen I actually tried recording some videos yesterday but didn't really like the direction that I was taking it and I'm going to have to rerecord though so I'm going to try again next we can get started on those but for now I wanted to take a little break and show off the Godot engine I really enjoy using this engine you can download it it's free and open-source you can download it at Godot Engine org and I'm going to be using version 2.1 three stable once you've downloaded the engine and run it you should be greeted with the project manager I'm just going to do create new project I'm going to browse inside of my projects folder I'm going to create a new folder and I'm going to name this dialog box tutorial and press open and create should pop up here then I can double click on that and it will open up to the engine first thing I'm going to do is switch to 2d this gives us our 2d plane you can middle click to navigate this plane scroll to zoom in and out over here on the right we're going to start by creating a new node the first node we're going to use is actually going to be a polygon shape a polygon 2d right here so you can search up here there's a lot of different nodes inside of Godot that you can use to do different things we're going to be using this one kind of as our sprite so once we've created this node right here I'm going to go to edit use snap and then I'm going to configure the and I'm going to do sixteen by sixteen for my snap close and then I'm going to do show grid and that should show the snap now I'm going to click on this little pencil right here and this is only available when the polygon 2d is selected click on that and I can actually draw what I want to be my dialog box so I'm going to draw from here to here to here to here and then come back to here there we go that should create a dialog box you can see down here these are the properties of the node the inspector and I'm going to change the color to a dark gray okay now this is an unsaved scene so we need to save the scene you can hit ctrl s to save the scene and I'm going to rename this scene dialog box dot TCN save now we can't actually run the game because we haven't defined a main scene so we're going to select a main scene and we can just choose our dialogues scene right here and then we can run the game and you can see we have our dialog box down here at the bottom of our game now we're going to select this node and we're going to create a child node this is what's going to hold the dialogue we're going to use a rich text label and I'm going to move this down and put it right here drag it across and that should get us pull this down a little bit so it snaps to the edge and you can see I'm using the grid to snap this inside of our polygon to D now they're actually connected together so if we move the polygon to D it will automatically move the rich text label as well because the rich text label is a child of the polygon to D now come into the rich text label and we're going to make some changes to the properties of the node first of all we want to enable it and then the BB code right here actually contains what is inside of the dialog box so if we click on this it will open up a text editor and we can add information to this so we can say hello welcome to my dialog box tutorial press close and you can see now we have this dialog down here we can run the game and see that dialog showing inside of our dialog box so that's cool we already have working dialog but this isn't really the best way to go about this and we want to do some fancier things with how this works so I'm going to actually set our BB code right here I'm just going to delete this so there's nothing there and then I'm going to add a script to our rich text label so I'm going to right click on it and do attach script now we need to create a path for this script and I'm just going to name it dialog box G D and press create and it will open up a script editor right here I'm going to use I'm going to put a comment right here dialog box G D which is the name of the script so I know what script that I'm using because I like to hide this over here just drag this so verse I have more room now this script extends rich text label which just means it inherits from that the base script for that note the ready function is the function that is called right when the node enters the scene of our game and we're actually going to be using the ready function but first let's create some variables so we're going to do var dialogue equals and this is going to be an array and inside this array I'm just going to put some text the very first text is hey my name is Benjamin we'll just have that be the first text and then we're going to create another variable for our page which is the page that we're currently on and I'm going to set that to 0 inside of our ready function inside of Gd script which is the scripting language that Godot uses it doesn't use brackets like game maker does it uses a set uses a colon and then a tab and so you know that this is inside of this function because it's tabbed over and that's really important so we're going to do set bbcode dialogue page so what this does is it sets the BB code for our rich text label to the current dialogue and the page so if we're on page zero then that's going to select the very first element in this array and we only have one element so it's going to select this dialogue right here next we're going to do set visible characters and we're going to set that to zero now this is an interesting thing so if you click on a rich text label again you can see there's a visible characters property right here and we can actually change this property right here so if we were to have some characters you can see let's say we have hey this is some next okay so we've got some characters right if we set visible characters if we change this property it actually changes the amount of characters that are visible and technically we don't need quotations around this because and it's actually putting them in there but so you can see that actually changes the amount of characters that are visible so as we change this it displays the text okay so let's clear this again and we'll set our visible characters back to negative one that's the default then we can click on our script right here to go back into the script so we're just setting our visible characters to zero now what we want to do is we want to have a timer that increases the visible characters every certain amount of seconds so that it kind of types out the dialogue because a lot of games will do that so on our polygon 2d you can click on the polygon 2d node we're going to add another node and just search timer now I've got some properties down here for this node first of all we want to change the wait time I'm going to do a point zero five for the wait time and we want this timer to auto start so we want it to automatically start because if you don't do that then you have to start it with a script so we're going to have it automatically start but how do we connect this timer to our rich text label well there's a thing in Godot called signals these signals can be attached to other nodes and make them run a function think of it as like on YouTube how you can subscribe to my channel when you're subscribed to the channel if I upload a new video it will notify you that's the same thing this timer right here if we go into node it will show signals right here and it has a time-out signal which means whenever this timer ends then it will send out this signal and nodes that are subscribed to this signal we will be notified and then can run some logic so we're going to we're going to actually select this timeout signal and we're going to press connect and make you connect it to our rich text label and we do want it to automatically make a function for us that's convenient and this will be the name of the function so we're just going to press connect and you can see it opens up our script for the text the rich text label and creates a new function for us so inside this function we could actually just call print real quick to make sure that it's working and just say hi and if we run the game it should down here in the output print hi every time the rich text label is notified that the timer has run out and you can see that it's printing really fast because we selected a really fast time if we go back to inspector point zero five is pretty fast so it's doing that quickly but instead of just printing hi we can do something more useful we can set visible characters equal to get visible characters plus one so this will add a new value to our current visible characters every single time the timer triggers so let's run the game again and you can see now it's typing out hey my name is Benjamin so we've got a really basic dialogue system already working now we want to extend this a little bit and add some to it so I'm going to add a new line right here so I'm going to do a comment inside of our array and add a new element to the array and I'm just going to have this one be welcome to my Godot dialog tutorial so we've got a second line here and we could display that second line if we set our page to one like this you can see then it will show the second line instead of the first one but what we want to do is allow the player to some sort of input that makes our dialogue go to the second line so what we're going to say is in order to get input from the player you have to enable input on this node so we'll just do this by calling set process input and we'll set it to true this will set our processing input to true then we can create a function here which will be the input function function underscore input and this function takes an event and the event just contains some information about what type of input we got was a keyboard whether the mouse was a mouse movement what kind of input did we get so we're going to check to find out we're going to say if event dot type equals input event mouse button so did we get the mouse did we get it with a mouse button pressed and event dot is pressed I'm going to say okay with a mouse button pressed and was it was our input a mouse button and was it pressed so like click down not held down if that's true then we want to check something here which is if get visible characters is greater than get total character count so if we're already past the total amount of characters then we want to check our page size if page is less than dialogue dot size minus one so what does this line do well this line checks to see if our page number is still less than the total amount of pages possible so we're getting this arrays size the size of the array minus one so that will give us a total amount possible currently there's there this is the zero index and this is the first index so there's so this value will be one so if our page is still less than 1 then we can add to the page page plus equals 1 now just adding to the page won't do anything because we need to actually update the dialog right here the BB code so we're going to say set BB code equal to dialogue page in the same way that we did before then we also need to reset our visible characters because our visible characters are going to be at whatever they ended out at the last page well we want to set them back to 0 now so we're going to do set visible characters 0 ok let's run this and you can see when we get to the end we can click and it will go to the next page and do it if we click again it won't actually do anything because we're on the last page and you can add as many pages as you want to this now there's one last thing that we can do which is a lot of time in games you want to allow the player to skip to the end of a specific line so as it's typing through if it's a long line and they can read faster then it's typing they just click and it will skip to the end so we're going to do that as well so we need to do is we need to get the else for this so this says if we're already to the end of our visible characters then allow us to go to the next page well if we're not to the end of our visible characters so we can do else right here see this else lines up with this if we can do something else which is set visible characters to get total character count then when we run the game it allows us to skip to the end of the dialogue if we click and then click again to go to the next one now you can change this input to be whatever kind of input you actually need for your game whether it's pressing the X button on an Xbox controller or whatever that is and there's different ways to set that up in Godot I'm not actually going to cover those in this video but this should get you the general idea the very basics of how to set up your own dialogue system in Godot I'm going to have a link to the source in the description thank you guys so much for watching this video I really appreciate it if you feel like you learned something and enjoyed it be sure and like the video and subscribe and I will talk to you guys later

Channel: HeartBeast

Views: 66,229

Keywords: Game Design, Game Development, Indie Game, Godot Engine, Dialog Box, Godot, Open Source, Game Engine, Free, Dialog, Character Dialog, Dialogue, Dialogue Box, Textbox, Text Box

Id: xCl1AZINouA

Length: 17min 54sec (1074 seconds)

Published: Fri Apr 28 2017