Screen Image
The Screen Image object allows you to create an image in 2D screen space.
In previous versions of Effect House, the Screen Image object was called the Image object. Starting in Effect House v2.1.0, the Image object is a 3D object that can be manipulated in 3D space. Learn about using images in 3D space.
Add a Screen Image Object
To add a Screen Image object, click the Add button [+] > 2D > Screen Image in the Hierarchy panel.
A 2D Camera is automatically added along with the Screen Image.
The assigned Camera Type is an Orthographic camera, which displays objects without perspective. Regardless of how you move the camera, the image will appear unchanged in the preview.
Altering the 2D Camera‘s Ortho Height value in the Inspector panel renders the image larger or smaller in the preview. A lower value shows a larger image, while a higher value shows a smaller image. Learn more about orthographic cameras.
Screen Image in the Hierarchy Panel
The Screen Image appears in the 2D Foreground Effects render group in the Hierarchy panel. Learn more about render groups.
Image Asset Preparation
You can import image assets into Effect House by clicking the Add button [+] > Import > From Computer in the Assets panel. You can also simply drag the image into the Assets panel.
Learn more about 2D image preparation.
To apply the imported image to the Screen Image, select the Screen Image object in the Hierarchy panel. Then go to the Inspector panel to view the Image component, and change the Texture property to the imported image asset.
Image Requirements
- Format: Effect House supports PNG and JPG files
- Single file size: Less than 1 MB
- Total effect package: Less than 5 MB
Move, Rotate, and Resize the Screen Image
In the Scene panel, you can scale, rotate, and transform the bounding box.
To reposition the image, click and drag the image in the Scene panel.
To resize the image, click and drag the corners and edges of the bounding rectangle. The image is scaled uniformly, so the aspect ratio is preserved.
To rotate the image, hover your cursor over a corner of the bounding rectangle until the rotation handle appears. Click and drag with the rotation handle to rotate the image.
You can also use the magnet function to snap the image to specific locations in the 2D scene. Click the Magnet icon above the scene and adjust the image to your desired position. Snapping happens at the edge, corner, or center line of the 2D scene. It can also be used when resizing the object.
Use Multiple Screen Images
Ordering Images in the Scene
When using multiple Screen Images, the render order of the images is directly tied to their order in the Hierarchy panel. Objects lower in the render group will render after objects higher up in the render group.
Move Multiple Images Together
To group multiple Screen Images together, Command + click (Mac) or Control + click (Windows) the desired images in the Scene panel, and drag them to reposition them together.
When multiple Screen Images are selected, you can move them as a group, but you can’t rotate or scale multiple images at the same time.
Image Component and Properties
You can adjust the Image component’s properties to control how the image looks in the effect.
Texture: Sets the target image asset for the Image component.
Blend Mode: Sets the current image to blend with whatever is behind it. Learn more about the different blend modes.
Opacity: Sets the transparency of the image. The range is from 0.0 to 1.0, with a default value of 1.0.
Color: Sets the color that will blend with the image texture.
Stretch Mode: Defines how the image fits into its bounding rectangle. Below are the available Stretch Modes to choose from:
- Fit (Default mode): The image is scaled uniformly so that its aspect ratio is preserved, and the image fits within the bounding rectangle.
- Fit Width: The image is scaled to fit the width dimension of the bounding rectangle, while preserving its aspect ratio. The image can extend beyond the rectangle on the top and bottom.
- Fit Height: The image is scaled to fit the height dimension of the bounding rectangle, while preserving its aspect ratio. The image can extend beyond the rectangle on the left and right.
- Stretch: The image is stretched to completely fill the bounding rectangle, distorting its aspect ratio.
- Fill: The image is scaled to completely fill the bounding rectangle, while preserving its aspect ratio. The image extends past the bounding rectangle to fill it completely.
- Fill and Cut: The image is scaled to completely fill the bounding rectangle as in the Fill setting, but is cropped to fit within the bounding rectangle.
Flip X: Flips the image horizontally.
Flip Y: Flips the image vertically.
Screen Transform Component and Properties
Position (X, Y): The location of the bounding rectangle’s pivot point relative to the screen center. The default value is (0,0).
Size (Width, Height): The fixed size of the bounding rectangle based on pixels. The default value is (720, 1280).
Pivot (X, Y): The position of the rotation center. The default value is (0.5, 0.5), which is the center of the 2D object.
- X: The closer the value is to 0, the farther left the pivot is. The closer the value is to 1, the farther right the object pivot is.
- Y: The closer the value is to 0, the lower the pivot is. The closer the value is to 1, the higher the pivot is.
In 2D space, the X and Y pivot values present as Cartesian coordinates.
To change the pivot position in the Scene panel, click the pivot point in the center of the bounding rectangle and drag the point to the desired position.
To snap the pivot point to the center of the image, use the magnet function and drag the pivot point close to the center of the bounding rectangle. The pivot point will also snap to the X and Y axes of the image.
Rotation: The rotation of the image around the Pivot point. The default value is 0.
Scale 2D (X, Y): Stretches the image, distorting its aspect ratio. The default value is (1,1).
Pixels Per Unit: Controls the resolution. The default value is 32 pixels.