UMG autowrap makes text flicker upon appearing

Slate layout happens in a single-pass, and the comment for auto-wrapping states that it will have a 1-frame delay.

If you don’t want that artefact then you’ll have to used fixed-width wrapping (note that fixed-width wrapping may still be bound to something that changes its width, it just means that it’s not automatically computed once the desired size is known).

I have an UMG issue where the text flickers a millisecond upon appearing in the game.
In that millisecond it seems that the text widget does auto wrapping to make the words fit in the text box. One can see that UMG re-arranges the words in textbox that millisecond. This holds even true if the text is a variable.
My hierarchy is: Border - Canvas Panel - Text (see attachment) .

Is it possible to get rid of this small flicker? It is a small thing which adds up and diminishes the quality experience.

1 Like

Thanks for the reply. How would I go about doing fixed-width wrapping to get rid of this artefact? Many thanks.

I’ve now inserted hard line breaks now with SHIFT + Enter . These should generate the fixed-width wrapping. Correct?
I have tried the result on PC and a Nexus5 and I think the 1 frame auto-wrapping is gone now. Since the auto-wrapping is no longer called into action.

If I store my text in variables - I always need to calculate at what word it should go onto a new line. There must be a more convenient way to do this I hope?

Any help appreciated.

You can try fixed-width wrapping. Uncheck “Auto Wrap Text” and in the “Wrap Text At” field underneath it, enter the width that you want to wrap at (normally the length of the Text, or a few pixels less).

4 Likes

I had to reply to say thank you Archduke_. That fixed it for me, it was driving me crazy.

Yes, indeed! Thanks @Archduke_

While this workaround works, this still feels like a bug that AutoWrap has a 1-frame delay. I could see some performance warning when using it and making it not on by default, but saying a 1-frame pop is acceptable (and NOT noted in the tooltip) is definitely something worth fixing.

2 Likes

start the text with opacity 0. after milliseconds, in a delay macro, you change the opacity to 1.

1 Like

Hacky. That’s what:

is for.

I’ve tried every combination of ForceLayoutPrepass I could think of, including calling it multiple times and on different Widgets (the text block, the parent, reverse order, ping pong) - nothings seems to properly update the auto-wrap and get rid of the one-frame delay. This is a consistent issue and very noticeable especially if you play on low FPS (e.g. t.MaxFPS 20). Any more hints are appreciated, my workaround for now is to use fixed wrapping wherever possible or set the text visible with a one-frame delay, both of which isn’t too great.

Could you share the widget hierarchy and set text method to reproduce this issue?

My hierarchy for testing is this:
TestWidget -> CanvasPanel -> SizeBox -> Border -> TextBlock

The size box sets a maximum desired width of 400 and size to content, the text is set to auto-wrap.

Here I am trying all sorts of Force Layout Prepass, bottom up, back down and back up the hierarchy:

Still, when I set t.MaxFPS 2 the result looks like this:
GIF showing that there still is a frame delay

Workarounds? Fixed wrap width. Hiding and showing with one frame delay. All suboptimal, I keep my fingers crossed someone has a solution for this, as it’s really getting my way in a UI-heavy game I’m working on.

// EDIT: Correction - A Width Override on the size box (instead of Max Desired Width) doesn’t help either.

1 Like

This should not be in onInitialised - the widget is not laid out yet, PrePass does nothing here. Does it behave the same when you place it in EventConstruct?

1 Like

Good point, sadly the problem persists when I use Construct.

Size Box makes little sense inside a Canvas Slot - setting Desired Size is the slot’s job here. Could you remove the Size Box and punch in the size for the Border directly instead:

image

RMB the Size Box → Replace with Child should work.

If I scrap the size box, I have no way of setting the Desired Width while Sizing To Content in terms of height, do I? Only way I see is to tick off Size To Content on the slot and use a fixed Wrap At on the text, again working around the initial problem, but this becomes anything from cumbersome to impossible in cases where there’s multiple elements, layouts etc. inside the border.

That’s what slot is for:

I have no way of setting the Desired Width while Sizing To Content in terms of height

This is either contradicting or you have some special requirements for this. You need vertical to conform while overriding horizontal, right?


Do you see the undesired flicker without the Size Box?

I don’t understand. I can set a width, but I don’t know the height - that height comes from the wrapped text. If I use a slot only, I can either set the size manually (which I can’t because I don’t know the height) or I can set it to Size To Content (and then the slot will happily expand in width forever and the text will never wrap).

1 Like

Nah, it was me who was not getting the full picture, basically.

1 Like