2D Image

Learn how to efficiently place 2D assets on a canvas to help organize the scene.

Import Images

You can import an image 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.

Image Requirements

• Format: Effect House supports PNG and JPG files
• Resolution limit: 1024 x 1024 pixels
• Single file size: Less than 1 MB
• Total effect package: Less than 5 MB

Add an Image

Go to the Hierarchy panel and click the Add button [+] > 2D > Image to add a 2D image to your scene. It will automatically add a Canvas and 2D Camera object along with a default image.

Object Hierarchy

Starting in Effect House v2.0.0, the Image object is nested under a Canvas object in the 2D Foreground Effects render group in the Hierarchy panel. Learn more about render groups.

Image Properties

Texture: Set the target 2D image asset for the Image component.

Opacity: Set the transparency of the 2D image. The range is from 0.0 to 1.0.

Blend Mode: Set the current image to blend with the image behinde it. Learn more about the different blend modes.

Color: Set the color that will blend with the image texture.

Draw Mode

• Draw Mode – Normal (Default): The image will be rendered in the center of the container.

• Draw Mode – Tiled: The image will be rendered as a 9-slice image where the corners will remain constant and the other sections will tile.

• Draw Mode – 9-Sliced: The image will be rendered as a 9-slice image where the corners will remain constant and the other sections will scale.
  • Sliced Left
    • Default: 0.1
    • Range: 0-1
  • Sliced Right
    • Default: 0.9
    • Range: 0-1
  • Sliced Top
    • Default: 0.9
    • Range: 0-1
  • Sliced Bottom
    • Default: 0.1
    • Range: 0-1
  • Fill Center Default: checked

• Draw Mode – Filled: The image will be rendered to fill the container
  • Filled Type
    • Horizontal
    • Vertical
    • Radial
  • + Start Point
    • Default: 0
    • Range: 0-1
  • + Filled Range
    • Default: 1
    • Range: 0-1

• Draw Mode – Ellipse: Render the image as a circle, and EllipseX and EllipseY will control the rendering circle range in X and Y-axis.
  • + Ellipse X
  • + Ellipse Y

Configure 2D Transform of the Image

Move, Rotate, and Resize the Image

In the 2D scene, you can scale, rotate, and transform the image in the Scene panel.

Repivot the Image

You can also change the Pivot value in the 2D Transform attached to your image asset. This will change the center point that your object rotates around.

Flip the Image

You can select the Flip X checkbox in the 2D Transform attached to your Image asset to flip the image horizontally. Select the Flip Y checkbox in the 2D Transform to flip the image vertically.

2D Transform Properties

Position (X, Y): The default is (0,0).

Rotation: The default is 0.

Scale 2D (X, Y): The default is (1,1).

Size (Width, Height): The image texture dimensions are used by default.

Pivot (X, Y): The default is (0.5, 0.5), which is the center of the 2D object.

• X: The closer this value is to 0, the more left the pivot is. The closer the value is to 1, the more right the object pivots.
• Y: The closer this value is to 0, the lower (to the bottom) the pivot is. The closer this value is to 1, the higher (to the top) the pivot is.

Flip X: Flip the image horizontally.

Flip Y: Flip the image vertically.

Use Multiple Images

The image’s render order is directly tied to the order that the 2D objects appear in the hierarchy under the canvas. The higher a 2D object appears in the Hierarchy panel, the later it will be rendered.