Image reference
Change the properties of the UI Image.
읽는 시간 2분최근 업데이트: 17일 전
Use the Image element to add pictures or a simple rectangle to your user interface (UI) as a background or visual element. You can adjust the size, color, and how the image fits within the image's boundaries.
Image properties
The following properties are available for you to customize in the image's Inspector panel:
Property | Description |
|---|---|
| Sprite | Set the image to display. Select the field to show a list of available sprites in your draft. To add image files to your draft, refer to Import Assets. Leave the field empty to display a simple rectangle. |
| Color | Set the color of the image. |
| Raycast Target | Enable this option to allow the image to receive input events, such as clicks or touches. Disable this option to allow input events to pass through the image to other UI elements behind it. |
| Image Type | Choose how the image fits within the image's boundaries. Only appears if you assign a Sprite. Options include:
|
| Preserve Aspect | Enable this option to maintain the original aspect ratio of the image when scaling. Disable this option to allow the image to stretch and fill the area. This property appears only if you assign a Sprite. |
| Set Native Size | Click this button to automatically resize the image element to match the original dimensions of the selected sprite. This property appears only if you assign a Sprite. |
UI Transform properties
The UI Transform component has the following properties:
Property | Description |
|---|---|
| Anchor | Define where the element stays relative to its parent (the canvas or another UI element). Use the preset selector or the two dropdowns to choose an alignment horizontally and vertically. The dropdowns have the following options:
|
| Position | Set the object's location in 2D world space (X, Y). |
| Size | Set the object's width (W) and height (H). |
| Rotation | Rotate the UI element. Set this value to a number in degrees. |
You can change the sizes, rotations, and positions in the following ways:
- Change the values in the component's text fields.
- Click and drag parts of the rectangle on the canvas:
- Resize: Drag the corners and edges.
- Reposition: Click and drag inside the rectangle.
- Rotate: Hover above the corners until the rotation symbol shows, then click and drag.