UFO project overview

Explore the Unity project

Begin the AR port

Selecting an orientation for your AR game

Enable the play area

Develop the AR UFO movement

Develop the AR UFO abduction action

Other AR considerations

Design your own AR app

In this Mission, you’ll port an existing desktop game to mobile and redesign it to be a fully functioning (and fun!) AR experience.

Research future AR use cases to prepare for developing new kinds of applications

Evaluate platform capabilities and limitations in order to determine whether or not a given feature will work

Absolute Beginner AR Design

Absolute Beginner AR Development

Optimize assets and application to meet mobile performance standards

Beginner Mobile Optimization

Create basic application interactions with Visual Scripting

Absolute Beginner Visual Scripting

In this learning experience, you’ll port an existing desktop game to mobile and redesign it to be a fully functioning (and fun!) AR experience. You’ll conduct research, create a design document, modify visual scripts, and regularly playtest your app. At the conclusion of this project, you’ll also design and create your own fully realized AR application.

AR experience design

Mobile AR Development

Mobile AR Development - Unity Learn

Ready to create AR experiences? In this learning pathway, you’ll develop AR apps compatible with iOS and Android devices!

Evaluate platform capabilities and limitations in order to determine whether or not a given feature will work.

Develop AR experiences that use trackable targets in the environment

Welcome to AR Development! In this learning Pathway, you'll create Augmented Reality (AR) applications that are compatible with iOS and Android devices. You’ll use Visual Scripting and Unity’s AR tools to develop a wide variety of engaging AR experiences. This pathway assumes a basic knowledge of Unity.

Welcome to AR Development

test

Configure your AR development environment

Deploy your project to iOS or Android

Welcome to AR Development Quiz

Get ready for AR development: explore the field, hear from experts, install essential software, set up a Unity project, and deploy a test project to your mobile device.

In these tutorials, you'll get ready for AR development. First, you'll learn about the field of AR and hear from established creators in the AR industry. Next, you'll download all required software to get started and configure a Unity project for AR development. Finally, you'll deploy a test project to your mobile device to make sure everything is working as it should.

Get started with AR

Set up a face tracking project

Add a face texture

Add accessories to your filter

Add animations to your filter

Add particle effects to your filter

Add post-processing to your filter

Submission: Ice cream company filter

Learn how to create a custom face filter app with fun textures, 3D models, particles, and effects. In the challenge, design a themed filter for an ice cream company.

In this mission you'll create your own custom face filter app that includes a wide variety of digital content. The face filter will include interesting textures, animated 3D models, dynamic particles, and post-processing effects. You'll also complete a challenge where you design a custom filter for an ice cream shop.

Create a basic face filter

Build a new scene with glasses

Set up the UI

Create a visual script to detect a button press

Turn on the glasses with buttons

Update your graph to switch between glasses

Configure one color button

Complete the color switching functionality

Save and load the glasses

Submission: Ocean-themed face filter

Create with AR: Face Filters Quiz

Expand on what you’ve learned with filters that add interactive elements. You’ll create an app for customizing and trying on glasses, then an ocean-themed face filter.

Now that you’ve created a basic face filter, you’re ready to develop your skills and work on a filter that involves interactivity. In this project, you will create your own interactive app that allows a user to select, customize, and visualize different pairs of glasses on their face.You will also complete a challenge where you design an interactive underwater scuba filter for an aquarium.

Create an interactive face filter

Create a new project for marker-based AR

Spawn an object on an AR Marker

Add a UI with rotation buttons

Add world space UI to your marker-based app 

Add spatial audio to your marker-based app

Submission: Bring art to life with AR

Add world space UI to your marker-based app

Learn to create marker-based AR apps, which make digital models appear over marker images in the real world. In the challenge, you’ll breathe life into a 2D work of art.

 app is an application that can recognize images (called markers) in the real world and then make content appear in the app. You may have seen applications that use this kind of technology to make AR content for movie posters, product labels, card games, and even business cards.

In this project, you’ll make a marker-based app with a user interface that lets the user control a 3D model, text, and audio.

Create a marker-based AR app

Set up a scene with plane detection

Detect the user’s touch

Detect when the user touches a plane

Instantiate the portal on a plane

