Dégradé dans le kit Sprite

N'hésitez pas à copier le code de mon dépôt Github .

L'idée est simple

Rendez a UIImageavec un calque dégradé. Attribuez l'image de dégradé à un SKTextureobjet. Attribuez l'objet de texture à un SKSpriteNodeet ajoutez l'image-objet en tant qu'enfant à la scène.

Extension de la classe UIImage pour rendre des images de dégradé

Afin de rendre des images dégradées, nous devons étendre la classe de base de UIImage.

Fondamentalement, ce comportement étendu est qu'il nous permet de configurer un calque de dégradé, puis de rendre un en UIImageutilisant le calque de dégradé.

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

N'hésitez pas à utiliser toutes les couleurs (et n'oubliez pas de les transformer en cgColor). Je vais utiliser les mêmes couleurs que dans le dégradé animé de 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

La couche de dégradé a des propriétés startPointet endPoint. Ceux-ci sont définis dans l'espace de coordonnées unitaire du calque de dégradé, que le calque de dégradé soit dessiné sur un carré ou un rectangle. La direction d'un gradient linéaire est de startPointvers le endPoint. Cela peut être déroutant, mais fondamentalement, la direction du dégradé est la direction dans laquelle la couleur change le plus rapidement.

N'hésitez pas à choisir la direction que vous aimez. Je vais utiliser le dégradé en haut à gauche dans cet exemple:

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

Maintenant, à l'intérieur, par exemple, de la didMovefonction, créez une image en dégradé avec le cadre de la scène comme limites de celle-ci, et utilisez les couleurs définies ci-dessus + définissez les points de départ et d'arrivée du dégradé pour définir sa direction.

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)

Dans le dégradé masque tous les autres sprites de la scène, vous devez ajuster la position z du calque de dégradé en changeant gradientNode.zPositionpour avoir par exemple la plus petite valeur parmi tous les autres nœuds si vous voulez que le dégradé soit en arrière-plan.

J'espère que vous en avez profité!

Les références

Dégradé animé dans Swift