AR

Implement an Augmented Reality game like Pokemon Go (Part 1)


The success of Pokemon Go™ inspired me to a new tutorial series about a simple augmented reality (AR) game.

  1. Part 1:
    • Implement the camera view
    • Create a SceneKit overlay with a moving 3D object.
  2. Part 2:
    • Add a Head Up Display (HUD)
    • Use CoreMotion to move the 3D object depending on the device position/orientation
  3. Part 3:
    • GameLogic
    • SceneKit / Physics
    • Particles

 

Basically you just need to show the camera content together with an overlay of 3D objects to get an augmented reality effect. If you add interaction and physics effects you have everything in place what is needed to implement something similar as the Pokemon Go™ capture screen.  

1. Create a new SceneKit project in Xcode:

Open Xcode and create a new project: 

ardefender1 ardefender2

Xcode has already generated code to initialize a scene with a 3D object (viewDidLoad) and a touch interface to handle user interactions (handleTap). If you start the project, you’ll see a spaceship which can be manipulated by touch and swipe events:

ardefender3

Now limit the project to portrait mode, to keep this tutorial simple:

2. Create the camera view and the scene kit objects

Open the Storyboard …

Change UIView

Change the SceneKitView to an UIView by dragging an new UIView into the GameViewController

Add an UIView in XCode Storyboard

Change UIView

Add another UIView and a SceneKit View below the top UIView:

Change the UIConstraints of the cameraView and scnView to full screen size:

ardefender5

If you see warnings like this one: Choose „Update frames“ to correct them automatically:

ardefender6

Create an IBOutlet for the scnView and the cameraView:

 

 

 

That’s all in the Storyboard. Now it’s time for real code.

3. Update the generated code:

We have created a global Outlet for the SceneView in the InterfaceBuilder before. Therefore we have to remove the scnView declaration viewDidLoad and handleTap:

We also have to change the scene background color in the method viewDidLoad to clear. Otherwise augmented reality will not work, because the camera picture will not be visible:

Here’s the full source code of the two methods:

 

4. Create the Augmented Reality Camera Layer: 

Add the AVFoundation Framework to Linked Frameworks and Libraries

augmented8

Add an import statement for the AVFoundation on top of the ViewController class:

Add the key „Privacy – Camera Usage Description“ to the plist file:

Otherwise you will see this error, when you start the App:

This app has crashed because it attempted to access privacy-sensitive data without a usage description.  The app’s Info.plist must contain an NSCameraUsageDescription key with a string value explaining to the user how the app uses this data.

This is needed because of the new App privacy policy from Apple.

Implement the camera capture code:

Now the only missing part is the code to capture the camera input and place it below the transparent 3D scene to get the Augmented Reality effect:

 

 

Now start the App on a real iOS Device:

You can download the sample code from GitHub

 

That’s all for today.

If you want to support me, please download my Apps from the Apple AppStore.

AppStore Stefan

Cheers,
Stefan 

AdSense and Admob
iAd Integration
Apple TV
Quick Tip: How to use the Apple TV remote to control a sprite in your TVOS Apps
iOS
Quick Tip: Integrate iAd banners in your iOS App with two lines of code