← Back to Blog Overview

How to build an app like Pokémon Go in three simple steps

Build your own pokemon go app visual

Update: Object recognition, multi-target tracking and SLAM: Track the world with SDK 7


If you haven’t been living under a rock, you’ve heard about Pokémon Go. Released in the USA on July 6th, 2016, it’s already picked up more users than Twitter, and helped push Nintendo’s market capitalization over $30 billion. It is also great example of a location-based (LBS) game and geo-based augmented reality.

Much of the success is due to the phenomenal fan base Pokémon already had in place – but it’s also due to clever use of smartphone technology, including very easy-to-use AR. And here’s the great news for developers: all the tools to build your own location-based AR game are already out there – we’re quickly going to show you how to use them in three simple steps. OK, it’s a little more complicated than that, but once we break it down to fundamentals, you’ll see how simple this really is. Ready? Keep reading!

Step 1: Set up a basic Geo-based infrastructure

Setting up the server infrastructure for such a game requires some work: you need to manage user accounts and arrange a smart distribution of Pokémon characters or objects of your choosing in addition to some contextually aware components in your system.

For simplicity: Let’s assume that you already created the server backend required to fetch the closest 5 creatures for any given user position so that once you know where the user is you get a list of them in a JSON Format (so it is easier to parse in your JavaScript code). Placing objects (such as Pokémons) around users using their GPS position was actually the very first feature supported by the Wikitude SDK since 2012.

Step 2: Build a geo-AR app

The Wikitude SDK JavaScript API also offers features to fetch the user’s location, AND place videos, 2D and 3D content in geo-spaces. You can query content from a remote origin to create a personalized Geo-AR scene on the fly.

The Wikitude JavaScript API offers so called AR.GeoObjects, which allows you to place virtual objects in the real world. A callback function informs you about user movements, firing latitude, longitude and altitude information. In the following sample the user’s first location is stored for further use, using Wikitude’s JS SDK. Note that this code must run inside a Wikitude AR-View, the central component of the Wikitude JavaScript SDK.

The following function uses coordinates to create a AR.GeoObject out of a 3D Model (in Wikitude’s wt3 file format) and an AR.GeoLocation.


Step 3: Make the rules of your game

Now that you can place virtual 3D models in the real world, you can get as creative as you can be and define the rules of your augmented reality game. Here are some examples of what’s possible:

  • Similar to Pokémon Go, you may require the user to be a maximum of 10 meters (30 ft.) away from a 3D model experience, otherwise the player may not collect or see it. On top of that you could also use altitude values to make sure a user has to get to the top of a building, or other unique locations.
  • Mix up the content! In addition to 3D models, you could also use videos, text, icons or buttons and place them in any geo location you like.
  • In addition to GEO AR, you could also use 2D image recognition and tracking: Use signs, billboards, print, walls or any other 2D surfaces as “stages” for interesting and cool AR augmentations that are “glued” onto these surfaces as seen in this video.

Try our Demos!

We have built a test experience with these simple 3 steps that you can try via the Wikitude app. Search for “Dragons” upon launch of the Wikitude app to see an animated 3D model of a dragon placed right next to you. Need an app template to get you started? No problem, just download the Wikitude SDK package, which includes an application called “SDK Examples”. One of the approx. 30 AR templates you will find in there is called “3D Model At Geo Location”. Simply use this as a starting point for your code.

Screenshot Wikitude pokemon experience

Search for “Dragon” in the Wikitude App or look for “3D Model At Geo Location” in the SDK Examples App, available for free as part of SDK download package, available for both iOS / Android

You can also download Wikitude’s sample app (included in the SDK download package) for examples of how to build your own geo-AR experiences. Also have a look at this helpful video tutorial made by a developer from our community:

So that’s it! We hope you guys will build great geo-based AR apps with our SDK! 

Wikitude provides a wide selection of development frameworks. Developers can choose between using Native API, JavaScript API or any of the supported extensions and plugins available. Among the extensions based on Wikitude’s JavaScript API are Cordova (PhoneGap), Xamarin and Titanium. These extensions include the same features available in the JS API, such as location-based AR, image recognition and tracking and SLAM. Unity is the sole plugin based on the Wikitude Native SDK and includes image recognition and tracking, SLAM, as well as a plugin API, which allows you to connect the Wikitude SDK to third-party libraries.

