apple developer

home tech_notes app_store github stackoverflow devto

Blending a Sprite with Different Interpretations of Alpha

Reinterpret a sprite’s alpha property to react differently to the objects below it.


The final stage of rendering is to blend the sprite’s texture into its destination frame buffer. The default behavior uses the alpha values of the texture to blend the texture with the destination pixels. However, you can use other blend modes when you want to add other special effects to a scene.

You control the sprite’s blending behavior using the blendMode property. For example, an additive blend mode is useful to combine multiple sprites together, for effects such as for fire or lighting. The following code shows how to position three overlapping sprite nodes in a circle to demonstrate the effect of different blend modes:

let blendMode = SKBlendMode.alpha
let imageNames = ["redCircle", "greenCircle", "blueCircle"]

for (index, imageName) in imageNames.enumerated() {
    let node = SKSpriteNode(imageNamed: imageName)
    node.alpha = 0.5
    node.blendMode = blendMode
    let angle = (CGFloat.pi * 2) / CGFloat(colors.count) * CGFloat(index)
    let positionX = 320 + sin(angle) * radius / 2
    let positionY = 320 + cos(angle) * radius / 2
    node.position = CGPoint(x: positionX, y: positionY)

With the default blend mode of SKBlendMode.alpha, the three circles look like:


However, with a blend mode of SKBlendMode.add, the color values are added together, creating a scene that looks like:


download this page as .md

download this page as .pdf

back to SpriteKit documentation