All Case Studies Design Development Interviews Our Way Project Management

How to Create an App Like Pokemon Go

Augmented Reality is increasingly turning into the hot technology of the moment, especially after the launch of the Pokemon Go game. Some time ago I devoted a blog post to how to start playing around with AR: Augmented Reality in Mobile Devices (with an App Tutorial for Android!). It was a huge success - more than 10,000 people read it. It turns out that location-based AR is not all that complicated so today let’s check what we need to create an app that works like Pokemon Go. Yes, you read it right, we are not immune to the temptation of using this game to boost our blog traffic. Shameless!

What Do We Need to Start With?

Backend with Database

Each mobile application needs a server that will manage the users as well as the data flow. In our case, we need somewhere to store information about our Pokemon objects. It’s enough to have at the beginning:

  • object's latitude and longitude can be provided by a pseudorandom generator,
  • name,
  • Combat Power (CP),
  • Hit Points (HP),
  • GIF file of an animated Pokemon, e.g.: 

404-crying.gif

When you develop an MVP and want immediate prototypes, it’s great to choose cloud solutions instead of developing them on your own. I would recommend giving Firebase a try. It’s a really powerful, NoSql database that can be easily integrated with the Google Cloud Platform and, for example, push notifications. Moreover, Firebase has its own SDK for Android and it’s really easy to start using it.

To populate your database, just use the Pokemon API database with detailed information that can be used for future improvements such as the evolution. Maybe you fancy starting up a Water Pokemon for lakes and rivers?

Also worth reading - our post about BaaS.

AR Algorithm

An algorithm for displaying augmented information using the camera view. You can kick off with the one described in the blog post, but it requires some fine-tuning:

  1. Add the option of working with sets of points instead of a single predefined spot. Probably the easiest approach is to detect the closest Pokemon and bring it up on display. You need to grab the object that is closest to you from the set, for example by using the distanceTo() method.
  2. It would probably be necessary to implement a simple low-pass filter to stabilise our pokemon on the screen. A very nice example is provided here. The formula is written in JavaScript, but it’s quite language-agnostic.
  3. Additionally, we don’t want to show the Pokemon in the centre of the screen only. That’s why you would need to map the azimuth angle to the screen pixels to make it look smooth on display.

Map

One of the key features of Pokemon Go is that you actually need to walk around to catch Pokemon. To pull this off, we can use Google Maps with the first-person view — really simple to set up in your app. Thanks to markers you can place the nearby Pokemons or Pokestops on your map. You can also set a custom location icon with your avatar.

UI

The most interesting part of the UI/UX in Pokemon Go is the throwing Pokeball animation. As you may well expect, to implement this, there are as many solutions as there are developers and everything depends on how accurate and sophisticated you want it to end up. As a starting point, you might want to check out ObjectAnimator from the SDK. This tool allows you to animate a bitmap of a Pokeball. After some user interaction that involves hitting the Pokemon, just play the pre-programmed animation of catching it.

Remember! This Is Just the Beginning!

Application development is a complicated process, and any guidelines that are suggested are just the first step on a longer journey. Our experience here at Netguru has told us that the best results can be achieved from a process of frequent testing among users from your target group and then using the feedback to improve your application. When you finish the first iteration of the MVP according to our guidelines, share it with a selected group of early adopters to gather feedback. As proven in Design Thinking methodology, the iterative process, along with frequent deployments of prototypes for testing, gives you the best insights and prospects for desired profit.

Check Out How We Make Our Apps

If you would like to see how we make our apps, check out CoolCal that is designed and implemented only by us using the latest technologies. You can also read our thoughts on the process of learning Kotlin.

New Call-to-action
 
READ ALSO FROM Dev
Read also
Need a successful project?
Estimate project or contact us