Create Dynamic Dialogs with Unreal's Typewriter Text Effect

Table of Contents:

1. Introduction
2. The Need for Typewriter Text Effect
3. Creating a Widget
4. Adding the Widget to the Screen
5. Setting Up Variables in the Widget Blueprint
6. Binding the Variables to Text Boxes
7. Adding Characters to the Display Text
8. Creating a Loop with Delay Nodes
9. Checking for Loop Completion
10. Improvements and Limitations
11. Conclusion

Introduction

In this tutorial, we will learn how to create a typewriter text effect for visual novel dialogue in Unreal Engine. The typewriter text effect is commonly used in games or interactive stories to mimic the appearance of text being typed one character at a time. This effect adds a sense of anticipation and engagement for the reader. We will walk through the process step-by-step, from creating a widget to adding characters to the display text. So, let's get started!

The Need for Typewriter Text Effect

Before diving into the technical details, let's briefly discuss why the typewriter text effect is valuable. The typewriter text effect adds a dynamic and immersive element to visual novel dialogue sequences. It creates a sense of realism and interactivity for the reader, as if they are experiencing the story in real-time. This effect is especially useful in creating suspenseful moments or building emotional connections with the characters. By learning how to implement this effect, you can enhance the storytelling experience in your game or interactive project.

Creating a Widget

To begin, we need to create a widget that will display the typewriter text effect. In Unreal Engine, widgets are reusable user interface components that can be added to the screen. To create a widget, follow these steps:

1. Open the Unreal Engine editor and navigate to the Content Browser.
2. Right-click on an empty space and select "Create Blueprint Class" from the context menu.
3. In the "Choose Parent Class" window, select "User Widget" as the parent class for our widget.
4. Name the widget according to your preference, such as "TypewriterWidget".
5. Click "Create" to generate the widget blueprint.

Adding the Widget to the Screen

Once we have created the widget, we need to add it to the screen or viewport for it to be visible during gameplay. Here's how you can add the widget to the screen:

1. Open the Level Blueprint by selecting "Blueprints" from the main menu and clicking on "Open Level Blueprint".
2. From the event graph, find a suitable location to add the widget to the screen.
3. Right-click on the graph and search for the "Create Widget" node.
4. Drag and drop the "Create Widget" node onto the graph.
5. Set the "Class" input of the "Create Widget" node to the widget blueprint we created earlier.
6. Connect the "Create Widget" node to the "Add to Viewport" node to display the widget on the screen.

Setting Up Variables in the Widget Blueprint

Now that we have added the widget to the screen, we need to set up some variables in the widget blueprint. These variables will store the text data and control the typewriter effect. Follow these steps to set up the variables:

1. Open the widget blueprint by double-clicking on it in the Content Browser.
2. In the widget blueprint editor, navigate to the Graph tab.
3. Right-click on the graph and select "Add Variable" from the context menu.
4. Create the following variables:
   • Name: A string variable that holds the name of the speaker.
   • Full Text: A string variable that stores the complete text to be displayed.
   • Display Text: A string variable that represents the currently displayed text.
5. Mark these variables as public by ticking the "Is Variable" checkbox and selecting "Editable" and "Expose on Spawn" options.
6. Compile and save the widget blueprint.

Binding the Variables to Text Boxes

To visualize the text data stored in the variables, we need to bind them to the text boxes present in the widget blueprint. Binding allows the text boxes to update dynamically based on the value of the variables. Follow these steps to bind the variables to text boxes:

1. In the widget blueprint editor, navigate to the Designer tab.
2. Select the text box representing the speaker's name.
3. In the Details panel, under the Appearance category, find the Binding section.
4. Click on the "+" button to add a new binding.
5. From the drop-down menu, select the "Name" variable we created earlier.
6. Repeat the same process for the text box representing the dialogue text, binding it to the "Display Text" variable.
7. With the binding in place, the text boxes will now display the respective variable values during gameplay.

Adding Characters to the Display Text

Now comes the core part of the typewriter text effect - adding characters to the display text one by one. We will achieve this by using delay nodes and a loop. Follow these steps to implement the character addition:

1. In the widget blueprint editor, navigate back to the Graph tab.
2. Start with the "Event Construct" node, which is executed when the widget is created.
3. Add a delay node after the "Event Construct" node to introduce a small delay between each character display.
4. Create a sequence node to keep the logic organized.
5. Within the sequence node, add the following nodes in order:
   • Get the "Display Text" variable and get its length.
   • Add 1 to the length to get the index of the next character to be added.
   • Get the "Full Text" variable and extract a substring using the calculated index.
   • Set the result as the new value of the "Display Text" variable.
6. Connect the nodes as shown, and create a reroute node to connect the sequence node back to the delay node.
7. Add a branch node after the sequence node to check if the typewriter effect is complete.
8. Compare the "Full Text" and "Display Text" variables using the "Equal (String)" node.
9. If the variables are not equal, go back to the delay node to continue the loop.
10. If the variables are equal, add a delay node for a few seconds, and then destroy the widget.

Creating a Loop with Delay Nodes

To create a loop for the typewriter effect, we will use delay nodes and a branch node to check for loop completion. Follow these steps to create the loop:

1. Connect the output of the sequence node to the delay node using a reroute node.
2. Add another delay node before connecting to the branch node.
3. Adjust the delay time according to your desired typing speed (e.g., the delay between each character).
4. Connect the output of the branch node to both the delay node and the delay node before destroying the widget.

Checking for Loop Completion

In the loop, we need to check whether the typewriter effect is complete. We can achieve this by comparing the "Full Text" and "Display Text" variables. Follow these steps to implement the check:

1. Connect the output of the branch node to the delay node.
2. Add an "Equal (String)" node and connect the "Full Text" and "Display Text" variables to it.
3. Connect the output of the "Equal (String)" node to the branch node.

Improvements and Limitations

While this method provides a quick and easy way to create the typewriter text effect, there are a few limitations worth mentioning. Firstly, delay nodes cannot be used inside functions, so you cannot encapsulate this logic into a function. Secondly, the implementation lacks proper word wrapping. If a line of text exceeds the width of the text box, the remaining characters will drop to the next line, which may not be desired. Unfortunately, Unreal Engine's basic text blocks do not support hiding characters, making it challenging to achieve proper word wrapping.

Conclusion

In conclusion, the typewriter text effect is a valuable addition to visual novel dialogue sequences in games or interactive stories. By following the steps outlined in this tutorial, you can easily implement this effect in Unreal Engine. Remember to customize the variables and adjust the delay time to suit your project's requirements. While there are some limitations to consider, the simplicity and effectiveness of this method make it a worthwhile addition to your game development toolkit.