I followed this tutorial to setup a menu like system. The text and icons that I use look good in the widget editor.
But once I have placed them in the viewport they look super pixelated / blurry. This effect is a lot worse on my button that uses a texture. No matter what size this texture is, it still looks awfull.
How can I fix this? I have already tried changing the blend mode to transparant instead of masked.
You’re using a Widget Component in World Mode for this, correct?
300x300 roughly at that distance on a 1920x1080 screen?
You’re using a Widget Component in World Mode for this, correct?
Yes that is correct.
The resolution of the source image is currently 209 x 209 pixels. I exported it out of illustrator. Strange thing is; I also exported it as 1024 x 1024 and it got worse somehow. Then reverted to back to 209 x 209. But when I’m opening the widget editor it looks perfectly fine, same for the text. No weird edges.
Yea your guess about the size is probably close. I’m using a 1080p screen.
Right. See if we can make it look better like so:
start using the power of 2 for the images when possible. 209px is not a good size. 256 is great, though! If the image is to appear large on screen - the camera can come close to it - the source image must be larger. If I can press my face against it on a 4k screen, it should be 4k to start with. 1024 may be OK for 2k.
change the compression of the image (double click it in the content browser), it will help a little:
I remember tackling a similar issue at some point but it was years ago and details are fuzzy. The above sounds like the route I took, roughly.
So I followed your suggestion, and everything works now! Just putting everything I did to make it work here in case someone ever finds this post.
Made the texture 2048 x 2048. Changed the image size (in the widget and in the details panel) to 500 x 500 instead of 50x50. Put the scale on 0,1.
After that I tried to apply the same logic to the text. Bumped up the screen and draw size by x10. Then scaled it down to 0.1
Problem I had is that the text doesn’t scale with it.
added a scale box between the vertical box and my button.
Only problem left was that my border looked small now. Fixed this by increasing the margin under appaerance.
Everything looks crispy smooth now!
Thank you for your help. It definitely brought me towards the right direction after being stuck for several hours.
Stunning! Thank you for sharing the details.
