Anybody know some way to improve anti-aliasing on UMG elements?
Image below I am making use of “sheer” but it makes border edges noticeably aliased. I don’t think the projects AA settings come into effect here. For the project I am using temporal AA algorithm 5.
Thanks for any suggestions.
This is something I am particularly interested in as well. I read on another topic that the engine antialiasing isn’t applied to UMG elements(Enable Anti-Alias on UMG Widget Text?) - so if you render the UMG on a unlit plane and capture it trough a Scenecapture, that could improve it.
How
I just found similar as well:
For me, moving all of my widgets to 3d space is not realistic. I’ll explore if I can make a material that gets post-process effects and apply that to my UI elements.
some additional reading:
Post Process on UMG? - Programming & Scripting / UI - Unreal Engine Forums
Looks like there is no quick way to do this. It seems the most time effective method is to author the UI shapes and bake some AA into them (i.e. just slightly blur the edges). But that is only a partial solution, and still cost a lot of time.
I also run into this issue and noticed that some of the assets used in Lyra had AA builtin. Doing that by hand is indeed a lot of work!
So I wrote a web app to automatically process my images and anti-alias them. I also added RGB packing because why not! (this allows you to have 3 textures in 1 (great for icons for instance).
The app is totally free, available there: https://umg-antialiser.pages.dev/
Everything is done locally, in your browser and you have access to the source code to check/run it somewhere else.
Suggestions and pull requests welcomed.
