All Blog Posts

How I Built an Augmented Reality App With Unity

I used to spend a LOT of time (arguably too much) building and playing 2D gaming apps. From Tiny World to GEOMO, it’s fair to say that this passion of mine would inevitably be picked back up during my week of Innovation Time. One thing I’d never done before? Use Unity. Here’s how I (and you) can build an augmented reality app with Unity.

Innovation

teapot_app

Building an AR app... Why use Unity?

First off, it’s free, so even if it all went horribly wrong at least it wouldn’t cost me a penny. Secondly, Unity is a super powerful 3D game engine, which is great for building high-performance intensive games and 3D experiences. It also offers full ARKit integration through a plugin – exactly what I needed to get started on my very first AR mobile app development project. Another great thing about Unity is that it will pack and export your project over to Xcode so that you can easily make it iOS-compatible.

Once I’d decided on using Unity, and felt sufficiently familiar with what I wanted to make, I wrote down a to-do list of small achievable tasks and added a backlog of things that would be nice to have but weren’t crucial for the demo. This resulted in a project plan of sorts, which let me implement different features during each day of the week.

Here’s how I spent my week developing an AR game…

Monday

Configuring ARKit and detecting surfaces:

My first task was to configure ARKit so that it was ready to do everything it would need to do in order to create the most amazing teapot-stacking AR app known to man. To begin with, I used it to detect the surfaces that would be used as reference points for the 3D objects. Then I added a teapot*, which turned out to be minuscule due to the fact that I’d scaled it manually rather than let the phone do it automatically.

*You might be asking yourself “Why did he go for teapots?”, and you’re right, it is a bit random. The reason I chose teapots is that they’re free in the Unity Asset Store, but also because they can be represented quite easily in terms of physics, and translate well into a box in Unity.

AR-App-Screenshots 1
Tuesday

Stacking and sizing objects:

On my second day, I figured out how to get the teapots to be the correct size so that you no longer had to squint and hold the phone half an inch away from your face to see them.

I also managed to get the teapots to stack on top of one another and fall off if they weren’t stacked properly. The actual movement of the teapots would be implemented further down the line once I had the physics working properly.

Wednesday

Fixing the collision detection:

On Wednesday I broke physics…

The floor became a bottomless pit into which teapots would fall to their doom… even the floor fell into the floor (don’t ask me how). This setback meant that I spent all day fixing colliders – basically, I spent the day fixing physics.

Then came vector calculation, which already sounds like a college student’s worst nightmare. I quickly discovered that it would become one of my nightmares as well, and rued the fact that I’d not paid more attention in maths class at school.

Due to my miscalculations, objects would float into outer space (or above various members of our team). Not exactly a great feature for a teapot stacking AR game.

AR app teapot on Nikos head
Thursday

Adding in-game labels:

Once the game worked like it was supposed to…

I started adding a couple of things such as labels and a countdown timer, and slowly the app started to look more like a game than an AR teapot generator.

It was all smooth sailing until I tried positioning the on-screen labels. Coordinate systems are not easy to figure out, especially when for some reason, the on-screen labels won’t appear where they’re meant to. This was quite a drawback (as you can imagine) because although the AR objects were showing up in the right place, it messed up the interface which lets the player know their progress in the game.

stacking teapots in ar app
Friday

Object rotation and label rendering:

On Friday I broke physics… Again…

But this time rather than falling into nothingness, the teapots would float in mid-air. I managed to fix this in time for the demo (much to my relief).

I locked the rotation of objects so they couldn’t fall, this seemed like a great idea at first, as it would it prevent the objects from spawning in upside-down. However, this also meant that the teapots wouldn’t fall, even when they were supposed to.

teapots falling in ar app

Time for a demo:

How To Play:

  1. Open the app and wait for it to detect the surface you’re trying to play on (tables/desks/floors etc.)
  2. Find the first teapot by moving the camera around your playing area
  3. Tap the screen to drop the teapot on top of the tower, and a ten-second countdown will begin
  4. If the tower hasn’t fallen over, you will be given another teapot
  5. Adjust your phone and try to align the second teapot so it falls/stacks on top of the other
  6. Continue to tap the screen and stack the teapots to make the tower taller.

The future of my AR app?

It’s only a matter of time before my app reaches Candy Crush levels of fame. But until then, I still need to fix a couple of things. Firstly the bug that turns objects upside-down or just makes them fall through the floor to never be seen again.

This was to be expected though since it was my first time ever using Unity, I still have a whole lot to learn about the software’s capabilities and all the cool stuff you can do with it. So with a little more experimentation, I should be able to do a lot more in the future.

One thing I have learned is how much I like Unity, and I’d really like to spend my next Innovation Time either working on my teapot app until it’s amazing, or using what I’ve learned to build a more ambitious AR game that might have the potential to change the way we see the world (literally).

So watch this space.

Published on May 18, 2018, last updated on March 15, 2023

Give us the seal of approval!

Like what you read? Let us know.

0

Tags

This is how we do it

We exist to help brands change the way the world works. Be it strategy sessions, mobile apps or Alexa Skills, here's what our team do best.

Read more

Latest from the blog

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
Up Next
Projects