This tutorial will show you how to create an augmented reality – fire effect using Vuforia and Unity.
This tutorial covers the configuration and setup of Vuforia in Unity, creating an image target database and adding image targets, creating a fire particle effect, adding the fire effect to the image target, and finally exporting the application to an Android phone.
View the entire tutorial on Youtube
Download the 8 Puzzle Unlimited App from Google Play.
Step 1. Register an account with Vuforia
Open your favourite browser and visit https://developer.vuforia.com/. If you already have an account, then log in to your vuforia account. Otherwise, click on Register.
Once you have registered by verifying your email address, log in to your vuforia account.
Step 2. Get a development key
Click on License Manager followed by Get Development Key. Type in the name of your application key.
This will allow you to get a license key for creating the Vuforia application. The image below shows the key generated for this tutorial application. You will get your own key with your credentials. We will need this later when we create the application.
Step 3: Create the image tracker database and add image trackers
Click on Target Manager and then on Add Database. Give a name (name should not contain spaces or any special characters).
For this tutorial, I have named the database TEST_FIRE.
Now select the database and click on Add Target, browse to the folder where your target image is and select the image. For this tutorial, I am using the following as the target image.
You will see the new Database called TEST_FIRE added into your Target Manager.
Now select the TEST_FIRE Database by clicking on it and then click on Add Target. Browse to the folder where your target image is and select the image.
For this worksheet, I am using the following as the target image. You can use any other card or an image from a book.
Enter the width of your target in scene units. The size of the target should be on the same scale as your augmented virtual content. The target’s height will be calculated when you upload your image.
Step 4. Download the database to your local computer
Click on Download Database (All).
Select Unity Editor and click Download. This will download a Unity package for the database.
For our tutorial, it is TEST_FIRE.unitypackage
Step 5. Create a Unity Project
Open Unity Hub and create a new Unity 3D project.
Step 6. Install the Vuforia Engine AR package.
Click on Add to My Assets. Now to Unity Editor -> Window -> Package Manager. Please select from dropdown Packages: My Assets. Click Download and Import.
You can also install the latest version of the Vuforia Unity package from the Vuforia site.
Step 7. Remove default camera and add Vuforia AR Camera
Select the MainCamera and delete. Now, go to GameObject -> Vuforia Engine -> AR Camera to add the Vuforia AR Camera.
Go to Window -> Vuforia Configuration to open the Vuforia Configuration window in Unity.
Now go to your Vuforia in the web browser, select the License Manager, select the application and copy the License Key.
Paste in the App LiceGo to your Vuforia in the web browser, select the License Manager, select the application and copy the License Key.
Paste in the App License Key field in the Vuforia Configuration window.
Step 8. Add Image target
Click on GameObject -> Vuforia Engine -> Image Target.
Before you configure the target, import the database package that you downloaded from Vuforia in Step 4.
Once, imported head on to select the image for the image target from the Database. To do this, select ImageTarget from the Hierarchy. Go to the inspector and choose From Database in the Type dropdown.
Select the correct Database from the dropdown. Your Database will not appear if you have not imported the Database into your Unity project.
After selecting the database, select the desired image in the Image Target dropdown.
Now you are all set to have your first augmented reality application using Vuforia and Unity. Before proceeding with the Fire effect, add a simple cube with the ImageTarget as the parent and test out whether the application can detect the image correctly.
Save the scene. If you have a webcam, you can now test your application by running in the Unity Player. Alternately, you can deploy to your iOS or Android phone. For this tutorial, I will deploy the application to an Android phone.
Go to File -> Build Settings.
Select Player Settings and change the name of the Company
There is no need to change any other parameters at this stage. Save and click on Switch Platform. Once you have switched the platform, you can connect your Android phone to your computer through a USB cable (make sure you have enabled developer options in your phone). Remove the default scene from Vuforia and add the Sample Scene.
Give the apk filename.
The apk should be built and deployed to your phone.
Step 9. Create the Fire Effect
Once we have successfully tested our augmented reality app with an image target and a cube, we proceed on to creating the fire effect.
I will demonstrate a simple fire effect based on the Unity particle system
See this tutorial to create the fire effect in Unity using unity’s particle system.
Now, we replace the Cube game object (a child of the AR Camera) with this Fire particle system.
You may also see the video below to create the fire effect.
Step 10. Enable camera to be on continuous autofocus mode.
Sometimes, you might face the issue of seeing a blurry video in your Vuforia app, eventually leading to not recognizing the target image. This is because the app’s camera is not able to focus. We will write the following script and set it to the AR Camera game object to overcome this problem. To do this, select the AR Camera game object, Add Component -> New Script. Give the name as AutoFocusCamera.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Vuforia;
public class AutoFocus : MonoBehaviour
{
private bool m_vuforiaStarted = false;
// Start is called before the first frame update
void Start()
{
VuforiaARController vuforia = VuforiaARController.Instance;
if(vuforia != null)
{
vuforia.RegisterVuforiaStartedCallback(InitCameraAutoFocus);
}
}
private void InitCameraAutoFocus()
{
m_vuforiaStarted = true;
SetAutoFocus();
}
private void SetAutoFocus()
{
if(CameraDevice.Instance.SetFocusMode(CameraDevice.FocusMode.FOCUS_MODE_CONTINUOUSAUTO))
{
Debug.Log("Success in setting camera to autofocus continuously.");
}
else
{
Debug.Log("Failed to set camera to autofocus continuously.");
}
}
private void OnApplicationPause(bool pause)
{
if(!pause)
{
// since app has resumed we will start autofocus.
SetAutoFocus();
}
}
}
Code language: C# (cs)
Build the final app and deploy it to your Android Phone. See the video below on the Augmented Reality – Fire Effect final demo.
Read My Other Tutorials
- Implement a Generic Pathfinder in Unity using C#
- Create a Jigsaw Puzzle Game in Unity
- Generic Finite State Machine Using C#
- Implement Bezier Curve using C# in Unity
- Create a Jigsaw Tile from an Existing Image
- Create a Jigsaw Board from an Existing Image
- Solving 8 puzzle problem using A* star search
- A Configurable Third-Person Camera in Unity
- Player Controls With Finite State Machine Using C# in Unity
- Finite State Machine Using C# Delegates in Unity
- Enemy Behaviour With Finite State Machine Using C# Delegates in Unity
- Augmented Reality – Fire Effect using Vuforia and Unity
- Implementing a Finite State Machine Using C# in Unity
- Solving 8 puzzle problem using A* star search in C++
- What Are C# Delegates And How To Use Them
- How to Generate Mazes Using Depth-First Algorithm
A committed and optimistic professional who brings passion and enthusiasm to help motivate, guide and mentor young students into their transition to the Industry and reshape their careers for a fulfilling future. The past is something that you cannot undo. The future is something that you can build.
I enjoy coding, developing games and writing tutorials. Visit my GitHub to see the projects I am working on right now.
Educator | Developer | Mentor