SKCameraNodes – Story Tellers iOS Starter Kit Documentation

We’ve already discussed the camera some in the Initial Setup, but I thought it was worth explaining them further.

Notice in the screenshot below, the camera is in the middle of the screen. When the app runs though the camera is immediately focused on the Balloon. The camera will stay focused on this Element wherever it goes. So if it moves right, the camera moves right. This gives your Pages some really interesting options.

  • Readers might need to search for things in wider expanse than just the viewable area.
  • Readers could navigate a single tall or wide page to read a story instead of the traditional page-to-page style of reading.
  • You could use physics impulses to fling a main character toward something else, and the camera will track even highspeed interactions like this (think Angry Birds).
  • Using the StickNodeToNode dictionary with a Parallax property, other nodes can move relative in relation to the node the camera follows. This creates really cool parallax effects. Or you can keep GUI elements in place while the camera moves around.


So in case you overlooked it earlier here are some the main properties for setting up the camera to follow another node in a page’s Settings dictionary…..

SKCameraNode follow Node

  • InitialCamera – the name value of a camera you’ve added to the scene. Once you set this property the Scene’s “view” will use that camera. This option is important because you can treat the camera much like any other node. Move it around, scale it, make it follow a specific node, switch cameras, etc.
  • InitialCameraPhone – Like the property above, but only applies to iPhone devices. This is an important option because for many pages you could probably use a single Scene file (.sks file) instead of making an entire duplicate for the phone, and simply use a different camera dedicated to the phone. You can zoom using the Scale property. We suggest setting 0.75 for both the x and y of the camera dedicated to the phone.
  • CameraFollows – the value will be the node the camera will lock onto and follow. Most likely this will be the name of one of the Element class sprites you’ve added (but this could even be a particle emitter).
  • CameraFollowsOnX – the value will be the node the camera will lock onto and follow but ONLY on the x axis. This is a good option if your art work is sized in such a way that lowering or raising the camera would reveal the edges
  • CameraFollowsOnY  – the value will be the node the camera will lock onto and follow but ONLY on the y axis.
  • CameraOffset – an offset value in {x, y} format to adjust the camera in relation to the node it is following.
  • CameraOffsetPhone –  an offset value in {x, y} format to adjust the camera in relation to the node it is following. This value is ignored if the device is an iPad as it only affects the iPhone.
  • NodesFollowCamera – a String or Array of strings to define which nodes will stay locked onto the camera when it follows another node. Particularly useful for things like a background sky, because once locked into the camera it will appear infinite. In other words, you would not need to make the sky any larger than the camera.

Screen Shot 2015-09-04 at 6.49.40 PM







If you stumbled onto this article, it is part of our documentation for the Story Tellers iOS Starter Kit 2. The kit enables you to make children’s book apps and games without writing any code! But it is Swift 2 based and compatible with iOS9 (or higher) and Xcode 7 (or higher), so kit buyers can even extend the functionality to fit their needs further. Some of what we cover in the kit documentation may apply to Xcode in general, so this article could be worth a read even if you aren’t a user. You can purchase Lifetime Updates the kit here, or subscribe Yearly to CartoonSmart and get the latest version, plus access to all of our other kits / tutorials.

We’ve also created an iBook to document the very latest properties in the kit, so be sure to download that as well.