How to make a Simple RPG Textbox in Godot

in this video i'm going to show you how to make this simple undertale style text box let's create a new scene start with the canvas layer so you can put it above all the other scenes call this text box give it a margin container go bottom wide raise it up a bit give it a panel so this panel is going to be our text box ui so go flat black background white about two width save this text box come back to the margin container and give it some margin so it's not hugging uh the screen wall give it another margin container and give that a panel just so we could see what we're actually changing in terms of the margin so get some margin there and then an hbox container for the horizontal elements of the text box which is going to be the symbol the text and then another symbol and give it a label call it text and then give it a font dynamic font font i picked this font off of the website bit font maker 2 which has some great pixel art fonts and there we go we have some text duplicate this couple times i'll give this one the asterisk and i'll give this one a v character and i'll call this start symbol or i'll just call it start i'll call this end and let's make let's go to the size flags so let's have this text expand that way and expand vertically this one size flags we can go that's fine as long as it's near the top and this one we can go uh shrink end and now let's remove this panel so that we just have the white text over the black background so this is the base text box right here let's give it some placeholder text so one problem is we don't want this to extend that far so we'll go ahead and auto wrap it and clip it as well and as long as we vertically fill it then it should be good and then i'll just quickly adjust this so that it's about two lines tall okay so that's looking good um quick quick issue that might happen is um if we have this current situation and we don't have this end thing then that's the presence of it is going to affect the text box so i'm going to go ahead and just set these rects min size to be equal to its current size so that when we change this it doesn't affect the text itself okay so this is our text box ui and now i'm going to go over the scripting part so create a new script [Music] and first off we don't always want the text box to be visible we want to hide it when there's no text on the screen so i'm going to create a function called hide text box and i'll rename this margin container text box container and i'll create references to everything that we're going to need to manipulate in this script so text box container the start symbol the end symbol uh just called it end and then the label okay so when we hide the text box we're setting our start symbols text to be empty setting the end symbols text to be empty setting the label to be empty and so if we call this function in ready then it's just an empty text box and then we'll actually hide the text box container itself so this is going to be the default state when there's no text we want everything empty and hidden and i'll just quickly make a show text box which is just going to be used when we actually want text to start appearing so when that's true then we want to show the container and show the asterisk okay so let's get some text added to the text box so i'll create a function called add text and i'll pass in [Music] some text so let's create this function add text pass in the next text and we'll set the label text to be the next text and show the text box so let's see what happens now we should see the text okay great but we don't want the text to just appear out of nowhere we want the text to slowly be read through the text box sort of like this so we can use this percent visible variable and tween it in order to get it from 0 to 1 over a certain amount of time so i'm going to create a tween and add it to the text box node and when we add text i'm going to start interpolating so we're going to interpolate the property of the label percent visible from 0 to 1 over some amount of time now the amount of time is going to be dependent on the number of characters in the text box it's not going to be some fixed amount i'm going to create a constant called character read rate and set it to 0.5 and we're going to take the length of the text and multiply by the read rate and then i'm just going to pick some generic tweening properties and start the tweening start so let's see how that looks well that's incredibly slow but it works which is good so speed it up nice so that's working that's great and we also want to have the end symbol appear once the text finishes being read so when the tween is complete i'll just connect a signal there we'll go ahead and have the end symbol's text be that v so here's how it looks great now when this happens we want to press enter to have the text box disappear because it's finished being read so we're getting to the territory where we actually want to start thinking about the states that the text box is in because we only want to be able to press enter once the text is in its finished state not while it's being read in fact while it's being read if we press enter we want it to finish reading and go right to the finished state so managing those is great for using a finite state machine so these are the three states that the text box is going to be in so the ready state it's ready to receive text but it currently is not displayed on the screen we add text to it the text box is visible we go into the reading state we start reading text once the tween finishes or the percent visible is one all the text is on the screen we enter the finished state where we wait for the enter press to go back to the ready state so let's create a state enum to manage those three states and then a variable to manage what the current state is and then i'm going to create a sort of quality of life function called change states where we'll set the current state to be whatever state we want to change to and then i'll also create a match function which is going to just go through the states and print um what state we're currently in for tracking surface purposes but first we're also going to want to manage what state we're in in the process function so in the change state function i'm just going to print what state we're changing to so in this case it's state dot ready here it'll be reading here it'll be finished and then i'm also going to print what state we start in starting state so we can track this okay cool so when are we changing states so we start in the ready state when we add text we're going to go into the reading state when we finish reading when the tween finishes we're going to go into the finish state let's see what this looks like when we just run it through real quick okay so if you look at the console our starting state is ready we go to the reading state and we go to the finished state once we're in the finished state we can now look for pressing enter so if input is action is just pressed ui accept which is mapped to enter by default then we know that we can go back to the ready state and start receiving text again in addition um i think we should hide the text box so let's see what that looks like cool press enter text box is gone now what happens if we press enter while it's reading it should skip to the end of the text display everything and then go into the finished state so let's add that here so if we press enter while it's reading we can go ahead and just immediately set the text visible to be 1 and then let's just stop the tweening and display the end symbol and change the state to finished so let's interrupt it i interrupted it it went straight to the end and we're in the finished state now one of the problems with this design is that it depends on being fed one piece of text at a time which means something else has to manage you know when this text box finishes in order to add the next text but it would be nice if we had a cue for managing the text where we could add a bunch of text all at once and then have it go through those texts one at a time so let's do that let's let's uh refactor the code and create this text cue to hold multiple texts so i'm going to create the q text function which is going to just add text to this text cue that we're going to manage locally and in our instead of adding text i'm just going to call this display text and we're going to get the next text from the text q and in the ready state we're just going to we're going to actually look for if the text queue is not empty then we'll call display text and instead of add text we're going to do q text and we're going to queue a bunch of text here we're going to do first text queued up let's try second text third fourth okay let's see how this works okay oh fourth text queued up that's not what we want text cue dot pushback next text is pop front okay so we were actually popping the end of the queue we want to pop the front of the queue there we go first text queued up second text queued up third text queued up for it and it's it seems to be stuttering a little bit i think we could probably fix that um by setting let's see yeah let's set the percent visible to zero before we get the tweening started so that yeah that looks a little bit better cool and uh yeah i mean that's pretty much it just for uh flavor let's add a little town here and put some believable texts something silly why do we not look like the others because we are free assets from open game art and then thanks for watching okay wandered and yeah there's our text box you can see all the states it's going through at the bottom and yeah i hope that was helpful thanks

Channel: Jon Topielski

Views: 6,901

Keywords:

Id: QEHOiORnXIk

Length: 13min 33sec (813 seconds)

Published: Sun Feb 28 2021

Reddit Comments

[u/Eternal_Practice]

Thank you for this.

[u/Chafmere]

Awesome

[u/golddotasksquestions]

This was incredibly helpful!

I've been struggling with this for a while, thank you so much!

[u/felgamedev]

Is there a way to upvote twice? Great tutorial and shows a sweet implementation of a FSM! Got the gears turning for my project (which didn't need a textbox but might get one anyway now hahah)