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.

Image for post
Image for post

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:

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

Then, look for the following lines:

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.

Image for post
Image for post

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!

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store