Unreal Engine 4 Tutorial - Dialogue System - Part 1

[Music] hi everyone and welcome to the first part in a short series I'm going to do about dialog systems and how to implement a a good one into your game so to demonstrate what the end goal is I'm gonna click play so this is of quite a robust system allows you to use it for multiple things not just at dialogue with NPCs so for example we've got this signpost here pushed interactive picky and it'll tell us some information and likewise and got this NPC and he'll have something to say as well with multiple lines of dialogue and it's done NPC well different type lines of dialogue okay so this a really robust movie simple and to show you how easy it is to add new NPC dialogue I can just drag in a new NPC next I and just change that ID number of the NPC to say 3 and push play and now I've got this guy and he'll have his lines of dialogue so this is really a really fun and good way of setting up a dialogue system and pointing one of the better ways I've ever used dialogue in games it allows a lot more freedom and also gives the opportunity for sign ups to write dialogue and you could just import it in and it'll just work and you can edit the dialogue outside of the program so this tutorial series are going to cover a few new things that I haven't covered before so we're going to learn three major new things and that is widgets interfaces and data structures so let's probably take a couple of parts and but I'm sure we'll get there hopefully with no problems so minimize this and go into a new blank document okay so here I am in the first person template in ue4 so the first thing you want to start off doing is creating new widgets for your dialog and once that's there we can then assign what text it's got a show and so forth so the first thing we do is make a new folder in my content browser self-organized dialogue and in here I'm going to add a new widget so to find a widget you'll find it if on add new user interface and a widget blueprint and you were nameís have you want so i'm looking they mine dialogue widget and open up so where's the widget a widget is a extra thing that you can display on the screen on top of the viewport you can also display it inside the game but you typically don't you typically mostly keep it inside the viewport so that's an extra piece of information that you can part of data to so this is how you do things like heads-up displays or health bars ammo counters maps menus those sort of things so we're gonna use it for our dialogue window so the little box that came up in a bit at the bottom of the screen so just that little box you sit upon the grey box with some text in it that's what we're gonna make now so in this widget editor you've got a few things so firstly you've got the viewport which shows you what visually looks like on the left hand side you got the pallet window and a hierarchy window so the pilot windows all the tools that you have available at your disposal and all these things help you build your widget the hierarchy is where you mostly work so you rather than drag stuff from the pallet to the viewport you much rather want to drag it from here to your hierarchy instead it makes it a lot easier to select stuff in the hierarchy and rather than the viewport and when you do click on one of these so if I click on the canvas panel for example it's currently in there by default you'll see the details panel on the right hand side change to show its various options and each one of these different palette options available to will have different details that you can change and finally at the bottom you've got the animation or animation palettes we're not gonna do it anything with this video but this is how you can make an animated widget so widgets have two views you've got design of you such as this where it handles hood elements and you have a graph view where you hand all the coding on back-end so we're gonna go into our designer and we're going to create our dialog box so to do that I'm going to use a border okay so I'm gonna use a border here and drag that into my canvas panel and you see it here I'm going to scale this up and move it into the correct position now I want my dialog window to show so the various options are available to you for this are all down here so your things relate to the natural slight itself content appearance behavior and so and so forth the first thing I want to change is anchor so it's a little flower looking like on is this anchor and anchor is basically how it knows where to draw digit in relation to the screen canvas sounds very complicated but for example if you have a screen of a different ratio science do this will always draw relative in position to this so if you want it in the center all times you want to keep it relative to the center you can change the anchor over here to any of these options it's going to choose the bottom center yeah so that means it'll stay in the bottom center no matter what size screen or very show that you're working with so they've changed some of the settings over here for its appearance brush and brush color I'll handle its appearance so I'm going to brush color change the color of it to a dark gray bit darker than it and I'm gonna change its alpha to say no point for okay there we go so with a border a border allows us to actually put stuff inside of it so if I click a text block now and drag this inside of the border it now appears here so this text block I've got various settings again here at X it shows glorious alignment and padding font font size and so on and so forth I was going to Center it and vertically align it so it's in the middle of the box almost done here all we got left to do now is go into our graph and we're going to add a variable so click on the plus variable in the babel session face them into the next to setup and here i'm gonna type in dialogue text and this is going to be a type of a text and click compile with that compiled go back to your designer and with the text block selected go to your text block details and we're how to content for text where you can type in what texas shows so so for example text you see it changes down here i will have to be variable so i can change it during the game so we just made a variable we're going to bind it to this content here so this bind bun which you see on several the details panels you can click on here and choose properties related to this widget so this one's got a variable called dialogue text which will fit nicely with that click compile and we are done with this widget editor and we can close that so how to get this to show on screen well what you're going to do is you open up your player character blueprint so i'm going to go into the first person character blueprint because i'm in the first person example and you want to go to begin play I'm just going to detach this one because I don't need motion controls just delete all that stuff and want to later anyway the main thing is this begin play so a begin play I want to add it to the viewport so we've created a widget and what that is is basically a parent copy so we need to make a copy of that widget that we just made so drag it up again play and do create widget and you get this construct none so here you got a drop-down box where you can choose which widget you want to use so I'm gonna choose my dialogue would you and you have to tell it where who owns this widget so which player is only in this widget so because we on this first person character dragged out of here and typing get player controller and that will attach it to the current player so once it's created we want to save a reference to this so on return value we will drag that out and click on promote to variable and we'll save this as my dialog window you can call it way of you like I just call it that and the final step is to make it appear on to your viewport so we made a copy of it we save the reference to that copy and now we're going to add it to the viewport so dragged out here and do add to view viewport and you can connect up the reference to the target here now click compile and close this play you'll see the widget now appears on the screen there's no text shown because our variable was empty by default so nothing will display so our next job is to make it display text and only display text when we are interacting with something so to do that is we're going to go into lost so the first thing we can do is rather than go into the NPC stuff we'll start with the easy one and that is this signpost thing okay so you can use the signpost I've included it in the detail description below the video I'm just going to import it here go and import okay so I've got a signpost mesh and I'm going to create a new actor for this signpost so you add new blue pink last actor and call it a signpost Oh signpost beeping algorithm well I say I'm gonna open this up and going to add a couple of components to it so components up here on the top left I've got add component and first I'm going to add is a static mesh and I'm gonna click on it and show the details for that static mesh and the drop-down choose that signpost mesh that I have previously created same alongside that I also want to make eight interactable range so if I go back to my first example you can see it's got this box around the outside of it this box is the range that the player has to be within it to be able to interact with it so go add component box collision and you want to move it and scale it in to move it and scale it into position and make it a bit wider than and you can also make it so you'd only works when the players in front of it by just moving the field like this okay compile and we're done with setting up the components that's all it requires so I'm now gonna close this and we've got that signpost actor worked up so I'm just going to put one into the world from now it won't do nothing yet but at least they'll could put into the world like so okay right so now we're going to create a new interact feature for our player so that when we're near this we can interact with it and open it up now we're gonna use something quite new here we're gonna use something called an interface so we're going to create a new interface and the way you do that you click on add new go to blueprints and choose blueprint interface and then you wanna name this I'm gonna call mine interact underscore I for interface and open it up so an interface is a weird thing so basically it allows you to have common functions amongst different objects now the case use for this can be abstract for some people but we're going to use it for this and you'll see why later for one it's easier to show you in a second with my previous example so I'm gonna name this function here interact now you'll notice that this middle bit is read-only meaning I can't actually do anything here okay I can't create nothing you can only create functions here and you can create different inputs and outputs for those functions but only functions so once you've done here click compile and you can close that so where interface to come in handy is in here I have an NPC and a signpost two very different things this one's a character this one is a actor very different but they both use the same interface meaning that I just have to code in one thing for my character to do so I ferment my character you'll see here and get all unit of actors with the particular interface interaction here go through them all and check with overlapping them and just run that one function it saves having to check and do code for NPCs assign posts books anything else that may use the same font or functionality we all can interact with it it saves a lot of time and is a lot neater and easier to read so that's what that is useful so we're gonna end it there for the first episode in the next episode we're going to make it so the dialog window appears for a signpost and changes the text for the signposts to be whatever you want thank you for joining me this time please like and share this video and comment if you have any questions or get stuck below and join us in to the second episode where we continue creating a dialogue system Cheers see you next time [Music]

Channel: Ryan Laley

Views: 78,999

Keywords: UE4, Unreal Engine 4, Unreal, Games Development, Dialogue, NPC, Talking, Show Text, Display, Hud, Widget, Interfaces, Data Structure, Text, Tutorial, Guide, How-to

Id: vho7w6rUU7A

Length: 15min 37sec (937 seconds)

Published: Thu Nov 16 2017