7. Behaviors, Triggers & Actions

Written by Chris Language

This chapter continues where the previous one left off. The AR Business Card scene already contains all of the required objects, but the AR experience is rather dull.

To spice things up, you’ll add animations and sound effects to the objects within the scene. You’ll implement these features using behaviors, triggers and actions.

In Reality Composer, behaviors consist of a trigger component and an action sequence component. In this chapter, you’ll use all of these components to build out your AR experience.

Note: You can use your final project from the previous chapter or load starter/ARBusinessCard/ARBusinessCard.rcproject in Reality Composer. The rest of this chapter continues building from this point onwards.

What are behaviors?

Behaviors allow users to interact with objects within a Reality Composer scene without you, the developer, having to add code. Instead, you assign each behavior to a specific object.

Behaviors consist of two components: a trigger, which defines how and when a behavior activates, and an action sequence, which defines what happens to the object when the trigger event occurs.

Available behaviors

Reality Composer comes loaded with some behavior presets that cover the most common interactions for AR scenes. These behavior presets are also a good starting point when you want to build custom behaviors.

Here’s the current list of behavior presets:

Here’s what each behavior does:

• Tap & Flip: When the user taps a predefined object, that object bounces and flips over via a jump and flip action.

• Tap & Play Sound: When the user taps a predefined object, the object uses a play a sound effect action to emit a sound effect from its position.

• Tap & Add Force: When the user taps a predefined object with physics enabled, the object uses an add force action to move in a certain direction.

• Start Hidden: When the AR scene starts, a predefined object performs a hide action and becomes invisible.

• Wait & Show: When the AR scene starts, a predefined object performs a wait action and then a show action. This makes an object appear after a set period of time.

• Proximity & Jiggle: When the user comes within a certain proximity of a predefined object, the object performs a jiggle action.

• Custom: This behavior is empty, allowing you to define your own trigger and sequence of actions.

What are triggers?

Each behavior has a trigger component, which defines the event that activates the behavior.

You can assign a trigger to one or more objects within the scene. When the assigned object fulfills the event requirements, the behavior triggers and its action sequence component plays out.

Available triggers

Here’s the current list of available triggers:

Here’s what each trigger does:

• Tap: Triggers the behavior when the user taps the predefined object.

• Scene Start: Triggers the behavior when the AR scene starts.

• Proximity To Camera: Triggers the behavior when the predefined object is within a certain proximity of the camera.

• Collide: Triggers the behavior when predefined objects collide.

• Notification: Triggers the behavior when the predefined object receives a notification from Xcode.

What are actions?

Reality Composer is a codeless environment, so you don’t need any prior coding knowledge to create interactive AR experiences. To overcome the need for code, Reality Composer introduces the concept of actions.

Actions let you make objects in the scene perform various functions. For example, moving from one position to another, playing sound effects and music, applying physics impulses and performing animations.

Actions are part of a behavior. Once the user triggers the behavior, the actions component plays out in a sequence or in parallel, depending on how you have things configured.

You can assign an action to one or more objects within the scene. When the action plays, it will only affect those objects.

Available actions

Here’s the current list of available actions:

Here’s what each actions does:

• Emphasize: Calls attention to the object with an animation.

• Show: Uses an animation to make an object visible.

• Hide: Makes an object invisible with an animation.

• Move, Rotate, Scale To: Transforms the object’s position, rotation and scale to a specified transform.

• Move, Rotate, Scale By: Transforms an object’s position, rotation and scale by a specified transform.

• Add Force: Applies an impulse force to an object.

• Orbit: Makes one object orbit another predefined object.

• Spin: Makes an object spin in place.

• Change Scene: Transitions from the current scene to another scene.

• Play Sound: Plays a sound that emits from a predefined object within the scene in the 3D environment.

• Play Ambience: Plays audio that emits from the scene’s anchor point in the 3D environment.

• Play Music: Plays music or sound effects over the entire scene, disregarding any 3D positional information.

• Wait: Waits for a predefined time.

• USDZ Animation: Plays a specified animation on the object.

• Look At Camera: Tells an object to adjust its own rotation to face the camera’s current position.

• Notify: Tells an object to send a notification to Xcode.

Adding a behavior preset

With the starter project open, you’ll add a basic behavior preset to all of the objects within the scene. In this case, you’ll hide the objects when the scene first starts and then have them reappear with some flair.

Open the Behaviors panel by selecting it in the top bar.

The Behaviors panel will now appear at the bottom of the scene view.

Select all of the objects within the scene by pressing Command-A. By selecting all of the objects, you can assign a single behavior preset to your selection, which saves a lot of time.

Click the + button next to Behaviors to add a behavior preset, and select Start Hidden.

Reality Composer creates a new behavior from the selected preset and assigns it to all of the selected objects within the scene.

This behavior preset consists of two components: a Scene Start trigger, which will activate the behavior when the AR scene starts, and an action sequence that contains a Hide action assigned to 10 objects. Starting the scene will trigger the action sequence, which will hide all of the objects within the scene.

