Alternative way to fade the background color into another color

Question

in my touches began method i put this simple line of code which fades the background color to red.

 runAction(SKAction.colorizeWithColor(SKColor.redColor(), colorBlendFactor: 1.0, duration: 1.0))

everything is working fine, but the problem is that the code doesn't do anything using ios 7. I was wondering if there is an alternative way to make the background fade into a different color, or if there's an ios 7 version of this code.

Answer 1

There are multiple ways to transition from one color to another. One of the most straightforward approaches is to linearly interpolate between the two colors by combining a progressively larger fraction of the starting color's RGB components with a progressively smaller fraction of the ending color's RBG components over time:

red = starting_red * (1.0 - fraction) + ending_red * fraction
green = starting_green * (1.0 - fraction) + ending_green* fraction
blue = starting_blue * (1.0 - fraction) + ending_blue * fraction

where fraction starts at 0 and ends at 1 in increments of

fraction += delta_time * step_size

One way to implement this approach is to add code to the didMoveToView method of GameScene. However, if your game contains multiple scenes, a better strategy is to extend SKAction to add a class method that creates a custom action, so it can be used by all scenes.

First, define a structure to store the starting and ending RGB color components. Add this outside of the definition of GameScene.

struct ColorComponents {
    var red:CGFloat
    var green:CGFloat
    var blue:CGFloat

    init(color:SKColor) {
        self.init()
        var alpha:CGFloat = 0
        color.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
    }

    init() {
        red = 0
        green = 0
        blue = 0
    }
}

Then, extend SKAction by adding the following method that changes the background color to another color. Note that extensions must be defined outside of a class.

extension SKAction {
    static func changeColor(startColor:SKColor, endColor:SKColor, duration:NSTimeInterval) -> SKAction {
        // Extract and store starting and ending colors' RGB components
        let start = ColorComponents(color: startColor)
        let end = ColorComponents(color: endColor)
        // Compute the step size
        let stepSize = CGFloat(1/duration)
        // Define a custom class to gradually change a scene's background color
        let change = SKAction.customActionWithDuration(duration) {
            node, time in
            let fraction = time * stepSize
            let red = start.red * (1.0 - fraction) + end.red * fraction
            let green = start.green * (1.0 - fraction) + end.green * fraction
            let blue = start.blue * (1.0 - fraction) + end.blue * fraction
            if let scene = node as? SKScene {
                scene.backgroundColor = SKColor(red: red, green: green, blue: blue, alpha: 1.0)
            }
        }
        return change
    }
}

Lastly, create and run an SKAction

runAction(SKAction.changeColor(backgroundColor, endColor: SKColor.blueColor(), duration: 5))

Add this to didMoveToView in your SKScene subclasses, such as GameScene.