In case you have any questions, don’t hesitate to contact us via the Wikitude forum, we have a broad network of developers who can help you in creating the next big AR app!

 

About Andreas Hauser

Andreas studied applied computer science in Salzburg, Austria. After several instructive years at Sony DADC he joined Mobilizy/Wikitude in the very first days. He is now Head of the Android Development. He loves snowboarding and being challenged as a handball goal-keeper.

View all posts by Andreas Hauser

19 Responses
  1. Eunho Hwang says:

    AR.GeoObjects is not included to wikitude-unity-sdk
    AR.GeoObjects is include to Javascript api

    How to use location based AR in unity3d?
    Please reply.

  2. Paula says:

    Hi everyone!
    Thanks for the interest.

    Currently GEO AR is not available in Unity.
    This is currently in our feature request list, however we can’t provide any timeline to when it will be released.

    You can work alternatively with our JS API which includes GEO AR.

    Best regards,
    Paula

  3. aliSa says:

    hi,
    is it possible to have something like this indoors(when the floor plan is known)…if yes what should be used instead of GEO AR.Thanks:)

  4. Liubov says:

    Hi. I’m trying to make a simple AR geo-location demo for my research, the idea is the same as London Street Museum – I have an old image of the temple, and I want this picture to be shown on specific geo-location. What I have now is the old image itself, exactly latitude (as shown on previous video), but I’m stuck with the software. Could you, please, provides me some best solutions for develop my demo? At the moment I download the Wikitude app, open studio.wikitude.com and trying to make a project, but there is no geo-location options at all. Thank you for help!

  5. Rafa says:

    Hi, i’m trying to make something like this, but when i place some model in a fixed location (in front of me, but fixed, not relative to me), but i can’t never reach this place, the model always moves with me, and i understand how this is possible, if it’s a 3d model, on a fixed geolocation.

    Can you help me?

    var World = {
    loaded: false,

    init: function initFn() {

    this.createOverlays();
    },

    createOverlays: function createOverlaysFn() {

    var markerLoaded = false;

    function locationChanged (lat, long, alt, acc) {

    if (!markerLoaded){

    var office = new AR.GeoLocation(39.47168957409573, -0.379188711276201, 16.08205032348633);

    var batmanModel = new AR.Model(“assets/batman.wt3”, {
    scale: {
    x: 1,
    y: 1,
    z: 1
    },
    rotate: {
    roll: 0,
    tilt: 0,
    heading: 0
    },
    translate: {
    x: 0,
    y: 0,
    z: 0
    }
    });

    var indicadorResource = new AR.ImageResource(“assets/indi.png”);

    var indicador = new AR.ImageDrawable(indicadorResource, 2.5, {
    enabled: true,
    verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP
    });

    var batmanObject = new AR.GeoObject(office, {
    drawables : {
    cam : [batmanModel]
    },
    indicator : indicador
    });

    AR.logger.debug(“Batman added”);

    markerLoaded = true;
    }

    AR.logger.debug(“Lat: ” + lat);
    AR.logger.debug(“Long: ” + long);
    AR.logger.debug(“Alt: ” + alt);
    AR.logger.debug(“Acc: ” + acc);
    }

    AR.logger.activateDebugMode();

    AR.context.onLocationChanged = locationChanged;
    }
    };

    World.init();

  6. Jackie Torres says:

    Hi,
    I’m not a programmer, I just know some basic concpets and terminology. Is it possible for someone who doesn’t have programming skills to recreate something similar to Pokemon Go, but a single-user version?
    Thanks!

  7. Ryan Owen says:

    This is a great article. Any suggestions on how to overlay a gamification element to take your example to the next level – in other words, if I wanted to make the AR even more like Pokemon Go where you throw balls at the characters to ‘capture’ them?

  8. Ioana Nania says:

    Hi Jackie,

    What we can suggest is to use our Wikitude Studio Editor for some very user friendly augmentations. However, for recreating a Pokemon Go style app some programming skills might be necessary.

  9. Amy says:

    Why don’t you make an app that lets people build these games for their own use? Organizations would pay a lot of money for this!

  10. Ioana Nania says:

    Hello, Amy
    Wikitude moved away from being an App company a long time ago because we want to focus our resources on developing the best Augmented Reality SDK for companies to build their own AR apps and games.
    Thanks for reading the blog!