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.
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.
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”
2. Your project settings should be similar to the below with your own information.
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)
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.
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.
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
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!
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.