Unreal 4 UMG Vertical Scroll and Word Wrap for Monospaced Fonts

May 17th, 2015

This article assumes that you’re already familiar with UE4’s UMGs and its elements such as Multi Line Editable Text Box. If not, please consult the official documentation. Unreal Engine version used: 4.8 Preview 2 for Mac OS.

I have been fiddling around with Unreal Engine 4’s UMGs (widgets) a lot lately. At one point, I wanted to make a multi-line text box that would scroll up automatically as you type. First I thought that it would just handle this sort of thing out of the box, but it turned out that there was no auto-scroll option available. Then I thought that it wasn’t a problem – after all, how hard could it be to count the lines and then just move the whole text up?

Well, it turns out that it is not that straightforward if you are using the standard Auto Wrap Text option. See, in C++ what Auto Wrap Text does is it probably adds “\n” at the end of each line as you would expect. Of course, you have no way of knowing that from Blueprint, because, as far as Blueprint is concerned, “\n” does not exist. Even though there’s a line break character available to Blueprint users now, it is not “\n.” Therefore, you won’t be able to find it in your Text or String (side note: to make a line break, press Shift + Enter in any text field).

Neither of these will find anything:

Looking for line breaks 1 Looking for line breaks 2

So yeah, I had to circumvent the native word wrap system and implement a greedy algorithm to be able to auto-scroll. Luckily for me (and not necessarily for you), I’ve got a monospaced font in my TextBox, which means that I don’t care about each character’s individual length. If your font is not monospaced, you should probably look for a different solution (likely involving some C++). The image below is the algorithm pseudocode shamelessly stolen from Wikipedia:

Word Wrap Algorithm

First of all, here’s the Pastebin of my word wrap function. Just copy all the text from here and paste it into the blueprint editor inside a newly created function: http://pastebin.com/BuxVnnH5.

Don’t forget to add two inputs: an InputLine string and a LineWidth int (my default value is 47); two outputs: WrappedString and NewLinesCount; and four local variables: SpaceLeftInLine int LineCount int, FinalString string and Words array of strings.

Now that we’ve got a properly wrapped string, we need to make the auto-scroll. If you don’t need the auto-scroll, then, of course, you can stop reading right here.

Since the auto-scroll will handle the whole string, no matter how many times you modify it, I feed my function the NewLinesCount variable that I get from the word wrap function. The vertical scroll function Pastebin: http://pastebin.com/Z4WqhHYG, also a function. This time with only one input: NewLines integer. Add two global variables: LinesLeft int, initially set to the total number of lines allowed in your text box and a reference to the text box itself, as I’m using it inside the function. Finally, create one local variable: LinesSeparated array of strings.

Connect the Wrap function to the Vertical Scroll function – and voilà!

Now, I know that copying and pasting functions in Unreal is not the best experience in the world, so I’m starting and open-source Open Blueprint project on GitHub. In OpenBlueprint, anyone and everyone can share useful global Unreal functions and macros. The first function in there will be my word wrap function. Here’s the GitHub page where you can clone or download it: https://github.com/krides/OpenBlueprint

Coding, Unreal 4 | Comments | Trackback