Test the frame rate of the portal world

Limit the visibility of the portal world

Submission: AR friend

Create with AR: markers and planes Quiz

Make an app that detects flat surfaces and allows the user to spawn a portal on their floor or wall. Then complete a challenge to create an interactive character app.

In this project, you’ll create an AR app that makes use of plane detection technology. iOS and Android devices have the ability to detect flat surfaces — or planes — in your physical environment. This includes horizontal planes like the floor or a table, and vertical planes like the walls. 

You will create an app where the user will be able to tap on a plane in order to place a portal onto it. This portal will be a window into a virtual 3D environment that the user can peer into and explore. 

You will also complete a challenge where you design an app that allows the user to place a character on a table and interact with it.

Create a plane detection AR app

95d969bf-e1df-4512-882c-49a59eef2264:6ec737e55656

Overview

Choose between a marker or plane detection approach

Create the Gameplay prefab

Set up marker or plane detection

Build and test your changes

Create a new GameStarter script machine

Build the GameStarter visual script

Set the Prefab scale

More things to try

Next steps

Zu-UnityLearn

AR-3.5-02-portal.mp4

AR-3.5-01-fusebox.mp4

INKHUNTER - the best mobile app for trying on virtual tattoos using augmented reality

Angry Birds AR: Isle of Pigs - Launch Trailer

AR-3.5-12-enable-play-area-1-too-big-not-working.mp4

AR-3.5-13-game-manager-bug-in-editor.mp4

AR-3.5-14.5-gameManagerSetActive.mp4

AR-3.5-17-gameplay-bug-resolve.mp4

AR-3.5-18-enable-play-area-2-game-manager-fix.mp4

AR-3.5-19-setlocalscale-demo.mp4

AR-3.5-24-particle-and-sound_1.mp4

AR-3.5-25-instructions-ui_1.mp4

AR-3.5-21-enable-play-area-3-set-scale_1.mp4

You are now ready to begin implementing AR elements into the game. As a first step, you will determine what type of AR instantiation you wish to use, and then implement it in the app.

In this tutorial you will do the following:

Select how you want the AR content to anchor to the real world

Implement AR Foundation components to instantiate AR assets in the app

Build AR projects to mobile devices

A critical element of an engaging AR experience is having the digital content feel anchored to the user's real physical environment. If the digital content is just floating around in space, disconnected from any real world features, there is no need for it to be an AR experience.   

You can anchor your AR content to an image marker, like in the Create a marker-based AR App course.

Or you can anchor your content to a detected plane in the environment, like in the Create a plane detection AR app course.

If you haven’t completed either the marker-based project or the plane detection project, we highly encourage you to do so before moving on.

In this tutorial, you will allow the user to spawn the UFO game’s play area into their physical environment using either a marker or plane detection.

Markers and plane detection both have benefits and drawbacks. A marker can help you ensure that your AR experience will pop up in exactly the same way every single time and can be very useful for situations where the amount of space available for playing or where precision of placement is needed. The Inkhunter app is a good example, where precision is critical, and a flat surface is not necessary.

A plane detection design can be useful in situations where the AR experience benefits from variety, where the amount of space doesn’t matter as much, or where you want your user to have more control over the placement of the interactive app. Angry Birds, Isle of Pigs is a good example, where it’s important that the user can easily play in their living rooms. 

In many cases, one approach may be far better than another. Consider the following questions to help you determine whether you should use a marker or plane detection for your game port: 

Does the game experience require precise positioning in a real world environment? 

Is printing or displaying a marker likely to be a challenge for my users? 

Depending on your priorities, you may also consider that implementing a marker-based approach will require significantly less development work than plane detection.

Once you have decided on the requirements of the game, you are ready to begin implementing this feature into your port project.

To make the game port work on your mobile device, you will need to create a prefab that contains the key gameplay objects. Then, you will be able to spawn that prefab into the scene when either a marker or plane is detected.

Follow these instructions to create a prefab for your gameplay GameObjects: 

When you spawn the farm into your physical environment, you want the play area to be as space-efficient as possible. You most likely just want the farm area without any of the surrounding corn, the giant grassy plane, or skybox. 

