Love Pokémon Go? Create your own AR app in Monaca with Wikitude

Recently, Pokémon Go became very popular all over the world. Pokémon Go is using Augmented Reality principles by using smartphone’s camera to recognize objects and draw 3D objects in real-time.

Similarly, if you want to create an AR application in Monaca, Wikitude enables you to do so. It includes GPS location and image recognition through AR contents.

We will show you how to use Wikitude in Monaca app here.

Install plugin

First, install the Wikitude Cordova plugin by downloading the zip file and upload it to Monaca console. Please note that Cordova version 6.2.0-beta is required.

config.xml

Browse for file config.xml in project’s root directory and configure SDK version. Without proper configuration, Android would not build successfully.

Wikitude Plugin

Next, open plugins/com.wikitude.phonegap.WikitudePlugin/www/WikitudePlugin.js file and look for the following:

var WikitudePlugin = function() {
    :
    this._sdkKey = "YOUR LICENSE HERE";

All you need to do is determine your license here. Trial license could be retrieved from Wikitude page.

Then, look for the following lines:

var wikitudePlugin = new WikitudePlugin();
window.wikitudePlugin = wikitudePlugin; // line to be added
module.exports = wikitudePlugin;

create js/index.js

First, initialize AR section as following:

This is the most important section

In above example, callback has not been set. This only demonstrates loading from file www/ar.html and then enable 2d_tracking in order to use image recognition.

create www/ar.html

Next, create www/ar.html file as shown below.

ar.html

You can find ade.js, a very simple library using AR object, here.

create js/ar.js

Next step, create js/ar.js file to process AR.

ar.js

To process the content, determine imageOne.png as image recognition and draw 3D object (magazine.wtc). In actual, offsetX is viewed as -0.15 which is a shown a little bit on the left.

Please refer here for AR content (sample included). For independent AR content, Using Target Manager to create AR Content enables you to create AR easily in web browser.

Create a www folder under assets directory and upload your AR contents there. Refer to css file here.

Build

Now you can start building your own application. Because Wikitude plugin has been used, you need to build it as application to run your app.

Testing

After having your app built, you can start it and AR will be shown immediately. Refer to this PDF file when you move around your camera to the surfer in the picture, the AR content will be displayed.

AR application could be easily created using Wikitude plugin. Since normal image recognition is also possible, poster, magazine, notebook can also be used widely. Without a doubt, geolocation-based AR content like Pokémon GO could also be displayed easily.

Give it a try with Monaca!