Can a GUI element be hidden behind a sprite with z-index?

#1

How should I go about hiding a gui under a sprite?
z-index doesn’t seem to work on GUIs, or GOs containing GUIs

0 Likes
#2

Hi! I’ve just been studying this stuff myself. GUIs don’t work the same as GOs. Here are the key points:

  • the z position of GUI objects means nothing (personally I think it should be removed from the editor). GUIs are automatically rendered on top of GOs.

  • you have to create layers (there’s a folder for them in your GUI screen in the editor) and then assign each GUI object to a layer. You can then use coding to change the layer of each GUI object. You can also assign no layer, in which case the z layer just stays at the default.

  • you can move the order of the layers to change the render order by clicking on a layer in the editor and pressing alt + up/down (it might not be alt, it might be another key) (You can also move nodes up and down in this way using the editor with the same effect)

  • if a GUI object has a child with a layer assigned to it, that breaks the order.

So, to answer your question, you can’t hide a GUI under a GO sprite, but there are other things you can do to manage GUI layering. It’s a good system, but i think it’s not very well explained for beginners, especially because the z position is accessible in the editor, but does nothing (I also spent a good 45 minutes changing the z layer of GUI nodes and scratching my head wondering why nothing was happening).

How would I change the system? I would make the z position into a drop-down where you could see the available layers which are found in the “layers” section of the GUI node, and maybe creating a “default” layer mode that people could select.

2 Likes
#3

That is not strictly true. Setting the z position outside camera bounds (-1 to 1) prevents the gui node from being rendered. Not that it is particularly useful, but it’s there.

Gui is set to be drawn last in the render script, which is also something you could modify, but overall I agree that the z position of gui nodes is a confusing setting.

1 Like
#4

Hi grify,

maybe I’ve dealed with the same problem in my first game

In defold GUI and WORLD are managed separately.

Check the rendering pipeline manual

The GUI is always shown above to the WOLRD, because is rendered separately after it.
Take a look @ the default.render_script

image
image.png1655×1038 178 KB

If your sprite is always above certain GUI elements I think you can something similar at what I’ve done (description in my old post)

I’ve splitted GUI into two parts, one is rendered behind the world (in my case the world is only the puzzle grid, and I’ve managed the background in the addictional GUI)

If you have a fullscreen WORLD scene you can at opposite add an addictional render phase for sprites after the GUI rendering in the renderscript, rougly by doubling the part marked in yellow after the GUI rendering.

In this final phase you have to change rendering predicate tile_pred into something different (check the init function)
You have to create a cloned material from sprite material, with the different tag,

image
image.png1258×908 45.9 KB

And apply this material to any sprite that needs to be shown above the GUI.

Hope this helps!

4 Likes
#5

hi!
quick question: can you pick a node if the z is -10000? I’m getting some unexpected behaviour!

1 Like
#6

In my experience, setting the z position of the GUI to outside camera bounds doesn’t alter it’s appearance

0 Likes
#7

here’s one for you: pie nodes are slightly smaller than the zones that is sensitive to gui.pick_node.

1 Like
#8

That doesn’t seem practical without resizing them

0 Likes