Gradien di Sprite Kit

Jangan ragu untuk menyalin kode dari repo Github saya .

Ide Itu Sederhana

Render UIImagedengan lapisan gradien. Tetapkan gambar gradien ke SKTextureobjek. Tetapkan objek tekstur ke SKSpriteNodedan tambahkan sprite sebagai anak ke tempat kejadian.

Memperluas Kelas UIImage untuk Merender Gambar Gradien

Untuk merender gambar gradien, kita perlu memperluas kelas dasar UIImage.

Pada dasarnya, perilaku yang diperluas ini adalah memungkinkan kita mengonfigurasi lapisan gradien, dan kemudian merender UIImagemenggunakan lapisan gradien.

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!
    }
}

Jangan ragu untuk menggunakan warna apa pun (dan ingat untuk mengubahnya menjadi cgColor). Saya akan menggunakan warna yang sama seperti di Animated Gradient 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

Lapisan gradien memiliki properti startPointdan endPoint. Ini ditentukan dalam ruang koordinat unit lapisan gradien, terlepas dari apakah lapisan gradien digambar pada persegi atau persegi panjang. Arah dari gradien linier adalah dari startPointarah endPoint. Ini mungkin membingungkan, tetapi pada dasarnya, arah gradien adalah arah di mana warna berubah paling cepat.

Jangan ragu untuk memilih arah mana pun yang Anda suka. Saya akan menggunakan gradien kiri atas dalam contoh ini:

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

Sekarang di dalam eg didMovefunction, buat gambar gradien dengan bingkai pemandangan sebagai batasnya, dan gunakan warna yang ditentukan di atas + atur titik awal dan akhir gradien untuk menentukan arahnya.

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)

Dalam gradien menyembunyikan semua sprite lain di tempat kejadian, Anda perlu menyesuaikan posisi-z lapisan gradien dengan mengubah gradientNode.zPositionuntuk memiliki misalnya nilai terkecil di antara semua node lain jika Anda ingin gradien berada di latar belakang.

Semoga Anda menikmatinya!

Referensi

Gradien Animasi di Swift