Text Block scaling in Widgets causes it to look pixelated and blurry.

I’m working on a system that requires to be scaled up at some point in animations. I can’t use font size because it messes all of the positioning and some of the text blocks are located in a child widget.


Is there a way to make them look not pixelated without losing their positioning on the canvas panel?

Still have no idea how to solve this… please help

I’m guessing you’re using the scale transform?

Might not be what you want but you can try wrapping your text in a size box (set the width to what you want). Then wrap that (and/or everything else you want scaled) in a scale box and it should show crisp. The size box should be set to fill horizontally and vertically. Set the anchor of the scale box to be the center of your text (if you want the text to remain centered where it is). Alignment should be (0.5, 0.5). Then you can manually change the SizeX and SizeY of the scale box.

If you find this is too jittery, then the only thing I can think of is laying everything out the way you want when it is BIG. Use a big font size… everything laid out like you want it sized up. Wrap it all up in a container and use the scale transform to size it down. IOW, work backwards. Might be a bit pixelated, but better than what you have now.

edit: Worst case, you can make the original invisible and swap in the large sized one for the animation.

Yes, I’m using the scale transform in animations.
I tried wrapping text blocks in the scale and size box, as you said to, it stayed the same.

The best solution I think is the font size, not ideal but I have nothing else to do.

I can guarantee you didn’t do it correctly if you wrapped it in a scale and size box. You don’t use the size transform. You use the SizeX and SizeY properties. They are different and the text will remain crisp.

And I already tried the reverse scaling. It works well. It’s just a bit pixelated at small sizes.