Skip to main content

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 this example with all assets.

1. 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. 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.

animoji 1

You now have an animoji with a static background.

animoji 2

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.

animoji 3

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.

animoji 4

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.

animoji 5

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.

animoji 6