First you want to create a blueprint widget. Add a Text Box as a child to the canvas panel and make sure “Size to content” is checked as well as the “Is Variable”. Also, clear the text field.
Next, you want to add an animation for the text in that widget. Click the “+Animation” button. Then “+Add” > your text box. Edit the values that want. I changed the transform and opacity to somewhat match the animation gif you attached.
Now, create a new widget BP. Add a wrap box from the palette. Enable as a variable.
In the BP, create 2 text variables and an integer variable. In 1 text variable add the text you want to display. The next text variable is for a letter and the integer is a counter for our sentence length.
Now we create our logic. Create a custom event. Start this custom event after event construct. Create an array from your text and get the length. Compare the length to the integer variable we made(so that we wont go over the length in the future). Now get that letter using the letter counter integer and set it to our 2nd text variable.
Last, create a Letter widget we made in step 1. Add this widget as a child to the wrap box in our current widget. Access the text box from the letter widget and set it’s text to the letter variable. Increase our counter variable and add a delay in which time you see fit (this will create a wait time between our last letter animation and the next). Now start the custom event again for the next letter.
To keep it from cutting off, your printing system needs to know the length of the word, which it doesn’t if the characters are being added one at a time. You can either solve this by adding entire word widgets that are in charge of printing their own characters and saying when they’re done, or by having a character buffer with single word look-ahead.
I don’t animate my text, but I do look ahead to the next word and insert newlines if it’ll exceed my pre-defined character limit per line (gif below). I do it with text, but you could do it with character widgets as well.
As far as efficiency, it does seem a bit overkill to split them all out as separate widgets, but I think it’s just a case of an expensive effect. You could save some performance by wrapping it in a retainer box and controlling how often it’s redrawn, or by replacing the widgets with a single text widget when they’re done animating.
How can i animate the individual letters of a text block like the below gif from A Hat In Time, which also seems to be using Unreal.
The only solution i’ve come up with so far is making each letter its own widget and adding it to a wrap box, which works but doesn’t seem efficient and also text doesn’t wrap correctly.
Hey thanks for answering. I have a similar version of this already working, its just it doesn’t seem efficient to create a new widget for every letter and also the wrap box doesnt wrap correctly. Is there any way of changing how it wraps so words dont cut off half way through?
This is fantastic!!! well explained
Is there a way to do this so that no matter how long the text is…it comes in from left to right as you guys have it…but always have it be centered
Hey sorry for the delayed response but yeah you can do that. You would just have to make a widget with a size/horizontal/vertical box similar to the size of the example
If anyone’s still having trouble with this, I worked out an incredibly easy way to do it in a few mins with some simple logic.
Create two string variables, one named dialogueText and one named dialogueShowing. Set dialogueText to whatever you want to spell out on the screen, set dialogueShowing to empty.
Create an int variable called counter and set it to 0
Parse every character from dialogueText, take the returned array and use it to get array element with a given index, provide counter as the index.
Take the single returned character from the get and append a string like so A → dialogueShowing B → single character from the get
Set dialogueShowing to the newly appended string
Get the length of the dialogueText returned character array, branch, provide counter == dialogueText as the bool
If true, all characters have been displayed and we can then perform whatever functions after that, if false, then there are more characters to display
Off the false, increase counter by 1 but clamp the value between 0 and the dialogueText char array length
Delay for however long you want between each character displaying on the screen, something like 0.1 seconds will be 10 chars per seconds
Off the delay link back to the setting of the dialogueShowing variable, it will show the next character as count has been increased to get the next character in the dialogueText variable
Bind dialogueShowing to the text in your widget being shown on screen and call the function from event begin play or a button click or however you’re initiating the showing of the text on the screen
And BAM! Just like that you’ve got yourself text slowly revealing itself without any animation, basically like Archduke’s gif above. You can adjust how fast the text reveals itself by adjusting the time on the delay function (as a float in seconds) lower value means it will reveal faster, higher value will delay the time between each character revealing more.
Adding to the question, do you know how to change / add animation to the text like in the OP’s GIF, there’s a “He He He” where the animation seems to be different, any ideas how to do that? Having trouble changing patterns mid text
This is my simple solution. I swaped a wrap box to a vertical box and create new widget with empty wrap box. I manualy add specific symbol to end of row in mySentence variable. When it finds this specific symbol, a new wrap box is created in the vertical box slot.
if you haven’t played it yet
