Writing custom Open GL shaders was always the ultimate challenge for me. I was so exited when I heard about the ability to use custom shaders in Sprite Kit with iOS8. This would be a good reason for me to enter this subject and learn how custom shaders work and can be integrated into a Sprite Kit Scene.
My conclusion: It’s not that complicated at all. Writing your own shaders is complicated as hell if you haven’t seen any GLSL code before, but adding shader scripts to an existing Sprite Kit project is so very easy. In this little demo we just make a simple beach scene with sand and a reflecting water pixel shader like in this video:
The source with this demo project can be downloaded here from GitHub

UPDATE:

The sources of the repository were updated. I added a second shader with a moving texture and edited some graphics. The source code in the repo will be more advanced than the code examples described in this tutorial.

Setup a new Sprite Kit project

I’ll throw the spaceship and the hello world text away. We can also delete the touchesBegan method and additionally I will setup correct scene dimensions as described in a former blog post. So everything is cleaned up to init some sprite nodes.

Add some sprites

First let’s make a background. A sprite that has the size of the entire screen.

Now that we have our beach vibe add a simple transparent sprite for holding the shader. Shaders can only be added to SKSpriteNodes.

After adding this container we simply add a shader to it. An new shader will be implemented with an external file called “shader_water.fsh”. The next thing is to set the so called uniforms. It’s just an array where you can set the variables in the shader script. The uniformName describes the variable name in the shader and the following argument sets its value.
At last the created shader Object will be assigned to the shader property of our sprite.

Add a shader script

A shader file should be in the .fsh format and the language is GLSL. It’s nothing more than a simple text file with the extension “.fsh”. So how do we get some demo code to see what it’s all about? In this post I have taken some code from www.shadertoy.com. I just copied some GLSL code from there and set the variable names inside this shader script with the uniforms from outside this script as used above. This is the shader that produces the water reflections:

After rendering this shader to the whole screen I just put another sand sprite over it with a transparent gradient.

The source with this demo project can be downloaded here from GitHub.
I’m looking forward to your comments or requests for new articles.

5 Kommentare

  1. I tried to use this example on a retina iPad, but it did not work with the default Metal shaders. I found that it was possible to get it working again by PrefersOpenGL=YES in Info.plist. I also create a simplified example that works with both OpenGL and Metal and put that on github here: https://github.com/mdejong/SKShaderBWWindow/

    Antworten
  2. Great tutorial! I have been looking for a bit more to spice up my iOS game and SKShader is a great way to do that. Thanks.

    Antworten
  3. Very well explained …. very good

    Antworten
  4. Hey,

     

    You don’t need to pass a new uniform (size) to your shader. Just use the built-in uniform (u_sprite_size) in your shader script instead of size.

    Antworten
    • Thomas Zinnbauer

      thx for this, I’ll try that…

      Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *