User Interface looking pixelated

[u/Paradoxical95]

I was following this tutorial on making 3D Main menu.I was successful however the text on buttons in my game look bad. They look pixelated. What am I doing wrong? Is it the canvas size ? or is it that my font is too big relative to the screen size?
Also, other options look muddy for some reason. Why is that.?

As you can see. The button that I hover on looks even more pixelated than the normal ones.

https://preview.redd.it/bnheurujp9pa1.png?width=1742&format=png&auto=webp&s=8481157e03a5a0a51136531612ddb89c9ee2a987

​

This is in editor. Clean and Sharp

[u/jawdy]

Are your buttons (with New Game, Options text etc) imported as Images?

First, open up the Textures and check the "Compression Settings." Then change these to "UserInterface2D (RGBA)." This should fix the aliasing you're seeing.

But also, you might want to switch to using a Text Box (or Rich Text Box) instead of hard coding your text into a texture. Unreal has a text rendering mechanism that will up/down scale font textures (it converts fonts to textures) and you can have localisation/translation on your text, without the need for dozens of custom textures that you'd need to swap out yourself.

[u/Paradoxical95 → u/jawdy]

No. My buttons are standard buttons that are present in Widget editor. The stock ones. Nothing changed.

[u/jawdy → u/Paradoxical95]

I can't see any child Widgets added to the buttons (like Text), otherwise I'd see some arrows next to your buttons in the Hierarchy.

How are you adding the text to your buttons?
How are you setting the background?

[u/Paradoxical95 → u/jawdy]

Lemme edit my post. The screenshot you see is from a different widgets that is utilising the buttons widget BP.

This is the button widget

This is the Main menu Widget that's using Buttons widget and spacers. Thats all.

[u/jawdy → u/Paradoxical95]

Ah, I see what you're doing now.
You've made one base Button (User) Widget, which you're then re-using. Cool.

Is that the default Unreal font, or a custom one?
If a custom, check the font import options has the scalability to support large rendered fonts.

When you add your Widget to the scene, it looks like you're adding it as a 3D widget?
If so, check your scale values in the Widget Component. I've had images alias like that in a 3D Widget, when no mips were present, but never seen it with text (like what you have).

[u/Paradoxical95 → u/jawdy]

The font is the default one, Roboto. I tried using my own preferred fonts but the results were same so I took these shots with Roboto to show that the problem isn't the font.

The scale is also default. I haven't adjusted them. The canvas (as taken from the tutorial) is also 400x300. Is that the problem? If it is then what must I do to fix it?

[u/jawdy → u/Paradoxical95]

Try adjusting the values, raise/lower the canvas values/resolution; adjust the scale.
I believe the canvas size (400x300) is effectively setting the Widget's render size, so I'd wager that's the problem. Try 800x600 or higher. If it goes off-screen in your scene, then try dropping the scale... but it should still preserve the internal render size (the Widget will render to a surface/texture, then that texture is drawn to screen).

Most things you're doing look like they should be fine! As with most things in Unreal, it'll be one small setting or a tick box.

[u/Paradoxical95 → u/jawdy]

Well the scaling didn't help. Tried a lot of scales. It's very confusing. But thanks for replying.

[u/LifeofVertigo]

Im not near my pc so I can’t look up the specific setting names, but I’ll do my best to help from memory.

1.) If I remember correctly, the biggest help I had with this issue, was setting the widget size to much larger 3d actor, than in the widget itself. I believe if say the widget size is 300x100 on the canvas, I usually set the 3d Draw Size on the actor to 600x200. I may have this backwards, so play with it a bit. 2.) Set the anti aliasing to an option other than the default, Unreal’s AA causes 3d widgets to blur and look a bit rough.

[u/Paradoxical95 → u/LifeofVertigo]

Do you mean the draw size here?. In this case, the canvas was 400x200 and draw size in level/actor ref was 800x400. Didn't help.As far as Aliasing go, in my project setting, the default is TSR. It has worked just fine for everything including 2D widgets on screen. Do you recommend changing that? or is there any other text specific setting I should know ??

Thanks.

Edit - I played along with global AA settings, tried FXAA, MSAA, TAA as well. Nothing helped it. Still the same.

[u/LifeofVertigo → u/Paradoxical95]

Yes sir, thats the draw size im speaking of. Make that 2/3/4x what your widgets actual resolution is. Then scale it down in the world to the size you want. I believe the issue occurs when the scaling in the world is blown up and you’re trying to make pixels out of nothing. Make the resolution much higher than you need, the draw size higher, and then scale it down in the world.

[u/Paradoxical95 → u/LifeofVertigo]

I did. Pushed it to the maximum in the level instance of the actor (3840x2160). Nothing happened. Scaled it up. Scaled it down. Nothing happened.
This is strange. What must I do now?

[u/Paradoxical95 → u/LifeofVertigo]

Hey, I fixed it !!
I increased the canvas to 4000x2000
Increased the font size (was 8 initially now its 30)
and then scaled the widget component in the level instance of the actor (to like 0.3-0.4)
And voila, its crisp as hell.
See this.

Thank you for your input. Appreciate it !!

[u/LifeofVertigo → u/Paradoxical95]

Awesome! No problem at all. I end up running into this issue on every project until I remember what causes it.

[u/Paradoxical95 → u/LifeofVertigo]

Yeah. Happens with me too but not much in user interface. I'm pretty new to it. But thanks anyways !