Now Reading
AR Madness — our open source ARKit game tutorial! Part One — Game Design and First ARKit app

AR Madness — our open source ARKit game tutorial! Part One — Game Design and First ARKit app

This post is part one of an epic five part tutorial on how to make a fun Augmented Reality game that we really enjoyed making and that we think you will too! We originally had it all in one post, but anyone we asked to read it fell asleep before they got to the end, so we’ve split it into five posts!

This is what you’ll be making:

TL:DR

If you want to skip the tutorial and just get the code to run on your phone — get it here on Github.

Why are we making an AR game?

Liberty IT were delighted to have been one of the sponsors of the Coder Dojo Coolest Projects 2018, an amazing event held in Dublin on the 26th May, where about 1000 kids showcased their coding & tech projects, and about 5,000 people came to see them.

As sponsors, we had a stand — and my own team in Liberty IT, the Incubator innovation team, were asked to show off some cool tech that the kids would enjoy.

We decided to make two new games — a brilliant Virtual Reality (VR) basketball game, played on Samsung GearVRs, built by my colleague Kevin Duffy, and also an Augmented Reality (AR) game, played on iPad Pros.

As the Coder Dojo movement is all about teaching kids about coding and creating, we thought it’d be cool to make our code for the games available, so anyone who played them and liked them, could try making them themselves at home. This post is all about the AR game … which we called …

AR MADNESS!

Because it’s all just a little bit crazy! This tutorial will show you how to make the game, with some slight differences to the one we used at the event (mainly as some of the 3D models we used aren’t licensed for open-source distribution. But the shark is!).

What you need to do this tutorial

To make this game at home yourself you need four things:

  • a Mac computer. To make Apple apps (known as iOS apps) you need to a Mac computer, from Apple, so you can download the Xcode application, used to develop iOS apps. You can’t make iOS apps on a Windows computer (not legally/easily anyway!)
  • an iPhone or iPad to play it on that is compatible with Apple’s ARKit (more of what exactly that is shortly): iPhone 6S and upwards, 5th Generation iPads and iPad Pros. Full details from Apple here.
  • We’re going to presume that you know how to code! Or at least, are learning how to code. If you’ve never coded before, this tutorial will be too advanced. Don’t worry though, there’s plenty of fantastic online resources to learn how to code, like here or here. Ideally, you will have had experience making iOS apps before and know your way around Xcode.
  • Time and patience! This is a long tutorial! Very long! We go through pretty much everything and are aiming it at beginners (as we hope kids who play the game are inspired to try build it), so there’s a tonne of detail in here. So feel free to do it over a few days, or weeks! Or if you’re an experienced engineer, just skip past anything that bores you!

The code for the completed game is on Github here. Feel free to download and dip in and out as you go through the tutorial.


Game Design

The objective of the game is to get as many points as possible in 60 seconds by shooting down virtual 3D objects, that are displayed all around the player, via the camera view. So the main things we need are:

  • Buttons to allow the user to fire different, fun, missiles. Each button should also have fun graphics.
  • An image for a “target” in the centre of the screen to help aiming.
  • 3D models for those missiles.
  • 3D models for the objects the player will be shooting at.
  • An explosion effect for when objects are shot.
  • Sound effects & background music.
  • Logic to handle the start and end of the game, along with the 60 second timer.
  • Logic to handle the scoring.
  • Logic to handle the actual “shooting” of objects

This screenshot from Xcode shows what our final two screens will look like:

Home screen and Game screen

Graphics & 3D Models

For the images for the target and firing buttons, I got icons from one of my favourite sites on the planet, icons8.com. They have tens of thousands of icons, in all different shapes and sizes — all free, as long as you credit their usage via a link (or pay for a license).

In the game we used at the Coolest Projects, we had six different missiles, with corresponding buttons: Bathtubs, Lions, Fish, Chickens, Bananas and Sheep! The lion was included as my three year old daughter thinks she’s a lion and insisted on it, during the “testing” phase!

the icons from icons8.com that we used for the fire buttons

We got our 3D models from a variety of sources, some free, some paid for:

screenshots of the 3D models used in game

The models are all in the “Collada” data format used in ARKit, which comes with a .dae file extension e.g. Shark.dae!

We can’t give all of these models for free with this tutorial as their licences don’t allow for open-source distribution. Also — our game ran on big iPad Pros — this tutorial will show you how to make it for an iPhone, which has a much smaller screen = less space for fire buttons = less 3D models needed.

