July 28, 2016

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

Update: Scene recognition, Extended Object Tracking, Instant Targets and more: Track the world with SDK 8

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 (and counting!). 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.

AR.context.onLocationChanged = function(lat, lon, alt, accuracy){
// store user's location so you have access to it at any time
World.userLocation = {"latitude": lat, "longitude" : lon, "altitude" : alt };
};

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.

createModelAtLocation: function (location) {

World.modelGeoLocation = new AR.GeoLocation(	location.latitude, 
location.longitude + 0.0005, 
AR.CONST.UNKNOWN_ALTITUDE);	
// load model from relative path or url
World.model = new AR.Model(World.PATH_MODEL_WT3, {
// fired when 3D model loaded successfully
onLoaded: function() {

// define model as geoObject
	World.GeoObject = new AR.GeoObject(World.modelGeoLocation, {
		drawables: {
			cam: [World.model]
		},
		onEnterFieldOfVision: function() {
			console.log('model visible');
			World.modelVisible = true;
},
onExitFieldOfVision: function() {
			console.log('model no longer visible');
World.modelVisible = false;
},
		onClick: function() {
			console.log('model clicked');
}}
);
},
onError: function(err) {
console.error(‘unexpected error occurred ’ + err);
}
});
}

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.

If you are looking to build collaborative augmented reality games based on other technologies, check out our Scene Recognition and Instant targets.

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!





Interested in creating an AR project of your own?
Talk to one of our specialists and learn how to get started.

Contact The Wikitude Team


Questions, comments? Let us know!

If you have questions, suggestions or feedback on this, please don’t hesitate to reach out to us via Facebook, Twitter or send us an email at hello@wikitude.com!

Contact us
Share

More Blog Posts

October 31, 2019

Halloween Special: The Dark Side of Augmented Reality

October 4, 2019

Mehr Aufmerksamkeit für Museen mit Augmented Reality aus Salzburg

Subscribe to our Newsletter

Stay up to date with the latest Wikitude news.

Subscribe now

September 25, 2019

Wikitude SDK 8.9: support for iOS 13 and Android 10

September 18, 2019

Augmented Reality Experiences for Museums: Three Success Stories

September 6, 2019

Back To School: Get Started With Augmented Reality NOW!

August 22, 2019

Geo AR: Location-based Augmented Reality Use Cases and How-to