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.