Animojis can be a really fun way to use stylized effects and background segmentation to create awesome and 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. 

First, we'll put a static background and then we will put the animoji to be fixed in the center.

So, we're gonna used a pre-made Alien animoji. 

First of all, you'll need to download the example folder with the pre-made animoji and all assets necessary to go through this example.

Click the download button below to download this example with all assets.

1. Static background

The First thing you want to do is to open the DeepAR studio.

  • Create a new effect by clicking on File → Create new effect.
    Select Root and in Node properties set the Position mode to Position 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 in Node properties set the Layer to 0.

Now, you'll need to add a pre-made animoji studio file.

  • Select the Root in Node hierarchy, go to File → 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 select Face Position component

You now have an animoji with a static background.

Don't like the grey background? No problem.

  • Select the Quad and in Material properties, under Select shader choose an Unlit color and set any color you want.

Also, in place of the color, you can use an image or an animation.

There you go, our static background has been properly set. 

2. Centering the animoji

Next, we're gonna 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 ready to be exported and used in your app.

Did this answer your question?