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

Set up the UI

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.

Develop AR experiences that use trackable targets in the environment

Absolute Beginner AR Development

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

Absolute Beginner AR Design

Create basic application interactions with Visual Scripting

Absolute Beginner Visual Scripting

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

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!

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

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

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

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

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

76e1b014-5881-46f1-a8a3-8254137e0659:72e9c9757c49

Overview

Add the AR_Canvas prefab

Customize the glasses buttons

Customize the material buttons

More to try

Next steps

Zu-UnityLearn

Desarrollo de AR para novatos

Hammad_N

increaseIconSize_1.mp4

updateicon_1.mp4

A user interface (UI) allows the user to interact and make selections within your app. In this case, the user will use buttons on the screen to select their pair of glasses and customize the color.

In this tutorial you'll do the following: 

Customize the appearance of the buttons to suit your specific app.

Games

Desarrollar experiencias de AR con objetivos que se puedan rastrear en el entorno.

robinmitra

The app that you’re building will contain two rows of buttons: one for switching between three pairs of glasses, and one for changing the colors of the glasses. In this tutorial, you’ll configure this UI.

This project uses a UI system called Unity UI (or uGUI). This system organizes user interfaces using a Canvas component — you need to create every part of the user interface as the child of a GameObject with this Canvas component added to it. We’ve already done this for your app, but you’ll need to configure it to suit your specific needs.

Follow these instructions to add the AR_Canvas prefab to your scene:  

1.  In the Project window, go to Assets > _InteractiveFaceFilter > Prefabs.

2.  Drag the AR_Canvas prefab from the Project window into the Hierarchy window.

3.  To preview your changes without playing your app, open the Game view.

4.  In the Hierarchy window, select the GlassesGroup GameObject and then enable the GameObject in the Inspector window. 

The glasses models should appear in the Game view.

The AR_Canvas prefab is rendering (being displayed) as a Screen Space - Overlay UI. This means that the prefab will always render on top of the app camera and appear in precisely the position that it is displayed in the Game view.

5.  In the Hierarchy window, expand the AR_Canvas GameObject using the foldout icon to reveal its child GameObjects.

The AR_Canvas is a parent to three GameObjects: Glasses Buttons, Materials Buttons, and EventSystem. The glasses and material button groups are parent GameObjects of the individual buttons you see in the scene. The EventSystem is a GameObject that contains the components that the UI needs to detect user input such as tapping or clicking.

The AR_Canvas prefab added to the scene and shown in the Scene view.

The Game view with the AR_Canvas and GlassesGroup enabled. 

Currently, the glasses buttons are just blank circles, but in the final app users should be able to tell which button represents which pair of glasses. To accomplish this, you’ll apply pre-made icons that represent each pair of glasses. 

The glasses icons were created in external software and grouped together on a sprite sheet. A sprite sheet is an atlas (image containing a collection of smaller images) that can be sliced (separated) and used individually in the Unity Editor. Using a sprite sheet helps to optimize the app: rendering a single image file is more efficient than rendering lots of individual ones. Sprite sheets are also helpful for organizational purposes —  you can find all of the glasses icons on the same sprite sheet.

Important: If you created your own pairs of glasses, you will need to create icons for them.

Follow these instructions to customize the glasses buttons: 

1.  In the Project window, navigate to Assets > _InteractiveFaceFilter > Sprites.

2.  Locate the UI_Icon_Glasses sprite sheet and select the arrow on the right side of the thumbnail to reveal the individual sprites.

Note: If the image thumbnails in your project are small or in list format, use the slider at the bottom right of the panel to increase the size.

3.  In the Hierarchy window, expand the Glasses Buttons GameObject using the foldout icon to reveal its child GameObjects.

4.  Select the Glasses 1 Button GameObject.

5.  Choose which of your three chosen glasses for the app will be represented by the first button on the UI.

6.  Drag your selected glasses icon from the Project window to the Inspector window, and assign it to the Source Image property.

