RPG or Visual Novel dialog box for Godot!

hello its 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 fund 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 with building a very basic dialog box as in the style of RPG or visual novel and we will need first of all it's the background seeing control text to read let's set this texture okay it's a bit bigger let's say it now to scale and expand and now when we modify the size here now these texts already set the layout to occupy the full correct and we have it now as we wanted now when we modify this you change to the size now that we have the size desired let's lock it and move it to the center of the green with this anchors that you have here you cancel where the element is going to align if the windows size changes and I wanted to be anchored to here so if we try the game let's save it yeah if we make it bigger it would always stay in the word 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 I'm gonna go with the rich text label which will enable us to write some text with different styles this is 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 gonna be covering that if 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 future so I'm going to be using BB code it's going to be enabled and that's it hello there people from YouTube this style is a placeholder ok the font is very ugly so let's change those settings scroll down to stop font let's go with a normal font and new dynamic font as always this process is kinda crazy but just bear with me let's set here the font file load font 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 that's out I don't know like yeah 15 and 15 I remember that these other two sides you were gonna 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 time okay so now you see like the text is wrapping and everything and this one property here which is percent visible which if you change it is it goes from 0 to 1 and if you change it you get this effect as if the text is I think 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 zero to one 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 at the last part which is the icon indicator ooh this is very big let's move it here okay let's make it that size yeah okay and this is something I will want to animate and actually do it with a runny nose animation player.you 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'll 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 beginning and the autoplay so we don't have to say anywhere in our code that it has to be plain because we want these to be moving all the time and this goes like 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 Kubik 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 gonna have to be showing that later you 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 we call dialog box and let's remove everything we want to have or 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 one is going to be if you like what you see you can click this subscribe button so basically I'm flagging myself here and if you don't if I want to add this ok and if you don't you should do it anyway ok this seems very positive so now that we have the diagram 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 and that's fine to track that we're gonna be creating a new variable which is dialog index which is which one is the current one that we are using zero being the first one and we want to know if if it finished or not so we can like 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 hello okay let's create this function no dialogue and if the dialog 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 four because we all 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 bbcode text is going to be equal to the dialogue and dialogue index so we select the first line and we added to this rich text label please make sure to use the vehicle 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 like changing the name of the character to a color so it's easier to remember something like that you will want to use the BB code and even though these text gets copied over all the time tried to never modify this one and always use the P vehicle 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 gonna 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 it's action just pressed let's go with you I accept so if they press ENTER we're gonna run again the load dialog function that we created so the first time is going to load the first one it's gonna add one to the index so the next time we press ENTER it's gonna load the second one and it's gonna be ready for the third one let's try it out let's see how it works okay hello there it is this tutorial system which is first line without their will press ENTER we see a second and a third one 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 note all together 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 level 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 tween so for the tween 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 flame you will go to the documentation and here you have all the explanations on 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 the Sun book so you can start modifying values and see how it works right now it's very simple you select know that you want to animate the property that you want to change the initial value and the end value so this is the beginning this is the end and how long is gonna be taking order action to happen then we're gonna set some of the effects the easing and things like that there is 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 0 to 1 we don't really need anything super fancy so let's go with the ones that were shown there one note we want to animate the rich text level what property you 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 is 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 under documentation which are trans linear and is in and out so now they'll have the interpolation here said 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 present 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 not we will need to show the player that they have to press the key to continue otherwise they're going to be waiting for something let's use the twin no signal and twin completed so whenever our 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 gonna be doing the twin start and everything we want to set it to false because we are not finishing we are starting so finish false okay now to update the visibility of the indicator here we are 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 press ENTER its next one and as you can see one needs we need it's typing the next dialog doesn't show and yeah so this is a very simple way of implementing a dialog system and I hope you learned how to use the rich text labels with some 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 cannot do 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 patreon 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 [Music]

Channel: Emilio

Views: 36,770

Keywords: godot, 3.2, Control, RichTextLabel, TextureRect, Tween, AnimationPlayer, Sprite, Tutorial, rpg, dialog, visual novel, system

Id: kkLqW8WhCgg

Length: 16min 33sec (993 seconds)

Published: Fri Feb 14 2020

Reddit Comments

[u/Ramshell]

I found it pretty useful :). However, I think using a Sprite within control nodes is not a good practice since you lose the anchor and relative properties.

[u/golddotasksquestions]

Hello there, this tutorial is awesome. Not even kidding, ey?

[u/theeffinglaw]

awesome tutorial, i subscribed to your YouTube channel :D

i do have a question about using the tween node for percent_visible. Since its based on a percent, doesn't that mean that a longer dialog will print out faster than a shorter dialog since they all reach 100% after 1 second.