Action Range and spooky Sounds in an AR Ionic app with Wikitude

Augmented Reality worlds bring more possibilities than traditional websites. In a previous tutorial, we only triggered actions when the user selected a marker, this a basic interaction: user clicks on something, something else happens.
In this tutorial we will create an ActionRange which will trigger an alarm sound as soon as the user enters an area: our Danger Zone ;).

Some small changes

Let’s start by updating our previous tutorials code:

Only one POI will be used here, once you master your first danger zone, you can add more.
In order to test it quickly, the danger zone will use the user’s current latitude and longitude.

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

Moving on to the Marker Class:

Starting slowly by setting up some new properties.
The animationIncreaseGroup and animationDecreaseGroup will be used to show two animations.
The first one will make the Drawable bigger and the other one smaller. They will be called one after the other to make our danger sign scarier!

Action Range and Danger Sound

When entering the danger zone, an alarm sound will be triggered.
In Wikitude a sound is initialized like this:

At the moment Wikitude has some issues loading a sound from a local file.
Instead of placing our file in our Ionic project, for simplicity and shareability we will use a mp3 hosted on a remote server.

Moving on to the actionRange object:

The actionRange will be positioned using the markerLocation.
The DANGER_RADIUS value is set to five.
When entering those five meters, the alarm will start playing. Passing a negative number to the play method, will create an infinite sound loop.
Finally when exiting the actionRange, the alarm will stop, but only if the sound is playing.

Then we create some traditional Drawables:

At the end of it, the animations are initialized.

Before attacking the animations, a quick detour to the updateDistance method:

We are not testing this method anymore so let’s round the value received from the distanceToUser method and add some text.


Back to the initAnimations method:

Four PropertyAnimations are created, the first two will increase the X and Y sizes of the drawable and the last ones will do the opposite.

Followed by the creation of the AnimationGroups:

animationDecreaseGroup will linearly decrease the size of the Drawable.
Once it’s finished, it will trigger the other AnimationGroup which will increase its size again.

Which is as follow:

After both AnimationGroups are created, the animationIncreaseGroup can start its animations.
Here is the result (minus the sound):

Ionic 3 mobile app development augmented reality wikitude action range

Enter your email address in the box below to get access to this tutorial (and others) source code.


ActionRanges bring more interactions, we can use them with other factors like time, number of people in the area, weather, whatever comes to our mind.
Playing a sound from a remote file is easy, however using a local file requires some other tricks.
Finally we used two AnimationGroups to create an infinite loop. 3D models can be created embedded animations using softwares like 3ds Max or SketchUp, however in this case it was faster and more interesting to create those animations by hand.

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *