Image
Images are 2D planes that can be added to your Lens. They can be added to the 3D scene, attached to the screen, attached to the face and more.
Add Texture Resource
To add an image to your Lens, you first need to add a Texture resource to the Asset Browser
panel. To do this, drag and drop a PNG
, JPG
, GIF
, PVR
, TIFF
, DDS
, TGA
, BMP
to the Asset Browser
panel from your computer. For information about adding animated textures, please refer to the 2D Animation guide.
You can alternatively add a new resource press "+"
button at the Asset Browser
panel and select Import Asset
.
Add Image to Screen
Images can be added to the Screen as well. These images will exist in 2D space attached to the screen. Screen Images are great for UI elements, overlays, headers, footers, logos and more.
Add Screen Image
To add a new Image attached to the Screen, press "+"
button at the Scene Hierarchy
panel and select Screen Image
Set Texture
With the new Screen Image selected, open the inline editor in the Inspector
panel for the material used by the Image
component by pressing the button to the right of the material. Next, set the Texture
field to your imported Texture resource.
In the Asset Browser
you'll notice an Image
material has been added when you added the Screen Image. The material asset is used to describe how something should look. The Image component automatically adds a material suitable for itself (e.g. unlit). Learn more in the materials guide.
Move, Scale and Rotate in Scene
Double click on the Screen Image, which will open up the 2D Editor
panel. Click and drag the image in the panel to move the image. The Screen Image can be scaled by clicking and dragging the corners and edges of the bounding box. Finally, the Screen Image can be rotated by hovering your mouse over a corner until the rotation handle appears. With the rotation handle, click and drag your mouse to rotate the Screen Image.
Add Image to 3D Scene
Images can be added to the 3D Scene. This will allow you to position the 2D image in 3D space.
Add Image
To add a new Image to the 3D Scene, select + -> Image
from the Scene Hierarchy
panel.
Set Texture
With the new Image selected, set the Texture
field in the Inspector
panel to your imported Texture resource.
Move, Scale and Rotate in Scene
With the new Image selected, you can move the object in the 3D Scene in the Scene
Panel. Press the W
shortcut to enable the move handles on the object and then drag the handles to move in the X, Y and Z space. Similarly you can use the E
shortcut for Scale and the R
shortcut for Rotation.
Add Image to Face
Images can be attached to and track with the face. Please refer to the Face Image guide for details.
Adjusting Image
With an Image or Screen image selected in the Scene Hierarchy
panel, you can modify the Image's settings in the Inspector
panel.
- Material: The material assigned to the image. Unless you're using your own custom material, use the Default material
- Pass: The shader that describes how the material works.
- Texture: The Texture Resource assigned to the image
- Blend Mode: The blend mode of the image. Commonly used blend modes are Normal, Multiply, Overlay, Screen and Soft Light
- Alpha: How transparent the image will be
- Depth Test: Whether or not the image should test for depth for render order
- Open Full Inspector: Open the
Inspector
panel for the material which this image is using.
- Align to Camera: Whether or not the image should always face the camera
- Flip: Allows you to flip the image either horizontally or vertically
Images that exists in the 3D Scene gives access to a Pivot Position
field. Additionally, the Pivot Presets
interface will automatically set the Pivot Position to commonly used pivots when clicked. These options will only appear when working with an Image without a Screen Transform.
Stretch Modes
Stretch Modes define how the image will fit to its bounding box. Below are the available Stretch Modes to choose from.
Fill
Fill will always fill the bounding box completely with the image. The image will extend pass the bounding box to maintain a complete fill. The image's aspect ratio is preserved.
Stretch
Stretch will always completely fill the bounding box with the image. It will stretch the image to fill the bounding box, distorting its aspect ratio.
Fit Width
Fit Width will always fit the image within the width space of the box. The image can extend beyond the bounding box on the top and bottom. The image's aspect ratio is preserved.
Fit Height
Fit Height will always fit the image within the height space of the box. The image can extend beyond the bounding box on the left and right. The image's aspect ratio is preserved.
Fill and Cut
Fill and Cut works exactly like Fill but instead of letting the image extend beyond the bounding box, it crops the image to the bounding box.
Screen Transform
Screen Images always come with a Screen Transform component. The Screen Transform allows you to adapt screen attached UI to device resolution changes. Please refer to the Screen Transform guide for a detailed walkthrough on the power of Screen Transform including some commonly used setups.
Scripting Image
Below are some common scripting use cases for modifying Image programmatically.
Set Texture
The script below will set the Image's texture.
// @input Component.Image image
// @input Asset.Texture texture
script.image.mainPass.baseTex = script.texture;
Set Alpha
The script below will set the Image's alpha via the color parameter (without changing its color).
// @input Component.Image image
// @input float alpha = 0.5 {"widget":"slider", "min":0.0, "max":1.0, "step":0.01}
var currColor = script.image.mainPass.baseColor;
script.image.mainPass.baseColor = new vec4(
currColor.r,
currColor.g,
currColor.b,
script.alpha
);
Set Color
The script below will set the Image's color.
// @input Component.Image image
// @input vec4 color {"widget":"color"}
script.image.mainPass.baseColor = script.color;