Recently, as part of our consultation project, the requirements are to vizualise sound wave reflection off a wall. It is required that the AR does not use markers so we used ground plane tracking. This is the outcome. By using the mic on mobile devices, students can record their own voice, the voice will be transmitted to the wall and reflected back. The students then can hear the echos of their own voices.
Tag: Vuforia
Simpler Way To Play Animation for Vuforia (2021 Update)
Okay, you want to play an animation, then nooooooo………..the model has more than one animation, so what do you do? Do you go through the process and create transitions, add parameters and do all of that? No you don’t need to actually. This is a handy tool for doing things fast. Here is the download link, and also as usual the explanation part of it, coz what use is things that you don’t understand or learn from?
How to use
- Add the Animation Player script to your model, it will give you the names of the animation clip

2. Call PlayAnimation using Vuforia Default Trackable Event Handler or Button

3. Type in the name of the animation you want to play in the slot. Done! When your ImageTarget is detected, the animation will play.

The Editor Code
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
[CustomEditor(typeof(AnimationPlayer))]
public class AnimationPlayerEditor : Editor
{
AnimationPlayer myTarget;
UnityEditor.Animations.ChildAnimatorState[] states;
public override void OnInspectorGUI()
{
// Assign the script to this inspector so that we can play with its properties
myTarget = (AnimationPlayer)target;
// create the menu and add items to it
GenericMenu menu = new GenericMenu();
GetAnimatorStates();
GUILayout.Label("Animation State Name From Model:");
foreach(UnityEditor.Animations.ChildAnimatorState b in states)
{
GUILayout.Label(b.state.name);
}
}
void GetAnimatorStates()
{
// Get a reference to the Animator Controller:
UnityEditor.Animations.AnimatorController animatorController = myTarget.GetTargetAnimator().runtimeAnimatorController as UnityEditor.Animations.AnimatorController;
// States on layer 0:
UnityEditor.Animations.AnimatorStateMachine stateMachine = animatorController.layers[0].stateMachine;
states = stateMachine.states;
}
}
The Script (called AnimationPlayer)
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class AnimationPlayer : MonoBehaviour
{
Animator animator;
// Start is called before the first frame update
void Start()
{
animator = gameObject.GetComponent<Animator>();
}
// Update is called once per frame
void Update()
{
}
public Animator GetTargetAnimator()
{
if(animator == null)
{
animator = gameObject.GetComponent<Animator>();
return animator;
}
else
{
return animator;
}
}
public void PlayAnimation(string animationName)
{
if(animationName != "")
{
animator.StopPlayback();
animator.Play(animationName);
}
}
}
The Explanation
This script has two parts. The first part is the editor extension. The reason we need the editor extension is to access the Animator’s Editor properties in order for us to extract the animation state names. This information is only available through UnityEditor.Animations.AnimatorController.
The second part is the script itself. We need this script to be two things, one is to become the interface that our editor script will rely on to get the reference to the Animator. The second function is for us to ask the animator to play our animation of choice.
Adding More Image Targets to Your Vuforia AR
This time I decided to tackle this topic fast and head on in 2nd tutorial because that is the most common questions that I usually receive. Also will be in the works soon are advanced and mid-level projects
Getting Yourself Started with Vuforia with Unity 2019 above (2020 updates)
So, why is this sudden post? Err well, if you install the latest versions of Unity, you will notice that setting up Vuforia will be a little bit different. We will need to use Unity’s Package Manager. So to update this new knowledge, here’s the new tutorial for how to get started with Vuforia. From now on, I will be trying to use Camtasia Studio this time to easily explain things. Leave your comments on how you like it, and how I can improve
Vuforia: Putting 2D Image on your Image Target
In order to complete this tutorial, you need:
- An Image, you can download one at www.pixabay.com
- You need to have completed the previous tutorial on Vuforia Basics
From the previous tutorial, we have added boxes to our image target.
Now lets import the image we needed to Unity, Drag and Drop the image you needed to the Assets window.

Next, lets right click one of the Image Targets we already have. Under 3D Obeject, select Plane

A Huge plane will appear. Don’t worry, we will resize this once done. But for now drag and drop the image we imported to the plane.

The plane will now have the image we imported. It will look something like this

Resize, rotate and move the plane as needed until it fit on your Image Target.

We no longer need the Cube. So let’s delete the cube. You will get something like this:

We are done! So lets press Play and test it out. You should now have an image and

Vuforia Basics + Creating a multiple image target Android AR 2/2
Setting up Vuforia in Unity
In the File menu, click Build Settings

The Build Settings window appears. Click Player Settings

Player Settings window appears. Under XR Settings, select Vuforia Augmented Reality

Right Click on the Hierarchy window. Under Vuforia Engine click AR Camera

A Import Vuforia Engine Assets appears. Click Import

AR Camera will be added to Hieararchy

While AR Camera is selected, in the Inspector window select Open Vuforia Engine configuration

Vuforia Configuration appears

Login to your Vuforia Developer Portal. Under License Manager, click on the app we created in the previous tutorial

Click the license key to copy it

Paste the copied license key to the License Key slot in Vuforia Configuration

Importing our downloaded Database
Double click the database we downloaded

Import Unity Package window appears. Click Import

———————- Repeat for each Image Target start here ———————–
Creating our Image Target
Adding an Image Target
Right Click on the Hierarchy window. Under Vuforia Engine click Image

The Image Target and its preview appears

Select the image for the Image Target
Next, we will learn to select image for the Image Target. Click the ImageTarget

With the Image Target selected, in the Inspector window, click the Image Target and choose your wanted image.

Adding a Cube so that we can test the target
With the Image Target still selected, Right Click on the Image Target, Under 3D Object click Cube

