Learn / Documentation / UIImage

Description

The UIImage displays a Sprite for the UI System just like the Image component, but it has a few extra settings like corner radius (rounded corners), feather (soft edges) and border width (display as a border).
See Also: Image

Component Details

Gesture Listener
  • Manual – Link to the manual page for this component

  • YouTube – Link to the quick video tutorial for this component

  • Source Image – The Texture that represents the image to display (which must be imported as a Sprite)

  • Material – The Material to use for rendering the image.

  • Raycast Target – Enable Raycast Target if you want Unity to consider the image a target for raycasting

  • Color – The color to apply to the image

  • Image Type – Determines how the Image should be displayed (Simple – Displays the full Image / Sliced – Displays the Image as a 9-sliced graphic / Tiled – Displays a sliced Sprite with its resizable sections tiled instead of stretched / Filled – Displays only a portion of the Image)

  • Preserve Aspect – Ensure the image retains its existing dimension

  • Fill Method – Fill method to be used by the UI.Image when Image Type is set to Filled (Horizontal – The Image will be filled Horizontally / Vertical – The Image will be filled Vertically / Radial90 – The Image will be filled Radially with the radial center in one of the corners / Radial180 – The Image will be filled Radially with the radial center in one of the edges / Radial360 – The Image will be filled Radially with the radial center at the center)

  • Fill Amount – Determines how much of the Image will be filled (visible) when the Image Type is set to Filled. It respects the Fill Method. Value from 0 to 1.

  • Clockwise – Determines if the fill will happen clockwise or counter-clockwise

  • Radius – Radius values for all the 4 corners (starting upper-left, clockwise)

  • Lock Radius – If enabled, when changing a radius value for one of the corners, all of the other radius values will be modified as well

  • Feather – Sets the image feather (also known as ‘soft edges’). Used to adjust harsh edges for graphics by applying a blur effect

  • Feather Range – Small – o to 1 / Medium – 1 to 5 / Large – 5 to Max between Image width and height

  • Feather Expands Size – Toggle if the feather effect should expand beyond image size or not

  • Border Width – Border width for the UIImage. Default value is 0 (no border)