Z-index ignored (SOLVED)

Questions
#1

Hello,

I have a main.collection and in this collection I have added a collection from file that contains a go with a sprite. Lets call it player.
Additionally, I have added a go to the main.collection, that hasa a gui component with a box with full screen size, which acts as background. Lets call it background.

Once I add the background go, the player is not visible anymore. So I have tried to set the z-index for the player collection to 1 and the background go stays at 0. But it does not work. The background is still on top of the player.

I have tried multiple combinations of z-indices without success. Any pointers would be appreciated.
Maybe using z-index is the wrong approach. I want a coloured background in my main collection and add a bunch of other collections on top.

Thanks.

1 Like
#2

The default render script (builtins/render/defualt.render_script) will always render the gui after the sprites, spine, tilemaps, particle fx and so on. This means that your gui with the box node that serves as a background will always be rendered on top of everything else.

It is also worth pointing out that the z-value of any node in a gui is completely ignored. And within a gui the nodes are rendered according to the order in which they are arranged, or based on their layer assignments.

In your case I’d recommend to put the background in a game object with a sprite instead and use the z-value to make sure it’s drawn behind everything else. A more advanced solution would be to give the background sprite it’s own material and use a custom render script to draw it in a separate pass (this could also be done if you wish to keep it as a gui node).

2 Likes
#3

give the background sprite it’s own material and use a custom render script to draw it in a separate pass

Can you explain this in a little more detail. I have already a custom render script, because of some other problems I had to solve. I am not sure what means a different pass. Would this material be rendered in the update method of the render script as well?

I wouldn’t mind keeping the gui node with a colored box, because I don’t have an actual image/sprite and might stick with just the color anyways.

#4

I’m on my phone now so I’ll be brief. If you want a solid color as background it’s best to set the clear_color via a message to your render script. Check clear_color in the API docs.

If you look at the render script init function you see that a couple if different render predicates are created (tile, particle, gui, and some others). These correspond to the tags in the .material files.You can copy the gui.material, give it a different tag and render it at the appropriate place in your render script update() function.

1 Like
#5

I ended up going the easiest route and added a GO with a sprite. I was able to configure the z index there, as you suggested and it worked perfectly.

Thank you!

2 Likes