We can include these:

  • The shark! Yes! Obtained here.
  • The bathtub! Obtained here.

and we’ve done some digging for some other free models you can use:

  • A banana! Obtained here.
  • An axe! Obtained here.

So you’ll be working with these:

The plan is to fire bananas and axes at the bathtubs and sharks! So we’ll use these two icons, and also a target icon:

The models are available to download here and all the icons we used are available to download here. And remember to give icons8.com credit in your app by linking to them!

Or of course you can get your own models and icons. A good site which has both paid and free models is Turbosquid.com.


Getting started with ARKit

I’m going to presume that you’ve previously used Xcode, so I’m not going to explain how to use it as we go through the tutorial.

If you haven’t, you’ll need to install it on your Mac, from the Apple App Store. It’s free, but is huge, so make sure you download it somewhere you have unlimited / free data! I’d strongly suggest then that before you proceed with this tutorial, you do some more basic ones to learn how to use Xcode and about iOS app fundamentals. Here is some tutorials of mine that may help:

or here’s another good Xcode tutorial and an always amazing site to learn iOS programming is Ray Wenderlich’s site here.

Once ready, hit the Create a new Xcode project option

Select Augmented Reality App and hit Next:

You’ll then see a new screen:

where you’ll be asked for:

  • Product Name (AR Madness! Or whatever you want)
  • an Organization Name — not important for now, whatever
  • an Organization Identifier — not important for now, I used “com.whatever”
  • Make sure the Language is ‘Swift’. This is the programming language used to write iOS apps. You can also use Objective-C, but that’s a bit old school.
  • Finally, make sure Content Technology is ‘SceneKit’ and hit Next:

You’ll be asked to pick somewhere to save it on your Mac, so do so, then hit Create. The project will then open:

What did we just do?

We just created an Xcode project, using an Augmented Reality (AR) template, that uses ARKit. Apple created ARKit, a SDK with all the tools needed to build augmented reality apps.

By using the template, we’re given some pre-written code and resources out of the box. If we go ahead and run the app now — by hitting the little Run triangle button at the top left-hand side of the screen:

the triangle button is to “Run” the app, the “iPhone 8” specifies what type of Simulator to run

you’ll see a spaceship appear in the app ran on the iOS Simulator (if you haven’t used this before, it’s basically a virtual iPhone that runs on your Mac):

screenshot of iOS Simulator running the ARKit template app

There’s a spaceship visible, but the background is black. This is because the Simulator doesn’t have a camera (of course!) so can’t show the camera view — which is what the background is in an AR app; the camera view of the real world.

If we instead run the app on an iPhone, we’ll see the real world, and the spaceship. See this post about how to run apps on devices without paying for an Apple Developer Account.

Once you’re setup, in Xcode, select your connected device, e.g. “Andy’s iPhone” and hit the Run button:

We first see a message asking us for permission to use the camera:

screenshot of app running on real device (iPhone 8)

Hit OK, then you’ll see the camera come on, with spaceship also there somewhere. If you can’t see it, move the phone around until you do.

my desk. An amazing view outside, and a spaceship inside!

Cool. Where did the spaceship come actually from? Let’s look at the code. In Xcode click on the ViewController.swift file in the Project Explorer. When the file opens, look at the viewDidLoad function, which is ran when the “screen” in question is loaded:

override func viewDidLoad() {
super.viewDidLoad()
    // Set the view's delegate
sceneView.delegate = self
    // Show statistics such as fps and timing information
sceneView.showsStatistics = true
    // Create a new scene
let scene = SCNScene(named: "art.scnassets/ship.scn")!
    // Set the scene to the view
sceneView.scene = scene
}

There’s a few interesting things going on here — but for now we’re just interested in this line:

let scene = SCNScene(named: "art.scnassets/ship.scn")!

This is getting a SCNScenecalled “ship.scn” from the “art.scnassets” folder, which is here:

Expand it out and then click on the ship.scn file, which will open like this:

Awesome, that’s the same ship we saw when we ran the app!

Don’t get too attached though, as we don’t need it for our game, it’s a default 3D model you get with every ARKit template app.

Ok — you’ve just created your first ARKit app and ran it, either on the Simulator or a real device!


So ends Part One of the Longest Tutorial in Recorded Human History. Check out the other parts here.

Author Bio —  Andy O’Sullivan

Innovation in Liberty IT | Creator of http://appsandbiscuits.com | Gaeilge | all content my own opinion

What's Your Reaction?
Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
0
View Comments (0)

Leave a Reply

Your email address will not be published.