Gradient trong Sprite Kit

Vui lòng sao chép mã từ repo Github của tôi .

Ý tưởng rất đơn giản

Kết xuất a UIImagevới một lớp gradient. Gán hình ảnh gradient cho một SKTextuređối tượng. Gán đối tượng kết cấu cho an SKSpriteNodevà thêm sprite làm con vào khung cảnh.

Mở rộng lớp UIImage để hiển thị hình ảnh Gradient

Để hiển thị hình ảnh gradient, chúng ta cần mở rộng lớp cơ sở của UIImage.

Về cơ bản, hành vi mở rộng này là nó cho phép chúng ta cấu hình một lớp gradient, và sau đó kết xuất UIImagebằng cách sử dụng lớp gradient.

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

Hãy thoải mái sử dụng bất kỳ màu nào (và nhớ biến đổi chúng thành cgColor). Tôi sẽ sử dụng các màu tương tự như trong Animated Gradient trong 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

Lớp Gradient có các thuộc tính startPointvà endPoint. Chúng được xác định trong không gian tọa độ đơn vị của lớp gradient, bất kể lớp gradient được vẽ trên hình vuông hay hình chữ nhật. Hướng của một gradient tuyến tính là từ startPointhướng tới endPoint. Điều này có thể gây nhầm lẫn, nhưng về cơ bản, hướng của gradient là hướng mà màu sắc thay đổi nhanh chóng nhất.

Hãy thoải mái chọn bất kỳ hướng nào bạn thích. Tôi sẽ sử dụng gradient trên cùng bên trái trong ví dụ này:

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

Bây giờ bên trong didMovehàm ví dụ , tạo một hình ảnh gradient với khung của cảnh làm ranh giới của nó, và sử dụng các màu được xác định ở trên + đặt điểm đầu và điểm cuối của gradient để xác định hướng của nó.

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)

Trong gradient ẩn tất cả các sprite khác trong cảnh, bạn cần điều chỉnh vị trí z của lớp gradient bằng cách thay đổi gradientNode.zPositionđể có giá trị nhỏ nhất trong số tất cả các nút khác nếu bạn muốn gradient ở trong nền.

Hy vọng bạn thích nó!

Người giới thiệu

Animated Gradient trong Swift