Animate Your Avatar Using Galaxy AR Emoji SDK for Unity

[Samsung Newsroom]

Galaxy AR Emoji SDK for Unity makes it possible to control the user’s AR Emoji avatar in a Unity application developed for Galaxy devices. You can add any custom animation movements to the user’s AR Emoji avatar in your Unity applications using the SDK (for example, a game application for Galaxy devices in which a user can select their own AR Emoji avatar as a player instead of the default game player). In this tutorial, you will learn how to add any custom animation to the AR Emoji avatar in a game or any other application using the Galaxy AR Emoji SDK for Unity.

Prerequisites

First, get your Samsung partnership approval from the Partnership Request Process to use the Galaxy AR Emoji SDK for Unity if you are not already a partner. The SDK team will approve the partnership through an immediate review as soon as they receive your partnership request. After getting your partnership approved, go through the basic tutorial by signing in to your account on the Galaxy AR Emoji Developer site.

In order to animate the AR Emoji model, you need to load the model into your application (described in the “Importing the AR Emoji Model” section in the basic tutorial mentioned above). As our project name is “Animation Tutorial,” we recommend keeping the same name for your project. Besides, you can also add a feature to your app using an Android intent so that a user can create a new avatar by opening the AR Emoji camera directly from your app for a better user experience. Now, you are ready to proceed with this tutorial to animate the loaded model on Galaxy devices.

Animate the AR emoji

To animate the avatar, you need the following two components,

• Animation clip: the animation data containing information about animation movement.
• Animator controller: allows you to arrange a set of animation clips and associated animation transitions for a character or object.

Get familiar with how these two components work together to incorporate animation into the AR Emoji model. For this tutorial, you should understand these components in order to follow the successive sections to complete the project.

Create animation clips

Our project facilitates four different types of animation for the loaded model, so we need four animation clips. The AR Emoji supports only the ANIM format clips (see how to create animation clips for the AR Emoji using the “AnimationGenTool.unitypackage” package of the SDK).

For this project, we use the animation clips included in the SDK (see Assets → Resources → Animations → Mecanim). But you can use any custom clips created by using tools such as 3Ds Max, AutoCAD Maya, or tools downloaded from other sources, like Mixamo.

Figure 1: The animation clips included in the SDK.

One more thing you need to make sure is that every animation clip has the Loop Time option selected so that the AR Emoji doesn’t stop animating after a single animation movement. To do this, select the animation clip and check the Loop Time in the Inspector. Do not forget to do the same for all the animation clips.

Figure 2: Enabling the Loop Time for Hip Hop Dancing animation clip.

Our animation clips are now ready. In the next section, we will configure our animator controller for utilizing these clips.

Configure the animator controller

Although you can create your animator controller, the default “AnimController” is available under Assets → Resources.

Figure 3: The default animator controller for the loaded AR Emoji.

You need to connect the controller to the loaded model. Follow the steps below:

1. Open the “GettingAREmojiSample” scene, select the “GLTFComponent” in the hierarchy, and then make sure to check the Use Legacy Animator in the Inspector.

2. Add the animation clips and set appropriate transition conditions between them. Double-Click on “AnimController” to open the Animator tab, which shows the state machine of the controller.

   
   

   Figure 4: The state machine of the animator controller.

   
   

   Drag all the animation clips to the state machine and place them in a convenient position. Note that “Idle” is the default animation state for our model.

   
   

   Figure 5: Drag the animation clips into the state machine.

   
   

3. It's time to make the transitions between the states and set appropriate conditions. To do so, you need to create one Boolean parameter for each state. Click the + button and then Bool in the Parameters tab as shown in the diagram below, and name them according to their states (for example, walk, jump, yelling, and dance).

   
   

   Figure 6: Create a Boolean parameter for each state (animation clip).

   
   

4. Right-click on the “Idle” state, select Make Transition, and click on any other state (for example, “Hip Hop Dancing”). As a result, a transition arrow from “Idle” to the selected state is generated. Select the arrow as shown below and then perform the following tasks in the Inspector:

   
   

   Figure 7: Select the transition arrow.

   
   

   Uncheck the Has Exit Time option for the transition.

   
   

   Figure 8: Disable the Has Exit Time option.

   
   

   Add a condition for the transition by clicking on the + button.

   
   

   Figure 9: Add a condition for the transition.

   
   

   Select the appropriate parameter (for example, “dance” for the “Hip Hop Dancing” state).

   
   

   Figure 10: Select the parameter for the condition.

   
   

   Set the value according to the transition condition (in this example, true, which indicates the model will go from the “Idle” to “Hip Hop Dancing” state).

   
   

   Figure 11: Select the condition value for the transition.

   
   

