Adding Props to Bitmoji
This tutorial walks through all of the steps to attach props, or digital assets, to a Bitmoji avatar. This will allow you to complete the look of your Bitmoji and fully integrate them into the digital world.
This tutorial walks through these steps in the context of creating a magician Bitmoji Lens, however, the same process will apply to any theme.
No animation knowledge is required, we will utilize the GenAI Suite to find an animation for our Bitmoji.
Prerequisites
- Download the latest version of Lens Studio
Initial Project Setup
Create New Project
This tutorial series will build a Lens starting from the default Lens Studio project.
You can follow along in an existing project if you prefer.
Import Props into Project
We will use props that are provided from the Asset Library.
To find the props we are using in this example, open the Asset Library and search for the Magician Pack.
Select Import to add these assets to your Asset Browser
If you have your own assets to attach to the Bitmoji avatar, you can import them now.
Add Bitmoji Joint Attachment
While still in the Asset Library, import the Bitmoji Joint Attachment Custom Component.
This component will control the binding process for us so we can easily configure our assets without needing to worry about the specific joints of the Bitmoji rig.
Add Props to the Scene Hierarchy
The provided Magician Pack includes a wand, hat, and table which we will use to turn our Bitmoji into a seasoned magician.
OPTIONAL: Add Parent to Each Object
Generally, when attaching a prop to an animated object, it is best practice to ensure the prop is a child of a parent anchor object.
This allows the anchor object to move directly with the joint of the animated character while the prop rotation and positioning can still be adjusted to ensure it aligns perfectly with the animation.
In our case, these props already have a parent which we will use, so we can skip this step.
If you are using custom assets, ensure that they are a child of another object.
Add a Bitmoji Animation
Now we are ready to add our animated Bitmoji to the project.
Open the GenAI suite and select the Bitmoji Animation option.
The GenAI Bitmoji animations are a series of animations that can be combined together through AI to create smooth and interesting movement combinations.
Look through the options and select one that you wish to use. For this example, we will use Excited Reveal.
You can also use your own animations created in Maya or downloaded from Mixamo.
Bitmoji 3D Component
After importing the animation, the Bitmoji 3D component is automatically added to the scene and is configured to play the animation.
Adjust Animation Player
Select the BitmojiAnimationController SceneObject.
In the Animation Player component change the playback mode from Loop to Single.
Uncheck the Autoplay checkbox so the animation stops playing. This will allow us to easily position our props onto the Bitmoji.
Create Prefabs
Drag and Drop the wand and hat into the Asset Browser to create Prefabs for each object.
The Bitmoji Joint Attachment component will automatically instantiate these prefabs for us when the Bitmoji is downloaded.
Delete the baton and hat objects from the Hierarchy.
Attach Prop to Bitmoji
Add Bitmoji Joint Attachment
Drag and drop the Bitmoji Joint Attachment Custom Component from the Asset Browser into the Hierarchy panel.
Ensure that the Bitmoji Joint Attachment component is below the Bitmoji 3D component in the Hierarchy order.
Set Component Fields
Configure the component for the wand:
- Add the Bitmoji 3D component
- Add baton_bindrig as the Prefab
- Set BitmojiAnimationController as Animation Player
At this point, you will notice the wand appear near the hand but we will still need to adjust it slightly for better alignment.
Add Device Tracking Component
To get a better view of the Bitmoji, let's add a Device Tracking component to the Camera Object.
This allows us to move through the world without modifying the positions of the 3D objects.
Then, let's adjust the Preview window to use the Interactive Preview mode.
We can now move around the world within the Preview window to get a clear view of the Bitmoji avatar's hand.
Adjust the Wand's Placement
Adjust the Position Offset, Scale, and Rotation Offset of the wand within the Bitmoji Joint Attachment component.
You can find values that work best for you, in our case, we are using the following:
Position Offset: (-0.02, 0.11, 0.10)
Scale: (1.0,1.0,1.0)
Rotation Offset: (25,25,0)
Duplicate the Bitmoji Joint Attachment Component
Create a copy of the Bitmoji Joint Attachment SceneObject which we will use for the hat's binding.
Be sure to swap the prefab value and the joint being used for attachment.
Adjust Placement of the Hat
Position Offset: (0.15, 0.00, -0.01)
Scale: (1.0,1.0,1.0)
Rotation Offset: (180,0,0)
Play Animation through Bitmoji Joint Attachment
Check the Autoplay checkbox in the new Bitmoji Joint Attachment component and you will see the animation play with the wand and hat attached to the Bitmoji!
At this point, our animation is working and our props are moving along with the Bitmoji avatar. You can now apply this workflow to your own Lens to create robust Bitmoji experiences.
In the next section, we will polish this Lens to create a cohesive experience, however this next section is optional and does not include any further Bitmoji adjustments.
Great job!
Final Project Cleanup
Let's combine what we have learned so far with a few more Lens Studio features to create an exciting magic show with our Bitmoji.
Remove Device Tracking Component
Select the Camera and remove the Device Tracking Component from it as we no longer need to move around the scene.
Adjust Table Position
Move the table out of its parent in the Hierarchy, then adjust the position:
Position: (-1.5, -12, 16)
Add Asset from Asset Library
We will want to add another 3D asset to the project that we can make magically appear when the animation plays.
In our case, we will add the Mark the Monster prefab from the Asset Library.
Add Mark as Child of the Table
Drag and drop Mark The Monster onto the table object so that the table is the parent of the MarkTheMonster object.
Adjust the position so that he is standing directly on the table.
Finally, set the MarkTheMonster SceneObject as inactive.
Add Behavior Script
Add the Behavior Script to your scene through the Hierarchy panel.
Once added, set the trigger to On Start and add a delay time so that this will trigger after 1.5 seconds from when the Lens starts.
Set the Response Type to Set Enabled and set the Target to MarkTheMonster
Now Mark The Monster will appear before our eyes afer 1.5 seconds.
Summary
Now our Bitmoji is officially a magician and you can adjust this project for other animations and other props to create a wide range of Lenses.
If you wish to take this project further, try to add particle effects and VFX to create a sparkle or cloud of smoke when the character appears. Then try to adjust the behavior script to trigger an effect when an animation has completed.