Change zOrder of CCNode with children

cocos2d-x
1

Hello!
I have a scene, in the middle of the scene I have a flower, the flower is a custom CCNode, the flower has 5 petals, which are sprites. Now, in the scene, over the flower I have a grey transparent background so You can see the flower but it’s behind the grey stuff. I dont want to set the WHOLE flower before the grey background, just 1 of 5 petals.

I do something like this:

flower.petal1.zOrder = 999999999;

I can see that the zOrder changed but only in the flower Node, the grey background is still before the petal. something like this did also not work:

flower.petal1.zOrder = 999999999;
transparentBackground.zOrder = 99;

So how to do it correctly? I know the code is in cocos2d ver.2.2 but I need only some idea how to fight this problem :stuck_out_tongue:

tl;dr:
How to set children of Flower (CCNode) before child of scene and leaving the Flower itself behind the background?

2

I advise you learn how the scene graph works, as it will be very helpful in these sort of situations.

Basically, the Z-order only affects the order nodes of the same parent are drawn. Because all the petals are children of the custom CCNode, their Z-order will affect the order in which the petals are drawn. If the grey background has the same parent as the custom node, then it will be drawn in front of the custom node and its children (the petals) if it has a higher Z-order, behind if it has a lower Z-order, or behind if it was added to its parent first.

To have the grey background appear in front of some petals and behind others, you have 2 choices:

  1. Make the grey background a child of your custom CCNode. Then set the Z-orders of each petal so its higher than the grey background if it is in front and lower if it is behind. Or,
  2. Place the grey background in front of the custom CCNode and place another node (maybe another custom CCNode) in front of the grey background. When you want a petal to move in front of the background, hide it from the custom node behind the background and show the petal on the node in front of the grey background.
1 Like
3

@grimfate
Thanks for the answer and thanks for the tip number 2 :wink: This is what I needed, a nice cheat :smiley: