Gradient background and Swift

[RayHughes]

Attempting to style a gradient background using the code below renders a solid black background.

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

self.backgroundColor = GradientColor(.TopToBottom, self.frame, colors)

Xcode 7 iOS9 Swift 2 SpriteKit

[bre7]

Hi Ray, would you mind uploading a screenshot ? Were you able to use GradientColor(,,) successfully somewhere else ?

[RayHughes]

No, I have not been able to render a gradient in my project nor an empty project. Installed with Pods. Using other methods from the library work such as flattening colors.

What it looks like --- What the actual gradient should be

[bre7]

I've just created a new project and checked out the latest release and got the expected result (2nd image).

Code:

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

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

        view.backgroundColor = GradientColor(.TopToBottom, view.frame, colors)
    }

Don't forget, you need to pass the target view's frame as the second parameter (self.frame in your case?)

[RayHughes]

Are you using SpriteKit?

[bre7]

No, didn't realize you edited your first post :P That's the issue then, I'll have a look later

[RayHughes]

Below is the code I'm using in the GameViewController. Disregard the above code as I was trying to place it somewhere else. However, same issue exists and it is rendered black.

Thank you for your help, please let me know if you find a solution.

override func viewDidLoad() {
    super.viewDidLoad()

    if let scene = GameScene(fileNamed:"GameScene") {
        let skView = self.view as! SKView
        skView.ignoresSiblingOrder = true
        scene.scaleMode = .AspectFill

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

        scene.backgroundColor = GradientColor(.TopToBottom, scene.frame, colors)

        skView.presentScene(scene)
    }
}

[RayHughes]

Any luck on getting this to work with sprite kit?

[bre7]

Haven't used SpriteKit much tbh. The only possible solutions I could find:

• iOS Developer's Cookbook: Painting Sprite Kit
• http://stackoverflow.com/a/19833309 (Would involve returning the gradient as a CGImage instead of UIColor)

I don't think it's a bug since Chameleon requires UIKit to work, not SK (reason why the first solution is pretty much a hack).

[vicc]

@RayHughes Let me know if you get this to work so we can post the solution on here. In the mean time @bre7 is correct. It doesn't seem to be a bug, and more of an external support issue. I'll close this for now, but if there's more interest for SpriteKit support we'll definitely look into it.

[RayHughes]

@ViccAlexander I have not been able to get it to work in Chameleon. Still returns black screen. I haven't tested outside of SpriteKit. I didn't need the full overhead of the framework, rather just the gradient portion, so I opted to create a gist based on one of the solutions above.

https://gist.github.com/RayHughes/3162fcbda6439893b539

Swift 2 Compatibility.

import SpriteKit
import UIKit

enum GradientDirection {
    case Up
    case Left
    case UpLeft
    case UpRight
}

extension SKTexture {

    /**
        Create a linear gradient texture for a SKShapeNode and SKSpriteNode

        **Inspired by:** https://gist.github.com/Tantas/7fc01803d6b559da48d6

        Usage
        =====

        Creating Texture
        -----------------
        **Note: Make sure to define params**

            var imageTexture = SKTexture(size: size, color1: color1, color2: color2, direction: GradientDirection.Up)

        Applying Texture to SKSpriteNode
        --------------------------------
            var nodeElement = SKSpriteNode(texture: imageTexture)

        Compact Usage
        -------------
            var nodeElement = SKSpriteNode(texture: SKTexture(size: size, color1: color1, color2: color2, direction: GradientDirection.Up))

        - Parameters:
            - color1: (CIColor) Gradient starting color
            - color2: (CIColor) Gradient ending color
            - direction: (enum) GradientDirection
                - .Up: Bottom to top gradient
                - .Left: Right to left gradient
                - .Upleft Bottom right to upward left
                - .UpRight: Bottom left to upard right

        - Returns:  (CGImage) Image created from gradient image
     */
    convenience init(size:CGSize,color1:CIColor,color2:CIColor,direction:GradientDirection = .Up) {
        let coreImageContext = CIContext(options: nil)
        let gradientFilter = CIFilter(name: "CILinearGradient")
        var startVector:CIVector
        var endVector:CIVector

        gradientFilter!.setDefaults()

        switch direction {
        case .Up:
            startVector = CIVector(x: size.width/2, y: 0)
            endVector = CIVector(x: size.width/2, y: size.height)

        case .Left:
            startVector = CIVector(x: size.width, y: size.height/2)
            endVector = CIVector(x: 0, y: size.height/2)

        case .UpLeft:
            startVector = CIVector(x: size.width, y: 0)
            endVector = CIVector(x: 0, y: size.height)

        case .UpRight:
            startVector = CIVector(x: 0, y: 0)
            endVector = CIVector(x: size.width, y: size.height)
        }

        gradientFilter!.setValue(startVector, forKey: "inputPoint0")
        gradientFilter!.setValue(endVector, forKey: "inputPoint1")
        gradientFilter!.setValue(color1, forKey: "inputColor0")
        gradientFilter!.setValue(color2, forKey: "inputColor1")
        let cgimg = coreImageContext.createCGImage(gradientFilter!.outputImage!, fromRect: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        self.init(CGImage:cgimg)
    }   
}

[vicc]

@RayHughes Sorry about Chameleon not playing nice withSpriteKit. :disappointed: Thanks for posting your gist though. I'm sure others will find it useful! Good luck on your project!

[im-jersh]

Disappointed to see that this issue was never resolved form SpriteKit. Was hoping to use a nice gradient to create a very basic single point perspective for a very basic game.