How to avoid jaggy UI for mobile?
Hi there, I'm working on a Android game and having some issues with UMG The UMG elements loos too jaggy due to aliasing effect. I tried switching AA in Project setings->Rendering but it only applies AA to 3D world and not on UMG.
I have a cartoony UI and the aliasing is kind of ruining the feel. I thought its because of UE4 stock UMG elements but my custom elements appear to be aliased as well
NOTE: The custom bar is in image render and the menu boxes are set as box render.
Here are few screenshots !!
UMG widgets are rendered separately so they don't get the global PP antialiasing like you'd noticed already.
You could try rendering them as 3D widgets so they'd be in the world, just make sure they stay on top of things if you do that.
Other way to fix that is more hacky and involves a lot more work. The trick is to add gradient opacity at the very edges of your shapes, when ue4 renders it, it looks a lot more smoother that way. What makes this difficult though is that you need to author your buttons and icons in a way that you have that gradient data. Just to give example of the effect, in the following image, bottom bar is what happens with shear and default rectangular shape on UMG, top bar is the same but has small gradient on the top and bottom edges:
Here's the material setup I used in this test but obviously yours would need to be something that suits your shapes:
answered Dec 05 '16 at 02:26 PM
Follow this question
Once you sign in you will be able to subscribe for any updates here