Search Unity

UI Optimizations (all-in-one Canvas)

Discussion in 'UGUI & TextMesh Pro' started by SplashFoxGames, May 30, 2019.

  1. SplashFoxGames

    SplashFoxGames

    Joined:
    Oct 10, 2012
    Posts:
    53
    Good day, dear friends!

    I'd like to ask an advice on how to optimize UI structure.

    So I have everything on 1 Canvas, there are tens of screens with sub screens with tens of elements (Images/buttons/etc) inside each, something like that:

    Canvas
    ...GameScreen
    .......Container
    .......... Button
    .......... Button
    .......SubGameScreen
    ...........Container
    ..............Button
    ..............Button
    ...........SubSubGameScreen
    .................Container
    ....................Button
    ....................Button
    .......SubGameScreen
    ..........

    Its very easy to work in this way as I have folders structure done same way, so its a huge tree but well structured.
    But as you can see, when you go deeper in the tree - there is a situation when 3-5 screens are overlaying each others and it cause FPS drop on mobile devices (even after 2-3 screens overlap), there are lot of images with transparency...
    So how I can optimize it?
    my thoughts:
    1). When I open a SubScreen - I can make "Container" of prev. screen disabled - that will not auto-hide this child, but will remove stuff from rendering/calculations?
    2). Add CanvasGroup to screens?
    3). Make it linear, put on different canvases? Canvas in Canvas or completely separate nodes in scene root?
    Thanks in advance!
     
    SplashFoxGames, May 30, 2019
    #1

  2. Antypodish

    Antypodish

    Joined:
    Apr 29, 2014
    Posts:
    10,779
    One of many options, probably best way, is to reducing transparency overlapping.
    Disable transparency where not needed.
     
    Antypodish, May 30, 2019
    #2

  3. SplashFoxGames

    SplashFoxGames

    Joined:
    Oct 10, 2012
    Posts:
    53
    If I have a non-transparent background fullscreen image - is it better to have this image on PNG atlas or JPEG atlas, is there a big difference?
     
    SplashFoxGames, May 30, 2019
    #3

  4. Antypodish

    Antypodish

    Joined:
    Apr 29, 2014
    Posts:
    10,779
    Yes, should be, since you don't need compute transparency multiple times.
    Best if you test on some lowest end expected device, or simulate.
    Or set minimum required spec for device, to run your app on.
     
    Antypodish, May 30, 2019
    #4

  5. SplashFoxGames

    SplashFoxGames

    Joined:
    Oct 10, 2012
    Posts:
    53
    even on iPhone 7 there is visible FPS drop down = )
     
    SplashFoxGames, May 31, 2019
    #5

  6. BennyTan

    BennyTan

    Joined:
    Jan 23, 2014
    Posts:
    141
    I currently have a layout similar to yours, but make each subgame screen its own canvas inheriting from the main canvas and rectmask 2D (scrolling screen). Not sure if this is a good method and would appreciate any advise.
     
    BennyTan, Jun 6, 2019
    #6

  7. SplashFoxGames

    SplashFoxGames

    Joined:
    Oct 10, 2012
    Posts:
    53
    yes, thats what i started to do as well:

    - Screen1
    -- Content
    -- SubScreen1_1

    so in this case I have Screen1 as parent, and his Content child is the container for the actual data in this screen,
    but there is also a child "SubScreen1_1" that is on same level as Content,
    so I:
    - set canvas/graphics raycaster to "Content" object
    - when I need to activate SubScreen1_1 - I disable "Canvas" component of "Content" and activating it back when SubScreen1_1 is going to close.
    I tested on mobile devices - it works, so I have any deep of childs inside childs for fullscreen screens and this is no FPS drop etc. Enabling/Disabling game objects is more expensive procedure than Canvas component on/off, but gives same optimization effect.
     
    SplashFoxGames, Jun 17, 2019
    #7