Hi, can someone please suggest a solution to my problem? TLDR: Is there any way to display child UI button hidden behind it’s parent Button? (Retaining the parent-child hierarchy is needed for specific animator needs)
I want to animate a MasterButton, that has couple of SubButtons. The idea is that holding the masterbutton (pointerdown) would trigger animation that (A) makes the master button larger, and (B) reveals sub buttons that “jump” out as if they were hiding behind the master button.
So, naturally, in order to animate this, I need the animator on Master Button, and have SubButtons be children of the Master Button. This is needed so that sub buttons would inherit the master’s animation in addition to their own “reveal animation”.
Well, whenever I make the sub buttons a children of master, they are drawn on top of it. Sorting groups didn’t help, z ordering naturally did not help, as the order of display is bound to the order in which they are presented in heirarchy. Is there any way to override this and make children ui elements display behind their parent ui element?
Your description doesn’t make it clear why the “SubButtons” need to be children of the “MasterButton”. My inclination would be to have some invisible parent game object that controls the animation, and make all of the buttons (including the “master”) be children of that, in whatever sibling order gives you the right Z ordering.
But if you can’t do that for some reason…
IIRC if you change your canvas from “Screen Space - Overlay” to “Screen Space - Camera” then it will start paying attention to the Z coordinates of your objects.
If the parent is fully opaque, then you could also probably make it look like the buttons are going behind the parent using a well-placed Mask without actually changing the render order. (i.e. the “SubButtons” will be in front, but the part of them that overlaps the “MasterButton” will be invisible, giving the illusion that they are being occluded).
I cant use Screen Space - Camera, as there is no camera in the scene, but my tests did not prove this to work. The only way of ignoring hierarchy is when all the buttons have their own canvas with override sorting. This works both for Camera and Overlay. Not sure if it’s the right idea to have so many canvases just for this purpose. Perhaps it’s ok …
As for the parenting reason - imagine the master button rotating on touch by 30 degress, while the sub buttons jumping out from behind. The children have to copy the master’s animation and add their animation to the mix. Sort of an IK feeling. Dunno if you ever animated in for example After Effects, where the parenting is not bound to hierarchy, but is only a reference.
Yeah I thought of the animating arbitrary parent-child gameobjects and binding buttons positions/rotations to it through code. However this feels like a hack to something I was hoping to have an intuitive solution. Masking feels even worse.
Anyway, thanks again. I don’t think there is a nice solution to this specific case. Perhaps if the Sorting Group component could override hierarchy, for these situations, but that does not seem to be the case.
Again: animate an invisible parent doing all those things, with all buttons (including the “master”) being children of that invisible object.
Or in other words, move all the graphics on your current master button to be on a child graphics-only child that is in front of all the other children. The true master button is now invisible, but it has a puppet that represents itself and sits in front of all the other children.