Search Unity

  1. Get all the Unite Berlin 2018 news on the blog.
    Dismiss Notice
  2. Unity 2018.2 has arrived! Read about it here.
    Dismiss Notice
  3. We're looking for your feedback on the platforms you use and how you use them. Let us know!
    Dismiss Notice
  4. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  5. Improve your Unity skills with a certified instructor in a private, interactive classroom. Learn more.
    Dismiss Notice
  6. ARCore is out of developer preview! Read about it here.
    Dismiss Notice
  7. Magic Leap’s Lumin SDK Technical Preview for Unity lets you get started creating content for Magic Leap One™. Find more information on our blog!
    Dismiss Notice
  8. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice

Unity UI Best Practices

Discussion in 'Unity UI & TextMesh Pro' started by Yukichu, Mar 24, 2015.

  1. Yukichu

    Yukichu

    Joined:
    Apr 2, 2013
    Posts:
    417
    I spent a lot of time reading these forums, forum/net searches, etc. just to find out what information I could on the new UI and how to do it because I don't see an actual 'best practices' thread anywhere. The tutorial project was fantastic to learn the basics, but then you're left with questions when you delve in.
    • First and most importantly - watch the tutorial videos: UI Beginner Tutorials
    • Download the example project and play with it: Asset Store UI Example Project
    • How to disable a UI object from blocking raycasts without disabling the object? Add CanvasGroup behavior, disable the BlockRaycast option.
    So once you're done with that, you go build some UI and wonder why ngui/df-gui/etc. performance was so much better. For me I had horrible performance with just a UI (no game) that had few animated texts, 2 scrollRects, and just a bunch of images text. That's when I decided more reading was necessary.
    • UI/Sprite textures aren't packed into a texture atlas by default. A tag is needed to group them. Read the documentation / tutorial on the sprite packer.
    • Overlapping text/graphic boundaries with another text/graphic will create additional draw calls, even if the actual visual graphics do not overlap.
    • Grids (other layouts too I presume) need minimum 1 pixel spacing between items, else items are considered overlapping and will create additional draw calls.
    • Images with alpha 0 are still rendered. They are rendered with alpha 0 even though they are not seen.
    • Unity currently does not support non-rectangle shapes as Sprites, so using the TightSpitePacker policy will cause image artifacts.
    • When UI objects are offscreen, they are still batched (rendered as well?). Possible solutions:
      • Change parent to non-UI parent, as UI Camera will no longer detect it
      • Change layer of panel so UI Camera will no longer detect it
      • Disable gameobject when off-screen
    • ScrollRect performance tuning
      • ScrollRect will rebuild / reload everything every frame if pixel perfect is enabled
      • Disabling the layout behaviors when it's not being used / updated (canvas size fitter, layout groups, layout elements)
      • For larger lists, disable off-screen objects
    • Canvas PixelPerfect has large performance impact. Disable it if possible.
    • Looping animations should be stopped when off-screen.
    • Fonts are not part of the texture atlas, unlike ngui/df-gui/etc. This will produce additional draw calls. Here's a post on adding your own bitmap font to use, which I believe you can add to the texture atlas? Unity 4.6 Bitmap font? Haven't tested this, but looks promising.
    I'm surprised there isn't already a topic like this. If I'm wrong on some of these points, please let me know. Add to it. It's been compiled from reading many, many, many forum posts. After all the optimizations, my draw-call count is very close to my previous UI (with ngui) and performance is very good.

    I am sure more can be added. Maybe someone ought to move most of this over to the FAQ. The FAQ page could use some scrubbing, as "asking a question instead of making an actual forum post" doesn't really make it a frequently asked question.
     
    Last edited: Mar 25, 2015
    ThomLaurent, 4ININ, JohnTube and 31 others like this.
  2. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,597
    Fantastic post @Yukichu Couldn't have put it better myself. @phil-Unity could this be made a sticky?
     
  3. andyz

    andyz

    Joined:
    Jan 5, 2010
    Posts:
    862
    Nice one. Note that if you are doing mobile button controls where the user holds down the button you have to struggle a bit to make it work well. It has been noted that there is no simple 'isButtonDown' or better 'isButtonTouched' function/getter so you have to manage it yourself
    http://forum.unity3d.com/threads/button-repeat.263953/
    Solutions for isPressed:
    http://forum.unity3d.com/threads/touch-and-hold-a-button-on-new-ui.266065/
    BUT - there is an issue still - the standard buttons expect you to start and end your touch on one button, what if you slide your finger onto a button or between buttons as you might well do in a mobile arcade game - the solutions linked above don't handle that, so then you might resort to raycasts for each touch at the beginning of each frame to see what UI buttons are touched, using EventSystem.current.RaycastAll(...);
     
    Yukichu likes this.
  4. Yukichu

    Yukichu

    Joined:
    Apr 2, 2013
    Posts:
    417
    What a complete headache @andyz -- thanks for the addition.
     
  5. Yukichu

    Yukichu

    Joined:
    Apr 2, 2013
    Posts:
    417
    Apparently if you want to interrupt OnDragBegin or OnDrag, you set the PointerEventData pointerDrag to null. As soon as it's set to null, it stops moving. You can then move it where ever you like, such as snapping back to original position.
     
    SimonDarksideJ likes this.
  6. denis_va

    denis_va

    Joined:
    Apr 21, 2015
    Posts:
    9
    Great post, Yukichu. A lot of helpful information.
    Another solution I found through experimenting is to add the Canvas component to any GameObject that you are hiding through a CanvasGroup. This way the renderer seems to realize that he shouldn't render GameObjects that have a CanvasGroup.alpha value of 0. Setting the a CanvasGroup.alpha value to 0 is still mandatory though. Moving it offscreen still won't work.

    But remember: If you need interactions on a GameObject you are hiding this way, you also need to add the Graphics Raycaster component otherwise it won't receive interaction events.
     
  7. dCoding

    dCoding

    Joined:
    Sep 9, 2014
    Posts:
    26
    I don't find this to be the case; unfortunately the batch count remains the same regardless of whether the Canvas Group alpha is zero or not.

    I am astonished that off screen UI elements also contribute to the batch count, which is what led me to find this excellent post by Yukichu in the first place.
     
  8. denis_va

    denis_va

    Joined:
    Apr 21, 2015
    Posts:
    9
    That's odd... Because it works for me in Unity 5.0.1f1. As I said, you need to both have 'Canvas' and 'CanvasGroup' on the GameObject.
    Sadly having this many Canvases in a UI structure seems to mess up the rendering though. Especially when used in conjuction with Masks. So this workaround is not really working for us.

    Yeah, me too. I hope Unity improves their Canvas rendering so that offscreen and invisible elements are ignored.
     
  9. dCoding

    dCoding

    Joined:
    Sep 9, 2014
    Posts:
    26
    [EDIT] Apologies - I hadn't followed your instructions properly and didn't add the Canvas component (just the CanvasGroup). It does work, and in addition (for me) it works if I simply add a Canvas component to a GameObject (that has an Image component), and then turn the Canvas off - the batch count decreases by one and the Image is no longer drawn. This is without a CanvasGroup component attached. But I agree this is not an ideal solution for everyone.

    I had written a system where it disables and enables off screen UI GameObjects, and while it worked fine on Desktop and iOS, for some reason the same code messed up the rendering order on Android after a GameObject was disabled and enabled for the first (and every subsequent) time. To be specific, Text on top of Image buttons were vanishing and then reappearing after roughly a 1 second delay! But this didn't happen for every button, even when their structure was identical in some cases, with the only difference being position.

    All this wouldn't be an issue if the UI camera culled stuff in the same way as a regular camera. I wonder what forced them to make it different?

    [EDIT 2] denis_va, I owe you a massive thanks! I reworked my system so that instead of disabling / enabling UI GameObjects, it disables / enables attached Canvas components (without CanvasGroup, but with Graphic Raycasters on the elements that are interactive) - and it works on iOS and Android! It might be because my UI is fairly simple, and I don't really use masks (just in one place), but whatever the reason it has solved my problem. Of course, I would still rather Unity ignored off-screen stuff, but as a workaround this has helped a lot - thanks again!
     
    Last edited: Apr 29, 2015
  10. denis_va

    denis_va

    Joined:
    Apr 21, 2015
    Posts:
    9
    Glad I could help. Disabling the Canvas directly seems like a good approach to keep the number of components down.

    I still hope that they will implement an easier way to hide Objects, like the 'visible' parameter in Flash.
     
    Yukichu likes this.
  11. Kiwasi

    Kiwasi

    Joined:
    Dec 5, 2013
    Posts:
    15,396
    For world space canvases that are not intractable (like health bars) remove the graphics raycaster. Having a high number of unused raycasters in your scene can chew through performance.
     
  12. AproWolfOffical

    AproWolfOffical

    Joined:
    Mar 29, 2015
    Posts:
    4
    You don't know how much this guide helped me :) thanks you very much kind sir
     
  13. Survivalist-Games

    Survivalist-Games

    Joined:
    Nov 24, 2014
    Posts:
    52
    Yeah I've been looking at my UI and I get a new draw call for every UI text element. However, this includes bitmap fonts (in my case using the CJFinc: Bitmap Font Tools extension). I was under the impression that by using an identical bitmap font in mutiple places would batch down to a single call but it looks like no. I still get a fresh draw call for each text element. Hopefully I can find a way around this as it could cripple my game (very text heavy)
     
  14. Yukichu

    Yukichu

    Joined:
    Apr 2, 2013
    Posts:
    417
    That sounds awful. I've been wrestling with whether to pay money for TextMeshPro or not. I find it highly annoying that the text solution for the default UI is not very optimized.
     
  15. daybreaker93

    daybreaker93

    Joined:
    Jun 11, 2014
    Posts:
    71
    I have just begun learning the new UI lately and found that this post is super useful.
    Thanks Yukichu

    But an overlapping graphic boundaries from the same packing tag won't create additional draw calls right?
     
    Last edited: May 19, 2015
  16. sanpats

    sanpats

    Joined:
    Aug 24, 2011
    Posts:
    343
    Even if there is no overlap, the hierarchy does effect the draw calls. If I put an image between 2 text widgets in the canvas hierarchy even with no overlap in any of them, they will draw the two texts separately. Doesn't matter if it is Dynamic or Bitmap Font, tried both. This causes problem as many components need the combination of text and image like the comboboxes. Anyone have any recommendation?



     
  17. MrEsquire

    MrEsquire

    Joined:
    Nov 5, 2013
    Posts:
    2,712
    Excellent post, any more lessons learnt since March..
     
  18. tnbao91

    tnbao91

    Joined:
    Sep 5, 2013
    Posts:
    42
    So many thank to yoy sir ! I will bookmark this post
     
  19. jamesbean

    jamesbean

    Joined:
    May 15, 2014
    Posts:
    1
    I read about a similar issue with sprite rendering and 2D Layers: apparently, making a "multi-texture layer sandwich" (i.e. sprite from texture A in layer 1, sprite from texture B in layer 2, sprite from texture A in layer 3) will break the sprite batching, and so multiple drawcalls will ensue. Maybe the text / sprite issue is because of a multi-texture hierarchy sandwich?
     
  20. ImpactBlue

    ImpactBlue

    Joined:
    Jun 19, 2013
    Posts:
    15
    Absolutely invaluable post thank you @Yukichu.

    I had my hidden UI elements offscreen but hit the excessive draw call issue.

    Hiding them by moving them to a non canvas parent boosted my FPS on android by 20+ and reduced over 30 draw calls.

    Just note its important to not retain world position when setting parent so the UI positioning doesnt go wack when screen resolution or orientation changes.

    Code (CSharp):
    1. //Hide component
    2. uiComponent.transform.setParent(HiddenParent, false);
    3.  
    4. //Show Component
    5. uiComponent.transform.setParent(OriginalParent, false);
    Hope this helps!
     
    leni8ec and Yukichu like this.
  21. ImpactBlue

    ImpactBlue

    Joined:
    Jun 19, 2013
    Posts:
    15
    Unfortunately what I gained in FPS, I lost severly in the GC department! Switching parents triggers MaskedGraphic.OnTransformParentChanged() which is generating a bucket load of garbage.....

    Will give canvas groups a go and report back.