A few months ago we organized a 2-day hackathon at Z1 HQ and we ended up creating an AR indie video game. This is what we learnt and how we did it.
Even though the idea of internal hackathons sounds beautiful on paper, let’s be honest, it’s difficult to find the time to organizing them. However, every now and then we love to get involved in this type of activity to work out creativity and foster team building. This time we had two main goals: Experiment with new technologies and launch a product of our own from scratch.
Ideation
The topic was open, so we started with the classic brainstorm. Among the many options that emerged we ended up choosing the proposal of Ivan Coronado, our Lab Lead: create a small video game using Augmented Reality.
"There will come a day when Augmented Reality will dominate the world, better if we are ready."
Iván Coronado, Software Engineer
Ivan justified his choice by arguing that this technology has great potential, but it’s still not normalized in our lives. This is very interesting when it comes to creating a product because almost anything you do is a challenge in itself
We had never worked with AR before, so from the first moment, we knew we had to choose a simple game mechanic to focus our efforts on graphics and development. That’s why we planned to base our project on the classic Hot and Cold game which we can all remember playing as children.
The mechanics of this game are perfectly simple, as well as entertaining: Your friend hides an object, and you have to find it. If you move away from the hiding place, your partner tells you that you are getting colder, while if you get close, you are warned that the temperature is rising until you get burned when you find the hidden element.
Researching
With this idea in mind, we started working on the design in InVision and in parallel, we looked for a framework that could facilitate the development of our game. Through investigation, we discovered Viro Media, a free development platform in AR / VR, and its Figment AR app.
We were able to create the prototype in just a few hours with React, a technology we already use in many other projects (like Truly or Altru). We saved time and didn’t need to learn Swift or Android, something impossible in the two days that our Hackathon lasted anyway.
👉 Here you will find all you need to use the framework yourself.
Prototyping and validating
This basic prototype, developed in just one morning with React in Viro, was quite simple. Our first objective was to check the functionality of the technology, discard faults and prove that the main game mechanics were correct.
We knew we’d have to introduce a number of elements later, but it helped us to start testing and validating our product. We got our MVP.
Showing it to a friend’s children in a park was very rewarding to see how they loved it! Despite its simplicity, they spent some time playing with that parallel world we showed them on the device. Thanks to our little users’ feedback, we were able to improve some bugs the next day.
Designing the interface and creating a story
Once we verified that our product made sense and was entertaining even without many graphics, it was time to work on the story and the design. Our device would be an artifact that opens the doors to a parallel world inhabited by a funny character.
You can play with your friends to hide and find this character. There will be two teams: the Allies, who hide the character using the artifact, and the Explorers, whose mission is to look for it following the hints provided by the device.
I have snuck into several Game Jams, and I'd say that the story is usually what rules the creation of the game. So you usually have an idea for the storytelling first, and from there you work on technology and aesthetics. However here we have done it the other way around: first, we thought about the technology we wanted to use, from there, we focus on the mechanics, and finally on adequate design and storytelling for children.
Instead of complicating the story or including many characters we decided to limit the experience to a single protagonist and thus be more agile. We shouldn’t forget that in spite of the different iterations we carried out, we are talking about an MVP. If the video game has acceptance, later we can expand it.
We also thought about designing our own protagonist. But time was pressing and there are hundreds of models available, some very affordable, that fit perfectly for our product tests. So we finally decided to buy a playful dragon in Sketchfab. It fit what we were looking for and we created the story around him. We call the video game Draki Hero.
Limitations
As we progressed in the development of the app we were also finding out how the limitations of the technology itself prevented us from doing what we really wanted.
In the case of Augmented Reality, there are two key restrictions:
- Occlusion which means the device does not detect the obstacles so you can not hide a character under a table or behind a tree (they are transparent for your phone).
- Persistence which does not allow data to remain on different devices at the same time, so we can not create multiplayer scenarios in which several players participate at different times.
We are currently also testing with another framework developed by 6D.AI that theoretically allows us to overcome both limitations, but although their demos are already impressive, they are still at an early stage.
6D.AI beta is closed so they have to invite you to use it, but thanks to experimenting with Draki Hero, we are now part of their community.
Conclusions
Draki Hero is available for free in the AppStore but having tons of downloads is not really our goal. Thanks to creating it, we have managed to understand how Augmented Reality works. A technology that, according to Iván, “will redefine how we understand the world.”
In fact, he seems to have it clear: “The future of the Augmented Reality is to create a global AR Cloud, and when that moment arrives, nothing will be the same again”.
Developing this type of side projects may seem risky because you spend resources without the guarantee of a direct reward. However, being able to put the mind into projects outside of our day to day tasks has tremendous intangible value. This is why we created the Z1 Lab.
Work in projects outside of our day to day tasks has tremendous intangible value.
Iván told me that thanks to Draki Hero as a team we have acquired a knowledge that following our routine could never have achieved. "We have laid the foundations to develop new Augmented Reality projects," he says.
In the future this technology will be an inseparable part of our day to day life and although there is still much to be done, this future, let’s not kid ourselves, it’s getting closer every day.
- Download Draki Hero from the AppStore.
- Visit our profile on Dribbble to know more details of Draki Hero design process.
- We are on Product Hunt, check it out and vote Draki Hero up!
