Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice
  3. Dismiss Notice

(4.6) UI objects draw ordering

Discussion in 'UGUI & TextMesh Pro' started by Dahlvash, Dec 3, 2014.

  1. Dahlvash

    Dahlvash

    Joined:
    Feb 9, 2014
    Posts:
    54
    Hello.
    I have a UI that lists other UI objects at runtime and they can be added/removed dynamically.
    These objects have a 'drop down menu' as a child made from buttons and a panel using the layout elements/group components and as such cant be moved around in the hierarchy because of the layout components.

    My issue is that if object 1's drop-down menu is opened, it drops down behind the 'newer' object below it making the buttons hidden and unclickable.

    I know of the sibling index variable but this (after experimentation) doesn't fix it.

    I vaguely remember in the beta (a few iterations ago) that we could straight up set the render order of individual elements, has this been utterly removed because I cant find that option anywhere.
     
  2. Dantus

    Dantus

    Joined:
    Oct 21, 2009
    Posts:
    5,667
    As relatively simple solution should be to add a canvas to the drop-down and in there enable "override sorting" and make sure you have an appropriate value there.
     
    phil-Unity likes this.
  3. Dahlvash

    Dahlvash

    Joined:
    Feb 9, 2014
    Posts:
    54
    Played around with a canvas at various points in the dropdown object and with varying sorting values including -999, -10, -1, 0, 1, 10, 999 but it will not alter the priority at all (inface it makes everything as a child of the canvas disappear).
     
  4. Dantus

    Dantus

    Joined:
    Oct 21, 2009
    Posts:
    5,667
    Could you share a screenshot? Seeing the hierarchy might also help.
    It sounds as if you might have more than one UI, maybe even an overlay and another one.
     
  5. Dahlvash

    Dahlvash

    Joined:
    Feb 9, 2014
    Posts:
    54


    Everything highlighted in the hierarchy is the drop down menu containing possible items (the ButtonPrefab(Clone)'s).
    .As you can see on the far right, when opened, the drop down menu falls behind the other pnlOBJECT.
     
  6. Dantus

    Dantus

    Joined:
    Oct 21, 2009
    Posts:
    5,667
    Which canvas settings are you using for the drop down? And to which canvas does this "None" button belong?
     
  7. Dahlvash

    Dahlvash

    Joined:
    Feb 9, 2014
    Posts:
    54
    The 'DropDownMenu_ItemType' object is a panel and is the start of the dropdown menu structure, it only has a script to populate the list.
    'btnDropDownButton' Just has an onclick to open the menu.
    'itemTypeDropDown' is a panel and has a 'vertical layout group' and 'content size fitter' to control the child buttons (menu selection) layout, and its anchor is set to the bottom of the parent button to ensure that it opens from the correct position.
    'ButtonPrefab(Clone)' has a 'Layout element' so it adherers to its parents vertical layou group component.
     
  8. Dantus

    Dantus

    Joined:
    Oct 21, 2009
    Posts:
    5,667
    It seems I didn't make it clear enough. The essential part is the Canvas settings, so those are the important ones. What did you specify there?
     
  9. Dahlvash

    Dahlvash

    Joined:
    Feb 9, 2014
    Posts:
    54
    Ahh, apologies.
    Here are the settings for the parent canvas:


    As for the extra canvas you suggested to inset into the dropdown, I tried every variation in every part of the dropdown object as I could (adding and altering element components, changing sibling values, etc).
     
  10. Dantus

    Dantus

    Joined:
    Oct 21, 2009
    Posts:
    5,667
    Did you try to make a small reproduction to understand what is going on and why it is not working?
     
  11. Dahlvash

    Dahlvash

    Joined:
    Feb 9, 2014
    Posts:
    54
    Yeh iv tried from scratch a couple of times.
    From my understanding its the overall position in the canvas that's causing it (referencing the draw order).
    Also, sibling index will not work due to its sibling 'scope' is still too far down the tree.
    One thing that comes to mind is to jump it out of its current hierarchy and place make it a child of the outermost canvas, ensuring it is drawn last.
    This will need some tinkering with the layout elements to make sure it doesn't jump around the canvas like it does currently if its moved to somewhere else with a specific layout component.
    I was just hoping for some 'out-of-the-box' change this value and it works as expected.
     
  12. Dantus

    Dantus

    Joined:
    Oct 21, 2009
    Posts:
    5,667
    If you create a canvas for the drop down, it will be taken out of the draw order of any parent canvas and uses instead the given values. I assume that there is an issue in your setup. Maybe there is another canvas which is drawn even after the the drop down.
     
  13. Dahlvash

    Dahlvash

    Joined:
    Feb 9, 2014
    Posts:
    54
    The canvas named 'Canvas' is the only canvas in the scene.
    As I say, I have tried adding a new canvas to 'pnlOBJECT1' object and making the dropdown a child of that new canvas.
    The objects of the new child canvas still appear behind everything else and setting the 'override sorting' value to true caused the canvas and its contents to disappear from the screen no matter what new sort value is added.
    Moving the new canvas as a direct child of the main canvas (at the end of the hierarchy) does allow the dropdown to be drawn properly, and with a simple script could be moved there and beck when opening and closing, but isn't ideal.
     
  14. Dantus

    Dantus

    Joined:
    Oct 21, 2009
    Posts:
    5,667
    I don't really know what you are doing, but for me it works like a charm. This is what I get by default:
    No Override Sorting Used.png

    That's certainly wrong. After using the override sorting with an appropriate value, it looks like that:
    Override Sorting Used.png
     
  15. Dahlvash

    Dahlvash

    Joined:
    Feb 9, 2014
    Posts:
    54
    My set-up also works If I move it to the direct child of the main canvas like in your image. It doesn't seem to work if its further down a branch ie: child of a child of a child and so on.

    What seems very odd on further inspection, is that when i drop the dropdown menu into its own canvas as a child of the main object, it does draw over the panel of the object its attached to but the input box's and labels remain drawn over the top of the drop down menu.(even the input box's and labels on the same object) even when last or first in the objects hierarchy.

    The more I play around with it, the more it feels like a bug with the UI system.
     
  16. phil-Unity

    phil-Unity

    Unity UI Lead Developer

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    if you feel like its a bug please report via the bug report.
     
  17. Dantus

    Dantus

    Joined:
    Oct 21, 2009
    Posts:
    5,667
    No direct child.png
     
  18. Dahlvash

    Dahlvash

    Joined:
    Feb 9, 2014
    Posts:
    54


    Showing the same technique used as in your image (note that if I tick the 'Override Sorting' box the their canvas and its children disappear from the screen and remain hidden even if everything else is moved out of the way to see if it is just being block by the other objects). And I image that's the key here, the object isnt playing well the the 'override sorting' option.
    Still doing testing to try and get something that works that doesn't involve moving the dropdown menu to a different parent object.
     
  19. Dantus

    Dantus

    Joined:
    Oct 21, 2009
    Posts:
    5,667
    The actual point is that you have to use the sorting override and make sure it plays well with the other options.
     
  20. Dahlvash

    Dahlvash

    Joined:
    Feb 9, 2014
    Posts:
    54
    Yes but I'm saying it doesn't work as expected. The canvas utterly disappears (is not hidden behind other elements or obscured in any way, it just completely is not drawn.
    I have removed all my scripts from a second from scratch build using only the out of the box unity assets and components and this issue is replicated.
     
  21. Dahlvash

    Dahlvash

    Joined:
    Feb 9, 2014
    Posts:
    54
    Update: found the issue that was preventing me from using the override sorting option:
    It was the mask on the scrollable object 'ScrollArea+Mask' (the parent of the panel the new objects list into). Upon disabling the mask, the dropdown menus in their own canvas' (with override sorting enabled) then reappear above all other elements in the main canvas.
    This does however introduce a new problem of the scroll area not being masked off and interfering with the rest of the UI when scrolling.
     
  22. phil-Unity

    phil-Unity

    Unity UI Lead Developer

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    There are other threads on this topic, why did you hijack this thread?
     
  23. RV1

    RV1

    Joined:
    Nov 18, 2012
    Posts:
    68
    Apologies, I didn't realise there were other threads. I thought it was relevant to this one since it was about UI object draw ordering and usage of canvas and the graphic raycaster.
     
  24. Dahlvash

    Dahlvash

    Joined:
    Feb 9, 2014
    Posts:
    54
    Late update but seems like it is the mask that's masking the drop down menu even while it is within the masks 'don't mask' area.
    Removing the mask allows the menu to work properly, but the open menu is then drawn over everything else when scrolled.
    As such, I made a completely different menu system that instead of drop down menu's used instead a brand new menu item hidden as default and revealed upon a button press.
     
  25. InvincibleCat

    InvincibleCat

    Joined:
    Dec 23, 2014
    Posts:
    83
    Hi

    I have an issue with Canvas overrideSorting property.
    I get this errors:

    m_TransformInfo.localAABB.IsValid()
    UnityEditor.DockArea:OnGUI()

    IsFinite(outDistanceForSort)
    UnityEditor.DockArea:OnGUI()

    Step to reproduce.

    1) Create a canvas (the default one from the menu)
    2) Click on the canvas and create a new one
    3) Enable overrideSorting
    4) Right click on the childCanvas and create an Image
    5) Press Play to start the simulation
    6) Press Play again to stop
    7) Look at the console

    Thanks,
    Cheers unity bug.png
     
  26. InvincibleCat

    InvincibleCat

    Joined:
    Dec 23, 2014
    Posts:
    83
    Nevermind, I just solved the issue n_n

    To solve it, the sortingOrder value must be >= to the Canvas parent sortingOrder value.
     
  27. phil-Unity

    phil-Unity

    Unity UI Lead Developer

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    hmm that should not be the case. could you file a bug about it?
     
  28. InvincibleCat

    InvincibleCat

    Joined:
    Dec 23, 2014
    Posts:
    83
    Yes I did it ;)
     
  29. Lnoldori

    Lnoldori

    Joined:
    Jan 19, 2013
    Posts:
    9
    Any news related to this problem?
     
  30. Lnoldori

    Lnoldori

    Joined:
    Jan 19, 2013
    Posts:
    9
    For version 5.0.1f1 i solved my problem by setting "overrideSorting = true" in code instead of doing it in the editor