2.  In the Hierarchy, delete the Grass Plane, the Skybox, and all of the Cornfield GameObjects (which are child GameObjects of the Farm). You should be left with just the farm area. 

3.  In the Hierarchy, create an empty GameObject and name it “MeshParent”. 

4.  In the Inspector window, find the Transform component.

5.  Select More (⋮) and then select Reset. This process will reset the Transforms of MeshParent, which is very important because any offsets to the position may cause the game environment to spawn in an unexpected location. 

6.  In the Hierarchy, select the Game Canvas, Sheep Group, Farmer, UFO, Farm, and CutsceneUFO GameObjects and make them child GameObjects of the MeshParent GameObject. 

7.  In the Hierarchy, create another empty GameObject and name it “Gameplay”.

8.  Reset the Transform component of the Gameplay GameObject like you did for the MeshParent GameObject.

9.  In the Hierarchy, make MeshParent a child GameObject of Gameplay.

10.  In the Project window, navigate to the Prefabs folder. Click and drag the Gameplay GameObject from the Hierarchy into the Prefabs folder to make it a prefab and then delete the Gameplay GameObject in the Hierarchy to remove it from the scene.

The farm with the Grass Plane, Skybox, and Cornfields removed.

The hierarchy of the Gameplay prefab when completed

The Gameplay group turned into a prefab in the Prefabs folder.

Now that you have created a prefab for the gameplay, you’re ready to spawn that prefab when either a marker or plane is detected in the scene.

Important: The guidance in this step is high-level because you have completed these processes (or similar variations) before. If you need more help, refer back to the relevant project in Create with AR: Markers and Planes. Creating a marker-based experience requires less time to develop than a plane-based experience but will require a marker to work properly. 

Follow these instructions to spawn the Gameplay prefab using markers: 

1.  In the Hierarchy, select the AR Session Origin GameObject and add an AR Tracked Image Manager component to it in the Inspector window.

2.  In the Project window go to Textures > Markers, then create a ReferenceImageLibrary asset inside the Markers folder.

3.  There is already a marker inside the Markers folder for your convenience. If you want, you can create your own marker and import it. The marker needs to be square and a minimum size of 512x512 pixels.  

4.  Add your desired marker image to the ReferenceImageLibrary asset.

5.  In the AR Tracked Image Manager component, assign the ReferenceImageLibrary to the Serialized Library property.

6.  Assign the Gameplay prefab to the Tracked Image Prefab property.

7.  Proceed to the next step to build and test your new feature.

We recommend that you complete the Create a plane detection AR app course before trying to implement plane detection in your project. As a reminder, using plane detection requires considerably more effort than marker recognition, so the following edits may take some time.  

Follow these instructions to spawn the Gameplay prefab on a detected plane: 

1.  Create an AR Default Plane GameObject, create and assign a new semi-transparent material to it, then drag it into the Project window to turn it into a prefab. 

For a reminder of how to create an AR default plane, follow step 6 in the Detect the user’s touch tutorial. For instructions on how to create a semi-transparent material, refer to the Create translucent and transparent effects tutorial.

2.  Add an AR Plane Manager component to the AR Session Origin, select a Detection Mode, and assign your AR Default Plane prefab to it. 

For a reminder of how to do this, follow step 7 in the Detect the user’s touch tutorial.  

If you build and run your application now, the device should detect and display planes in the environment.

3.  Add an AR Raycast Manager component to the AR Session Origin to allow screen touch controls. 

For a reminder of how to do this, follow step 3 in the Detect when the user touches a plane tutorial. 

4.  Add the AR Foundation Visual Scripting node in the Project settings. This may already be set up in your project. 

For a reminder of how to do this, follow step 4 in the Detect when the user touches a plane tutorial. 

5.  In the Hierarchy, create an empty GameObject called “Tap to Place”, then add a new Script Machine component with a new TapToPlace visual script on it.

6.  In the Blackboard for the TapToPlace graph, create the following Object variables, which you will need to construct your script graph:

arRaycastManager (type AR Raycast Manager)

7.  Create a Tap to Place script graph that matches the following example screenshot. This will take a little while to complete, but make sure you are paying very close attention to make sure it matches exactly, otherwise it likely will not work. 

