How To Have Text Appear Letter By Letter | Basic One-Sided Dialogue System - Unreal Engine Tutorial

hey guys and welcome back to another unregion 4 tutorial in today's video i'm going to be going over how to create it so a sentence will appear in a widget letter by letter so it looks like it's being typed on screen so let me hit play and show it to me today so as you can see it's appearing on screen now displaying it letter by letter so it's not just all going to be there it's not failing on or off it's typing it like this which is quite a nice little system a lot of people like to use especially in indie games so this is what we're going over today creating this system as you can see here very easy to customize to change what's appearing where it is how quickly it's appearing and all that good stuff so without further ado let me tell you this code and i'll show you how i've done it so the first thing we want to do is obviously create our widget now you might really have this part set up and have all your text in there if so that's great i'm just going to create it in case you haven't so you can right click go to user interface and create a widget blueprint i'm just going to name this one tutorial widget opening this up straight away all i'm going to do in the people here is add adding some text and place it where i want so just for the purpose of the tutorial i want it to just be in the center of the screen as you can see here so it's going to be in the middle of the widget like this now in here i'm going to write my text and the reason i'm doing in here is just so i can get a reference of what it's going to look like when it's completely on screen so i've already got mine so i'm just going to paste that in there you just type in what you want now some little modifications i want to make is i want to set the justification to be in the middle so it's centered like this i want to give it a small outline of let's say three just so it shows up a bit better on screen and i also want to set the auto wrap text and that means it's now going to fit in the size of this box as you can see here now this obviously doesn't look great so i just need to scale up the size of my box so it's going to fit a lot better so i'm going to scale up like that and i think that's going to be good for me i'm also just going to move this up a bit so it's getting more centered and if i to do this i can see where i want it to actually be so i think that's going to look good for me so when the text is completely on screen it's going to look like this now you might want to move it to left to the right up down really honestly just customize this scatter to look how you want but once you're happy with it what you should do is select it copy the text that's inside you can leave it there it doesn't matter but just copy it and also tick is variable on the text block as well as we're going to need to modify this in the event graph in a moment's time so now we're going to go over to the event graph and delete event preconstructs and event tick as we just want to use event construct out of event construct what we want to do is set timer by event like so as we want to kind of create a looping event in an efficient way so this event we want to drag out and add a custom event and i'm going to name this one set text or type text whatever it is that you want to do so once we've got this set up we want to right click on the time and promote it to a variable naming this type speed or writing speed or rate whatever you prefer and this is going to be the speed at which it appears on screen so if you want it quicker or slower you change this variable here so we'll compile that and we can change the default value and i'm going to have it as 0.1 and that is what i was using in the beginning of the video as well so if you like that speed do this and this is speed in seconds so every 0.1 seconds is going to put the next letter on screen so again you can change those to be slower or quicker depending on what you want and we're also going to take looping so this is continually looping so it does every letter which we want in our sentence we'll compile and save that next we want to actually set the text which we've got so to do that we're going to create two variables so the plus variable here first and this is going to be input text and this isn't going to be a text variable it's going to be a string just because some of the code we need to use is done via string instead of text so we'll convert it to a text variable later and we want to add another variable leaving this as a string again and this is going to be displayed text so we compile and save that so we'll select the input text and in here we're going to paste in the sentence which we created earlier as the input text is the full text we want on screen and the display text is going to be the actual text which the player can see i is going to be increasing letter by letter to get to the full sentence in the input text so down underneath all this we're going to drag in our input text holding ctrl to get it and out of this what we're going to do is get character array from string and what this does is it essentially just creates an array with all of the different characters from this string as separate elements so the string output will have h i space t e r e and all that stuff so we have each character in here now we want to drag out the return value and get a copy like so and we want to right click on this integer promote it to a variable and name this index and this is so we can now access a specific index so a specific character within this string so essentially we're just going to go from the beginning to the end of the string to get each character individually instead of a whole sentence at once so we'll compile and save that now what we're going to do is when we get this character we want to add it on to the end of the display text so we're obviously going to be continually adding a new character onto the text the player can see so to do that we're going to hold ctrl and drag in the display text to get it and then we're going to just simply append and that is going to add in the value of b onto the end of a ie our get so the new character onto the end of the display type string like this so nice and simple and this return value now is going to be again what the player can see which is going to be the set display text so hold alt and drag in to set it and set that into there like so i'm just going to move this over so now the display text is currently updated to be what the player should see so it's now got the next character in there as well but obviously the player can't see this yet so what you can do is create a binding so that the text variable is always binded to the display text but what i'm going to do instead is just get our text block drag it in and just set text with the text down here like so as that wastes a little bit easier and a little bit less intensive as the binding is always going to be called and then if we just drag in the display text into the in text it will automatically convert it to a text variable and now we have it there like so so now this is going to add in the next character onto our string and let the player see it however this will always do the same character as we're not increasing where it is so let's do that now all we need to do is get the index so hold ctrl out of this we're going to get an increment in just increase the index by one so it's going to go through the entire array and that is now a good and done so it's going to go through an entire array getting the next character and adding it onto the string for the player to see so this does work it's now finished however we also want to be able to tell when the sentence has finished displaying so the whole thing is now on screen and you want to do that for multiple reasons one so we can then stop calling this it won't make a difference to the player but it will still be calling and that will then be intensive we don't need that so it's more efficient to stop it and also you might want to do something when the text is finished i take it off screen so what i'm going to do is drag out the increment integer and get an equal equal integer and the bottom value is going to be the input text get character array from string so copy and paste that over here and of this we're just going to simply get length so this is essentially how many elements are within this array and then plug it into there so if the index is at the end of the array we want to stop it so we're going to hold down b left click to get a branch with that as the condition true it means we're at the end so we finish the sentence false means we're not the end so we've not finished the sentence so the first thing to do is stop calling this event as we finished so back at the set timer by event come out the return value and we simply just want to clear and invalidate timer by handle connecting this into true of the branch like this and i'm also just going to double click this to get a root node to keep it looking nice and organized and what i'm also going to do is hold down d left click to get a delay set the duration to let's leave it at 0.2 and then completed will be remove from parents just so this is taken off of the screen like so we'll compile and save that so after this what you might want to do is you might want to then just reset this so you can then set the input text to the next slot of dialogue for example you want to show reset the display text default to empty and then call the event again so what you could do is instead set input text set display text input into and protects what you want so for example this is part two and then display text as empty in actual fact i'm going to do this just to show you what it looks like so i'm going to have a duration of 0.2 there still just to give a little bit of a time for the player to read it actually i'll put it as one second and this is part two of this visual system just for a little example we also want to set the index to zero as well so it goes back to the beginning and what we're going to do is i could just loop this back up to here then it's always going to continue doing it from part one to part two so what i'm gonna do instead is just copy and paste this whole thing and move it down now obviously you could just instead loop it up to there but make sure there's a variable is set so you notice this is part two and down here if it's part two don't continue or go on to part three but for the purpose of this video i'm not going to go into that if you do want further help doing that just let me know so then down here we're going to set timer by event i'm going to move this out just a little bit so i know it's the next part and this will be set text to compile and save that and this should now work perfectly for us so if we minimize this i'm going to open up my character blueprint just to show this widget at the beginning of the game as you can see here tutorial widget compile and save so like say this should now be working perfectly for us and at the end i also just decided to add in a part two as a lot of people might use this for a dialog system so this is how you then advance upon that so let me hit play and test this out so you can see it's coming on screen giving this sentence displaying letter by letter at the speed we decided which now worked perfectly when it gets to the end what should happen is we'll wait a second and then display the second part which we should be able to see any second l there you go it now went onto this as part 2 of this visual system and now it should be taken off screen as i did add that in at the end as well so this works perfectly we've now created a dialog system in which what will happen is the sentence sorry we put on screen letter by letter and we can also have this in multiple parts so we have part one here and then part two after this has finished displaying and once the whole thing has finished displaying as well we can remove it from the screen too and once this is finished actually i'll just do it now i'll also show you that's sped up so if we change the type speed here we can put this as 0.01 so it's really quick hit play you'll notice that's coming on a lot quicker obviously that's very hard to read but just to show you that that is what the difference in speed does so i think that'll be if this video is redone if we want to do we've set up so we can have a dialogue system on screen kind of so it's going to be displaying text letter by letter and we can have it in multiple parts so it's displaying multiple things as well as you can see there so thanks so much for watching i hope you enjoyed and i hope you found it helpful and if you did make sure to like and subscribe down below so thanks so much for watching and i'll see you in the next one [Music] you

Channel: Matt Aspland

Views: 24,577

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, unreal engine 4 tutorial, how to make a game, how to, 3d modelling, blender, unity, games design, graphic designer, ue5, unreal engine 5, dialogue, system, write, type, typing, effect, illusion, look, letter, sentence, character, characters, appear, show, on screen, on, screen, widget, slow, npc, ai, array

Id: jf7oe3t-2xM

Length: 11min 30sec (690 seconds)

Published: Wed Mar 16 2022