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.
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.
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:
when the component textures its quad, increase the draw size but reduce the scale (adjust as needed):
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.
Which I found odd, because I have it on size “fill”
It fills the whole thing with the background color, but the text doesn’t get any bigger. After some googling I found a solution for this.
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.