Hello, all the designs we made in Figma look pixelated in Unreal Engine. The pixelation is usually more noticeable around the corners.
What we’ve tried:
Exporting everything as power of 2 and downscaling it in the engine.
Changing the DPI Scaling settings.
Setting Mip Gen Settings to NoMipmaps.
Setting the Texture Group to UI.
Setting Compression Settings to Uncompressed, BC7 Compressed, and Default.
Setting the Filter to Tri-linear, Bi-linear, and Nearest.
However, none of these have fully solved the issue. I’ve looked through most pages on this topic but couldn’t find a solution.
Yeah it doesn’t always produce the best results due to lack of anti-aliasing on UI.
On top of using the settings you have, sometimes you will need to create a subtle glow halo around the object in Photoshop. I have noticed that you don’t always have to do this, but the more rounder/at slope your sprites are the more it benefits from having a glow.
Here is a working example of different settings, I’ve severely zoomed in the image to help identify aliasing better:
(From Left to Right)
#1 - non power of 2 images (514x514) resolution #2 - has power of 2 resolution and the settings I mentioned above #3 - non power of 2 images (514x514) but has the settings I mentioned above in previous post #4 - has power of 2 + Correct settings + a glow applied to it.
Thank you so much for all the information. I understand it better now. I’ve got only one question. So, it doesn’t have to be power of 2 in editor, right? I need to export it as power of 2 and import as power of 2 but I can size it to 38x73 in widget for example.
Yeah that’s correct! You can size it to whatever you want, you just need to import it as Power of 2 (at least in my experience). Feel free to let me know if it doesn’t behave correctly!
I have one last question. For example, when we make an icon’s size power of 2, the image gets distorted. Should we add a frame around it and make that power of 2, or should the icon itself be power of 2 directly? I think I know the answer but I just want to make sure.
its unfortunately not a straight forward answer since it really depends on your UI hierarchy.
The best way i can propose it is that you will have to live with the empty space around your images. It has to become part of the way you implement your design and spacing.
In certain cases, using a retainer box or a mask is a great idea, while in other cases you have to minimize/adjust the empty spaces around your elements in external programs.
What i like to do is keep a reference image of my entire UI as a background while I am laying out my elements. Since I can’t replicate padding/margins 1 to 1 from Illustrator/affinity/figma. Then I decide in unreal how I want to deal with irregular spacing.
If in the case I have to depend on the hit area of an image for specific interaction, then I generally create fake buttons that matches the surface the player should be clicking on.
So what I am saying is that your image implementation will always be square but you can scale it down with 1:1 proportion, then you just deal with extra empty spaces in various ways. To me that’s the easiest way of dealing with the problem.
The power of 2 thing is also really useful for keeping your UI light(er) weight than it normally would be since the disk and streaming size I think should be lower than an irregular image.
