Skip to main content
TikTok Effect House Platform Logo
Download
Log in
2D

2D Image

This article will show how to place 2D assets in a screen space canvas that allows for easier placement and control of 2D assets. This makes organizing your scene for things such as UI, or other 2D graphics, much easier.

Import images

You can import an image by clicking + Add Asset > Import > From Computer. You can also simply drag the image into the Assets panel.

Note
Note

See 2D Image preparation for a more detailed setup.

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 Image object

unaligned-image-0
unaligned-image-1

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

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 color from the Color property. See 2D Image Blend Mode for more information.
  • 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.
unaligned-image-0
unaligned-image-1
  • 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
unaligned-image-0
unaligned-image-1
  • 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
unaligned-image-0
unaligned-image-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, feel free to scale, rotate and transform the image in the scene view.

Recenter 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 check the Flip X in the 2D Transform attached to your image asset to flip the image horizontally. Check the Flip X in the 2D Transform to flip the image vertically.

2D Transform properties

  • Position (x, y) (default:(0,0))
  • Rotation (default =0)
  • Scale 2D (x, y) (default:(1,1))
  • Size (Width, Height) (default:use image texture size)
  • Pivot (x, y) (default: (0.5, 0.5)) the center of the 2D object.
    • X: 0: left; 1: right
    • Y: 0: bottom; 1: top
unaligned-image-0
unaligned-image-1
unaligned-image-0
unaligned-image-1
  • FlipX: flip the image horizontally.
  • FlipY: flip the image vertically.

Use multiple images

Render Order

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.