SKSpriteNode zPosition drawing?

2
votes

I'm trying to create many sprites which are overlapping and hiding each other.

class BubbleNode: SKSpriteNode {

init() {
    let texture = SKTexture(imageNamed: "body")
    super.init(texture: texture, color: .clear, size: texture.size())

    let eye = SKSpriteNode(imageNamed: "eye")
    eye.zPosition = 1
    eye.position = CGPoint(x: -20, y: 0)

    let eye_right = eye.copy() as! SKSpriteNode
    eye_right.position = CGPoint(x: 20, y: 0)

    let mouth_smiling = SKSpriteNode(imageNamed: "mouth_smiling")
    mouth_smiling.zPosition = 1
    mouth_smiling.position = CGPoint(x: 0, y: -20)

    addChild(eye)
    addChild(eye_right)
    addChild(mouth_smiling)
}
}

From my point of view, zPosition of child elements makes sense.

I'm adding bubbles like this:

func touchDown(atPoint pos : CGPoint) {
    let n = BubbleNode()
    n.position = pos
    self.addChild(n)
}

So I expected sprites overlapping and hiding invisible parts.

Instead, I get bodies rendered first, then eyes and mouths rendered as siblings:

bubbles' child elements rendered in wrong order

I tried to flip view.ignoresSiblingOrder but it didn't help.

2
iosswiftsprite-kit

2 Answers

2
votes

managing z order can be tricky.

The way it works is zPosition is relative to the parents zPosition, and there is only 1 pass at zPositioning.

So if you have a face at zPosition 0 eyes at zPosition 1 and iris at zPosition 2,

then when you go to render 2 faces, here is the order that it will be drawn at

face 1 --- z0
face 2 ----z0
eye 1 --- z1
eye 2 --- z1
iris 1 ---z3 (because 2 + 1 + 0 is 3)
iris 2 --- z3

You are better off leaving all of the parts of the face at 0, and just change the zPosition of the face itself

face 1 --- z0
eye 1 --- z0
iris 1 ---z0 

face 2 ----z1
eye 2 --- z1 (because 1 + 0 is 1)
iris 2 --- z1

Now if for some reason, you need to add to the zposition of a part of the face, then keep track of this to determine the zvalue range. Then just make sure that your faces zPosition are at that far apart in the z depth

face 1 --- z0
eye 1 --- z0
iris 1 ---z1   (depth of 2 z layers)

face 2 ----z2  (make sure we are at 2)
eye 2 --- z2 (because 2 + 0 is 1)
iris 2 --- z2
1
votes

Set also a zPosition for the parent node, something like this:

var i: CGFloat = 0

func touchUp(atPoint pos : CGPoint) {
    let b = BubbleNode()
    b.position = pos
    b.zPosition = i
    i += 10
    self.addChild(b)
}

If you set the same zPosition of nodes, they will be on the same depth, even if the nodes are children of different parents.

Maybe someone have a better explication...