Skip to main content

Screen Image

The Screen Image object allows you to create an image in 2D screen space.

screen image in scene panel

Add a Screen Image Object

To add a Screen Image object, click the Add button [+], go to 2D, and select Screen Image in the Hierarchy panel.

screen image in hierarchy

A 2D Camera is automatically added along with the Screen Image.

2D camera in hierarchy

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.

2D camera properties

Use the Screen Image Object

You can manipulate the Screen Image in screen space, and assign a Texture to change what it displays.

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.

note

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.

move screen image

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.

resize screen image

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.

rotate screen 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.

magnet screen image

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.

move multiple images

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.

Components

The Screen Image object is made up of the following components, found in the Inspector panel: