SKSpriteNode with color doesn't show

Question

I created a SKSPriteNode without texture but color

let tileNode = SKSpriteNode(color: SKColor.redColor(), size: CGSize(width: 80.0, height: 120.0))
tileNode.position = CGPointMake(50, 50)
tileNode.name = "rectangle"
addChild(tileNode)

But the node doesn't display on the screen.

However, I can detect it with touch collision

override func touchesEnded(touches: NSSet, withEvent event: UIEvent) {
    let location: CGPoint = (touches.anyObject() as UITouch).locationInNode(tilesLayer)
    let rect: SKSpriteNode = tilesLayer.childNodeWithName("rectangle") as SKSpriteNode
    if rect.containsPoint(location) {
        println("TOUCHED")    //It works
    }
}

EDIT : The SKSpriteNode color is only hidden if there is a background SKSpriteNode texture. Complete code : https://gist.github.com/BabyAzerty/9dca752d9faa7b768bf0

Answer 1

I believe you created your project using the Game project template in Xcode, correct? Your issue is this line in GameViewController.m (roughly line 41).

/* Sprite Kit applies additional optimizations to improve rendering performance */
skView.ignoresSiblingOrder = YES;

If you set that to NO, then it will render as you expect. I build my game projects from empty projects, so I never had that property set. Just search your code for ignoresSiblingOrder

Of course if you want that rendering optimization, then you can always use zPosition.

Answer 2

I noticed that the difference between creating a SKSpriteNode with texture and a SKSpriteNode with color is that the texture version doesn't need to have its z-index modified. It will display over the previous addChild(someNodes) automatically.

They both have a default z-index of 0 but for some reasons SKSpriteNode with color is hidden behind your previous addChild(someNodes).

This line should do the trick :

tileNode.zPosition = 1 //Or higher

However, I decided to create an enum that controls the different z-layers (just like the one in Unity Engine) :

enum ZLayer: CGFloat {
    case Undefined = 0
    case Background
    case Foreground
    case GUI
}

And use it like this :

tileNode.zPosition = ZLayer.Background.rawValue

The advantage of this enum is that if you need to add a new layer between background and foreground layers, you don't need to bother with the values at all, just an entry in the enum between the 2 cases.