Reality Composer names newly-created behaviors Behavior by default; however, it’s good practice to give your behaviors a more descriptive name.

Rename the behavior you just created to Start.

This behavior is the starting point for your entire scene.

Next, test the action sequence by playing it. Click the Play button next to the Action Sequence label to see what happens.

Notice the Play button turns into a Stop button, and all of the objects in the scene disappear as the action sequence plays.

Note: Each defined action has its own Play button. This allows you to trigger only that individual action to see what it does on its own.

Adding action sequences

Now that you’ve hidden the scene objects on start, you’ll use more action sequences to show these objects later.

Adding a Show action

The Show action lets you make an invisible object visible with a basic animation. Your next step is to make the author’s name and photo appear with a fun bounce effect.

Select PhotoA and AuthorName by holding down the Command key while clicking each object.

With the behavior panel still open, select the Start behavior, and add a Show action by clicking the + button next to the Action Sequence label.

Reality Composer adds a new Show action to the action sequence, assigning the action to the previously-selected objects.

You’re now ready to configure the rest of the action sequence.

Set Move from Above for the Motion Type so that the objects float down onto the card. Set the Ease Type to Ease In to let the movement decelerate as it gets closer to the card. Set the Style to Basic and the Distance to 30 cm. This moves the objects starting from 30 cm above the card.

Playtest the action sequence. You’ll see the photo with the author’s name appear and fall onto the card.

Adding an Emphasize action

To add some pizazz to the sequence, you’ll make the photo and name bounce once they hit the card using an Emphasize action.

Select the PhotoA and AuthorName objects by holding down the Command key while clicking each object.

Next, click the + button next to the Action Sequence label to add a new action, then select the Emphasize action.

Finally, set the Motion Type to Flip and the Style to Basic, which will make the objects perform a basic flip animation after they fall.

Play the scene to test the state of the action sequence. The photo and name fall from above then do a cool little bounce flip.

Adding a Play Sound action

To take this experience to the next level, you’ll add sound into the mix.

This time, select PhotoA, then add a Play Sound action to the action sequence.

When you add a Play Sound action to an action sequence, you don’t want to play the same sound effect from multiple objects. Instead, you assign the effect to a single object in the scene.

Reality Composer comes with a library of commonly-used sounds; you’ll use these sounds in this scene.

Set the Audio Clip to Cork Pop FX 01.caf and leave Triggered while Running as Ignore.

Play the scene and you’ll see the author’s photo and name fall onto the card, do a quick bounce flip animation, then finish with a nice pop sound effect. Each action completes before the next action starts — hence the name “action sequence”.

Grouping actions

Although everything is working properly, something feels a bit off. The last Play Sound action that makes the pop sound feels out of sync with the animation sequence. It would be much better if that effect plays when the objects perform the bounce and flip animation.

Reality Composer has a solution to this problem known as Grouped Actions, which let multiple actions play at the same time.

Click and drag the last Play Sound action on top of the Emphasize action. The Emphasize action window will turn blue, indicating the action on top will be grouped with it.

When you play the scene now, each action waits for the previous action to complete before it plays. The grouped actions play in sync, but the next action in the sequence waits for the longest action in the group to complete first.

Showing the buttons

Fantastic, the photo and text reveal looks great, especially with that nice little pop sound at the end. The next step is to show the buttons.

With the Start behavior selected, select BioButton and then add another Show action to the entire sequence. Change the Duration to 0.25 sec to keep the animation short and sweet. Set the Motion Type to Move from Right so the button appears from the right side of the card.

Set the Ease Type to Ease InOut for smooth acceleration and deceleration. Set the Style to Basic and the Distance to 10 m.

You want that animation to make a pop sound, too, but only once the button has slid into place. To make that happen, select BioButton, add a Play Sound action, then set the Audio Clip to Cork Pop FX 02.caf.

Copying and pasting actions

Instead of duplicating the same actions for the AuthorButton and ContactButton objects, there’s a shortcut to use — good old copy and paste!

Select the second-to-last Show action in the Start behavior action sequence, which will turn blue to indicate that you’ve selected it. Now, press Command-C to copy the selected action to the clipboard.

Select the last Play Sound action then press Command-V to paste the action from the clipboard.

The action will paste after the currently-selected action. In this case, it’ll be the last action in the sequence.

Assigning actions to objects

One issue you need to resolve with that newly-pasted action is that it’s still assigned to BioButton, so you’ll need to re-assign it to AuthorButton.

Click Choose on the Show action, then click the BioButton object to unselect it. Now, click the AuthorButton object to select that object instead. After you’ve made your selection, click Done to finalize the assignment.

Excellent! The AuthorButton now performs the same action as the BioButton.

Completing the Start behavior

At this point, you’re nearly done with the entire Start behavior sequence. Best of all, you now have all the knowledge you need to complete it on your own.

Here are the steps to complete the behavior action sequence:

