CALayer or UIView in iOS Swift?

Question

can anyone point me to a tutorial or sample code (or both!) that explains the correct way to add views and layers for iOS.

ideally in Swift not Obj C.

I have code that works when adding SKNodes by themselves, no problem, but if i add a gradient layer - i want that to be sky in the background, the Gradient covers everything else.

I've tried various forms of adding sublayers at index above, etc, but nothing seems to work. I think this is my basic understanding of CALayer and UIView. I can't find a good tutorial :(

any help appreciated. cheers Adam.

here is a sample.
the view fills with the gradient, which is great, but the button seems to be hidden underneath, despite trying to force it above the background layer.

import QuartzCore
class NightScene: SKScene, SKPhysicsContactDelegate {

let playButton = SKSpriteNode(imageNamed: "play")


let gradient = CAGradientLayer()
    gradient.frame = view.bounds
    let colorTop = UIColor(red: 0.0, green: 0.0, blue: 0.100, alpha: 1.0).CGColor
    let colorMid = UIColor(red: 0.0, green: 0.0, blue: 0.450, alpha: 1.0).CGColor
    let colorBottom = UIColor(red: 0.0, green: 0.0, blue: 0.260, alpha: 1.0).CGColor
    let arrayColors: Array <AnyObject> = [colorTop, colorMid, colorBottom]
    gradient.colors = arrayColors
    gradient.locations = [ 0.0, 0.4, 1.0]
    self.view.layer.insertSublayer(gradient, atIndex:0)


    let sceneLayer = CALayer()
    sceneLayer.frame = view.bounds
    self.view.layer.insertSublayer(sceneLayer, above: gradient)

    self.playButton.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidX(self.frame)*2.5)
    self.addChild(playButton)

}

Answer 1

I found the tutorial here very helpful: http://www.raywenderlich.com/75270/make-game-like-candy-crush-with-swift-tutorial-part-1

It contains layers and is in Swift. I also followed a Game of Life tutorial which used the zPosition of a node to help with layering, though they were not called layers and were not set up like your gradient:

https://www.makegameswith.us/gamernews/399/create-the-game-of-life-using-swift-and-spritekit

I found that even when I removed the gradient I could not view your button in its location, but we might just be working with differently sized devices. Is your sceneLayer empty? I didn't understand the relationship between your sceneLayer and your playButton.

Answer 2

Even though this question is over a year old I am going to provide an answer after countless hours of searching myself. I found numerous similar questions with no / vague responses.

What I come to find out is that nodes are not layer backed like gradients. This results in the gradient taking over the whole UI view. Nodes are not visible even with zLocation set. This is for SpriteKit based projects.

I stumbled across a library that you can use to create gradient background. This library basically converts a gradient into a SKSpriteNode. Gradient -> Texture -> Node

https://www.github.com/braindrizzlestudio/BDGradientNode

From the developers

We wrote BDGradientNode because gradients are a bit of a pain to set up on the fly in SpriteKit. UIViews are CALayer-backed and have access to CAGradientLayer, making them simple--fairly simple--to make. (Though sweep gradients can't be done.) SKNodes are NOT layer-backed. While you can jump through some hoops to make images, and so textures, from layers that can be assigned to an SKSpriteNode (which is what we first did when we just needed a simple gradient in SpriteKit) it's both cumbersome and inflexible.

Simple Linear Background

Once the library is added your Xcode project, you can use the following to create a linear gradient background:

    let color1 = UIColor(red: 0/255, green: 118/255, blue: 162/255, alpha: 1.0)
    let color2 = UIColor(red: 0/255, green: 85/255, blue: 116/255, alpha: 1.0)
    let colors = [color1, color2]

    let blending : Float = 1.0

    let startPoint = CGPoint(x: 0.5, y: 1.0)
    let endPoint = CGPoint(x: 0.5, y: 0.0)

    let nodeSize = CGSize(width: self.frame.width, height: self.size.height)

    let texture = SKTexture(imageNamed: "dummypixel")

    let myGradientNode = BDGradientNode(linearGradientWithTexture: texture, colors: colors, locations: nil, startPoint: startPoint, endPoint: endPoint, blending: blending, keepTextureShape: false, size: nodeSize)

    myGradientNode.zPosition = 0
    myGradientNode.position = CGPointMake(self.size.width/2, self.size.height/2)