Z-index and draw order between "cousin" nodes

Godot Version

4.2

Question

Hello everyone!

Given this tree:

A
\_ 1
\_ 2
B
\_ 1
\_ 2

I was wondering if it was possible to draw for example A.2 on top of B.1.

I tried playing with the Z-index but from what I understand it only works between siblings, not between “cousin” nodes. I also tried to uncheck the “z-index as relative” setting, thinking the absolute index would work for the whole scene but with no success.

(click here if you want to see the details)

Both parent nodes are ParallaxBackground, and the children all are ParallaxLayer.

I have the classical parallaxes that moves when the player move, but I also wanted some layers to keep moving even when the player is still (typically the layer showing clouds in the sky).

I first tried to leave the ParallaxBackground’s scroll untouched while dynamically changing the scale of each layer. This however would reset their X position and make the background “jump”.

Then I had the idea to have 2 separate ParallaxBackgrounds with their own scroll speed:

  • one for the parallaxes that only move when the player is moving
  • one for the parallaxes that keep moving even when the player is at rest.

The problem is that some layers from one ParallaxBackground node should be both on top and behind of some cousins layer from the other ParallaxBackground.

For example:

A (always move)
\_ clouds
B (only move when player does)
\_ sky
\_ mountains

The clouds from node A should be on top of the sky from node B, but still behind the mountains also from node B.
I thought the ideal solution would simply be the Z-index, with clouds being 2, sky 1 and mountains 3 for example, but to no success.

Any help would be greatly appreciated.
Thank you very much in advance and have a great day :slight_smile:

I think it can work with z-index, I just don’t have much experience with that so I can’t give you much help there.

But another option is to use canvas layer nodes. They act as their own layer and can be ordered independently.

Thank you very much for your help!
Regarding Z-index, unless I am missing something I did try and it seems to only work for the siblings nodes.

Canvas layers sound interesting, but would there be the same problem between “cousin” nodes ?

I know the simple answer would be to just rearrange so that the nodes are siblings, but for logical reasons it has to be with different parents

Canvas layers work independent from tree order

what nodes are A 1 2 and B 1 2 first?
node2d and control has its own way to draw, usually you dont touch the Z-index for control, but you control the z-index for node2d to make one overlap to each other

@ zdrmlpzdrmlp
Interesting! Both the parent nodes (A and B) are ParallaxBackground, and the children being “cousins” are ParallaxLayers.

(click here if you want to know why I use 2 ParallaxBackgrounds)

I have the classical parallaxes that moves when the player move, but I also wanted some layers to keep moving even when the player is still (typically the layer showing clouds in the sky).

I first tried to leave the ParallaxBackground’s scroll untouched while dynamically changing the scale of each layer. This however would reset their X position and make the background “jump”.

Then I had the idea to have 2 separate ParallaxBackgrounds with their own scroll speed:

  • one for the parallaxes that only move when the player is moving
  • one for the parallaxes that keep moving even when the player is at rest.

The problem is that some layers from one ParallaxBackground node should be both on top and behind of some cousins layer from the other ParallaxBackground.

For example:

A (always move)
\_ clouds
B (only move when player does)
\_ sky
\_ mountains

The clouds from node A should be on top of the sky from node B, but still behind the mountains also from node B.
I thought the ideal solution would simply be the Z-index, with clouds being 2, sky 1 and mountains 3 for example, but to no success.

@ winston-yallow
Thank you for the insight, I will try Canvas layers then, and come back with the results ASAP :smiley:

ParallaxBackground is derived from CanvasLayer, so it’s the same thing in this case. That also explains why z-index doesn’t work for you, because in CanvasLayers it works completely differently.

Try playing around with Layer property instead. It’s like a z-index for CanvasLayers/ParallaxBackgrounds.

@ Exerion
Thank you very much for your help, I understand better the problem now. From what I saw the Layer property is only for the ParallaxBackground themselves, whereas I would need the layers to individually be sorted. I guess I could have one ParallaxBackground per parallax layer but that sounds like a lot!

Unfortunately I don’t think it’s possible.

Z-indexes of children of two different CanvasLayers are completely independent of each other.

So yeah, it’s either 1 node per canvas/parallax layer or get rid of canvas layers and try to achieve the parallax effect in code (it’s not that hard).

1 Like

Understood, thank you very much for your time and your help!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.