Full animoji experience with static background and centered animoji
Animojis can be a really fun way to use stylized effects and background segmentation to create fun interactive filters.
Let say you've already created your animoji and now you want to put a static background behind it and place the animoji in the center of the background.
We'll show you how to do that in this example.
Firstly, we'll put a static background and then we will add the animoji fixed in the center.
So, we're going to use a pre-made Alien animoji.
You will need to download the example folder with the pre-made animoji and all assets necessary to go through this example.
Download files1. Static background
The first thing you want to do is to open DeepAR studio.
- Create a new effect by clicking on
File → Create new effect
. SelectRoot
and inNode properties
set thePosition mode
toPosition in camera space
.
Next, you'll need to add a new quad for the static background.
To do that, go to
Node → Add Quad
.Select the
Quad
and inNode properties
set theLayer to 0
.
Now, you'll need to add a pre-made animoji studio file.
- Select the
Root
inNode hierarchy
, go toFile → Add Studio File
and choose Alien from animoji_example/alien folder.
To place the animoji on the face, select the alien root RootNode
- In menu bar go to
Add Component
and selectFace Position
component.
You now have an animoji with a static background.
Don't like the grey background? No problem.
- Select the
Quad
and inMaterial properties
, underSelect shader
choose anUnlit color
and set any color you want.
Also, in place of the color you can use an image or an animation.
Here we go, our static background has been properly set.
2. Centering the animoji
Next, we're going to set the animoji to be fixed in the center.
Select the alien root RootNode
, and under Face Position
component check the Ignore Translation
.
You can now see the animoji has changed its position.
To get it back the way it was before, you need to change its position and scale.
Go to Transform
and set this value for Position and Scale
.
You don't have to use the numbers we used here. Play with position and scale anyway you like.
And that's it, static background and centered animoji are ready to be exported and used in your app.