ARTICLES

iOS 11 ARKit

Tutorial: Build an Augmented Reality (AR) App for iOS using ARKit – LESSON 1

ARKit is coming to consumer iOS devices this Fall. This short tutorial demonstrates how to build your first AR app using the new ARKit using 2D assets.

The full source code for the tutorial can be found here.

Not sure what AR is? Augmented Reality (AR), is when a view of the real physical world is augmented to include additional inputs through computer generation to include sound, video and graphics.

Device Configurations

To complete this tutorial prior to the release of iOS11, you will need to setup your developer machine and iOS device with Beta versions of XCode 9 and iOS 11. You can download the files here. Note: You will need to have an active Apple Developer account to do so.

XCode 9 Beta

You can download and install the beta version on your machine in parallel with XCode 8 without any additional effort. Just run the downloaded install file.

 iOS Device

You will need to have an iOS device running iOS 11 because you will need access to the camera. To install the device with the beta build, visit the above link from the device you wish to upgrade. Follow the installation instructions that are presented once the download has completed.

Create an ARKit Project

1. Open XCode 9 and choose to start a new project. Choose “Augmented Reality App”

Start ARKit Project

2. Your project settings should be similar to the below with your own information.

Set Project Settings

3. The default app should be ready to go. Let’s try it out. Choose your device and run the app. You should see a screen similar to below (click to add your first and more nodes)

Running Your AR App

What is this App doing?

Now that the base project is running, let’s look into some key parts and see what they are doing.

ViewController.swift

24
25
sceneView.showsFPS = true
sceneView.showsNodeCount = true

This is the code that controls the display in the lower left corner. As your develop more complicated views you can monitor your FPS output and observe the total number of nodes that are attached to the current scene.

59
60
61
62
63
let labelNode = SKLabelNode(text: "?")
labelNode.horizontalAlignmentMode = .center
labelNode.verticalAlignmentMode = .center
return labelNode;
This is the creation of the single node that you see when you click on the AR view in the app. This is using a label and setting the text value and center (vertically and horizontally) the text.

Scene.swift

32
translation.columns.3.z = -0.2

This line sets the Z-axis placement of the node. In this case, the node is 0.2 meters away in front of the camera.

Using a Custom Image

MIlk Cans in AR

A LabelNode is fine, but let’s swap over to a more usage with an image asset.

1. Remove the labelNode code in ViewController.

2. Add the following code with the image asset name that you want to use:

59
60
61
let milkcanNode = SKSpriteNode(imageNamed: "milkcan_2048")
milkcanNode.size = CGSize(width: 256, height: 256)
return milkcanNode;

You can skip the size portion if your asset is already at the correct size. In my demo I have also modified the distance in Scene.swift to place the asset further away.

From here you can continue to modify the project and add animation, other nodes, child/parent nodes and more. Check out the official AR documents on Apple’s developer site. Have fun!

Conclusion

I hope that you have enjoyed creating your first AR application with ARKit. I will be following up this tutorial with one focusing on the use of 3d assets.

If you would like to give me feedback on what I had to say, or have questions, please reach out over Twitter (@matt_ridley) or through our contact form. Thanks!

About

Matthew Ridley is mobile developer and principal of Milk Can. Milk Can designs and builds mobile solutions for local, national and international clients. He has been developing professionally for nearly 15 years and has worked across a variety of platforms and languages. He started his career building applications and websites and has now shifted his focus to mobile app solutions.

Archives

  1. June 2017
  2. May 2017