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

354b5fa2-6fdf-4d70-8551-05c350b65489:a9b860b6dc40

Overview

What is an aspect ratio?

Game orientation options

Set the default orientation

Other things to consider

Adjust the game UI components

More things to try

Next steps

Zu-UnityLearn

AR-3.4-10-mttt-audio-settings.mp4

AR-3.4-11-mttt-diff-orientations.mp4

One of the most obvious differences between a desktop and mobile game is the screen from which the game is played. As the AR designer, you must decide what orientation will work best for the port of the UFO game and implement it.

In this tutorial you will do the following:

Explore different aspect ratios and orientations

Apply your selected orientation to the game

Adjust the game UI to match the new orientation

Build AR projects to mobile devices

The first decision you need to make for your AR game port is choosing an appropriate game orientation and aspect ratio. The orientation of your game determines whether it can be played in portrait mode or landscape mode. Your game could look and feel very different depending on which orientation and aspect ratio you design for.

In this tutorial you will determine an appropriate orientation and aspect ratio and will also adjust the game UI components to reflect this choice.

On the left, the starting scene in landscape orientation. On the right, the starting scene in portrait orientation

The aspect ratio of your game is the specific ratio between the width and height of the screen. Old-fashioned TVs and the very first films, for example, used a 4:3 aspect ratio. That means that the screen was 4 units wide and 3 units high. However, modern widescreen TVs and most new films use a wider 16:9 aspect ratio. 

Modern mobile devices tend to have aspect ratios that are similar to standard 16:9 widescreens, but there is still a wide range of aspect ratios. For this reason, it will be important to test your app on a wide range of aspect ratios, even after you have selected an orientation.

An illustrated graphic demonstrating aspect ratios of various screens. There is an old-fashioned TV with an arrow pointing to a rectangle that has a 4 along the top and a 3 along the side. There is a newer widescreen monitor with an arrow pointing to a rectangle that has a 16 along the top and a 9 along the side.

The most significant decision is your choice between the landscape or portrait default orientation.   

Landscape orientation on a mobile device refers to the display mode where the device's screen is rotated 90 degrees from its default orientation and is wider than it is tall. 

Portrait orientation refers to the display mode where the device's screen is held vertically and is taller than it is wide. This orientation is typically used for applications that require texting or browsing, since the display fits more easily in the user's hand. 

You will need to set up your UI in a way that supports the orientation approach that you have chosen for users. 

Guidance to help you select a game orientation

If you’re not sure which approach you want to take for your port, consider the answers to the following questions:

Is this experience going to be better or easier to use in landscape mode or portrait mode? 

Can the game be played successfully in either mode? 

How might the orientation options impact UI button positioning?

Since the desktop version of the game was set up in landscape mode, using only landscape mode for your port will be the simplest option by far. If you feel strongly that the game should be played in portrait mode, it is possible, but requires more design work. 

 An example of a phone in landscape orientation.

An example of a phone in portrait orientation.

You will need to set the default orientation, which is the orientation your app will start with when the user opens it. 

Follow these instructions to change the default orientation in the project settings: 

1.  In the Unity Editor, go to Edit > Project Setting….

2.  In the Project Settings window, select Player and then expand the Resolution and Presentation settings. 

3.  In the Orientation section, set the Default Orientation to your desired option using the dropdown. You can choose from the following options:

Portrait: The phone must be held upright with the top of the phone pointing upwards.

Portrait Upside Down: The phone must be held upside down — this is very unusual. 

Landscape Right: The phone must be held sideways with the top of the phone pointing right. 

Landscape Left: The phone must be held sideways with the top of the phone pointing left. 

Auto Rotation: The game will automatically rotate to one of the orientations listed above depending on how the user holds it – you can select which orientations are possible.

4.  If you chose Auto Rotation, you will need to decide which orientations are allowed to be used when the phone rotates.  In the Allowed Orientations for Auto Rotation setting section, enable the orientations that best match your desired design. In our example, we will keep the rotations set to Landscape only. 

Important: We don’t recommend that you allow for both portrait and landscape orientations at this time unless you are very comfortable with Unity’s UI systems. This approach also requires a lot of extra design work.

5.  Build and test the experience on your device to ensure that your selected rotations work correctly. 

