Face in Picture
To make it easier for you to mix-and-match our different examples, this template has been converted to an importable asset in the Asset Library with the name Face In Picture
.
The Face In Picture template allows you to fill a hole of a 2D image with the user’s face. Additionally, it shows you how to overlay facial features like the user’s eyes and mouth over an imported 2D image.
Tutorial
Guide
Import your Custom Artwork
First, import your own custom 2D artwork into the template by clicking +
in the Asset Browser
panel followed by Import Files
. Alternatively you can drag and drop your 2D image into the Asset Browser
panel.
Assign your Artwork
Next you will need to assign your artwork to the Screen Image object. Locate the object named Screen Image [EDIT_ME]
in the Scene Hierarchy
panel and assign your texture to the Texture
field of the Image component. It is recommended that you keep the Screen Image in Fill mode so that it fills the entire screen.
Background Image
There is an optional background image called Background [REMOVE_ME]
you can replace or remove. Because it is behind everything, this object will appear if a face is not found or when a face is lost.
Positioning
Adjust the position of the Face Inset object called Face [EDIT_ME]
. With the object selected, adjust the position by selecting the Move tool in Len’s Studio’s toolbar or by pressing the W shortcut. Drag the movement arrows in the Scene
panel. Position the face so that it’s behind the hole in your artwork.
You can reorder any of the objects by dragging them up or down in the Scene Hierarchy
panel. Their order will determine the order in which they are rendered.
It is recommended that you tune your Face Inset positions using a 16:9 preview image. All preview images that come with Lens Studio are 16:9. For some images that are very different resolutions, you might see snapping in the Preview
panel. Press the refresh button in the Preview
panel to see the true position of the Face Inset.
Supporting Multiple Faces
The template includes a script called FaceInsetController
which allows you to easily manage multiple faces. The script takes in a list of Face Inset objects. Then, a simple dropdown allows you to assign the inputted objects to the first or second face. Additionally, this script intelligently maintains the positions of the face insets in relation to the Screen Image when the Lens is used on different device resolutions.
If you delete the included Screen Image or want to use another one as reference, make sure to set the Screen Image parameter in this script.
When set to the second face, you have the option to enable Fallback To First
. This will fallback to the first face if it can’t find a second face. If disabled, the face insets will only ever apply to the second face.
Particle Flair
For the template example, we’ve added a simple snow blizzard particle that we exported from the particle template. This helps the static 2D image come to life. For more information on particles check out the Particles Template. If you don’t need the particle, simply remove the object called Blizzard Particle [REMOVE_ME]
in the Scene Hierarchy
panel.
Previewing Your Lens
You're now ready to preview your world Lens experience. To preview your Lens in Snapchat, follow the Pairing to Snapchat guide.