Sunset Gradients

Not Real Colors.

As the sun moves throughout the day, it should change color(s).

It probably should change size as well.

But, at a minimum, its color should dynamically adjust, both to the portion of the day and to the section of sky in which it appears.

The SunSprite class already possesses a method that determines the angle and position of its .sprite, an SKSpriteNode. This same function might handle its color(s) as well, using the same time-based strategy.

However, it might actually be easier to create a static gradient backdrop as an approximation of the colors the sun would "pass through" during its trip across the sky.

Here's a sunset-like sunGradient.

After adding some circles across the height of the gradient and masking with them, the general idea emerges.

And manually adjusting the Y position on the artboard shows it in action.

With sunGradient@2x.png to be masked and sunMask@2x.png (a simple black circle) with which to mask it, the SunSprite's visual representation can switch from an SKSpriteNode to an SKCropNode.

class SunSprite: SKNode {
  var backgroundSprite: SKSpriteNode!
  var maskSprite: SKSpriteNode!
  var cropNode: SKCropNode!
  init(anchor: CGPoint, radius: CGFloat) {
    self.anchorForSun = anchor
    self.radiusForSun = radius
    backgroundSprite = SKSpriteNode(imageNamed: "sunGradient")
    backgroundSprite.anchorPoint = CGPointZero
    maskSprite = SKSpriteNode(imageNamed: "sunMask")
    cropNode = SKCropNode()
    cropNode.maskNode = maskSprite

Now, when the SunSprite's update method determines the angle and position, that will no longer place the SKSpriteNode, but instead the cropNode.maskNode position.

  func update() {
    if shouldAppear == true {
      self.alpha = 1.0
    } else {
      self.alpha = 0.0
    let rotateAngle = degreesForSun()
    let x = cos(rotateAngle * degToRad) * radiusForSun
    let y = sin(rotateAngle * degToRad) * radiusForSun
    cropNode.maskNode?.position = CGPoint(x: anchorForSun.x + x, y: anchorForSun.y + y)