6.  Note how the UI displays for each desired orientation and make sure to test each orientation for the start scene and the main scene in the experience. If you selected only landscape orientations, the required revisions will be minor. If you allowed for portrait orientations, more edits will be required.

Since you cannot actually play the game on mobile right now, you won’t be able to test WinScene or LoseScene.

7.  To test WinScene or LoseScene at this point, select only the scene you want to test in the Scenes in Build panel and build again.

The different orientation options for the Default Orientation Setting

Possible orientations that will need to be enabled or disabled if Auto Rotation is allowed. 

The Scenes in Build list with only the WinScene enabled.

The general orientation and aspect ratio configuration that you have made is something you need to consider regardless of the kind of device your player will be using. However, you should also consider the specific designs of devices that your users might have. 

Consider the notch on the device, for example, which is the area on a phone that typically surrounds the camera or speakers on the front facing screen and can’t be clicked on. Look at how much more usable and readable StartScene is with the Landscape Left orientation compared with the Landscape Right orientation, where the text and buttons are cut off by the notch.

The locations of  the camera, buttons, and other interactable elements of the screen can have a significant negative impact on the user experience if you don’t consider them carefully.

Do a quick search for the layout of phone cameras and notches to get an idea of where those elements might be for your desired platform to help you place UI elements for your users. 

Use the following questions to help guide your research: 

Does the platform I am developing for (iOS, Android) have specific camera holes or notches that I need to be aware of? 

Does the hand placement for the orientations I have selected naturally lead to the user putting their thumb over an important UI element? 

Do I need to adjust the UI to accommodate different natural hand placements for each orientation? 

An example of how a notch on a mobile device can interrupt the visuals of the starting screen. On the left is an image where the phone is rotated to the right and the notch covers up the menu buttons. On the right is an image where the phone is rotated to the left and notch does not interfere with any important visuals or UI elements.

Now that you have selected your allowed orientations and tested the UI in each scene, you will need to make any necessary modifications to the game UI. Remember that limiting the possible orientation to either landscape or portrait can minimize the need for additional UI development. 

Follow these instructions to configure the game UI components:

1.  In the Game view, select the Aspect Ratio dropdown and set the aspect ratio to match one of the orientations that you have selected for the game. Start with either 16:9 Portrait or 16:9 Landscape, since the 16:9 ratio is pretty close to the aspect ratio on a wide range of mobile devices.

2.  Review each UI component and adjust as needed for the aspect ratio and orientation you selected.

3.  After you have adjusted the UI for the generic 16:9 ratio, test how the scenes look in various other aspect ratios for your platform (for example, iPhone 12 Pro for iOS or Samsung Galaxy for Android).

4.  If you are having trouble, review the Creative Core: UI course to learn more about designing and developing responsive UI for applications. 

The different aspect ratio options for testing the UI in the editor. 

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 level of difficulty to expect.

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, however. Good luck!

Allowing a player to control settings in a game is a standard part of well-made applications. Being able to turn features of the game on and off can be very important in a mobile experience. For example, being able to disable and enable game audio without affecting other audio on the device ensures that users can make and receive calls but play their game silently in different environments. There are many additional settings that can be equally important for a mobile game.

To complete this challenge, add a settings menu to MainScene and create new script graphs to control the settings. 

Difficult: Allow for portrait and landscape orientations

Allowing the user to choose between playing your game in portrait or landscape mode is ideal, assuming that you can actually make the user experience enjoyable in both orientations. To enable this setting, you need to enable Auto Rotation in the Player settings, then enable both Portrait and Landscape for the Allowed Orientations. 

For help achieving this result, review the Creative Core: UI course to learn more about designing and developing responsive UI for applications. You can also explore Designing for Multiple Resolutions to learn about how the Canvas Scaler component works. 

Great job! Now you have a UI that is prepared and ready for your user to interact with in whatever orientation you have selected. In the next tutorial you will allow the user to spawn the play area in their physical environment.  

Selecting an orientation for your AR game

1. Overview

2. What is an aspect ratio?

3. Game orientation options

4. Set the default orientation

5. Other things to consider

6. Adjust the game UI components

7. More things to try

8. Next steps

Complete this tutorial