How to add a fragment shader to an SKSpriteNode using SKShader

Swift version: 5.6

Paul Hudson @twostraws May 28th 2019

Fragment shaders let you adjust individual pixels inside sprites to create effects such as embossing, pixellation, and even water, and you can attach fragment shader to any SKSpriteNode just by setting its shader property.

First, you need a fragment shader. This should be a file in your bundle with the extension “fsh”, and should be written in GLSL – the OpenGL shading language. I’m not going to teach GLSL here, but I do want to give you an example. Here’s a commented example that causes all colors in a sprite to be inverted:

void main() {
    // find the current pixel color
    vec4 current_color = texture2D(u_texture, v_tex_coord);

    // if it's not transparent
    if (current_color.a > 0.0) {
        // subtract its current RGB values from 1 and use its current alpha; multiply by the node alpha so we can fade in or out
        gl_FragColor = vec4(1.0 - current_color.rgb, current_color.a) * current_color.a * v_color_mix.a;
    } else {
        // use the current (transparent) color
        gl_FragColor = current_color;
    }
}

Save that as “inverted.fsh” and put it in your bundle. When you want to assign that to a sprite node, just set its shader property like this:

yourSprite.shader = SKShader(filename: "inverted")

Shaders are compiled on the device at runtime, which means they always take advantage of all GPU features on the user’s device. However, it also means there will be a small performance hit while your shader is being compiled, so it’s a good idea to compile them ahead of time and keep a cache.

If you’d like to explore shaders more, I made a whole library of them called ShaderKit. All examples are extensively commented and free to use: https://github.com/twostraws/ShaderKit.

Sponsor Hacking with Swift and reach the world's largest Swift community!

Available from iOS 8