--- title: "Random Image Generator with AR Face Tracking" content_type: tutorial url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking?language=en" language: en difficulty: intermediate duration_minutes: 45 unity_version: - "2020.2" - "2020.1" - "2019.4" - "2019.3" - "2019.2" - "2019.1" - "2018.4" - "2018.3" - "2018.2" - "2018.1" - "2017.4" - "2017.3" - "2017.2" - "2017.1" - "5.x" - "4.x" supported_unity_versions: - name: "2020.2" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2020.2" - name: "2020.1" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2020.1" - name: "2019.4" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2019.4" - name: "2019.3" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2019.3" - name: "2019.2" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2019.2" - name: "2019.1" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2019.1" - name: "2018.4" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2018.4" - name: "2018.3" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2018.3" - name: "2018.2" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2018.2" - name: "2018.1" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2018.1" - name: "2017.4" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2017.4" - name: "2017.3" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2017.3" - name: "2017.2" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2017.2" - name: "2017.1" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=2017.1" - name: "5.x" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=5.x" - name: "4.x" url: "https://learn.unity.com/tutorial/random-image-generator-with-ar-face-tracking.md?language=en&version=4.x" last_updated: "2026-08-04T14:23:02.000Z" --- # Random Image Generator with AR Face Tracking Use AR Face Tracking and beginner scripting concepts to build a game that selects a random image above a person’s head. _If you have no previous experience with coding, we recommend trying out [Beginner Scripting](https://learn.unity.com/project/beginner-gameplay-scripting) first so that you can familiarize yourself with what we’ll be writing. In particular, [Variables and Functions](https://learn.unity.com/tutorial/variables-and-functions), [Start](https://learn.unity.com/tutorial/awake-and-start?uv=2019.3&projectId=5c8920b4edbc2a113b6bc26a&architecture=true) and [Update](https://learn.unity.com/tutorial/update-and-fixedupdate?uv=2019.3&projectId=5c8920b4edbc2a113b6bc26a&architecture=true), and [Arrays](https://learn.unity.com/tutorial/arrays-9o?uv=2019.3&projectId=5c8920b4edbc2a113b6bc26a&architecture=true) are all very helpful. [If Statements](https://learn.unity.com/tutorial/if-statements?uv=2019.3&projectId=5c8920b4edbc2a113b6bc26a&architecture=true), [DeltaTime](https://learn.unity.com/tutorial/delta-time?uv=2019.3&projectId=5c8920b4edbc2a113b6bc26a&architecture=true), and [Destroy](https://learn.unity.com/tutorial/destroy-i?uv=2019.3&projectId=5c8920b4edbc2a113b6bc26a&architecture=true) are useful as well._ Now, we’ll try to create a game using AR Face Tracking to select a random image above a person’s head! ## Overview We’ve learned how to use AR Default Face to overlay different textures onto our face - now let’s try making something a little more challenging. To get started with this part of the project, we’ll need to find some images to use and do a little bit of coding to get one of those images to randomly appear above our head. ![](https://connect-mediagw.unity.com/h1/20210202/learn/images/527c9e67-fcdd-4f06-8c77-d03494c41334_Random_Image.PNG) ## Find Images to Generate Now that we’ve learned how to use Face Tracking with the AR Face Manager, we can extend functionality to have it generate random images on our head! First, we’re going to need to find some random images. We’ve provided [images of random tutorials in the Asset Store package](https://assetstore.unity.com/packages/essentials/asset-packs/ar-face-assets-184187) that someone can try, but you can feel free to use whatever images you think are best. We recommend using images with a resolution of 320 x 180 pixels. ![](https://connect-mediagw.unity.com/h1/20210202/learn/images/1e8e465c-c868-4e1f-a557-c3c08e01b19e_20.png) You can add these images into Unity by dragging them from the folder you’ve saved them and dropping directly into Unity! You should make a new folder called **Images** in your Project window, so that it’s easier to stay organized. ![](https://connect-mediagw.unity.com/h1/20210202/learn/images/54285e42-1629-4446-b006-5c6d7c5b3117_21.png) If you’ve imported your own images, you’ll need to make sure that they’re set up to be used in Unity. Select an image from the Project window and in the Inspector make sure to set the **Texture Type** to **Sprite (2D and UI)**. You can optionally set **Pixels Per Unit** to **1000** so that your images have better quality. Make sure to click **Apply** at the bottom of the window once you’re finished. ![](https://connect-mediagw.unity.com/h1/20210202/learn/images/75c21d3c-70c3-4dae-87e2-e0c8c6a1087a_22.png) Drag one of the images into the scene to create a new Game Object with a **sprite renderer**, and rename the object “Image” ![](https://connect-mediagw.unity.com/h1/20210202/learn/images/97c10b71-63c6-4c7a-8282-a0f0310aad7d_23.png) Create an empty game object in the scene by right clicking in the Hierarchy and selecting **Create Empty.** Rename it to “**Image Randomizer.**” Set the **Image** object as a child of the **Image** **Randomizer** object by dragging the Image object and dropping it on the Image Randomizer object. You can see that it worked when **Image Randomizer** has a dropdown arrow next to it, with the **Image** object indented underneath. ![](https://connect-mediagw.unity.com/h1/20210202/learn/images/875575d0-477d-450e-b5ec-4ce693913bdd_24.png) Select the Image in the Hierarchy, so that its information is in the Inspector. Look at the **Transform** component and change the **Position to X:0 Y:0.25 Z:0**, so that the image appears above your head. ![](https://connect-mediagw.unity.com/h1/20210202/learn/images/5fea5590-f21e-49f9-ab2b-2a39c2dc539b_25.png) ## Code an Image Generator To actually select a random image for our game, we’ll need to do some coding to make that image be selected. In your Project window, create a new folder called Scripts by right clicking **Create > Folder**. Make sure to name that folder Scripts. In the **Scripts** folder, create a new **C# script** called **ImageRandomizer** by right clicking on the Project window **Create > C# Script**, and then double click on the new script to open it. ![](https://connect-mediagw.unity.com/h1/20210202/learn/images/c1e1ae75-19cd-42e7-b374-df1e1139ebe6_26.png) First, we’ll need some public variables to 1) keep track of how we’ll show our images using our SpriteRenderer, 2) decide which images we want to show in an array, and 3) control how much time our images will show and how long before an image is chosen. ```csharp public SpriteRenderer randomSpriteRenderer; //The sprite renderer that will display the random image public Sprite[] randomSprites; //An Array of sprites that will be used for the image randomization public float timeBetweenChange = 0.2f; //The amount of time between switching the image public float timeUntilStopping = 3.0f; //The total amount of time until randomization stops ``` `Next, we’ll need some private variables to keep track of which image we’re currently showing and how much time until the image changes.` ```csharp private int RandomImageIndex = 0; //Keep track of which image we're currently displaying private float ImageChangeTimer; //How much time is left until we switch to new image ``` In the **Start()** method, let’s make sure to set our timer variable, so that we can start keeping track of time elapsed. ```csharp void Start() { // Set this timer variable as soon as the script starts so it's ready for the update function ImageChangeTimer = timeBetweenChange; } ``` In **Update()**, we’ll first need to keep track of elapsing time using Time.deltaTime. Then, we’ll use an **If statement** to know that if we’ve run out of time, we will show the final image. We’ll also use another **If statement** to keep track of our image change timer, so once that timer expires, it will show a new image. ```csharp void Update() { // Remove delta time from both active timers. This subtracts a small amount of time from the // overall time we described in "timeBetweenChange" and "timeUntilStopping" ImageChangeTimer -= Time.deltaTime; timeUntilStopping -= Time.deltaTime; // If we've fully run out of time we need to select a final random image if(timeUntilStopping <= 0.0f) { // The final image will be selected at random randomSpriteRenderer.sprite = randomSprites[Random.Range(0, randomSprites.Length)]; // Destroy this script immediately stopping it from running anymore in the future DestroyImmediate(this); // Return so no other code runs in this Update function call return; } // If RandomizationTimer is less than or equal to zero it's time for a new image if(ImageChangeTimer <= 0.0f) { // To ensure we see all the images we increase the RandomImageIndex to see the next // image in the array RandomImageIndex++; // If our index has gone past the end of the array, reset it to zero so the cycle // can start again if(RandomImageIndex >= randomSprites.Length) { RandomImageIndex = 0; } //Assign the new sprite to the sprite renderer randomSpriteRenderer.sprite = randomSprites[RandomImageIndex]; //Reset the "RandomizationTimer" to start counting down again ImageChangeTimer = timeBetweenChange; } } ``` Once you’ve added these lines of code, make sure to save your code using CTRL + S on Windows or CMD + S on Mac. ## Finish Setting Up the Image Generator Now that we’ve coded our Random Image Generator, we just need to set it up. In Unity, select the “Image Randomizer” Game Object and add the Image Randomizer script by selecting the Add Component Button. Search for and select the Image Randomizer script. ![](https://connect-mediagw.unity.com/h1/20210202/learn/images/091bf74a-581f-49da-a938-05f10bb2b063_27.png) Set up the Random Sprite Renderer by dragging and dropping the **Image** child object in the Hierarchy onto the **Random Sprite Renderer variable slot**. **Set each random image** you imported into the **Random Sprites array**. **Change the size** to the number of images you’ve added and drag and drop your images into each **Element** slot. ![](https://connect-mediagw.unity.com/h1/20210202/learn/images/2baf7bdf-ad3b-4b6c-890f-6ba57f81d772_28.png) Tweak **Time Between Change** and **Time Until Decision** to your liking if you want images to be shown longer and take a longer time to show the final result. Once you’ve set all the values, drag the entire **Image Randomizer game object** into the Prefabs folder to create a new Prefab. You can then delete the original game object in the scene. ![](https://connect-mediagw.unity.com/h1/20210202/learn/images/935d07b5-9746-4bc6-9464-72cacc178ed5_29.png) You can then set the Image Randomizer Prefab as the new Face Manager Prefab, so that images will start appearing above your head. Build and run the application to test and see the random images being selected. ![](https://connect-mediagw.unity.com/h1/20210202/learn/images/d06ebb7b-47aa-432d-aea0-9fafc37d2f68_Random_Image.PNG)