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.

Create basic application interactions with Visual Scripting

Absolute Beginner Visual Scripting

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

Develop AR experiences that use trackable targets in the environment

Absolute Beginner AR Development

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

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!

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

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.

Beginner Mobile Optimization

 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

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.

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

890bc66c-f681-49f8-8546-a4e7aa477662:9245143fc73e

Overview

Create a new script graph

Add a debug UI to your app

Create a new variable for the debug message

 Log a message to the debug UI

Detect a touch

Get the touch position

More things to try

Next steps

Zu-UnityLearn

2B-2.6-detect-touch-position-demo.mp4

2B-2.4-set-text-on-start-script.mp4

2B-2.4-set-text-on-start.mp4

2B-2.5-detect-touch.mp4

2B-2.5-detect-a-touch-demo.mp4

2B-2.6-display-touch-position (1).mp4

2B-2.6-detect-touch-position-demo (1).mp4

2B-2.8-helpful-start-msg.mp4

2B-2.5-detect-a-touch-demo (1).mp4

A single tap on the screen is one of the most simple and intuitive interactions with a mobile device. Most users instinctively try to tap on elements they think they can interact with on the screen.

In this tutorial, you will do the following:

Detect if the user has touched the screen.

Detect the position of the touch on the screen.

Add a user interface that displays information about the user’s touch.

Games

Create a plane detection AR app 

Your app is successfully detecting and displaying planes detected in the environment. When the project is complete, tapping on one of those planes will spawn a portal to a virtual world. The first step towards that outcome is detecting when and where the user has touched the screen.

First, follow these instructions to create a new script graph: 

1.  In the Hierarchy, right-click and select Create Empty.

2.  Name the new empty GameObject “Visual Scripts”.

3.  In the Inspector, select Add Component, then add a Script Machine component.

4.  In the Script Machine component, find the Graph property and select New.

5.  When the Save Graph dialog window appears, create a new folder inside the _ARPortal folder  and name it “Visual Scripts”.

6.  Name the new graph “TapToPlace” and select Save.

7.  In the Script Machine component, update the graph text fields as follows:

Summary: Detects touch on an AR plane and places a portal object

8.  Select Edit Graph to open the TapToPlace script graph.

The Script Machine component added to the Visual Scripts GameObject.

The Save Graph Finder window showing the file path of the Visual Scripts directory.

The updated Script Machine with the TapToPlace graph created and the title and summary filled out.

Before you get started on your visual script, you should prepare to debug the app on your device. 

Developing apps for a phone presents unique challenges for debugging. When the app is running on your device, there is no easy way to see errors in the console when they arise. 

In situations like this, it can be helpful to implement a simple debugging user interface (UI) that displays directly on your device as the app is running. This can just be a simple text box that you can print messages to, to make sure that the app is working as you expect.

We have provided a simple UI for you to use, but feel free to customize its appearance.

Follow these instructions to add a debug UI to your app and log a message:

1.  In the Project window, go to _ARPortal > Prefabs > Testing. 

2.  Click and drag the Debug UI prefab from the Project window into the Hierarchy. 

3.  In the Hierarchy, expand the debug UI and the Panel child GameObject, then select the Text GameObject. 

4.  In the Inspector, find the Text component. Try editing the Text property to change the text that appears in the Game view.

Note: The size of the font may appear differently than in the screenshot above, depending on the aspect ratio and resolution of your Game view preview window. This size difference is expected behavior.

5.  Build and run the app to preview the debug UI on your device.

 A still image from a video of a desk. There is a white bar across the center of the screen with the words, “debug message”.

The Text child GameObject of the Debug UI selected and displayed in the Inspector. The Text field in the Text component is highlighted.

The debug UI is ready to display any message you want. Next, you need to make sure you can actually change the content of that message while the app is running from a visual script. You can do this using a variable. 

Follow these instructions to set up your debug UI text as a variable:

1.  In the Script Graph window, go to the Blackboard and select the Object tab. 

2.  In the (New Variable Name) field, enter “debugText” and select Add (+).

4.  Select the Value property object picker (circle) and choose Text.

A variable in the Blackboard named debugText. Its type is set to Text.

Now that you’ve set up the variable, you can change the debug message displayed at the start of your visual script. 

Watch the video or follow the instructions below to see how it’s done.

Follow these instructions to change the debugText variable at the start of your visual script:

1.  In the Graph Editor, use the fuzzy finder to add a Text: Set Text node. Connect the On Start node flow output to your new node. 

