Drawing gradients in SpriteKit

I was working on an upcoming game in SpriteKit only to discover that adding a simple gradient is not so straight-forward as one would expect. Therefore I created an extension to SKTexture.

	extension SKTexture
	{
	convenience init(radialGradientWithColors colors: [UIColor], locations: [CGFloat], size: CGSize)
	{
	let renderer = UIGraphicsImageRenderer(size: size)
	let image = renderer.image { (context) in
	let colorSpace = context.cgContext.colorSpace ?? CGColorSpaceCreateDeviceRGB()
	let cgColors = colors.map({ $0.cgColor }) as CFArray
	guard let gradient = CGGradient(colorsSpace: colorSpace, colors: cgColors, locations: UnsafePointer<CGFloat>(locations)) else {
	fatalError("Failed creating gradient.")
	}
	let radius = max(size.width, size.height) / 2.0
	let midPoint = CGPoint(x: size.width / 2.0, y: size.height / 2.0)
	context.cgContext.drawRadialGradient(gradient, startCenter: midPoint, startRadius: 0, endCenter: midPoint, endRadius: radius, options: [])
	}
	self.init(image: image)
	}
	convenience init(linearGradientWithAngle angleInRadians: CGFloat, colors: [UIColor], locations: [CGFloat], size: CGSize)
	{
	let renderer = UIGraphicsImageRenderer(size: size)
	let image = renderer.image { (context) in
	let colorSpace = context.cgContext.colorSpace ?? CGColorSpaceCreateDeviceRGB()
	let cgColors = colors.map({ $0.cgColor }) as CFArray
	guard let gradient = CGGradient(colorsSpace: colorSpace, colors: cgColors, locations: UnsafePointer<CGFloat>(locations)) else {
	fatalError("Failed creating gradient.")
	}
	let angles = [angleInRadians + .pi, angleInRadians]
	let radius = (pow(size.width / 2.0, 2.0) + pow(size.height / 2.0, 2.0)).squareRoot()
	let points = angles.map { (angle) -> CGPoint in
	let dx = radius * cos(-angle) + size.width / 2.0
	let dy = radius * sin(-angle) + size.height / 2.0
	return CGPoint(x: dx, y: dy)
	}
	context.cgContext.drawLinearGradient(gradient, start: points[0], end: points[1], options: [])
	}
	self.init(image: image)
	}
	}

view raw SKTexture+Gradient.swift hosted with ❤ by GitHub

This extension adds support for creating linear and radial gradients. Linear gradient can be drawn with an angle (in radians) although in most of the cases rotating SKSpriteNode would be enough. Gradients are drawn using core graphics APIs what are a little bit difficult to use but now nicely hidden in the extension. Both initialisers take in array of colors (UIColor) and CGFloat array with values in range of 0 to 1 defining the locations for colors in CGGradient.

For adding linear gradient or radial gradient to a SpriteKit scene we need to create a SKTexture and assign it to a SKSpriteNode. I created an example project SpriteKitGradientTexture for showing gradients in action. In the example project one SKSpriteNode is animating with textures containing linear gradients with different angles and the other SKSpriteNode just displays radial gradient.

	final class GameScene: SKScene
	{
	override func didMove(to view: SKView)
	{
	let linearGradientSize = size
	let linearGradientColors = [UIColor(red: 53.0 / 255.0, green: 92.0 / 255.0, blue: 125.0 / 255.0, alpha: 1.0),
	UIColor(red: 108.0 / 255.0, green: 91.0 / 255.0, blue: 123.0 / 255.0, alpha: 1.0),
	UIColor(red: 192.0 / 255.0, green: 108.0 / 255.0, blue: 132.0 / 255.0, alpha: 1.0)]
	let linearGradientLocations: [CGFloat] = [0, 0.5, 1]
	let textureCount = 8
	let textures = (0..<textureCount).map { (index) -> SKTexture in
	let angle = 2.0 * CGFloat.pi / CGFloat(textureCount) * CGFloat(index)
	return SKTexture(linearGradientWithAngle: angle, colors: linearGradientColors, locations: linearGradientLocations, size: linearGradientSize)
	}
	let linearGradientNode = SKSpriteNode(texture: textures.first)
	linearGradientNode.zPosition = 1
	addChild(linearGradientNode)
	let action = SKAction.animate(with: textures, timePerFrame: 0.5)
	linearGradientNode.run(SKAction.repeatForever(action))
	let radialGradientSize = CGSize(width: min(size.width, size.height), height: min(size.width, size.height))
	let radialGradientColors = [UIColor.yellow, UIColor.orange]
	let radialGradientLocations: [CGFloat] = [0, 1]
	let radialGradientTexture = SKTexture(radialGradientWithColors: radialGradientColors, locations: radialGradientLocations, size: radialGradientSize)
	let radialGradientNode = SKSpriteNode(texture: radialGradientTexture)
	radialGradientNode.zPosition = 2
	addChild(radialGradientNode)
	let pulse = SKAction.sequence([SKAction.fadeIn(withDuration: 3.0), SKAction.fadeOut(withDuration: 1.0)])
	radialGradientNode.run(SKAction.repeatForever(pulse))
	}
	}

view raw GameScene.swift hosted with ❤ by GitHub

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Example project

SpriteKitGradientTexture (GitHub)