Download

UMG - centered text that prints from left to right, please help!

Development Discussion Blueprint Visual Scripting
#1

Hey all,

so like the title suggests im trying to achieve something that seems to be in so many games these days but its something that I’m finding impossible to achieve

is there a way that i can print text letter by letter from left to right with the text centred in a text box?

now if the text box justification is set to centre then when the text prints, it will add characters and expand outwards left and right from the centre point but this isn’t what I’m after.

The desired result is that the text prints from left to right top to bottom but already in the centred alignment to the text box.

I have tried many many things these include

  • panning a material over the text like a loading bar to reveal it, this results in all lines revealing at the same time, not what I’m after

  • replace all text with spaces print all this in one go and then swap out the spaces for letters one by one, but i couldn’t get this to work

  • adjusting the margin per line, but this wont allow any text to be adaptable to any screen size and is not exposed to blueprints as far as I’m aware

  • changing the padding, while this kind of works I’m still stuck with all lines having left justification and not being truly centred

  • google searching till for about 5 hours straight to no avail

im currently using blueprints and the text is a rich text block for coloured highlight text reasons. I’m sure I’m missing something small, or maybe unreal just cant do this in blueprints, but any help will be most welcome

thanks in advance

#2

I think you may be giving yourself a hard time over nothing…

If it’s centered by the time the text is revealed, then the text must have been there the whole time, otherwise you’d have the speading out from the center effect.

I think your spaces for letters is the best option so far, followed closely by covering the text with another widget.

I’m gonna fiddle with the spaces concept and come back…

#3

Annotation-20200421-095704.png
Annotation-20200421-095704.png1117×407 75.6 KB

Is this close enough?

https://i.gyazo.com/45c239809327364f…9558043c4d.mp4

Probably not. Not getting the alignment bit I guess.

#4

I have this so far, but it’s a bit of a mess and doesn’t quite work yet, but it does maintain position :slight_smile:

text.gif

#5

Ok - so it’s not particulary pretty, but it works. I just have a centered text box in the widget, you have to use a non-proportionally spaced font, I used ‘Droid sans mono’:

widget.JPG
widget.JPG1520×568 108 KB

Just bind it to an actor BP that will be placed in the scene:

bind.JPG
bind.JPG994×383 54.3 KB

The BP actor contains the text in a string, and that will be split up by character and put in an array with space padding on the end. We then run though the array, gradually pulling out longer strings:

BP.JPG
BP.JPG1742×660 168 KB

And there’s a function to get the string so far and pad it with spaces:

func.JPG
func.JPG1500×527 113 KB

Bob’s your uncle:

text.gif

#6

Thanks for the help all, its really appreciated.

ill give these both a go and let you know how things fare!

They are both a very different (and far simpler) code to what i currently have which is perfect, ill keep you posted :slight_smile:

cheers

#7

Great stuff. I was going to say that once you have the above down, it’s pretty easy to extend the above for multiple strings :slight_smile:

EDIT ( and that lower right loop can go if you write your own for next macro )

#8

okay so ive given it a go and its all making sense, so far, I even managed to get coloured text semi working though it does jump about a tiny bit because of the rich text block needing ro rcognise at least a single character to change the colour with.

However, ive now run into the issue of multiple lines, it seems that when the string becomes too long and moves on to a new line theres a weird wrong start and a jump in too

[video]https://drive.google.com/open?id=1bY0RyZ5k9BmTmtl_-67MyQeAvMw3Bqqq[/video]

not sure what to do to make that work but this is probably due to all those spaces being added it looks like, Ill keep experimenting in the mean time to see what i can do

THANKS SO MUCH FOR THE HELP BY THE WAY

really i dunno what i would have done without the help

#9

Thanks for the input anyway, seeing how simple this code can be made is really good to know in and of itself :slight_smile: