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 !!

1 Like

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:

making 3D widgets will take me more time for me to setup … as i’m working on mobile game, playing with materials will reduce my performance.

Rather I can alter the UI elements in Photoshop and then import the assets to avoid that extra material processing !

BTW just remembered college lecture of my CG class :smiley: … AAs work on same “make edges fuzzy/smooth” principle. The fancy algos and multi samples are to effectively detect edges and fade edges more :smiley: