Best way to show overlay picture(s) over UI Box?

›
tlamiczkatlamiczka
in ORK Support
I can't figure out good way how to create "layered" UI box in which I could place one or more overlay pictures over the basic menu (also over buttons). The overlay picture shouldn't interact with the main content, just be drawn above it. Everything I tried affected the content of the UI box in some way...

See picture for example - what's the best way to add image just with the statues that will be drawn over the whole UI box (including the variable number of buttons in the menu)? I would also use it for example in HUDs to place nice frame above character portraits etc.

image

(I can't find any component with field where to place for example Mask for whole ui box; I have to use Vertical layout group in the parent GameObject to order buttons because their number change depending on circumstances etc.)
  • ScyraScyra
    GameObjects lower in the hierarchy are effectively layered on top. In your picture, for example, if your menu background image is a component of UI Box - MAIN MENU - Start, then the Button - main menu GameObjects are drawn over it because they are lower on hierarchy, and the Selection Cursor is layered over everything else because it is last.

    You just need the statues to be placed after the buttons and before the Selection Cursor in your hierarchy. Just right click in the Hierarchy, go to UI > Image (sprites) or Raw Image (textures), and copy the Image/RawImage GameObject to paste in your own menu, then delete the Canvas and EventSystem that were created in your Hierarchy. Uncheck Raycast Target on the Image component.
  • tlamiczkatlamiczka
    Scyra > Thanks for pointing me in the right direction :-) My main problem was with VerticalLayoutGroup that I need to have in the menu to properly place various number of buttons. But this also completely "squished" any attempt to add image to the prefab since the layout was applied to all components below it (including images).
    But I solved it by creating new empty GameObject under the main menu object, linked it as "Input parent" and added VerticalLayoutGroup for buttons under it. And it works this way! Probably weird solution that will cause GiL to do massive facepalm but it seems to work :-))

    image

    And the result in the game:

    image
  • ScyraScyra
    That looks really good. There's also a component called Layout Element that has an "Ignore Layout" option that's useful if you want to free a specific GameObject from being controlled by those Vertical/Horizontal Layout Groups.
  • gamingislovegamingislove
    You can make game objects ignore any layout component by adding a Layout Element component and enabling Ignore Layout on it :)

    Generally, as @Scyra explained - stuff is displayed based on their position in the hierarchy. You can e.g. put all the stuff that'll be added to the UI box (inputs, text, etc.) on a child object with a layout you want to not interfere with other stuff on your UI box.
    Or create a UI box with scrolling (scene hierarchy context menu), where this is already taken care of :)
    Please consider rating/reviewing my products on the Asset Store (hopefully positively), as that helps tremendously with getting found.
    If you're enjoying my products, updates and support, please consider supporting me on patreon.com!
  • tlamiczkatlamiczka
    Thanks, the Layout Element componet will definitely help, I missed the checkbox on it - it's very useful thing indeed!
Sign In or Register to comment.