7.  Repeat this process for the remaining two glasses button GameObjects so that each of the pairs of glasses you selected are represented on the UI.

The three glasses UI buttons reflecting the glasses selected in the GlassesGroup prefab.

In a later tutorial, you’ll create the actual materials that will change the color of the glasses, but for now you have the opportunity to decide what you want those colors to be. Don’t worry if you change your mind later, you can easily come back and update your color selections.

Follow these instructions to change the button colors: 

1.  In the Hierarchy window, select the dropdown arrow next to Materials Buttons to reveal its child GameObjects.

2.  Select the Material 1 Button GameObject.

3.  In the Inspector window, go to the Image component and select the Color property picker.

5.  Repeat this process for the remaining two material buttons.

The Image component on the Button GameObject with the Color property highlighted.  Changing the Color property changes the color of the button.

Image of the user interface with a different color assigned to each of the three material buttons.

If you want to further develop your skills, explore new concepts, or improve your project, check out some of the optional activities below. Each one is tagged as either Medium or Difficult, so you can choose the level of challenge. 

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!

Moving some buttons to a different location on the UI can make it easier for your user to press those buttons or make it less likely the buttons will cover parts of your filter that have specific effects. Try moving either your color buttons or your glasses buttons to the top of the screen. To do this you will need to modify the Rect Transform component of the icon group in order to move it to an appropriate location on the screen. 

To help you with this, Creative Core: UI has many useful tutorials you may want to explore!  

If you created your own pairs of glasses you’ll need to create icons to represent them on the UI. We’ve provided a PSD file called UI_Icon_Glasses_Template containing the glasses sprite sheet, as well as a PNG version if you’re unable to use PSD files. Both files contain the sprite sheet as it appears in Unity. 

Follow these instructions to edit the sprite sheet in your image editor of choice and import your new icons into Unity:

1.  In the Project window, navigate to Assets > _InteractiveFaceFilter > Resources.

2.  Right-click the file format of your choice and then select Show in Explorer (macOS: Reveal in Finder). A window will open and show you where the file is located in the project.

3.  Double-click your PSD or PNG file to open it in your image editor of choice.

The PSD file has each of the different glasses icons sorted into their own grouped folders in the layers palette. At the bottom of the list is an Empty Circle group. You can use this group to create your own glasses icon. If you made more than one pair of glasses, replace one of the glasses icons you won’t be using in your app with your own designs. 

Warning: Do not move the icons! They’re laid out in a specific format so Unity can cut them into individual sprites.

To create your own image icons, you can either draw the glasses or take a screenshot or render of the glasses that you modeled in your 3D modeling software and add that to the PSD file. The dark outlines around the icons are an image effect that can be copied onto your own layers.

4.  When you’ve finished editing the icons, disable the white layer at the bottom of the layers palette.

5.  In your 3D modeling software, go to the main menu and select Save As.

6.  Navigate to where you’ve saved your Unity project and find the Sprites folder. The path should look like this: [Your unity project]\Assets\_InteractiveFaceFilter\Sprites.

7.  Select the UI_Icon_Glasses.png file and select Save.

8.  When you are prompted to overwrite the saved file, select Yes.

9.  Return to the Unity Editor and look in the Sprites folder to find your updated file.

The glasses user interface, now with the glasses selection buttons positioned at the top of the screen instead rather than at the bottom.

The PSD template selected in the Project window and then right-clicked to reveal the Show in Explorer option.

The PSD file opened in Photoshop® with the Empty Circle group folder open.

The glasses user interface, now with the new icons for the glasses selection buttons.

In this tutorial you added the app UI and customized it to suit your specific needs. You’ve now created all of the visual assets for your app and are ready to move on to its core functionality. In the next tutorial, you’ll create your first visual script to detect when a button has been pressed.

Set up the UI

1. Overview

2. Add the AR_Canvas prefab

3. Customize the glasses buttons

4. Customize the material buttons

5. More to try

6. Next steps

Complete this tutorial