 Hello, it's Emilio here. We have this empty project. We're gonna do the dialogue and we're gonna start off by using a user interface And inside of it. Let's create one that it will be our dialogue box So I already have some assets here from before but you can use whatever you like I will have a version to download on the description But basically have here the font that we're gonna be using a background for the dialogue and an indicator For when the text is over. So if you haven't read the title, we're building a very basic dialogue box as in the style of RBG or a visual novel and we will need first of all, let's add the background, see control texture red Let's set this texture. Okay. It's a bit bigger. Let's set it now to scale and expand And now when we modify the size here Now this texture, let's set the layout to occupy the full rect and we have it now As we wanted. Now when we modify this, it changes the size Now that we have the size desired, let's lock it and move it to the center of the screen With these anchors that you have here, you can set where the element is going to align if the window size changes And I want it to be anchored to here. So if we try the game, let's save it If we make it bigger, it will always stay in the lower part of the screen So that's basic enough. But these anchors are very very useful to use them Okay. Now we need to add some text And we're going to go with the rich text label, which will enable us to write some text with different styles There's a very good tutorial that you must check made by Johnny, which explains how to add effects to the rich text labels But we're not going to be covering that. If you want to know more about it, you can visit the link in the description And you can see it because it's very very good Now let's make the text right, occupy everything, same as with the background And now let's write some placeholder text. We want to have the text with some styles for the feature So I'm going to be using bvcode, it's going to be enable And let's say, hello there people from YouTube This style is a placeholder Okay. The font is very ugly So let's change those settings Scroll down, custom font Let's go with the normal font And new dynamic font As always, this process is kind of crazy, but just bear with me Let's set here the font file, load, fonts, the font that we want Now let's make the size bigger It's kind of out of position, but this will be fixed if we resize it a little bit Yeah, that will reset it And let's add some margin to the size So margin, let's add, I don't know, like 15 and 15 And remember that these other two sides, you're going to be adding them by negative for some reason Okay, so we never go outside of that And let's change the color because it's kind of hard to see So let's go with a dark brown, something like that Yeah, okay Now that we have this, we can maybe extend the text a little bit more So we see, like, hello world This is a long dialog Okay, so now you see, like, the text is wrapping and everything And there's one property here, which is percent visible Which, if you change it, it goes from 0 to 1 And if you change it, you get this effect as if the text is writing Like a very, like, visual novel or RPG style So we will want to animate this And the good thing about it is that we don't need to do anything special Because we know that always is going to go from 0 to 1 Let's do it with twin And as the description tells us, it's for animating node properties over time So now that we have the twin, that we're going to be coding later Let's add the last part, which is the icon indicator This is very big, let's move it here Okay, let's make it that size Okay, and this is something I will want to animate And actually do it with a regular node Animation player, animation, idle And we select the node and we see these keys around here Which will create a keyframe for the timeline So we click it, we create one Now we go to the center and we move this value down We click again, so we create this transition And we now press the loop option So when it ends, it will go back to the beginning And the autoplay, so we don't have to say anywhere in our code that it has to be playing Because we want this to be moving all the time And let's just select the animation player, current animation, idle And that's it One thing I always like to add is instead of making this interpolation as linear I use it as cubic, so it goes more smooth And that is what I want to show when the dialogue is already over And I want them to press enter or any key to continue But we're going to be showing that later We can close this animation panel now from here at the bottom And let's start writing the code Let's add to our dialogue box a script Which is going to be called dialogue box And let's remove everything We want to have our dialogue on a variable It's going to be an array because we want to have several parts for it So let's say hello there This tutorial is awesome And the next value is going to be If you like what you see You can click the subscribe button So basically I'm plugging myself here And if you don't If I want to add this And if you don't You should do it anyway Okay, this seems very positive So now that we have the dialogue that we want to show We want to show first this sentence, second this sentence And third last sentence And it will have to recognize how many you have So if you want to write 10 messages or whatever That's fine To track that we're going to be creating a new variable Which is dialogue index Which one is the current one that we are using Zero being the first one And we want to know if it's finished or not So we can display the indicator here To say okay, it's already done Like you should press something to continue Already We want to call a function that will display the text And every time we call that function The conversation will move forward So load, dialogue Let's create this function Load, dialogue And if the dialogue index Is smaller than dialogue size So basically, if the one that we want to display It's within the size of this Because we don't want to try to show the dialogue number 4 Because we don't have any And the program will give us an error So we check the size And you always have to be smaller than it Because we start with zero So if that happens We want to set the text The rich text label VB code text is going to be Equal to the dialogue And dialogue index So we select the first line And we add it to this rich text label Please make sure to use the VB code text variable Because you can say it here By using the text property Like any other label But if you want to add style And you will probably want to do that Especially changing the name of the character to a color So it's easier to remember something like that You will want to use the VB code And even though this text gets copied over all the time Try to never modify this one And always use the VB code If you have it enabled Now that we set the text Let's now make it add one Dialogue index Plus one So the next time that we run this function Is going to show the next one And we want to get on the process function Which remember this happens all the time We want to check for the input of the player So is action just pressed Let's go with UI accept So if they press enter We're going to run again The load dialog function that we created So the first time is going to load the first one It's going to add one to the index So the next time we press enter Is going to load the second one And it's going to be ready for the third one Let's try it out, let's see how it works Okay, hello there This tutorial is awesome Which is the first line we have there We press enter Third one When we press again Nothing happens because We don't have anything else So since we want to make it disappear Let's just remove the dialog So If the dialog index is bigger Than the size of the dialog Let's just remove with this function This node altogether So it will end Let's go And it ended Okay Now let's do the animation And add the indicator on the side For the animation we want to have First of all Set the rich text label Percent visible to zero Because whenever we change it We want to make sure that we are not showing anything And now start using the twin So for the twin We want to use the interpolate property And it has a bunch of requirements here But it's very simple You can read if you press control And you click on the twin name You will go to the documentation And here you have all the explanation Of how to use them And if you want the best way to try it out Is to create a twin function Like we're going to be doing right now And use that as a sandbox So you can start modifying values And see how it works Right now it's very simple You select the node that you want to animate And see that you want to change The initial value And the end value So this is the beginning, this is the end And how long it's going to be taking For that action to happen Then we're going to set some of the effects The easing and things like that There's a lot of effects that you can set here Especially like that interpolation Which will generate different styles But in this kind of animation That we want to do from zero to one We don't really need anything super fancy So let's go with The ones that were shown there What node do we want to animate The rich text label What property we want to animate Percent Visible Where it's going to be The first value Zero And by the end of the animation We want it to be one And how long it's going to be taking One I think this is in seconds But if not, it seems like it Now we want to go with the values That we've seen on the documentations Which are trans linear And Is in and out So now that we have the interpolation Here set on the Twin, we need to Make it start, so Twin, start Let's try it out This should now set the text Set the percent visible to zero But it will go to one In one second And we make that animation start Let's go Hello there, yeah Press again And last one Okay, it's working now We need to show the player That they have to press a key to continue Otherwise they're going to be waiting for something Let's use the Twin node Signal Twin completed So whenever a Twin animation is completed We want to emit That finished Is true So that the sentence already finished Remember, this is the variable we were Going to use And every time we set A text, since we are going to be Doing the Twin start and everything We want to set it to False, because We are not finishing, we are starting So finished False Okay, now to update The visibility of the indicator Here We're going to simply set The Next Indicator Visible Equal to finished So if it is finished, we show it And if it's not, we don't Let's Go ahead one last time And we get the text We press enter There's the next one And as you can see When it's typing The next dialog doesn't show And So This is a very simple way Of implementing a dialog system And I hope you learned how to use The rich text labels From Twin animations If you guys want to, I can add more things To it, maybe like a portrait For different characters Name for the character That is talking, or many other elements Again, I want to insist There are very cool effects that you can add to this kind of text And you should watch Johnny's video To see how you can do that Thank you very much, especially to my patreons Thank you guys very much I'm really, really, really Grateful that you guys are supporting me And I hope to release another video soon And see you guys next time Bye