Image for post
Image for post

Reality Composer Tutorial

Ruslan Fedorovich
Jan 16 · 6 min read

Reality Composer is a really easy and powerful tool to create Augmented Reality scenes. In this tutorial you can learn how to create object, animations, custom user actions, use physics and change scenes with Reality Composer.

Image for post
Image for post

In this project I will create a house that is built by itself after clicking on the button. After that it will be destroyed after clicking on the same button.

You can check the final project at our Repository.

Let’s start!

Let’s have a look at the Reality Composer window:

Image for post
Image for post

Tap on empty space and rename our project.

Image for post
Image for post

My AR project will have two scenes:

Note: I use two scenes because we cannot change parameters (like physics) in one scene.

1. “Build house” Scene

First task is to create a scene with a button that builds a house when tapping on it.

At the beginning I will create a button. At the top you can see a “+” sign — there you can choose an object and add to the scene. Let’s find “text” object. This text will be a button.

Image for post
Image for post
Image for post
Image for post

Next I’m going to change text object to make it look like a button

Image for post
Image for post

After that I will create a model of a house. It will be situated less than 30 cm height.

Image for post
Image for post

The house is created from four customized Boxes and one Cone.

Important: I switched physics type to “fixed” for each node.

Image for post
Image for post

Let’s go forwards to the actions. In the first scene I tap on the button and the house is being built “down from the air”. You can do this magic using behaviors.

Image for post
Image for post

Behaviors сonsists of actions and triggers — conditions under which actions are performed.

I set the first behavior: “make the house invisible at the start of the scene”. Then I click “add behavior” and choose “custom”.

Image for post
Image for post

Trigger is the start of the scene. Action is “hide”.

Image for post
Image for post

Then I set “hide” action and choose objects to hide

Image for post
Image for post
Image for post
Image for post

That was easy. Next behavior will be more difficult. I need to tap on the button, and after that building must become visible and sink down to the ground.

Trigger is ‘tap’. Object for the tap is the button (text node).

Image for post
Image for post
Image for post
Image for post

Further, the first pillar becomes visible and moves to the ground. After that -second pillar, third pillar, fourth pillar and roof one by one.

One of the actions for the first pillar is “show”.

Image for post
Image for post

The second action is “move”.

Image for post
Image for post

Then, after choosing an object for move I choose a place move to — vertically to the floor.

Image for post
Image for post

Next I combine two actions in one using drag-and-drop.

Image for post
Image for post
Image for post
Image for post

After that I repeat this behavior for other pillars and cone.

Image for post
Image for post

First ‘auto-build’ scene completed.

2. “Destroy house” Scene

Let’s create second scene by duplicating the first one:

Image for post
Image for post

First scene ends when the house was situated on the floor, so I move our house nodes to the ground in the second scene and change button name to “Tap to destroy”.

Image for post
Image for post

There is one behavior which consists of a trigger (tap on destroy button) and an action (the destruction of the house). To destroy a house I will use physics. So let’s enable physics for each node (except the button) and switch type to “dynamic”.

Image for post
Image for post

Then let’s create a “destroy” behavior.

Add a tap trigger:

Image for post
Image for post

In actions I select “add force”:

Image for post
Image for post

And then I choose an object and set a force vector:

Image for post
Image for post

Finally I repeat this for all house parts.

Image for post
Image for post

I chose this vector aside the roof.

Image for post
Image for post

Next I set velocity to almost 5 km/h.

Image for post
Image for post

So, when the Second scene is completed let’s connect it to the First scene.

3. Connecting scenes

So there are two scenes:

Image for post
Image for post

And it is needed to connect them. Switch to the first scene and open build behavior:

Image for post
Image for post

At the end of sequencing we add an action “change scene” and choose second destroy scene:

Image for post
Image for post

What’s next

Yep, our augmented reality is completed, it can be exported and tested.

Image for post
Image for post

There is a file with a .reality extension after exporting:

Image for post
Image for post

This .reality file is completed result and can be launched on iPhone. So to test just share the file to your iPhone and launch it.

Also you can check the final project at our Repository.

Good luck!

Tap the 👏 button if you found this article useful!

About the Author
Ruslan is a pixel-perfect maniac of iOS Team at OmiSoft.

Need an iOS mobile app with clean & maintainable code? Click here to get an estimate! Or find us on Facebook and Twitter.

OmiSoft

Outsource & outstaff software development company.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store