Text widget glitching on the first frame

Hello! I have an issue with my widget blueprint. I every time I spawn an actor with just a widget component, for the first frame the text seems to scale unproperly, and it can be seen to the wrong place for a tiny amount of time.

This is my widget:

I’m using a scale box so that the widget scales to the desired draw size, a size box to keep proportions and a canvas panel as parent for the image and text.

The Image doesn’t seem to have any scaling issues, this only happens with the text. I tried almost every setting on the text, nothing seems to affect it… It looks like the text takes an additional tick to adjust itself in the screen once it appears. I also tried making the widget hidden for the first frame and make it visible after one tick, but it still glitches once it appears on the screen!

How do I fix this?

Thanks in advance.

Start working from the top, one by one:

  • do not Size To Content
  • do not Wrap Text At (set to 0)
  • set Min Desired Width to be larger than the text:

I’ll admit I’m not sure what shenanigans happen under the hood with both size box and scale box meddling with desired size.

  • does it manifest without the outline / shadow, too?
  • try adding the Force Layout Prepass node on Construct, targetting Self.

  • are any of the settings of the component modified from the defaults, namely:

image

  • is the component in Screen Space? Looks like it, asking to be sure
  • is there anything we need to know about the component’s owner? The way it’s spawned - scaled, perhaps? Probably irrelevant if the component is in the Screen Space.

Thanks for replying. I think I tried evreything with nothing fixing this. However, this might help:

  • Yes, the widget is in Screen Space
  • I added another text with all default settings, and it still glitched.
  • I also tried deleting the scale box and size box one by one, and it seems like the problem lies with the scale box, however I need it to draw at draw size
  • This only happens with text and not images
  • I think what happens is that the scale does not apply instantly on texts under the scale box, causing the text box to be the desired width for a moment (which is pretty large and since I have centered the text it looks like it is out of place). When the text is aligned at left, it looks fine.
  • I tried replacing the scale box with a new one in case I had changed something with no luck…

I will try recreating the widget from scratch and see if the issue persists. If there are any other things I could do to fix this I’m willing to try.

I also tried making the widget again, no luck…

So if im looking at this correctly you have a Widget(Main Widget) and that Widget(Second Widget) with the Gear and Text (+5) appear inside the other widget correct? if so you need to anchor the Second Widget in the Main Widget.

Actually, I have a single widget. I spawn a new actor with just a widget component and have the widget show this way. I prefer the actor method since I want the widget to spawn at exact locations.

Ok so youre doing like when Hover or get close to said object this Gear +5 is supposed to show. You would have that code with in the item its self so when Mouse Hover Over or When Inrange Set Visibility of Text to Visible at Location

Basically this is a production building that produces “Gear” every second. Every second I spawn an actor and then destroy it after some time. The problem is that the widget spawned glitches as shown in the video for the first tick. And only the text, not the gear image.

So when it destroys the Actor and it pops the Gear symbol and 5+ you need it to appear at location, if you want it to show up on your widget you need to is have it already on the widget Make a animation to fade in and out so when actor is destroy it will play said animation

This is very much a layout issue. Suprised to see Force Layout Prepass does not fix it. You tried that, right?


An absolute hacky bit is to pop up the widget with 0 opacity, wait a frame for the layout to do its thing, set opacity to 1.

But that’s what Prepass node is for.

I tried it with every single widget as target, including self but I will try again in case I missed something. I also figured out that the opacity works indeed but it felt like it wasn’t the correct way and that unreal certainly has a more direct way of fixing glitches like this. I will inform you when I try again with prepass.

1 Like

Tried Prepass again…no luck. I don’t get it why it doesn’t work…

I had the same problem, but not consistent (some widgets had it, others didn’t). What did the trick for me was setting autowrap to disabled and setting the wrap text value to a value slightly less than the box it was in. You had autowrap disabled, so this would not apply to you, but maybe others find it useful.

4 Likes

I came up with a very sketchy solution for this but it worked for me. When the widget is enabled, I set the opacity to 0.01, and wait 2 frames by using 2 “delay until next tick” nodes, then set the opacity back to 1. This means that your widget pops up delayed by 2 frames but it is really not noticeable at all in a lot of cases.

Not sure why it doesnt work with only 1 tick delay nodes, but it did work with 2.