2.  Left-click the handle on the debugText variable and drag the variable into the Graph Editor, then connect it to the Text input of the Set Text node.

3.  In the String input of the Set Text node, enter a custom message. For example, you could change it to “application started”. 


4.  Build and run the app to preview the new starting debug message.

The visual script to display the message, “application started” on the debug UI.

Next, you will add functionality to detect when the user has touched the device screen and send a message to the debug UI to verify that the touch detection is working correctly. The message should be something like, “touch detected.”

You’ll need to use the On Update event to detect a touch in your app. Since the On Update event runs constantly – every time the app is updated – it is perfect for this situation where the user could touch the screen at any time. 

Watch the video or follow the instructions below to detect a touch and log the event to the debug UI:

1.  In the Graph Editor, use the fuzzy finder to add an Input Get Touch (Index) node. Connect the On Update event node flow output to your new node.

The Index represents the number of simultaneous screen touches. The Index value is set to 0 when no touches are detected. If one touch is detected, the Index value is set to 1. The second simultaneous touch increases the Index value to 2, and so on.

2.  From the On Start event node sequence you created earlier, select and duplicate the Set Text and Get Variable nodes. Connect the Get Touch node flow output to the flow input of the duplicated Set Text node.

3.   In the duplicated Set Text node, change the String value message to something like “touch detected”. 

4.  Build and run the app to preview the new functionality. When you touch the screen, the debug UI should display touch detected. 

The visual script to detect a touch and log the event to the debug UI.

In addition to checking whether or not a touch has occurred, you also need to determine the location of that touch on the screen. You can use the X and Y coordinates of the touch to determine whether or not the user successfully touched a horizontal or vertical plane. 

The process to determine the touch position

You will use the Touch: Get Position node to get the touch location. This node outputs a Vector2, which includes the X and Y coordinates of the detected touch. 

You’re going to display these coordinates in the debug UIs text. However, the Set Text node will not accept a Vector2 input for its text — the input requires a String value.

In order to display the Vector2 coordinates from the Get Position node using the String input on the Set Text node, you first need to convert those Vector2 coordinates into a compatible String format. You can do this using a To String node, which converts data into String format that can be used for text.

Watch the video or follow the instructions below to get the touch position and display those coordinates in the debug UI:

1.  In the Graph Editor, add a Vector 2: To String node and insert it in the On Update sequence between the Get Touch and Set Text nodes.

2.  Add a Touch: Get Position node, then connect it between the Get Touch and To String nodes.

3.  Connect the String output from the To String node to the String input of the Set Text node. 

4.  Build and run the app to preview the new functionality. As you touch the screen, the debug UI should display the touch position’s X and Y coordinates. 

The Vector2 output of the Touch: Get Position node highlighted in the script graph.

The String input of the Text: Set Text node highlighted in the script graph.

The visual script to get the touch position and to display those coordinates in the debug UI. 

If you want to further develop your skills, explore new concepts, or improve your project, check out some of the optional activities below. Each activity is identified as being either Easy, Medium, or Difficult, so you know what you’re getting into!

These activities are entirely optional, so if you’re not interested, no problem – just skip this step. 

We do recommend attempting at least one of them in order to get the most out of this learning experience. Good luck!

In this tutorial, you displayed the text, “application started” on the debug UI to verify the UI was working properly. Displaying text at the start of an AR experience is often very useful, since it is an opportunity to tell users how to interact with the application. In this app, you could tell the user, “move the camera around slowly to detect a vertical/horizontal surface.” Try implementing a more helpful message like this at the start of your application. 

In the video demos throughout this tutorial, you probably noticed the small white circle that followed the touch position. 

The small circle can be helpful for debugging, since it confirms precisely when and where your finger makes contact with the screen. 

Use the following guidance for help completing this challenge:

Use a screen space UI image in the shape of a circle for the visualizer.

Create a new Script Machine named “TouchVisualizer” to control the functionality. It is helpful to keep this kind of extra functionality separate from your main script. 

Use the GameObject: Set Active node and the Transform: Set Position node to enable and position the UI circle.  

In this tutorial you detected a touch event and logged the coordinates in a custom debug UI. You then used the coordinates to verify that your visual scripts were working as expected. In the next tutorial, you’ll detect whether or not the user has touched a valid horizontal or vertical plane.

Detect the user’s touch

1. Overview

2. Create a new script graph

3. Add a debug UI to your app

4. Create a new variable for the debug message

5. Log a message to the debug UI

6. Detect a touch

7. Get the touch position

8. More things to try

9. Next steps

Complete this tutorial