Articles, Code and Video Tutorials for ARKit, Sprite Kit & SceneKit

A Basic Introduction to ARKit with SpriteKit

Go beyond just adding anchored emoji with the Xcode Starting Template

So you’ve decided to make an ARKit app. First thing you’ll probably do is create a new Xcode 9 project using the ARKit Starting Template with either SpriteKit or SceneKit as the game technology. Although SceneKit and ARKit might at first seem to go more hand-in-hand with one another, I suspect many of you will actually tinker with the SpriteKit based AR template first. Why?

I think most budding young iOS game developers begin with SpriteKit, so you’re already somewhat familiar with it. Sprite Kit has a lot going for it. It’s a relatively easy 2D framework, and as it is 2D, the internet has no shortage of free game art (and plenty of paid royalty free game art as well).  The same can be said for 3D graphics, but if you’re a coder buying game art, you’ll find it’s far easier to adjust 2D art to suit your needs than 3D art (which could involve learning some 3D software).

So you’re probably at the crossroad I was at when ARKit first came out. Do I go with my gut that says bite the bullet and learn some 3D software or do I try this whole AR thing with 2D graphics?

Well ultimately I went with SpriteKit because I wanted to build fast. And when I say “fast”, let me also say it took me around 10 weeks to make the app I did (that’s another story). What I found though was there’s plenty of cool stuff you can do with non-3D graphics in the Augmented Reality space. Call it 2.5D if you want. Here’s a couple examples. One from the app I made, and a second from a recent Arcade Fire show (great text right?)….


So before we dig into the starting project with SpriteKit, hopefully you can see there’s plenty of room to be creative with 2D art.

Xcode’s Starting Template for AR

Xcode 9 Starting Template with SpriteKit and ARKit

Fire up Xcode and start a new project. Pick the Augmented Reality App option, then set the language to Swift and the Technology to SpriteKit.

Next get ready to forever abandon testing on the Simulator. As a game developer you never should have been testing on the Simulator anyway (it lacks the speed for accurate physics testing), but now you really can’t use it. So plug in one of your iOS devices that’s capable of running AR games, (any iPad Pro, iPad 5th gen, or the iPhone SE, 6, 7, on up).

Xcode 9 Starting Template with SpriteKit and ARKit 2

Untethering Your Test Device

Next go to Window > Devices & Simulators. Find your device, and toggle on Show as Run Destination. Congrats, your device no longer needs to be plugged in via USB to run your test projects. Being untethered from your computer is especially useful for AR, as you’ll want to roam around some.

The ViewController and Scene Files

With ARKit your ViewController does a lot more work than it used to. Prior to ARKit, the SpriteKit template used the ViewController to initialize and present the first SpriteKit scene. From there your Scene.swift file (previously called GameScene.swift), could be used to present other scenes. So for example, you might begin with a scene for navigating the app, like a Main Menu. That menu could go to other menu screens or start the main game itself. But typically you didn’t need to do much again with the ViewController. That’s changed now.

The ViewController is your ARSKView’s delegate, which means it’ll be doing some work anytime we need to add content to our AR scene. Take a look this code from the starting template…



That’s obviously the code that’s responsible for adding a big space invader emoji to the AR scene. But the code which triggers that function to run is in the Scene.swift in the touchesBegan function. Take a look…

So by adding an anchor to the sceneView, it causes the ViewController to respond by returning a node attached to the anchor.

Do you see a bit of a disconnect here?  When adding an anchor, we aren’t doing anything to specify what we want visually attached to that anchor. The ViewController is just adding one space invader emoji after another every time we tap the screen.

So what we really need is a way to change what appears when we tap.