Create a Shooting Game using Augmented Reality
What is ARKit?
Augmented reality is a technology that allows people to interact with digital objects in the real-world. It’s been available since iOS 11 and has had many improvements since then.
What we are going to build
This tutorial will teach you how to create a 3D SceneKit model, render it in augmented reality, and apply physics collision to the object in real-time.
Prerequisites
This is a simple tutorial and requires you to have a good understanding of Swift as well as some basic knowledge of ARKit and SceneKit.
Xcode 9 (or later) and an ARKit supported device running iOS 11 (or later) are required to follow along.
ARKit Basic Terminologies
Let's get started with the terms we are going to use frequently in this blog.
- ARWorldTrackingConfiguration — It tracks the position and orientation of your device relative to the real-world at all times.
- ARSCNView — The
ARSCNViewis the class that provides the easiest way to create augmented reality experiences that blend virtual 3D content with a device camera view of the real-world. - SCNNode —
SCNNodeis simply a position in space, no shape, no size, and of no color. It only represents the coordinate space transform i.e. position, orientation, and scale relative to its parent node. Then we can add lights, cameras, and geometry to nodes to create visible content. - SCNVector3 — SceneKit uses 3-components vectors for a variety of purposes, such as node positions, surface normals, and scale or translation transforms.
I have divided the complete implementation into steps for better clarification.
If you run the project, you will notice a ship 3D model floating in front of you.
Step-2 Let’s add assets into Assets.xcassets which we are going to use later.
Step-3 Add Empty node from Object Library and set its position to (0,0,0) and name it container in the identity panel. This container node will be used to contain all our boxes.
Step-4 Setup the scene and add it into the view in ViewController.
Step-5 Add root container to the scene of ARSCNView.
Step-6 Let’s now understand the way to calculate the world coordinate system.
- In SceneKit, the position any node uses is in meter.
- SCNVector3(X, Y, Z) where X is a horizontal x-axis, Y is a vertical y-axis, and z-axis refers to depth, how far or how close something to origin in outwards.
- Here we have used -0.3, which means 0.3 behind the origin. If it is positive 0.3 then it will be placed 0.3 meters before origin.
We are calculating the node’s(box) position as per the above vector coordinate system via box geometry as shown below.
Step-7 Now we understood how to calculate, let's add boxes as a child node in the container node we have created in Step-5 and present it to the real-world.
This is where we’ll add some physics!
- Create a new SCNNode.
- Set the Node’s SCNPhysicsBody type to static.
- Change the
contactTestBitMaskto 1. The masks are used to detect if the ball has collided with the box. - Add node in our
rootNodeusingaddChildNode(). - We are applying geometry to SCNBox type as we need a box block.
firstMaterialof geometry finds the appearance. - We can apply color or image as per our choice. Here we have used the “box” image which we have kept in assets.
For building a complete scene we need to add a sphere node to hit the boxes and explosion files to the scene for animation. You will know more information about this in further explanation.
Step-8 Perform hit test and detection
- Now we have created the scene for our view. We want the app to actually do something once the user taps on the screen and starts the game.
- ARKit records the touch’s 2D coordinates when the user taps on the screen, and to convert the 2D coordinates to real-world 3D coordinates, ARKit performs a “hit test”.
- It's a delegate method of
ARSCNViewDelegatewhich gives updates for every frame. - Here in this method, we will check that if we haven’t added a tracker node. Then we will add one tracker node to our scene’s
rootNode.
Step-8 (i) To register the touch, we are using touchesBegan(). If the touch is found then place the game scene over there.
Step-8 (ii) Add this delegate to get updates when two physical bodies contact each other.
- Here we’ll set the
sceneViewdelegate and we’ll calladdChildNodes()for adding boxes to over sceneView which we have already seen in Step-7.
sceneView.scene.physicsWorld.contactDelegate = selfA contact is created when two physics bodies overlap and one of the physics bodies has a collisionBitMask property that overlaps with the other body’s categoryBitMask property.
After adding child nodes to our scene’s rootNod, it will look like this.
Step-8 (iii) Add a ball image over boxes.
Step-9 Collision of Nodes
There are three methods available in theSCNPhysicsContactDelegateprotocol. Which will be notifying us for contact occurred between two nodes.
SCNPhysicsContactDelegateStep-10 Perform the collision and removing the boxes that came in contact.
Step-11 Create an explosion effect after the collision.
So basically, when the ball hits the pyramid of boxes, it shows an explosion animation that removes the boxes and adds a particle system in the system.
Step-12 Show congratulations animation after we explode all the boxes.
Here we are adding a simple view to our SceneView and we are adding a particle system to our rootNode for displaying stars animation.
Conclusion
Hurray!! we have successfully built our first game with ARKit. For more information and clarification you can download the complete source code from here.
If you want to explore advanced use cases, augmented reality is being used in many industries to improve user experience. One such industry is health and fitness. AR can bridge gap between the physical and virtual world for the fitness enthusiasts. Check out this blog, ‘How to Build a Fitness App using ARKit’.
References
Hope this article helped you for learn something new in ARKit today. If you enjoyed reading this don’t forget to throw me a couple of claps 🖐.
Follow me for more updates in swift.