8.  To improve the user experience, consider adding additional features that improve the tap-to-place functionality. 

You can see examples in this More things to try section, including adding instructions for how to detect planes and adding a reset button to replace the play area. At the end of this tutorial, there’s also an example of limiting the app to only detect a maximum of one plane. 

9.  Proceed to the next step to build and test your new feature.

It may be necessary to review Create a plane detection AR app course if your plane detection does not work as expected. 

A Script Machine with a Tap To Place graph added.

The script graph for the Tap to Place functionality.

The AR Default Plane added to the Prefabs folder. On its mesh renderer, a new semi-transparent material has been added.

The AR Plane Manager with the AR Default Plane assigned to the Plane Prefab parameter.

Planes generated on a real world table as seen through the built app.

The Unity.XR.ARFoundation nodes added to the Visual Scripting section of the project settings.

Now that you’ve set up the Gameplay prefab to spawn in the user’s environment, you’re ready to create a new build and run the game to test your updates. 

When the game first loads, you should find that you can either scan your marker or tap on an identified plane to place the play area. However, once you do this the following issues will become apparent: 

The Gameplay prefab is far too large for the average user’s space.

The opening sequence of the UFO flying in doesn’t play.

There are two UFOs visible in the play area.

The Sheep Remaining UI is not updating — it says, “Sheep Remaining: X”.

You can actually see these same problematic behaviours in the Editor by clicking and dragging the Gameplay prefab into the Hierarchy after selecting Play. 

Except for the scale of the Gameplay prefab, these issues have the same root cause: when the game first loads, the Game Manager searches for all of the components in the scene so that it can assign all the variables needed before triggering the cutscene. However, when you created the Gameplay prefab, you removed all of these components from the scene. When these removed components eventually become available after you instantiate them into the scene, it’s already too late: the Game Manager only looks for these components when it’s activated at the start of the game.

To resolve these issues, you need to deactivate the Game Manager and create a simple Script Machine that will turn the Game Manager on only once the Gameplay prefab is active in the scene. 

UFO icon created by Freepik - FlatIcon | flaticon.com/authors/freepik

Follow these instructions to create a Script Machine to control the Game Manager:

1.  In the Project window, navigate to the Prefabs folder. Double-click the Gameplay prefab to enter prefab editing mode.

2.  In the Hierarchy, select the top level Gameplay GameObject and add a Script Machine component in the Inspector window.

3.  In the new Script Machine component, select New. Name your new script graph  “GameStarter”, then select Edit Graph to open the graph.

The Start and Update nodes are deleted from the GameStarter script graph.

Watch the video or follow the instructions below to see how to build the visual script:

1.  In the Graph Editor, add an On Enable node.

2.  Add a Game Object: Set Active node and set the value to True.

3.  Add a Get Variable: Scene node and set its value to the _GameManager scene variable.

4.  Connect the output of the Get Variable: Scene node to the Target input of the Set Active node.

5.  Connect the On Enable node to the Set Active node.

6.  In the Hierarchy, select the GameManager. In the Inspector window, deactivate the GameObject.

Now the Game Manager GameObject will remain deactivated until the Gameplay prefab becomes active in the scene. You can test this in the Editor by clicking and dragging the Gameplay prefab into the scene after selecting Play. The Game Manager GameObject should become active and the cutscene UFO should fly into the scene.

You can also build and test this on your device to verify this. fix The cutscene should now play, the farmer should start snoring, and the sheep counter UI should work.

This change means that when the Game Manager GameObject is activated, all the Gameplay components will be available. The Game Manager GameObject will then be able to find and assign all of the objects to their associated variables and will run the cutscene, starting the game.

The visual script to enable the _GameManager only after the Gameplay prefab has been instantiated in the scene

The Game Manager is deactivated in the Inspector window.

The game will now run, but the prefab is still extremely large. Before you build, you’ll add one extra node to the GameStarter script graph to fix this issue.

Enable the play area

1. Overview

2. Choose between a marker or plane detection approach

3. Create the Gameplay prefab

4. Set up marker or plane detection

5. Build and test your changes

6. Create a new GameStarter script machine

7. Build the GameStarter visual script

8. Set the Prefab scale

9. More things to try

10. Next steps

Complete this tutorial