The Cutout Template allows you to add 2D cutout content to the world. The template is great for making pop-up book like scenes. The template gives you access to manipulation control which allows the user to move, scale and rotate the 2D content.
Adding 2D Content
The Cutout Template assumes that you have a 2D image or series of 2D images which you'll be importing into Lens Studio. It's important to use optimized images for Lens size and performance reasons. Follow below to create optimized texture resources:
- Images should never be greater than 2048 x 2048 pixels
- Non-transparent images should be saved using JPEG. Transparent images should be saved using PNG
- If the image allows, try compressing to reduce the Lens size
You can have animated content by following the 2D Animation guide on adding animated images.
Importing 2D Content
Once you have your 2D content exported, we can add it as a texture to Lens Studio by dragging and dropping the image(s) into your
Adding a Sprite
To add a 2D image plane, go to the
Objects panel and select
Add New -> Sprite.
Next, you'll want to drag your newly added sprite to be a child of the
CutoutSceneController object. You can now delete the template's placeholder object labeled with
Sprites use an
Auto render order which sorts based on
Object panel (first child is rendered first, second child is rendered second, etc.). The
CutoutSceneController sets all children to the same render order so that render order relies solely on the object's distance to the camera.
Creating the Material
Next, we need to create a material for the newly added
Sprite. Open the
Materials folder and duplicate either the
alpha_blend_2sided material or the
alpha_cutout_2sidedif your image is a hard lined cutout
alpha_blend_2sidedif your image is semi transparent
With your duplicated material selected, in the
Inspector panel, set the
baseTex field to your imported 2d texture. Then, select your newly created sprite and set the
Material field to the new material.
Creating a scene
The first thing you'll want to do is scale your sprite to be large and visible to the camera. To scale your sprite, select the scale tool in the toolbar or by using the
R shortcut. Then, click and drag the center cube to scale up the sprite. To position your sprite, select the move tool in the toolbar or by using the
W shortcut. Drag the arrows to move the sprite in the desired direction. Finally, you can add more sprites by repeating all of the steps above to build your scene.
Y parameter of your sprite's
Pivot Position to be -1.0. This will set the sprite's pivot to be on the ground.
If you don't see your image in the
Preview panel, don't forget to scale your sprite using the scale tool or by adjusting the
Scale parameter on your sprite's
Tuning the Collision
TouchCollision object represents the area the user must touch to manipulate (scale, move and rotate) the scene. In the
Objects panel, select the
TouchCollision object and scale it to roughly match the size of your scene.
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.
Use Ground Grid (bool)- When enabled, a circular grid will appear underneath the world object when the user touches the object. This grid helps visualize the surface the content is attached to. Setting to false will disable the ground grid visualization
Touch Collision Material (Asset.Material)- The material used by the touch collision mesh. In Lens Studio's scene panel, the mesh is visualized with a semi transparent material. When running in Lens, this material is made invisible
Ground Grid (SceneObject)- A reference to the ground grid object
Render Order (int)- The render order which all children SceneObject's will be set to. This is done so that the rendering will be sorted by Z-position, rather than by the order in the Objects panel
Please refer to the guides below for additional information:
Still Looking for help?Visit Support