Gradiente in Sprite Kit

Sentiti libero di copiare il codice dal mio repository Github .

L'idea è semplice

Rendi a UIImagecon un livello sfumato. Assegna l'immagine sfumata a un SKTextureoggetto. Assegna l'oggetto texture a un SKSpriteNodee aggiungi lo sprite come bambino alla scena.

Estensione della classe UIImage per il rendering di immagini sfumate

Per rendere le immagini sfumate, dobbiamo estendere la classe base di UIImage.

Fondamentalmente, questo comportamento esteso è che ci consente di configurare un livello sfumato e quindi renderizzare un UIImageutilizzando il livello sfumatura.

extension UIImage {
    static func gradientImage(withBounds: CGRect, startPoint: CGPoint, endPoint: CGPoint , colors: [CGColor]) -> UIImage {
        
        // Configure the gradient layer based on input
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = withBounds
        gradientLayer.colors = colors
        gradientLayer.startPoint = startPoint
        gradientLayer.endPoint = endPoint
// Render the image using the gradient layer
        UIGraphicsBeginImageContext(gradientLayer.bounds.size)
        gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return image!
    }
}

Sentiti libero di usare qualsiasi colore (e ricordati di trasformarli in cgColor). Userò gli stessi colori del gradiente animato in Swift .

let color1: CGColor = UIColor(red: 209/255, green: 107/255, blue: 165/255, alpha: 1).cgColor
let color2: CGColor = UIColor(red: 134/255, green: 168/255, blue: 231/255, alpha: 1).cgColor
let color3: CGColor = UIColor(red: 95/255, green: 251/255, blue: 241/255, alpha: 1).cgColor

Il livello sfumato ha proprietà startPointe endPoint. Questi sono definiti nello spazio delle coordinate unitarie del livello sfumatura, indipendentemente dal fatto che il livello sfumatura sia disegnato su un quadrato o un rettangolo. La direzione di un gradiente lineare è da startPointverso il endPoint. Questo potrebbe creare confusione, ma fondamentalmente la direzione del gradiente è la direzione in cui il colore cambia più rapidamente.

Sentiti libero di scegliere la direzione che preferisci. Userò la sfumatura in alto a sinistra in questo esempio:

let startPoint = CGPoint(x: 0, y: 0)
let endPoint = CGPoint(x: 1, y: 1)

Ora all'interno della didMovefunzione, ad esempio , crea un'immagine sfumata con la cornice della scena come i confini di essa e usa i colori definiti sopra + imposta i punti iniziale e finale del gradiente per definirne la direzione.

let image: UIImage = UIImage.gradientImage(withBounds: self.frame, startPoint: startPoint, endPoint: endPoint, colors: [color1, color2, color3])

let gradientTexture = SKTexture(image: image)
let gradientNode = SKSpriteNode(texture: gradientTexture)
self.addChild(gradientNode)

Se il gradiente nasconde tutti gli altri sprite nella scena, è necessario regolare la posizione z del livello del gradiente cambiando gradientNode.zPositionper avere, ad esempio, il valore più piccolo tra tutti gli altri nodi se si desidera che il gradiente sia sullo sfondo.

Spero ti sia piaciuto!

Riferimenti

Gradiente animato in Swift