I’ve been looking forward to the Apple WWDC 2014 for so long. And as expected a huge bunch of new features, API’s, tools and frameworks was presented to all of us developers. As a Sprite Kit lover I was very curious about what new methods they will provide to us. And what should I say, a dream come true… Sprite Kit with lighting and shadow effects! So this is a little tutorial how to set up a Sprite Kit Scene with the new beta of iOS 8 and the SKLightNode. How to make gorgeous shadows and BumpMapping effects that they call normalMapped. Keep in mind that this only works with the new version of Xcode 6 that is now available for apple developers as a beta in the apple developers center. Also remember that the new functionalities of Sprite Kit are also very beta and at this level are not claimed to work reliably or performantly. The source with this demo project can be downloaded here from GitHub.

Setup a new Sprite Kit project

First we setup a basic Sprite Kit project with Xcode 6. Let’s use Objective C instead of Swift. The announcement of Swift is only a few days old :-) After this step get rid of the default stuff. 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. The image is optimized for 4:3 iPad.

After this we simply add some sprites with a stone texture and position them with some space between. To keep it simple just use the iterator or whatever to achieve that:
Then let’s add a particle emitter for example to have a sprite where we could add a SKLightNode later:
Now we can add some interaction. So it will be usefull if we can drag the fire arround to see the light effect later on in its full beauty. To make it just override the touchesMoved method and assign the dragged position to the fire position. Add this code to our GameScene class:
After all these steps our little demo scene is ready for building and running. The background, the stones and the fire emitter should look like this:

Making shadows

So far there is no light source or shadows in this scene. But now let’s add some new light functionalities from iOS 8. A light is only another node called SKLightNode. We will init a SKLightNode and add it as a child to the fire emitter, so that it seems the fire is our light source:

Important is the value of the categoryBitMask. This is the value that will be assigned to other sprites, so only sprites (even the backgroud) with the same categoryBitmask value will react to this SKLightNode. To add a shadow to the stones simply add the shadowCastBitMask attribute of the stones in the for loop like this:
Now the stones drop shadows because there is a light node and they both have the same BitMask value:

Make a BumpMapping like effect

To add this dynamic bumpmap effect you can easily assign the categoryLightMask to the background like we’ve done before with the shadow:

This doesn’t add the bumpmap effect immediately. We have to set the normalMap flag to TRUE on the initialisation of the background sprite also:
It’s very easy. Just define a LightNode and set every sprite the to the same bitmask, that should display shadow or normalMaps effects. After adding these values you can drag the fire node and you are moving the light node with this too because it is attached to the fire.


The source with this demo project can be downloaded here from GitHub.


The new lighting node in iOS8 is a great new feature to give a quality boost to every 2D game made with Sprite Kit. It’s super easy to use. This first beta version kind of buggy. The normalMap isn’t rendered on a real device in my case, only in the simulator, and the performance decrease is very strong. It also seems the falloff attribute has no effect and the shadow is only rendering the bounding square of a sprite, not processing the alpha values. So a circle image still drops a box shadow …but let’s see how upcoming versions will fix all this issues.

I’m looking forward to your comments or requests for new articles.

0 Kommentare

Einen Kommentar abschicken

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