x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

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 !! alt textalt text

Product Version: UE 4.14
Tags:
more ▼

asked Dec 05 '16 at 08:00 AM in Rendering

avatar image

XADIFY
40 9 10 15

(comments are locked)
10|2000 characters needed characters left

1 answer: sort voted first

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: alt textalt text

Here's the material setup I used in this test but obviously yours would need to be something that suits your shapes: alt text

shear_test.png (366.5 kB)
shear_mat.png (86.3 kB)
more ▼

answered Dec 05 '16 at 02:26 PM

avatar image

0lento
115 2 4 11

avatar image XADIFY Dec 05 '16 at 03:06 PM

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 :D .... AAs work on same "make edges fuzzy/smooth" principle. The fancy algos and multi samples are to effectively detect edges and fade edges more :D

(comments are locked)
10|2000 characters needed characters left
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question