Resize and Move the Cube so that it is on top of the Image Target’s preview. It should look something like this now

Select your Image Target, and Move your Image Target to the side a little bit. This will help later when we have more Image Target, so that it does not overlap each other. You will see later on when you have multiple Image Targets.

Test the Image Target
Press Play and show your image to the camera. It should work now and you will see your cube appears on top of your image.

Repeat this for all your image targets
———————- Repeat for each Image Target ends here ———————–
How it looks like once done
You will now have something like this

Enabling multiple Image Target tracking simultaneously
Select AR Camera

While AR Camera is selected, in the Inspector window select Open Vuforia Engine configuration ‘

In Vuforia Configuration, change the Max Simultaneous Tracked Images to whatever number you need. For an example, I changed it to 3

Final Test – Lets allow see them all together
Press Play and you will see that multiple Image Targets work now.

Thanks for following my tutorial. Do follow my blog and comment below if you have anything to ask or add.
How To Install Unity with Mobile (iOS and Android) Build Support and Vuforia
Download and install Unity Hub
Go to unity3d.com/get-unit/download
You will see two options. One is to install Unity only, second is to use Unity Hub. Download and install Unity Hub

Why Unity Hub?
Unity Hub allows you to manage and install addons and plugins easier. It will also help maintain multple versions of Unity. Why? Later on in your development life you will realise that unfortunately different people uses different versions of Unity for development. With the hub you can install their versions too, and access their project without screwing up your own project that uses your version of Unity
Installing the latest Unity in Unity Hub
Start up Unity Hub, you will see something like this. Press Add

Add Unity Version window appears, select the latest release of Unity and click Next

You will be asked which components to install. Scroll down and select Vuforia Augmented Reality Support

Then, make sure the options other options shown below are selected. Then, click Next

Unity will begin downloading and installing. Once done, it will look like this picture below.

That’s all on how to install Unity for Mobile Development with Vuforia Support
Vuforia: Playing Sound when image detected and stop sound when image lost. The simplest way (2021 Updated)
Prerequisite
- A sound, you can find some free sounds from here http://soundbible.com/
Lets Start!
Drag and Drop the sound to your ImageTarget

Playing sound on Image Detected
While your ImageTarget is selected, on the Inspector window drag and drop AudioSource to the On Target Found() Object slot

Click the function selector and select AudioSource > Play()

Stopping sound on image lost
While your ImageTarget is selected, on the Inspector window drag and drop AudioSource to the On Target Lost() Object slot

Click the function selector and select AudioSource > Stop()

Final check
Default Trackable Event Handler should now look like this

Done, lets test it!
When image is detected, you sound will play and when image is lost, the sound will stop.

I have multiple Image Targets and sound to implement. How?
Its okay you now know all you need to know to do this. All you have to do is repeat these steps from “Let’s Start” to the end for each of your Image Target.
That’s all, happy creating
Simpler Vuforia Event Handling using Unity Events
Edit 2021 Update:
Notice, this codes are no longer needed as Vuforia has provided their own Unity Events Handler. So If you are using the latest Vuforia, it comes built in. It looks like the picture below and it works exactly the same as the one I wrote here.

This post below is still kept as there are people still struggling to update their old projects, so this is for you guys/gals in University, hope you can update soon!
Do you ever wish that Vuforia event handling is as simple as using the OnClick() property in Unity UI’s Button? Wish no more bros and sis. Here the code, and explanation on how I did it.
The Code
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using Vuforia;
public class EasyEventHandler : MonoBehaviour, ITrackableEventHandler
{
public UnityEvent onMarkerFound;
public UnityEvent onMarkerLost;
protected TrackableBehaviour mTrackableBehaviour;
protected TrackableBehaviour.Status m_PreviousStatus;
protected TrackableBehaviour.Status m_NewStatus;
protected virtual void Start()
{
mTrackableBehaviour = GetComponent<TrackableBehaviour>();
if (mTrackableBehaviour)
mTrackableBehaviour.RegisterTrackableEventHandler(this);
}
protected virtual void OnDestroy()
{
if (mTrackableBehaviour)
mTrackableBehaviour.UnregisterTrackableEventHandler(this);
}
public void OnTrackableStateChanged(
TrackableBehaviour.Status previousStatus,
TrackableBehaviour.Status newStatus)
{
m_PreviousStatus = previousStatus;
m_NewStatus = newStatus;
if (newStatus == TrackableBehaviour.Status.DETECTED ||
newStatus == TrackableBehaviour.Status.TRACKED ||
newStatus == TrackableBehaviour.Status.EXTENDED_TRACKED)
{
onMarkerFound.Invoke();
}
else if (previousStatus == TrackableBehaviour.Status.TRACKED &&
newStatus == TrackableBehaviour.Status.NO_POSE)
{
onMarkerLost.Invoke();
}
else
{
// For combo of previousStatus=UNKNOWN + newStatus=UNKNOWN|NOT_FOUND
// Vuforia is starting, but tracking has not been lost or found yet
// Call OnTrackingLost() to hide the augmentations
onMarkerLost.Invoke();
}
}
}
How it looks like

Explanation
Creating the Unity Events and Exposing it in Inspector
This code uses the UnityEngine.Events . Firstly, I create two UnityEvents variable, and make the variables public, doing this I get to expose the events, giving you that familiar On Click () thingy in Unity UI Button.
public UnityEvent onMarkerFound;
public UnityEvent onMarkerLost;
Invoking the Events when marker is detected and lost
Then, OnTrackableStateChanged, if the Image Target is detected, I use the UnityEvent’s Invoke() function to Invoke the event, this will then work just like the On Click ()