5. We have completed the transition condition for the “Idle“ to “Hip Hop Dancing” state. For the reverse transition, “Hip Hop Dancing“ to “Idle,” everything is the same as above, except the parameter value. The value should be false as the avatar will go back from the “Hip Hop Dancing” state to the “Idle” state. This completes the full transition condition for the “Hip Hop Dancing” state.

6. Complete the transition conditions in the same way for the rest of the states (Jump, Walk, and Yelling). The final state machine should look like the following image:

   
   

   Figure 12: The complete state machine for our project.

   
   

Modify the application UI

So far, we have created our animation clips and the animator controller. Now, we need to modify the application UI for the users to interact with the application. As a result, they can animate their avatars by simply tapping a button. We need to add four buttons to the canvas of the “GettingAREmojiSample” scene, which enables the different animations for our model. Follow the steps below:

1. Open the “GettingAREmojiSample” scene, add a button to the panel of the canvas (see the screenshot below), rename it as you wish (for example, “jump_button”), and set the width to 200 and the height to 60 in the Inspector.

   
   

   Figure 13: Create a button in UI and configure the property in the Inspector.

   
   

2. Duplicate the button three times to make a total of four buttons, rename and position them conveniently (as shown below), and change the button texts to indicate the appropriate animation actions.

   
   

   Figure 14: Add four buttons in the UI and name them according to their actions.

   
   

The UI is now ready along with the animator controller.

Modify the script

The final task is to modify the script so that tapping on a button changes the value of the corresponding Boolean parameter within the controller. At this stage, if we can somehow change the value of the Boolean parameter at run-time, the model will be animated accordingly. To change the value by interacting with the buttons, we need to edit the “ButtonBehaviour.cs” script which is attached to the canvas of the “GettingAREmojiSample” scene. Perform the following steps:

1. Open the “ButtonBehaviour.cs” script from the Assets → Scripts in any editor (such as Visual Studio).

2. Declare the variables for the four buttons at the beginning of the ButtonBehaviour class, as shown below:

   public Button jumpBtn;
   public Button yellBtn;
   public Button walkBtn;
   public Button danceBtn;
   

3. Add references to these variables from the UI buttons. Go back to Unity and select the canvas in the Hierarchy. In the Inspector, the references are empty for the button variables. Drag each of the buttons from the panel in the Hierarchy to their corresponding empty fields in the Inspector.

   
   

   Figure 15: Add button references to button variables.

   
   

4. Add listeners to the button variables at the end of the Start() method, as shown below:

   walkBtn.onClick.AddListener(OnClickWalk);
   yellBtn.onClick.AddListener(OnClickYell);
   jumpBtn.onClick.AddListener(OnClickJump);
   danceBtn.onClick.AddListener(OnClickDance);
   

   Declare four methods/functions for each listener, immediately below the Start() method:

   private void OnClickDance(){
   }
   private void OnClickJump(){
   }
   private void OnClickYell(){
   }
   private void OnClickWalk(){
   }
   

   When a user taps on a button in our application, the corresponding method is invoked at run-time. Therefore, we have to write some code inside each function to change the value of the corresponding Boolean parameter.

5. To access the Boolean parameters within the animator controller, we need to declare an animator variable in the script. Write a line of code to declare the variable at the beginning of the class and add the Update() method inside the class.

   public Animator anim;
   
   void Update(){
         if (anim == null){
              GameObject o = GameObject.Find("rig_GRP");
              if (o != null){
                  anim = o.GetComponent<Animator>();
              }
         }
   }
   

6. Finally, when a specific button is tapped by a user, the corresponding Boolean value should be set as true and others as false in the invoked function. See below for an example for one method and complete the others in the same way.

    private void OnClickDance(){
         anim.SetBool("walk", false);
         anim.SetBool("yelling", false);
         anim.SetBool("jump", false);
         anim.SetBool("dance", true);
    }
   

7. Now, save the project and click the Build and Run. It installs and launches the application in your Galaxy device which should be connected to your PC through a USB cable. After loading the AR Emoji, you can animate it by tapping any of the animation buttons. See the screenshots below from our demo project.

   
   

   Figure 16: The avatar is being animated.

   
   

Conclusion

Hopefully, you have enjoyed this tutorial and learned about AR Emoji using the AR Emoji SDK for Unity. You can use this knowledge to develop more entertaining applications that incorporate the AR Emoji avatars with other custom animation clips. You can also develop Android games using your own AR Emoji with this animation technique.

View the full blog at its source