• Copy the Play Sound action for the BioButton.

• Paste it at the end of the action sequence.

• Re-assign the action to the AuthorButton object.

• Copy the Show action for the BioButton.

• Paste it at the end of the action sequence.

• Re-assign the action to the ContactButton object.

• Copy the Play Sound action for the BioButton.

• Paste it at the end of the action sequence.

• Re-assign the action to the ContactButton object.

Phew! The Start behavior is finally done. It now includes the following actions:

Here’s the full action sequence from beginning to end:

1. Hide all of the objects.
2. The author’s photo and name fall onto the card, then do a bounce and flip while playing a pop sound.
3. The Bio button slides in from the right then plays a pop sound.
4. The Author button slides in from the right and plays another pop sound.
5. The Contact button slides in from the right then plays a final pop sound.

Adding custom behaviors

Your next step is to make the buttons interactive. When the user taps a button, it flips with a sound effect and makes a related information page appear.

Start by creating a new Custom Behavior and renaming it BioButton_Tap.

Now that you have a new, empty behavior, you need to add a trigger and an action sequence.

Adding a trigger

To add a trigger to the custom behavior, first select BioButton, then click Add a Trigger to this Behavior on the behavior. Finally, select the Tap trigger.

You’ve now added a Tap trigger to the behavior and assigned it to BioButton. Now, when the user taps on BioButton, it triggers BioButton_Tap’s action sequence.

Adding button interactions

Before you can reveal the information pages when the user taps a button, you need to ensure none are visible to start with. To do this, select BioPage, AuthorPage1, AuthorPage2 and ContactPage, then add a Hide action. Set the Duration to 0 sec to instantly hide the pages. Set Motion Type to None.

Next, you want to emphasize the button to show that the user tapped it. With BioButton still selected, add an Emphasize action and a Play Sound action, and group them together. Set the Duration to 1 sec and the Motion Type to Flip. Set the Audio Clip to Lighter Click FX.caf.

BioButton will now do a cool flip while making a click sound.

Next, it’s time to reveal the Bio page. Select BioPage, and add Show and Play Sound actions. Then, group these actions so that they play in sync. Set the Duration to 0.1 secs, the Motion Type to Scale and the Ease Type to None. Finally, pick Cork Pop FX 03.caf for the Audio Clip.

When you playtest the scene now, you’ll be able to tap the Bio button,. It will do a cool flip before revealing the Bio page on top of the card.

The scene is slowly but surely coming to life!

Duplicating behaviors

You’ve done most of the difficult work, but there are a few loose ends left to tie up. The other two buttons still need some action!

Instead of building all of the other behaviors from scratch, you’ll use a shortcut. You’ll duplicate the behaviors you’ve already created for the remaining buttons.

Right-click the BioButton_Tap behavior to open the context menu, then select Duplicate.

This creates a duplicate behavior containing the same action sequence.

Rename the behavior AuthorButton_Tap and re-assign the Tap trigger to AuthorButton.

Great, now this action sequence triggers when the user clicks the Author button.

Re-assign the next Emphasize and Play Sound actions to AuthorButton.

The Author button will now do a flip when the user triggers it.

Finally, re-assign the next Show and Play Sound actions to AuthorPage1.

That’s it, you’ve finished the Author button. Now, when you tap that button, it does a quick flip and AuthorPage1 appears.

Follow the same process as before and create a duplicate behavior from BioButton_Tap, then re-assign all of the actions to link to the ContactButton and the ContactPage.

Note: You can find the final project in final/ARBusinessCard/ARBusinessCard.rcproject

Challenge yourself

The AR experience is done, but you can add so much more. Challenge yourself to enhance the scene with more fun sounds and animations. What else can you add to make the scene more interesting? Practice the concepts you’ve learned and explore the other available triggers and actions.

Note: You can find the challenge project in challenge/ARBusinessCard/ARBusinessCard.rcproject. It contains a few more behaviors that make the pages interactive, and it even allows you to page through multiple pages. It also has a fun little tweet sound for the contact information.

Key points

That’s it! You’ve finished the chapter and created a cool AR Business Card experience to show your friends.

Here are some of the key points from this chapter:

• Behaviors: You now know what a behavior is and that it consists of a trigger and an action sequence.

• Triggers: You learned what a trigger is and how it defines the event requirements for a behavior to activate. You also learned about the available triggers and how to use the Tap trigger.

• Action Sequence: You know what an action sequence is and how to create multiple sequenced and grouped actions to make things happen exactly when you want them to. You also learned about the available actions and played with Show, Emphasize and Play Sound.

• Assigning Triggers and Actions: Now, you know that you assign triggers and actions to objects within the scene.

• Copy, Paste and Duplicate: Don’t forget that you can copy, paste and duplicate actions and behaviors to reduce your workload. The only thing you need to do is re-assign the actions.

Enjoy making your very own AR Business Card experiences. See you in the next chapter, where you’ll go from 2D Image anchors to 3D Object anchors!