No video

Typewriter Text in Unreal (Visual Novel Dialog Effect)

  Рет қаралды 15,429

Craig Perko

Craig Perko

Күн бұрын

Here's a very easy way to do typewriter text in Unreal - unfolding the text character by character.
If you want a click-to-skip, simply set the display text to the fulltext when the player clicks.

Пікірлер: 54
@Flav0rful
@Flav0rful 27 күн бұрын
Extremely helpful and simple system. The one I was using before was needlessly complex. This made it infinitely easier to do what I wanted to, thank you.
Жыл бұрын
Thanks, I just used 3 little things from your tutorial, which fixed my dialog system. A big hug from Brazil!
@CraigPerko
@CraigPerko Жыл бұрын
Glad it helped!
@sherdow
@sherdow 4 ай бұрын
the best tutorial video in the entire world
@csakegybolond264
@csakegybolond264 Жыл бұрын
Nice. Creative solutions. I haven't thought that Unreal has this kind of text nodes. I wouldn't even thought about a branch to go back. Probably would tried with a do while until the two strings are not equal. Thank you!
@Sharky.Sharky.Sharky
@Sharky.Sharky.Sharky 4 ай бұрын
if anyone is trying to do this on version 5.4 just use a "is same path" node to check if the full text and display texts are the same
@primitivepatterns
@primitivepatterns 2 ай бұрын
thank you!
@Novarcharesk
@Novarcharesk Ай бұрын
One good thing to add could be that for 3rd person games that need this text to appear as you've made it, and then to disappear and return the input mode to game only.
@heikesteinheim9337
@heikesteinheim9337 Жыл бұрын
This deserves so much more likes, you explain really good and as a german elementary school teacher i really appreciated the summary and all :D
@tester5601
@tester5601 4 ай бұрын
the best world video in the entire tutorial
@divvermaa
@divvermaa 2 жыл бұрын
Thanks for the tutorial😀, you have a big brain. Definitely gonna share this channel to my game dev mates.
@CraigPerko
@CraigPerko 2 жыл бұрын
Have fun!
@timcoleman2628
@timcoleman2628 4 ай бұрын
Awesome tutorial! Thank you for the clarity
@EtzeNuegez
@EtzeNuegez 4 ай бұрын
Thanks for the tutorial dude, this really added to my game.
@nameless_squid
@nameless_squid Жыл бұрын
Thanks for the tutorial. Simple and easy to understand. I know that i am pretty late, but i was able to get it work properly with a delay if you use a macro with an input and output execution variable. This is a good alternate to function. Works in 4.27.2
@AmberScottProd
@AmberScottProd 2 жыл бұрын
A tutorial after my own heart 😅. A very minor note you may already be aware of: "binding" a variable sets it every frame, which can get costly for performance, especially if you end up with a great number of widgets on the screen. UMG isn't particularly optimized in that regard. A better method would be to get a reference to your text and simply call "SetText" with the DisplayText every time you add a character. Unreal can auto-convert between Strings/Text/etc...
@CraigPerko
@CraigPerko 2 жыл бұрын
True, but there's no need to worry about performance on something like this. Even phones can keep up with updating text every frame.
@AmberScottProd
@AmberScottProd 2 жыл бұрын
@@CraigPerko Oh yeah, of course. Completely trivial here. Just good to keep in mind for people who may be poking through this stuff for the first time. I know I myself ran into issues with overuse of bindings in my early Unreal projects, so I try to share that info whenever it comes up :), because Unreal isn't very clear about how the bindings work.
@pohkogames2752
@pohkogames2752 2 жыл бұрын
Such a great tutorial, helped a lot, thank you!
@rodge_dodge
@rodge_dodge Жыл бұрын
Wow this is so simple and easy, I tried to make it but just found hard tutorials and they didn't work for some reason
@CraigPerko
@CraigPerko Жыл бұрын
Everyone's got a different style of teaching!
@unrealengineruseng9583
@unrealengineruseng9583 Жыл бұрын
Thank you !
@GPaCrewify
@GPaCrewify Жыл бұрын
Fire tut, thank you.
@thezeroxy
@thezeroxy 6 ай бұрын
Thanks!
@Ben1363
@Ben1363 11 ай бұрын
Thank you for this tutorial, it's very simple and effective. Do you know a way to predict line breaks? With this technique, a line break occurs, moving the beginning of the last word to the beginning of the next line; it's not very pleasant for the reader, I find. Thanks in advance :)
@CraigPerko
@CraigPerko 11 ай бұрын
The easiest way is to use rich text, which requires a font file. Any font file. From there you simply mark all the unrendered text as invisible but still put it in. This preserves the final formatting just fine. However, you need rich text to do it: basic text cannot change colors midsentence.
@Nailoo
@Nailoo 2 жыл бұрын
Thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanks !!!
@TheShinraCorp
@TheShinraCorp 8 ай бұрын
Wonder if anyone figured out how to do this with a Rich Text Block instead. Mostly due to the angle brackets needed to format certain parts of the text. So those brackets will be displayed in the text block.
@CraigPerko
@CraigPerko 8 ай бұрын
If you do it with rich text, you need to check if you're on a bracket open character, and if you are, instantly read ahead. If there's a bracket close character before the end or the next bracket open character, fast forward to that position instantly.
@narrgamedesigner2747
@narrgamedesigner2747 8 ай бұрын
Is anyone else getting static text instead of it running off? It might be UE5 5.2.3 but It doesn't seem to work with this version.
@CraigPerko
@CraigPerko 8 ай бұрын
There shouldn't be anything different. It could be that you wired it up wrong, or forgot to hit "compile".
@BruhItsMeRay
@BruhItsMeRay 7 ай бұрын
I can confirm the same problem on UE5.3 (it worked on 4.27). Might be a bug in UE5.
@missunknowngaming6890
@missunknowngaming6890 Жыл бұрын
Is there a way to boost how fast the text displays. I finally have been able to do my Narrator (Thought to self) Dialog thanks to this video.
@CraigPerko
@CraigPerko Жыл бұрын
Sure! The delays are all values you can increase or decrease as you please!
@missunknowngaming6890
@missunknowngaming6890 Жыл бұрын
@@CraigPerko Awesome, thanks for responding! I have one more question. How would I go about creating multiple different sentences, that are triggered with either separate trigger boxes, or in a certain order when the trigger box is collided with. I originally tried to copy the widget and rename it and add it to the level blueprint. However, when I enter the trigger box, both sentences appear at the same time. Any advice? (Hope I worded this correctly) Thank you again!
@CraigPerko
@CraigPerko Жыл бұрын
@@missunknowngaming6890 There's a few ways to do that. If the trigger currently plays a property that's a string, next to where that type is specified, there's a little icon. If you click that, you can change it from just one string to an ARRAY of strings. Then you can either start at index 0 (the first index) and increment by one each time, or you can simply take the one at zero, use it, then remove it from the array forever. Either way, you'll need to trigger that action repeatedly. I don't know whether you want it to trigger when each TypewriterText closes, or each time the player enters the trigger volume. It's up to you.
@CraigPerko
@CraigPerko Жыл бұрын
Also, there's a few other comments on this video that may help.
@zhulisclips
@zhulisclips 8 ай бұрын
would there be a way to have multible line of text?
@CraigPerko
@CraigPerko 8 ай бұрын
Sure. First, there's automatically multiple lines of text as the text gets long. But you can also either embed /n into the text to do a carriage return, or simply have two of these objects to do multiple lines at once.
@celestialamber174
@celestialamber174 2 жыл бұрын
can you also do a Unity tutorial for this?
@CraigPerko
@CraigPerko 2 жыл бұрын
No, sorry. I don't use Unity any more.
@celestialamber174
@celestialamber174 2 жыл бұрын
@@CraigPerko I'm kind of sad to hear that, you were one of the people I watched while first learning Unity. What made you switch?
@CraigPerko
@CraigPerko 2 жыл бұрын
​@@celestialamber174 It's clear to me that Unity is caught in a death spiral, chasing after Unreal, sabotaging themselves.
@celestialamber174
@celestialamber174 2 жыл бұрын
@@CraigPerko I see. Do you think I should switch?
@CraigPerko
@CraigPerko 2 жыл бұрын
@@celestialamber174 I don't know anything about you or your situation. But I do believe Unity is on the way out. I would at least consider other options, even if you choose not to switch at the moment.
@kevinaccettarobles5042
@kevinaccettarobles5042 Жыл бұрын
Thanks for this! I gotta try and make this work with a text array as opposed to strings, since I used a different tutorial for how to make the dialogue, having the player hit X (or whatever key) to go to the next line of dialogue (hence the array). I got an integer as well that controls what line of dialogue is being shown, so very time the player hits X, that integer add one. Hopefully I can make these two tutorials work together. Here's that tutorial in case anyone's interested: "How To Make A Dialogue System In Unreal Engine" kzfaq.info/get/bejne/e5ePnJWdprildIU.html
@3d.bysarah
@3d.bysarah Жыл бұрын
I’m trying to do the same, did you ever figure it out?
@kevinaccettarobles5042
@kevinaccettarobles5042 Жыл бұрын
@@3d.bysarah I got it to work. Took a lot of work and coding though. Let me open the project and check it all out again to refresh my memory. This was a long time ago so my bad if I don't fully explain it well xD I got the dialogue widget (Dialogue_UI), my NPC_Base (Character BP), and my FIeldPlayerCharacter (another Character BP). I'll include the essentials of each (or try to). Dialogue_UI has two "text" widgets, one for the actual dialogue (NPC_Dialogue_Text) and one for the npc name. I'll just focus on the dialogue here. NPC_Dialogue_Text has "isVariable" activated and under Content has a function (hit create binding) "RenderTextFluid" I called it. In the Graph section Event Graph is empty. I got two functions, "RenderTextFluid" and "GetNextLineOfDialogue" (that one gets called in other places, like NPC_Base). As for variables (mostly all with instance editable and expose on spawn on) there's: - Text (text array) - TextRow (integer) - NPC (object ref to NPC_Base) - DisplayText (string) - FullText (string) - CurrentIndex (integer) - CurrentCharIndex) (integer) *Functions' Graphs* RenderTextFluid Function: 1) RenderTextFluid with output of "ReturnValue" as a single text -> Branch (Condition: FullText === DisplayText) 2) Branch True -> Return Node (Drag in the DisplayText variable and drag "To Text (String)" out of it, then connect that to the Return Value of Return Node) 3) Branch False -> New Branch (Condition: CurrentCharIndex "Set Display Text" (left node: "Get Substring" w/ "FullText" on "Source String" and "CurrentCharIndex" on "Length") -> Set DisplayCurrentCharIndex a) SetDisplayCurrentCharIndex left node -> CurrentCharIndex" -> "+" node and add "1" -> left node of "Set CurrentCharIndex" b) SetDisplayCurrentCharIndex right -> Connect to "Return Node" 4.2) New Branch False -> "Return Node" GetNextLineOfDialogue (this one doesn't have an output in the Return Node): 1) GetNextLineOfDialogue -> "Set FullText" a) Drag in the "Text" array variable and drag out of it "Get (a ref)" and drag the CurrentIndex var into that b) When you drag the "Get" into the SetFullText it'll make a "convert to string" node 2) SetFullText -> "SetDisplayText" -> "SetCurrentCharIndex" -> "SetCurrentIndex" (SetDisplayText and SetCurrentCharIndex are left unchanged) a) Drag in "CurrentIndex" -> "+" node and add "1" -> connect it to SetCurrentIndex 3) SetCurrentIndex -> "Return Node" I'll keep going in another reply cuz it's getting quite long 😅 That's Dialogue_UI done though.
@kevinaccettarobles5042
@kevinaccettarobles5042 Жыл бұрын
I forgot something. Aside from the widget and the two character BPs, there's also an Interface BP (called it NPC_Interact). In there all you need to do is create two functions and give them names, that's all. I got "ActivateDialogue" and "NextLineOfDialogue" (not to be confused with the Dialogue_UI function of the same name). That's it there, you can close the BP. Now the NPC_Base, which has quite a bit more. I'll include only the dialogue stuff. No functions here, everything's in the Event Graph. *Variables* - DialogueUI (object reference of Dialogue_UI) - NPCText (text array) - FieldPlayerRef (object reference of FieldPlayerCharacter) *Add a "Box" component in the Viewport, and in it add "On Component Begin Overlap" and "On Component End Overlap". *Event Graph* There are gonna be 4 different threads here. Thread 1 1) OnComponentBeginOverlap -> "Cast To FieldPlayerCharacter" (connect "Other Actor" to "Object") -> "Set FieldPlayerRef" (connect AsFieldPlayerCharacter to FieldPlayerRef) 2) SetFieldPlayerRef -> "Create Widget" (class "Dialogue_UI" | Text Row "-1" | NPC "Self") -> "Set Dialogue_UI" (connect it via the widget node's Return Value) -> "Add To Viewport" 3) Add to Viewport -> Branch (Condition: From "SetPlayerFieldRef" drag out "Get NPCBase" and connect that to "==" and connect that to the condition) 4) Branch True -> drag out "Set NPCBase" similarly and connect it to "True" (connect "Self" to "NPCBase" in the "Set") Thread 2 1) OnComponentEndOverlap -> "Cast To FieldPlayerCharacter" (connect "Other Actor" to "Object") -> *Exec* "? Is Valid" (Input Object "DialogueUI) 2) "Is Valid" -> Drag "Remove From Parent" from "DialogueUI" and connect that to *Is Valid* -> Branch 3) Branch (Condition: From "AsFieldPlayerCharacter" from the initial "CastTo..." drag "Get NPCBase" and connect it to "=="; unlike the first thread, here add "self" to the other "==" node 4) Branch True -> Set NPCBase (Drag it from the "CastTo..." like the previous step Thread 3 *Begin Dialogue* 1) "Event Activate Dialogue" (from NPC_Interact) -> Drag in DialogueUI and drag "Set TextRow" out of it; connect it to the event -> Drag "Set Text" from DialogueUI; connect to previous Set node 2) Set Text -> in the Text array spot, drag in and connect "NPCText" -> Drag "Set Visibility" from DialogueUI and connect to "Set Text" 2.1) Here in Set Visibility I have a few targets, all from DialogueUI, essentially all the visuals of the dialogue box, but the only essential is NPC_Dialogue_Text. Put "In Visibility" as "Visible" 3) Set Visibility -> GetNextLineOfDialogue (IMPORTANT: drag it from DialogueUI. Don't confuse it with the other NextLineOfDialogue from the Interface BP, that's nect) Thread 4 *Next Line* 1) Event Next Line Of Dialogue (from NPC Interact) -> Branch (Condition: 1.1) 1.1) Drag in "DialogueUI" -> "Get TextRow" -> "+" (add 1) -> create and connect to top part of ">" 1.2) Drag in "NPCText" -> "Length" -> "-" (subtract 1) -> connect to bottom of ">" 1.3) Connect ">" to Condition 2) Branch True -> Drag "Set Visibility" from DialogueUI and connect to True (add same targets as before but this time set visibility to "Hidden") 3) Branch False -> Drag in "DialogueUI" and drag out "Set TextRow"; connect to False 4) Set Text Row -> From DialogueUI also drag out "GetNextLineOfDialogue" and connect it to Set Text Row right side *I forgot to mention. In the variable "TextRow" of the Dialogue_UI widget, make the default value -1 LAST PART Finally the FieldPlayerCharacter. This part's pretty short. Let's start with the variables, just two (related to dialogue): *Variables* - "IsDialogueOpen" (boolean, starts unticked) - "NPC_Base" (object reference NPCBase) *FieldPlayerCharacter Event Graph* Thread 1 1) Add "Custom Event" (I called mine "EndDialogue") -> "Set IsDialogueOpen" (leave it unticked) Thread 2 1) Whatever key/button you want to use so as to interact with the NPC (when pressed) -> Branch (Condition: Drag in NPC_base -> "Not Equal" connect to Condition) 2) Branch True -> Second Branch (Condition: "IsDialogueOpen") 3) Second Branch True -> "NextLineOfDialogue" (from NPC Interact) (make the target "NPCBase) 3) Second Branch False -> "ActivateDialogue" (from NPC Interact) (make the target "NPCBase) -> "Set IsDialogueOpen" (activate the tick) Finally everything's now done and should work. Just drag the NPC_Base BP into the game and add some text to its "NPCText" array
Data Wrangling and Spreadsheet Games in Unreal (Basic)
20:57
Craig Perko
Рет қаралды 1,3 М.
Writing Visual Novels
14:19
Craig Perko
Рет қаралды 2,9 М.
Люблю детей 💕💕💕🥰 #aminkavitaminka #aminokka #miminka #дети
00:24
Аминка Витаминка
Рет қаралды 581 М.
طردت النملة من المنزل😡 ماذا فعل؟🥲
00:25
Cool Tool SHORTS Arabic
Рет қаралды 24 МЛН
娜美这是在浪费食物 #路飞#海贼王
00:20
路飞与唐舞桐
Рет қаралды 6 МЛН
Get Started With Unreal Engine 5: Build VR Worlds for Virtual Reality
31:31
How I Remade MW2 with Unreal Engine 5
12:37
reubs
Рет қаралды 3,1 МЛН
How to Make a Simple Minimap in Unreal Engine 5
10:22
Gorka Games
Рет қаралды 52 М.
5 Tricks you (probably) don't know about Unreal Engine 5
10:44
Cinecom.net
Рет қаралды 375 М.
Learning Unreal Engine in One Month to make a Game!
15:25
Will Hess
Рет қаралды 74 М.
The REAL Reason Unreal Engine VFX Looks FAKE
6:58
Joshua M Kerr
Рет қаралды 424 М.
Unreal Engine 4 - Dialog System Tutorial (1/3)
22:05
Reids Channel
Рет қаралды 55 М.
Why Unreal Engine 5.4 is a Game Changer
12:46
Unreal Sensei
Рет қаралды 1,2 МЛН
Люблю детей 💕💕💕🥰 #aminkavitaminka #aminokka #miminka #дети
00:24
Аминка Витаминка
Рет қаралды 581 М.