Branching Unity Dialogue System

welcome back dialogue essential backbone of the game you know it really is important and we're gonna make some branching dialogue system let's get right to it just for the sake of you understanding what we're aiming for i'm going to show you the final product here is the final product there's a dialogue that comes in it's very plain very simple this is the skeleton for you to create something bigger and better and trust me you can because this is the base of what i use and my stuff is complex you can choose options it goes away blah blah blah it's pretty straightforward and it's very easy to use once you get the hang of it all right so how should we start here's a blank project all i did with the project was make the camera's background a nicer color to look at that is all i did with the project it's this 2d default project all right the first thing that i'm going to do right here is i'm going to go ahead and i'm going to create a script um inside of the uh folder here so i'm just going to call this dialogue dialog and inside of this folder i'm going to create a script called dialog all right [Music] let this open up here quick so this might look a bit foreign or confusing it's not really you don't need to really uh be phased by it and i'll explain what each thing does so let's uh let's first create an interface called dialog section here's the thing if you treat all of your dialogue section parts as the same thing like when you talk to someone you will either talk to them in a monologue i'm i'm dumbing this down too i'm like stripping it down to its core when you talk to someone you're either talking to them in a monologue like hello i am x blah blah okay you ex we talk to them or you ask them a question maybe or you give them a few options that they can go from so um what you know what's your preferred scripting language that's a dia basic dialer you know hello how are you and then you say fine or not fine what's your favorite color your favorite scripting language so we're treating these all at the same thing since this is bare bones um we're gonna be i'm gonna have a string get speaker name uh get speech contents and if you've never worked with uh interfaces before interfaces basically allow you to have scripts that um they're like they're like people in the end everyone's a person like everyone's a person but inside you know maybe they they have different interests they have different jobs so you would have a person as an interface and maybe a different jobs like i don't know construction worker software engineer and teacher are all different uh classes you create off of that anyway the last thing is uh we're going to have a dialogue section get next section because we're always going to go to another section right so the first thing we're going to i'm going to i'm going to create here we're going to create is a monologue and this is pretty straightforward it's a class in the class so it's a class monologue and it's going to derive from dialog section so this is a dialog section in and of itself okay this is a pretty straightforward um class okay it has a name like the contents of the text a dialogue section um for the next section and now here here's here's where it gets kind of interesting if you hit ctrl dot i do this on in almost all my tutorials you can auto fill necessary um components you can autofill necessary code bits and if i hit enter it will autofill this for me so i can fill this in for myself you can also type this in manually again but right here i'm going to return next for the next section under the speaker name i'm going to return the speaker name under the speech get speech contents i'm going to return the content all right pretty straightforward the last thing we need on this on this to finish this class up is a constructor so let's create one real quick um sorry we're going to take in a few variables we're going to take in a string speaker name we're going to default this to um speaker name we're going to default this to default speaker we're going to put in content i'm going to default this to there's nothing here you should never see this in-game by the way this is just for debugging purposes um this and it's basically if this shows up it means something went wrong all right this is a really straightforward constructor it literally populates the class with what you give it [Music] it's not that deep it is not that deep at all um so what do we do next well we have a monologue which is very straightforward what we're going to do next is we're going to have choices choices okay so we're going to create another class and i'm going to scroll down here choices this is also the deriving of dialog section it's going to have a public string speaker name it's going to have a public string contents it will have and this is the part that is that is different it has a public list of tuple and the tuple is of a string to a dialog section we're going to call these choices it's gonna give me an error well you don't have tuple that's because we need to be using system control dot enter control dot and then select fill in the required um using you know it will auto fill or you can just manually type using system up here okay so we're going to uh again we're gonna satisfy the interface right here and we're going to return the contents here we're going to return the speaker name here and here's important you're just going to return null okay you're just going to return null because this is special these are choices all right um before uh okay okay so we're going to create the constructor and we're going to say string speaker name equals default speaker again we're going to say string contents equals there's nothing here three dots make a choice you don't have to write exactly this literally just an example it's like a um default all this means is if you don't put anything in here it will just defaults to that so all right i'm just adjusting some things here all right so again very simple this dot speaker name equals speaker name this dot contents equals contents and finally this got choices equals choices okay it looks like we're we we've we've gotten uh pretty good we've got two very basic understandable classes inside of a super class right here dialog and the last thing we're going to do is for user-friendly for user user-friendly purposes user interface purposes for you as the programmer we're going to add two we're going to add two functions to the bottom of here public static tuple and you'll you'll understand what this is for okay string dialog section choice this will allow you to easily make a choice and it just makes your life easier it just makes it read easier in the program etc etc etc the other function is a public static list of tuple of string to dialogue section and it's maybe called choice list also this is okay this is also for readability the other thing is this is how you create params you say params which is short for parameters and this is we're going to just have tuple of string to dialog section and this is going to be an array and i'm going to call this entries then all you need to do is do this list of tuple of string to dialog section results equals new list and then it'll auto populate it for you hopefully results results equals entries okay so we're just gonna convert it to a list so for each tuple in entries results.add it's gonna it's just gonna populate a list it's really not that complicated okay so this is everything that goes in this class this is the brains of our operation all right this is the brains of our operation when it comes to thinking about the the dialogue interaction all right um and you're gonna understand it's very easy to read when you're writing it out so now that we've finished with this how exactly are we going to end up displaying these okay well that's that's glad you asked very glad you asked all right i'm going to hop into the scene here and we're going to have to do some uh creating okay so if you want to always check out the project link to the github repository down below feel free to download all right feel free to download feel free to compare your stuff all right so let's create some components first thing is we're going to do is we're going to create a canvas on this canvas we're going to go to it and set instead of constant pixel size on its canvas scaler we're going to hit scale with screen size and make it 1920 by 1080. this is just going to make it scale with the screen it's going to make it very easy to not have it be messed up as like it's so it you know this is a basic canvas etiquette 101 when you're creating canvas stuff all right um on this dialog canvas which we're going to this canvas we're going to name dialog canvas by the way canvas canvas there we go under here we're going to create and bear with me we're going to create a few things the first thing is a panel under that panel and make sure you you import text mesh pro because tech mesh pro is amazing we're going to create two text objects after it imports text mesh pro i'm going to create two text objects right here um we're also going to create one empty object and then we're going to also create a button a text mesh pro button now everything is very crowded and not at all not at all organized so we're going to go ahead and start organizing this i'm going to scale this down remember if you hold a corner and hold alt it'll scale it down to the middle locally i'm going to put this around here okay now i'm going to just sort this stuff out i'm going to call this panel dialog panel i'm going to call this text speaker text i'm going to call this text speaker contents i'm going to call this game object dialog choice parent i'm going to call this button proceed to next and i'm going to call text under this button proceed to next text just so we have it all organized and i'm just going to organize these so this this is going to be the name the person's name when they're talking i'm going to center it i'm going to put the text in the middle i'm going to grab this text mesh pro i'm going to make it about this size i think i i like the look of this this is fine maybe it should be a bit bigger actually just so it's very readable on the screen i remember when you actually make a game this should look nice okay make it look nice spend good remember don't don't slack off on your dialogue panel okay if it is off it looks awful if you do you know make sure to add some nice um make some nice artwork for it right you want to make some nice artwork for it so that it doesn't look ugly the last thing you want is for your thing to look ugly okay and i just want to make it readable for the tutorial so i'm gonna make this around 50 maybe 50 point font and all right so we've we've got our thing here the last thing is this is this is important by the way you're going to want to maybe move this up and make this is where our dialog options are going to appear down here all right so we've created our panel let's go ahead and select the dialog canvas and add a component to it we're going to add dialog manager and this is going to be our manager if this looks kind if it looks kind of familiar it's because years and years ago before i adapted this system this used to be um the brachis dialog manager so it may look i don't think it looks very similar but it may hint at it if you will all right okay so let's just make sure we're using tm pro up here um make sure you're using static dialogue the class we just created and make sure you're using system okay the first thing we're going to do is we're going to say public dialog section current section next i'm going to create a text mesh pro ugi reference for the name text i'm going to create a reference for the contents text i'm going to put a header above it called text components organization these are i'm going to i'm just going to dump every single variable we need we're going to have a public game object proceed conversation object we're going to have a public game object dialog choice object and this is we're going to create later a button that will spawn in we're going to have a public transform parent choices 2. i'm going to put a a header called dialog choice this is our dialog choice manager i'm going to have a public float canvas group fade time this is for the basic fade we're going to add i'm going to add a public uh a bool canvas group displaying and remember you want to make this look nice when it's your turn add an animator or something public canvas group dialog canvas perfect i'm going to add another header always and make sure to add some headers it looks nice it looks very nice if you add headers all right okay let's start from the basics let's add a start function and let's create a function inside called initialize panel all this is going to do is make the panel invisible and we can auto generate this with control dot dialog canvas group dot alpha equals zero this is just so that it defaults to a blank it's just blank when it starts here okay okay let's add a function and under update called update canvas opacity this is just going to say dialog canvas group that alpha equals math f dot ler from dialog canvas group dot alpha to and this is gonna be a um uh ternary function so this is canvas group displaying this is saying if our boolean is true then we're going to be doing it to one otherwise we're going to be doing it to zero and then we're going to be doing at a speed of time delta time time times canvas group that is it not for the whole script but for the canvas opacity at least okay the next thing we're going to do is of course let's create a start dialog function and this will take a dialog section start okay this is going to say canvas group displaying equals true just so that it fades in then we're going to clear all our options we don't have this function yet but in the future if we have some options already displaying we're going to go ahead and just clear them we're going to set our current section to the start and we're going to display dialogue in here we have two functions that we do not have yet okay let's first i'm going to comment this out and i'm going to start by uh solving this problem display dialog okay we need the display dialog function so let's go ahead and populate it with first if current section equals null then we're just going to go ahead and end dialogue and return this is very very similar to the brackets one under end dialog we're just going to say canvas group displaying equals false and we're going to say clear all options again okay we seem to have this recurring clear all options which doesn't exist that's fine because that's exactly what we're going to do right now i'm going to re-uncomment this stuff ctrl dot and extract the method oops this is going to be a simple find and destroy simple find and destroy game object array current dialog options and remember we haven't made these options yet we're going to just find objects um with tag and we can probably edit this later but dialog choice we're just gonna find all the things with dialog choice we're going to loop through them for each entry in current.current dialog options we're just going to destroy the entry all right okay so what do we do next well we need a proceed to next function so i'm going to go ahead and create the proceed to next function right here this is the function that will be called to proceed to the next dialogue okay all right so first first i'm going to go back into my unity and i'm going to start populating to see what we have to we to see what we have okay i'm going to go ahead and set the name text to the speaker text the contents of the contents okay i'm gonna set this button i'm gonna set this buttons function to call look at the canvas under dialog manager and hit proceed to next this is not going to work yet we're just setting it up i'm going to select the dialog panel add a component called i'm going to add a component called canvas group and i'm going to drag this dialog panel under the dialog canvas group entry here under parent choices 2 i'm going to drag dialog choice parent and proceed conversation i'm going to just select proceed to next and i'm going to drag it over here the last thing we need is this thing called dialog choice object and now this is a prefab that we're going to go ahead and make before we're going to go ahead and make make this the first thing we're going to do is we're going to create a um an empty object right here i'm going to put it under dialog choice parent i'm going to set this to be in the zero zero zero just set at zero zero next i'm gonna name it dialog option parent all right pretty simple pretty understandable the next thing we're going to do is we're going to tag this as dialog choice so it it will be deleted if you're a real pro and you really really want to kind of get that efficiency going you can probably pull these in an object pool but i'm not going to do that because this is not supposed to be super complicated all right under this we're going to make a script called dialog option display well that creates itself right there i'm gonna go ahead and do this i'm gonna create a ui panel underneath this it's going to be it's going to be very very small it's probably gonna be zero zero but let's let's just make this around this size it will be ill it'll be snappier later all we wanna do right here is what we wanna do is i'm going to name this um dialog choice and this is going to just be a this is actually this is actually not a panel my i'm sorry i'm sorry this is a button text mesh pro button this button will be x wide it doesn't really matter i'm going to just set it to be a background and the black and i'm going to hit 50. i'm going to also do this with the dialog panel i'm just going to make it 50 and black i'm going to make this text say dialogue choice text i'm going to call this dialog choice and i'm going to go ahead and make this text probably around 50 point font maybe 40 point font 45 point font looks better and i'm gonna make it white all right i'm also going to i i it looks it seems that i've made a mistake remember to create this empty underneath the dialog choice parent so that it actually has a wrecked transform instead of the classic transform now now it's going to behave way better so sorry sorry about that that was a bit of a confusing um but i i also said this to stretch by the way just now all right okay so this is what it's going to look like as an option in the in the scene yeah all right so just to recap we have a parent and we have another empty under it called dialog option parent and that has a button inside of it the uh this will have the dialog option display script on it all right make sure we're on the right track here all right okay the last thing we're going to do is go here say vertical layout group set this child alignment to upper center as a default and we can go ahead and collapse this and duplicate it a few times just to have some makes make spacing all right this looks like a 10 spacing is is uh the correct spacing for our project next i'm going to take this dialog option parent and stick it as a prefab and delete it from the scene all right the last thing we're going to do is go under dialog canvas scroll to here and enter in our final field which is dialog option parent is dragged into dialog choice object perfect okay what about the dialog option display script we've been bouncing around so let's go ahead and fill the script in it's really not that complicated let me look at my reference here all right public we're going to have a public text mesh pro gy remember to import using tm pro right here um we're going to go ahead and say content text we're gonna they're gonna be only three variables actually public um and we're gonna go ahead and say using static dialog again because we're these are all relating to dialogue dialog section leads to and finally private dialog manager manager the last thing is now we're going to make the start method the start method is going to say manager equals find object of type dialog manager and we're going to have a public void set display it's going to take a string option text it's going to take a dialog section next dialog section inside of it it's just going to say content text dot text equals option text and leads to equals next dialog section all right next is public void proceed on click this is what's gonna happen when you click the button this is gonna say if manager dot and we don't have this property yet but we will displaying choices return ctrl k control d formats your document by the way uh we're just going to say manager dot current section equals leads to manager dot display dialog well it looks like our display we have a few errors to clear up here so let's go ahead and go in here display dialog seems to be private so let's just go ahead and make that public to fix our error and the uh and it should clear up already here the last thing we need to do is go down here to clear that other error and let's go ahead and create some properties these are all going to be private let's say int index of current choice equals zero we're going to say hide in inspector public bool displaying choice choices and a private bull options been displayed i'm gonna go ahead and i'm gonna go ahead and recheck back here and it looks like bam perfect it's it's it's it's done uh this all this does is in the future it's going to check if we're we're setting these out if you have an animation this is more is more useful if you have an animation all right okay next function we're going to add in dialog manager it's going to be under here and it's going to be public void reset display options flags it's going to say options been displayed equals true displaying choices equals true index of current choice equals zero this will make more sense later next we're going to make a public void display dialog options and all right all right okay we're gonna first check if if this is and i'm going to explain type of if it's not the type of choices dot is instance of type current section return this says hey if we're not in a if we're not displaying some choices if if it's not a choices uh if it's not a choices dialogue we're gonna ignore this we're gonna just skip we're gonna just not do anything because why would we even care okay choices choices equals choices we're casting two choices current section okay this is especially important because if you try to cast a monologue to choices that's not gonna really work okay if we're displaying our choices then we're going to go ahead and say if the index of the current choice is less than dot choices.choices.com we've still got choices to put out then we're going to go ahead and say tuple tuple of string to dialog section wow this looks familiar isn't it it's because we messed with this a lot option equals choices dot choices of in our index of our current choice all right next we're going to say game object s equals instantiate dialog choice object at vector3.0 at quaternion.identity s dot transform dot set parent to parent choices two we're instantiating the the little button we're parenting the button to that little uh the thing the vertical layout group object so it automatically places it where it should be dialog option display option display behavior equals s dot get component dialog option display perfect all right next we're going to say option display behavior dot set display as option dot item one option dot item two and it's it these are the items of tuple which is a pair of two things index of current choice plus plus and then finally finally finally finally else displaying choices equals false which means we finished displaying our choices okay that was a lot we're going to go ahead and come up here and under our update we're going to also call we're going to call prepare [Music] oh no we're going to call display dialog options and we're going to also have another function that is called before called prepare for option display all right let's create this function i'm going to stick this function right under update canvas opacity if the options have been displayed we're going to return um if if they're not we're going to proceed and ask if type of and we do we did this before choices dot is instance of type current section we're asking is our current section a choice we can actually make this into a something that is uh a function but i'm just going to keep it like this and we're going to call reset display options flags all right okay this script you know it's getting a bit long but that's fine that's perfectly fine we're gonna go ahead and options what are we gonna do under proceed to next okay this is the last bit we're gonna be doing if we're displaying our choices then we're just going to return otherwise if our current section dot get next section it does not equal null then we're going to go ahead and current section set our current section to our current section dot our next get next section and we're going to display dialog otherwise we're going to end the dialog all right under display dialog we're going to go in here and say bool is monologue so we can check if it's a monologue equals and again that same same function type of monologue instead of dot choices time dot is instance of type and you guessed it current section proceed conversation object dot set active is monologue so we're going to we're going to set that little next button to whether it's a monologue we're going to clear all our options and we're going to display the text display text isn't a function we've made so let's go ahead and implement it display text says options been displayed equals false name text dot text equals current section speaker name contents text dot text equals current section dot get speech contents that is our entire dialog manager script let's tie up the loose ends we're going to go ahead and go out here i remember specifically we didn't actually uh remember to set uh some of the variables here so i'm going to go ahead and drag this into the content text i'm going to select this button hit up the plus on on click i'm going to drag dialog option parent onto it i'm going to hit dialog option display and say proceed on click looks like i uh miss click there okay next we're gonna just check if all our stuff is set up here and we hopefully have completed our dialogue manager now how your question is how do we use this that is where jonathan comes in and now you're like what who's jonathan what the heck well jonathan is our test object i'm just going to create a new object and call it him jonathan um up here and i'm going to add a jonathan script to him now remember every time you want to have some sort of dialogue you're going to have to have a new script you're going to have to have some sort of callback to a dialogue section this may be confusing but i'm going to go on a bit of a tangent but this tangent is important all right this is a sign for you to start using code okay beginning of tangent every person that uses unity will look at the inspector at least in the beginning of their unity development journey and love their inspector the inspector is pretty amazing you have a pretty user-friendly way of entering x y and z in the brackets dialog tutorial the entire dialog is set through the inspector but listen to me right now please get used to using more script this allows you to do more have more organization have more usability for all this stuff so now that you've created your jonathan class what you're going to want to do is simply enable using static dialog like pretty much every other class in this project and here i will i'm going to paste in a basic dialogue and go step by step how to use it under your start method this is just a debug but this start method is where uh this line triggers the dialog it finds the dialog manager and it starts the dialog and it takes in a function now this func tester which i could just call conversation is pretty simple it returns a dialogue section and how does it work well i say monologue a equals new monologue i input a local name which i keep up here so i can change it all at once and i put in some text for what's going to go and i put in the next dialog section remember both of these are dialog sections so you can return basically anything so what does this do returns a so it says monologue so it says monologue a equals blah blah choices b equals and then it says the name how are you today and it asks you fine or not so fine all right and then it has some endings here and if you don't put anything it will just terminate the dialogue coming back here we can change one more little formatting thing for the dialog option make it center hit play and when it starts it'll mean to say good morning i'm jonathan how are you today fine not so fine if you hit fine it says that's nice to hear have a nice day now one one little thing that it's not doing is it's not clearing the uh it's not clearing the options after we click them so we can just check here and it looks like it's because we didn't tag our dialogue option parent it's because we had that little error um uh because we didn't create the proper we didn't create one with direct transform so we clicked this how are you today fine they disappear that's nice to hear have a nice day so we're smoothing things out we're smoothing the last things out let's hit play again and let's go into the scene let's actually precede the dialogue until we have some options here and it looks like it looks like our stuff isn't really sizing correctly that's very easy to fix all you need to do is go in here and maybe resize the elements just resize the elements and this is like for you to mess around really um we can actually do this it'll say it looks okay right here but sometimes it's it's just really uh it's really difficult if you look here it's gonna if you look at this the wreck transform while um while we're in the scene see scale 1.4 it looks like the scale is just being corrupted that's a very simple fix we just go into the dialog manager we find where we instantiate each of these all right s dot transform dot uh the s dot get component rect transform dot local scale equals vector 3.1 this should just reset its transform to what it was before let's hit play looks like it's perfect all you need to do now is pretty much just fix the spacing which is right there negative it looks like it should be negative 87. perfect dialog system branching all right it has come to the end of the video um i really i'm sorry if there were any bumps in the middle this is a really long tutorial i had to get a few takes in um for some sections so that's that thanks for watching make sure to um check the github repository if you've got any like oh what's what's going on why is this not working for me um yeah so that's pretty much it you know thanks for watching i appreciate it you've come to the end of the video and i hope you do um successfully make a dialogue system that is nice for you and remember this is a skeleton i you know i say this in a lot of my tutorials but this is a skeleton of something that you can you know you can put some meat on it you can put some organs on it uh in it more like you can put you know you can put some skin and you can make it look nice you can you can make it look nice dress it up so um remember this is the base for something bigger and better and trust and if you look at any of my games my dialogue system this is like a stripped down version of my dialog system so thanks for watching have a fantastic day

Channel: CodeGnat Studios

Views: 263

Keywords: unity, tutorial, game development, C#, dialogue system

Id: Pue2SNciSgw

Length: 51min 3sec (3063 seconds)

Published: Mon Sep 06 2021