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

  1. 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;

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();

        GUILayout.Label("Animation State Name From Model:");

        foreach(UnityEditor.Animations.ChildAnimatorState b in states)


    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;
            return animator;

    public void PlayAnimation(string animationName)
        if(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.

From SkecthFab 3D Model to Unity + Vuforia

One of the complaints that I usually get from people that want to create contents but unable to do so is “I do not know how to create 3d models”.

Here is my proposed solution, you can use 3D Models from SketchFab for your Unity + Vuforia AR. In this video I have made, you will learn to import Animated SketchFab 3D models straight into Unity for use with your Vuforia AR. This tutorial will work with most models that has simple animations. If you want to import a model with multiple animations, you need a different method

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:

  1. An Image, you can download one at
  2. 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.

Vuforia Basics + Creating a multiple image target Android AR 1/2


  1. A Vuforia Developer account. Register here
  2. A few images. You can download some from
  3. Unity with Mobile Development and Vuforia installed. Here’s how to install it

Adding Image Targets to Vuforia Developer Portal

Login to Vuforia Developer Portal

Create a development key for your app

You only need one development key for one app. Regardless how many markers you will use inside the app.

Click Get Development Key

Type in the name of your app, agree with the terms and condition, and press Confirm

Done on this part. Our newly created Development License Key will appear in the License Manager

Create a target database

First, you need to create a target database to store all your Image Targets

Click on Target Manager

The Target Manager appears, click Add Database

A create database window appears. Type in your database name, and make sure the type selected is Device. Click Create.

Our database now appears inside target manager. We are done creating the database.

Accessing the Database

Click on the database name to access it

_______________ Repeat for each image target from here ______________________

Add Image Target to the Database

Our database’s window appears. Click Add Target

Add Target Window appears.

Make sure the Target Type is Single Image

Click Browse, select your image and click Open

Type in 1 as the Width

Press Add

Your Image Target will now appear in the Database.

Now, repeat these steps to Add Image Target to the Database. I have put in a note from where to start repeating the steps till the end.

_______________ Repeat for each image target till here __________________

Once done adding all your images, your database will look something like this.

Downloading the image database

Click Download Database

Download Database window appears. Select Unity Editor and click Download

Wait a while for the database to compile

Once the download is done you will get a .unitypackage file like this

This is the end of Part 1. In Part 2, we will start to setup Unity and Vuforia. See you in the next tutorial.

How To Install Unity with Mobile (iOS and Android) Build Support and Vuforia

Download and install Unity Hub

Go to

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)


  1. A sound, you can find some free sounds from here

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)

        protected virtual void OnDestroy()
            if (mTrackableBehaviour)

        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)
            else if (previousStatus == TrackableBehaviour.Status.TRACKED &&
                     newStatus == TrackableBehaviour.Status.NO_POSE)
            // 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

How it looks like


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 ()

That’s all folks…… enjoy!