UXImage

ThunderFire UX Tool extends Unity's original Image in UXImage, adding new features to help interaction designers work more easily with image content and providing a partial interface for engineers to change in code.

Use path

Hierarchy window Click [Right click->UI->UXImage] in the Hierarchy window to create a UXImage.

Menu bar Click [GameObject->UI->UXImage] in the menu bar, you can also create a UXImage.

Image Localization

UXImage supports image localization and can switch the image display according to the selected language, refer to Localization Features for details.。

Gradient color

UXImage supports filling the Image with a gradient color selected by the color type drop-down box, as shown in the figure.

Gradient direction the gradient fill direction, you can choose horizontal or vertical gradient.

Gradient color the gradient preview box, click it to open the gradient editor.

In the gradient editor, the effect of gradient can be adjusted.

Gradient mode there are two modes, Blend and Fixed, Blend is a normal gradient, Fixed is a fixed color without transition effect.

Color scale located at the top and bottom of the gradient color bar, used to indicate the key color used in the gradient, every two adjacent color scale between the smooth and uniform composition of the gradient. Click the upper and lower area of the color bar to add a new color marker, select and press delete to delete the color marker.

• Color color scale: located below the gradient bar, with two properties: color and color scale position.
• Transparency color marker: located above the gradient bar, with two properties of transparency and color marker position.

Gradient preset you can store the current gradient in the preset.

Using color/gradient configuration

Click the [Use UIColorConfig] button to open the preset selection interface of UIColorConfig and use the configured color or gradient directly, you can refer to the Color and Gradient Configuration for details.

Mirroring

UXImage provides four mirroring modes, namely no mirroring, horizontal mirroring, vertical mirroring and surrounding mirroring, which can help save image resources by using mirroring.

Horizontal Mirroring and Vertical Mirroring

Horizontal mirroring and vertical mirroring flip the original image in the horizontal and vertical directions respectively, and you can choose whether to copy the original image or not, and you can also choose the copying direction when copying. Take horizontal mirroring as an example, the effect of mirroring in different directions is shown in the following figure.

Surrounding Mirroring

Surrounding mirroring is a combination of horizontal mirroring and vertical mirroring, the effect is equivalent to the first horizontal mirroring and copy and then vertical mirroring. the center point of filling can be chosen, as shown in the following figure.

Effect Styles

You can quick-add Shadow and Outline components to style the images by clicking the Shadow and Outline buttons.