Applying a gradient effect on an SKSpriteNode in Swift 5.0

Question

iOS 14, Swift 5.x

Trying to add a gradient to a spriteNode using SKEffect. Code compiles, but then crashes, am I attempting the impossible here.

    let image2U = UIImage(named: "2140983")?.ciImage
    
    let effectsNode = SKEffectNode()
    let filter = CIFilter(name: "CILinearGradient")
    
    let startColor = UIColor.red
    let endColor = UIColor.yellow
    let startVector = CIVector(cgPoint: CGPoint(x: 0, y: 0))
    let endVector = CIVector(cgPoint: CGPoint(x: box.size.width, y: box.size.height))
    filter?.setDefaults()
    filter?.setValue(startVector, forKey: "inputPoint0")
    filter?.setValue(endVector, forKey: "inputPoint1")
    filter?.setValue(startColor, forKey: "inputColor0")
    filter?.setValue(endColor, forKey: "inputColor1")
    filter?.setValue(image2U, forKey: "inputImage")
    effectsNode.filter = filter
    self.addChild(effectsNode)
    effectsNode.addChild(box)

Compiles, but then crashes with this message ...

2021-07-09 21:08:47.584142+0200 GameIV[19791:1140737] *** Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<CILinearGradient 0x600002070d20> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key InputImage.'

And as you can see I added an inputImage? Tried a UIImage, same error... tried no image at all, same error?

Answer 1

Probably you have a typo in the key name. Maybe "inputImage" instead of "InputImage". Usually you'd use one of the constants to avoid these. There's a partial list at https://developer.apple.com/documentation/coreimage/cifilter/filter_parameter_keys

Answer 2

The answer to my question is that SKEffectNodes need an input image, that is what it is trying to tell me here. And the gradient filter doesn't need/work with an image, it simply creates a new image. This is CIFilter code to do just that.

extension UIImage {

func returnCheckerboard() -> UIImage {
  let context = CIContext(options: nil)
  let checkerFilter = CIFilter.checkerboardGenerator()
  checkerFilter.color0 = .white
  checkerFilter.color1 = .black
  checkerFilter.center = CGPoint(x: 0, y: 0)
  checkerFilter.sharpness = 1
  checkerFilter.width = 8
  guard let outputImage = checkerFilter.outputImage else { return UIImage() }

  if let cgimg = context.createCGImage(outputImage, from: CGRect(x: 0, y: 0, width: 128, height: 128)) {
        let filteredImage = UIImage(cgImage: cgimg)
        return filteredImage
    }
    return UIImage()
 }
}

This doesn't create a gradient, but the principle is the same. It creates a checkerboard, doesn't require an input image and couldn't/isn't a CIFilter you can use with SKEffectNode.