UNITY 2D NPC DIALOGUE SYSTEM TUTORIAL

hey everyone and welcome back to the diving squad youtube channel this is the third episode in my top down controller series and in this episode we're going to look at creating an npc and a dialog box to go with this with this cool typing effect and continue button and so you see when we exit the range of our npc we can no longer speak to him but when we go back in range we're able to press a button and speak so i'm going to jump into a new unity scene and get started so inside this current unity scene i've got everything from our last tutorial which you won't need in this video all you'll need is a player that can move around and i've also imported two new sprites an npc sprite and a little profile image for my npc so first of all i'm going to drag my npc sprite into the hierarchy which will create a new game object called npc and then i'm going to head over to my player game object which you may already have done but i'm going to create a tag and add it called player so add this player tag to our player so that we can use this in the script then we're going to head back to our npc and add a couple of collider components first of all i'm going to add a capsule collider which is going to be our main collider so our player can hit the object but then i'm also going to add a box collider it's set to is trigger to make sure that our player can come within range to enable the dialog box now to create this actual dialog box we're going to head into our hierarchy under uin panel and create a new object called dialog panel i'm going to scale and position this to how i like it you can add background images or whatever you want i'm just going to keep mine the basic one for this tutorial but once you're happy with where it looks and how it looks we're going to move on to the next step now to design the contents of our panel within the panel as a child of it we're going to create a new ui game object and it's going to be an image this time this is going to be our little profile image for our npc character so i'm just going to call this npc image and then as a source image drag in whatever little profile picture you've got for your npc mine's just a little sprite version and scale and position this to how you're happy with again now heading back to our dialog panel game object we're going to create another ui element and this time it's going to be text so that we can type our npc's name this is completely optional as well as the little profile image but i'm just going type in npc name as a placeholder and again design this how i'd like it and position it under my profile picture lastly heading back to this dialog panel we're going to create a new text object called dialog text and i'm going to position this up here and leave plenty of space for our actual dialogue text to go design this how you want but make sure that we leave no text left and we're going to head back to our canvas and set to scale with screen size lastly now we're going to head on to our dialog panel and disable this in the hierarchy and then we're going to head on to our npc and add a new script called npc and open this up inside of visual studio start off by deleting the start function we're going to make sure we insert using unityengine.ui so that this all works we're going to create a few variables to start so we're going to create a public game object called dialog panel which will reference the whole panel a public text called dialog text and then a public string and we're going to call this dialogue and this is going to contain all our sentences then we'll create a private in called index which will help us find position in the string and lastly we're going to create a public float and we're going to call this word speed to type our text and a public rule called player is closed to check when our player is in range now to check when our player gets into range of our npc we're going to create a private void called on trigger enter 2d collider 2d other and then inside of this we're going to create an if statement saying if other dot compare tag player which is our player with its player tag then we're going to want to set our player we also want to do the same for when our player gets out of range so i'm going to copy and paste this whole function but change on trigger enter 2d to on trigger exit 2d and change player is close to false rather than true now inside of our update function we want to check when our player is in range of our npc but also pressing a button that we want to enable the dialogue so for me i'm going to select e but we can change the key code to any and we're going to check that the player is close and now we're going to create an if statement stating if our dialog panel is already active in hierarchy then we're going to want to set this to false which we'll do later and if not then we want to set our dialog panel to active in this else statement now to code this one to disable our dialog one we're gonna create a new function and we're gonna call this zero text just so it resets all our text i'm gonna do three things in this we're gonna set our dialog text dot text equal to nothing then we're going to set our index equal to 0 and our dialog panel to set active false so we're going to reset everything and then we're going to call this new function inside this update statement calling zero text we're going to also do the same in our ontrigger exit function that we made earlier calling the zero text again and then we're going to head back up to the top and start actually typing the text now that we've cleared it so we're going to create a new ienumerator and we're going to call this typing and this is where we get our cool typing effect so we're going to create a for each and then for each character in our letters in our dialog index dot 2 char array then we're going to want to set our dialog text.text plus equal to letter so that adds on a letter and we're going to yield return on u wait for seconds and then this word speed that will set how fast we want our typing effect to be later so now inside of our update function in this else statement we're going to start co routine and then this typing numerator that we just created we now want to be able to move on to the next liner sentence in our dialogue so we're going to create a new function called next line and in this we're going to create an if statement stating if our index is less than our dialog length minus 1 then we're going to index add one and we're going to set our dialogue text.text equal to nothing again we're going to start our core routine typing in this we're also going to create an else statement zeroing our text if not and head back into the unity scene and on our npc we're going to assign these variables dragging our dialog panel into the dialog panel slot and our dialog text into the text slot we're going to set the amount of items in our dialog array to the amount of sentences we want so i'm going to just do two for this example you can do as many as you want and i'm just going to type in something for our sentence to test this out later on and then we're going to set our word speed equal to something where we place each letter so a little value like 0.06 i find works perfect but you can play around with this and then we're actually going to enable our dialog panel and create a new continue button so that we can continue on to the next sentence so quickly set this to enable and then within our continue button we're going to design this how we want it and position it you can do whatever you want you can design it if you want then we're going to add a new on click event to our continue button and we're going to drag in our npc game object and select the next line function that we just created now we're going to create a couple more lines of code just to get this button working so head back into our npc script and quickly create a new game object and we're going to create a public game object so that we can refer to our button and then heading down to the bottom of our update function we're going to create another if statement outside the other one stating if our dialog text is equal to our dialog index then we want to set our continue button to active so it sets to active once our text is finished typing and then in our next line function at the beginning we want to set our continue button to false so that they can't skip ahead in the dialogue finally we're going to save our script and head back into unity where we're going to drag our continue button into our npc and actually disable this continue button itself then disable the dialog panel and then if we hit play and we move around and we move in range of our player and select our button we'll see that our dialog panel works perfectly and we can move out of range and back in range and it works perfectly that's all for this tutorial guys thank you very much for watching and thank you to my patrons for their continued support if you guys enjoyed the video don't forget to like and subscribe thanks guys

Channel: diving_squid

Views: 46,943

Keywords: unity, tutorial, 2D, game, games, gaming, game dev, game development, 2D game dev, indie dev, indie game dev, how to, online, diving_squid, diving squid, how to make a game, quick, short, dialog, dialogue, npc, non player character, stardew, valley, stardew valley, quest, talk, box, interact, chat, quests, system, npc dialog, chat function, typing, typing effect, ui, topdown, controller, 2d, rpg, multiplayer, players, messages, message

Id: 1nFNOyCalzo

Length: 7min 51sec (471 seconds)

Published: Thu May 19 2022