How to make a Dialogue System in Unity

dialogue can be a great way to add character to a game and introduce humor this video will have a look at how to create a simple dialogue system from scratch and will design it in such a way that you can easily expand upon it to suit your needs also on a completely unrelated note Sophia and I were on a podcast it's called game dev Unchained it's super cool go check it out if you want to learn more about the making of Brett keys and the game industry in general there's a link in the description also thanks to hands off tuned for his support on patreon alright let's get started so it's the theme we're going to be working with have a canvas with a dialog box this is just a simple image and under here I have two text objects one for the NPCs name one for the dialogue and then I have a continue button this is all made from the standard UI tools the only thing I'm using is a custom font that'll be a link to where you can download that in the description also in the background here I have some sprites from the 2d mega pack I'll have a link for that as well now above our dialog box I have a button this is just here for testing purposes and will allow us to trigger a new conversation to begin our dialogue system that's right click in the project panel go create and choose C sharp script and let's call this our dialogue manager we can also create an empty object in the hierarchy reset the transform call this one dialogue manager as well and drag our script on to that let's then drag our object to the top so that we can always see it if we now double click our script to open it up in visual studio we can go ahead and delete our update method and right above our start method we want to add a very central variable we want to add the variable that will keep track of all of the sentences in our current dialogue so right off the bat you might think well let's go and create a public string array remember an array is basically just a list of objects and so this here could be a list of text elements we then call it something like sentences and close that off and we could definitely do this using an array but there is actually a data type that is much more fitting for what we want to do this data type is called a queue in order to use a queue make sure that you're using the system duck collection namespace a queue works in many ways like a list except it's a bit more restricted it's what we call a FIFO collection FIFO stands for first in first out so when we go ahead and load a new die we'll put all of the sentences that we want to display into this queue and then as the user reads through the dialog we'll simply load new sentences from the end of the queue now it's good practice here to define a type far queue and that's going to be of type string so we'll make a queue of strings and in our start method here we'll just go ahead and initialize it so let's set sentences equal to a new queue of type string and we actually don't need this variable to be public let's make it private instead so now that we have our queue of sentences let's go ahead and define a non-dairy object let's right-click in the project panel go create c-sharp script and let's call this object dialogue now basically we are going to be using this dialogue class as an object that we can pass into the dialogue manager whenever we want to start a new dialogue and so this class will host all information that we need about a single dialogue that also means that we don't need this to derive from monobehaviour because we don't want it to sit on a script and we can also go ahead and delete or two methods instead we want to create a public string array which is going to be the sentences that we will load into our queue so we'll call this one sentences and we can also maybe put a name of the NPC that we're talking with so let's create a public string called name now remember whenever we create a class like this and want it to show up in the inspector so that we can edit it we need to mark it as serializable to do that we go to the top of our class and add an attribute called system dot serializable now we can save this and if we then go into unity not much should happen because we've only created this object but we haven't really implemented it anywhere and so we can't physically edit these properties so let's go ahead and create a third C subscript and this is going to be our dialog trigger you would also call this NPC or interactable or even story element I'll just stick to the generic name now this group is going to sit on an object and will allow us to trigger a new dialogue so for the purpose of this video let's put it on the test button let's drag in our dialogue trigger and let's open it up let's delete the two methods and let's create a public and now instead of using a normal data type we'll be using the one that we just I did the dialogue class and we'll just call it dialogue with a non-capital B but when we save this in hidden to unity voila we now have a dialogue variable where we can put in a name I'm going to put in Dwayne Johnson and we can also add as many sentences as we would like I'm going to add three here and now we have three text fields however we could easily make these text fields a bit nicer I don't feel there's enough space here to add long sentences to make this nicer we'll go into the dialogue class and right above the sentences variable we'll add another attribute this one is going to be the text area and inside some parentheses we'll specify two variables the first one being the minimum amount of lines the text area will use and the second one being the maximum if we now save that and navigate back into unity we can see three nice text area boxes that we can use so I'm just going to fill in a quick conversation now here I'm just pretending to be a single NPC if we wanted we could put as many dialogue triggers in our game as we wanted to we could simply go and create another empty object we could call this one Linda put a dialogue trigger on her give her a name and some sentences to speak and so this makes it really easy to publish your game with different pieces of dialogue let's just leave then the for now and stick to our test button now of course we currently only have this variable we also need some way to feed this to a dialogue manager to do that let's open up our dialogue trigger let's create a public method of type void let's call it trigger dialogue and in here we simply want to locate our dialogue manager the best way to do this would be using a singleton pattern but I don't want to get into explaining those in this video I'll have a link in the description if you want to learn about them we'll just be using find objects of type the type of object we want to find is the dialogue manager and now that we found this object we can go ahead and call it function on it and we haven't made this function yet but let's just call it something like start dialogue we can then give it a function argument to tell it what conversation to start and we can simply pass in our dialogue variable now if we save this and go into our dialogue manager we can go ahead and add this method so let's create a public void called start dialogue let's have it taken a dialogue object and let's just call that dialogue as well and then inside the method we can go ahead and write debug deadlock starting conversation with and then add dialogue dot name then after this of course we want to go ahead and load in all of our sentences want to update the UI and everything like that but now we should actually see that if we call trigger dialogue on the dialogue trigger script it's going to start a conversation of course there's a million different ways to trigger dialogue you could call the function when the player gets inside of a certain radius you could call it when he discovers an object maybe when he starts the game or lucid on our case we'll just call it when he presses start conversation let's go to the button here let's add an onclick event let's drag in our dialogue trigger let's go under the dialogue trigger and find the trigger dialogue function now when we'd play hit start conversation it says starting conversation with Dwayne Johnson awesome so now on to scripts are communicating but we still need to load in all of our sentences to do that we first want to clear any sentences that were there from a previous conversation to do that we called clear on this sentences cue we then go through all of the strings in our dialogue that sentences array let's write for each string and we'll call each sentence sentence in dialogue sentences we want to queue up a sentence so let's go sentences god and cue and we'll just put in the sentence that we're currently looking at so after looping through all the sentences in our dialogue and adding them to our cue well then we want to display the first one so let's make some kind of method called display next sentence we'll also make this a public method so that we can call it from our continue button let's call it display next sentence and first we want to check if there even is more sentences in the queue so we go if sentences dot count is equal to zero this is true we have reached the end of our queue and we can go ahead and end our dialogue let's create a method called end dialogue and it's also just returned out of the rest of the function let's quickly create our in dialogue function and for now we can just put debug the large end of conversation however in the case that we still have sentences left to say well then we want to get the next sentence in the queue by going sentences dot DQ and we can store this in a string variable called sentence and for now let's just debug log that sentence so when we save this head into unity hit play and then hit start conversation we can see it's a starting conversation with Twain and then the first sentence is loaded hey there my name is Dwayne and then of course we need to be able to skip to the next line we want to do that using the continue button but we first need to hook that up let's go on to our dialogue box let's find the continue button let's add an onclick event let's drag in our dialogue manager that's called the dialogue manager display next sentence function and now when we hit play start the conversation and hit continue we can see that it shows the next line I mean to guide you through your dangerous adventures and wake you up in the morning of course and when we continue past all of our sentences it says end of conversation so now we have a fully working dialogue system all that's left is updating the UI to show it and this is the easiest part we simply need a few references to UI elements let's go up here and say using unity engine dot UI will then create two public text variables the first one is going to be our name text and the second one is going to be our dialogue text then when we display the next sentence instead of showing it in the console will go dialogue text dot text equals the sentence and right when we start the dialogue we can set the name so let's go name text dot text equals dialogue dot name and we can get rid of the debug log now let's say that go into our dialogue manager drag in the name text and the dialogue text hit play start a conversation and voila our text objects appropriately update but we still need our dialogue manager to animate in and out to do that let's use a simple animator let's select our dialog box let's go to the animation tab or go window animation let's hit create we want to add an animation called dialog box and we'll create two states one for when it's open and one for when it's closed let's begin by creating the open state we want to make sure to hit record and let's insert a keyframe on the Y here so just copy the current value move it slightly and paste the value back in and now you can see it's red here and it's added a keyframe we then create another clip this one is going to be the dialogue box close let's leave that here we also want to make sure to hit record and now we want to move it below the screen let's create and drag while holding down shift to only move it on one axis and there we go now it's out of slide so now we can stop recording we can go into our animator this is window animator and you can see in here that we have two states the dialog box open and the dialogue box close first off we want to make the close state the default state so let's right-click and go set as layer default state we're going to go up here and make sure that we under the parameters tab we can add a new parameter let's make it of type pool and let's call it is open this value is going to determine whether or not our dialog box is currently open when then right-click on a closed state hit make transition click on our open state let's also make one the other way on our transition from closed to open let's make sure to add a condition this will make sure that we will only transition to open if the it's open parameter is two and we also want to make sure to disable heads exit time so we want wait for the current animation to play out before transitioning on the way back we can do the same thing slow we don't want it to have exit time and the condition will be is open but this time we want it to be false now in order to control this animation we need a reference to the animator component that is automatically created on a dialog box so let's go inside of our dialog manager let's go to the top and add a public animator let's call it animator then when we start the dialog we can go here to the very top and say animator dot set bowl the bowl that we want to set is the is open parameter and we want to set it to true because we are starting a new dialogue let's copy this same piece of code and paste it in the end dialog function and this time of course we want to set it to false now when we save this and go to our dialogue manager we now have a slot for the animator now this it's on my dialogue box object so I'll just drag that in there let's hit play and you can see by default our dialog box pops out of the way when we then start a conversation it eases onto the screen and if we go through and end it it slides back down finally to add the last bit of polish we can have these letters in our sentences and made one by one onto the screen to do that let's go inside of our script and instead of just updating the dialogue text directly let's create a code team that will do this for us let's write I enumerator we'll call this type sentence and we'll give it a string the descendants to type first off we want to set our dialogue text text equal to an empty string then we want to loop through all of the individual characters in our sentence to do that we use a for each and we want to loop through each character which we'll call the letter in sentence dot to char array to char array is a handy function that will convert a string into a character array and so here we're just looping through each character and the character that we're currently looking at is called letter so now we can simply add our letter onto the dialogue text one by one let's go dialogue text text right plus equals letter this will append our letter to the end of the string and after each letter we'll wait a small amount of time I'm just going to wait a single frame so let's write yield return null all that's left is to call this co-routine we'll do that up here to call it will write start co-routine the co-routine that we want to start is type sentence and we want to make sure to pass in the sentence to type also there is the possibility that the user will start a new sentence before the previous one has finished animating in that case we want to make sure that it stops animating before we start animating the new one to do that we'll call the stop all co-routines function let's make sure that if type sentence is already running it will stop doing so and then we can start a new one so let's now save this and let's hit play inside of unity now we start a conversation and voila the letters are animating onto the screen that's pretty much it for this video if you enjoyed it make sure to subscribe so you don't miss the future one and make sure to check out game dev Unchained also we've been more active on Twitter lately so make sure to follow us at brackets three aren't that thanks for watching and I will see you in the next video thanks to the awesome patreon supporters who donated in June and a special thanks to hands often yes by Mickelson will code Thomas Wally stone gamer Sybok mommy Jason Lotito Derek James Kirk and face of Merrifield if you want to become a picture in yourself you can do so at patreon.com slash practice

Channel: Brackeys

Views: 622,235

Rating: 4.9453726 out of 5

Keywords: brackeys, unity, unity3d, asset, assets, beginner, easy, how, to, howto, learn, course, tutorial, tutorials, tip, game, development, develop, games, programming, coding, basic, basics, C#, dialogue, system, dialogoue system, conversation, cutscene, cutscenes, animate text, text, sentence, element, trigger, NPC, NPC's, talking

Id: _nRzoTzeyxU

Length: 16min 19sec (979 seconds)

Published: Sun Jul 23 2017

Reddit Comments

[u/NeoDragonCP]

I love Brackey's videos but I'm surprised he didn't use something like Yarn/Yarn Spinner. I've been using it for about 3 months and love it.

[u/theEmoPenguin]

it has a bug, that the last word jumps to the lower line. Anybody knows a work-around?

[u/mjrice]

I love your videos, keep up the good work!

[u/[deleted]]

TIL Queue is a thing.
+1, as always to my favourite tutorial series.