x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

How to animate individual letters in a text block?

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.

alt text

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.

Any help would be much appreciated.

Product Version: UE 4.16
Tags:
more ▼

asked Jul 19 '17 at 05:32 PM in Blueprint Scripting

avatar image

GZMO
8 1 3 6

(comments are locked)
10|2000 characters needed characters left

3 answers: sort voted first

Here is how I was able to achieve it:

  • 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. alt text

  • In that widget's BP, on event construct, play the animation. alt text

  • 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. alt text

  • 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. alt text

  • 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. alt text

textanim.png (37.2 kB)
construct.png (63.4 kB)
textvariables.png (32.0 kB)
nextletter.png (180.1 kB)
nextletter2.png (128.8 kB)
more ▼

answered Jul 19 '17 at 10:47 PM

avatar image

vivalabugz
724 10 8 13

avatar image vivalabugz Jul 19 '17 at 10:48 PM

It should look something like this: alt text

giphy.gif (771.4 kB)
avatar image GZMO Jul 20 '17 at 10:55 AM

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?

alt text

avatar image Archduke_ Jul 20 '17 at 06:10 PM

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.

alt text

dialog.gif (261.6 kB)
avatar image GZMO Jul 21 '17 at 12:43 AM

Took a while to implement correctly into my system but using word widgets that print each letter within works perfectly! Thanks a lot for the help.alt text

dialoguewrap.gif (3.1 MB)
avatar image freevisio Oct 25 '18 at 12:09 PM

Is it possible to have your code? I would like to implement in my project. thanks

avatar image Ghostblades Mar 14 '18 at 04:14 AM

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

like in breath of the wild

https://www.youtube.com/watch?v=Tf-yWhzV1zU

Sorry Spoilers ^_^ if you haven't played it yet

avatar image vivalabugz Jun 25 '18 at 03:02 AM

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

(comments are locked)
10|2000 characters needed characters left

in this imagealt text

I can't figure out how to access the text block from the other widget PLEASE HELP! :(

more ▼

answered Aug 27 '18 at 01:07 PM

avatar image

Hidden Llama
3 2 1 3

(comments are locked)
10|2000 characters needed characters left

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.

  1. 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.

  2. Create an int variable called counter and set it to 0

  3. 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.

  4. Take the single returned character from the get and append a string like so A -> dialogueShowing B -> single character from the get

  5. Set dialogueShowing to the newly appended string

  6. Get the length of the dialogueText returned character array, branch, provide counter == dialogueText as the bool

  7. 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

  8. Off the false, increase counter by 1 but clamp the value between 0 and the dialogueText char array length

  9. Delay for however long you want between each character displaying on the screen, something like 0.1 seconds will be 10 chars per seconds

  10. 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

  11. 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.

more ▼

answered Jan 21 '19 at 12:51 PM

avatar image

Danstarr13
6 1 1 3

(comments are locked)
10|2000 characters needed characters left
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question