The image is the most basic element in FairyGUI. Its design is as simple and efficient as possible. Therefore, the function of modifying the image source is not provided, and clicks are not supported. If you need to change dynamically, or support clicking, please use the loader instead (if the image is already placed on the stage, then select the swap component in the context menu, and then select the loader, you can quickly modify the image into a loader).

FairyGUI supports image formats: PNG, JPG, TGA, PSD, SVG.

Image properties

In the resource library or on the stage, double-click the image to enter the image setting dialog:

function button:

HD resource selection

Those who have done APP development should be familiar with this mechanism. For example, we designed a set of interface for IPhone8 with a resolution of 1334x750. An image a.png is used. When this set of UI is displayed on IPhone XS Max, a.png needs to be displayed twice. The original image is blurred. Therefore, we will prepare an a@2x.png for this situation display, so that the interface display effect will show a high-definition effect.

Now we have built this mechanism into FairyGUI. In the Publish Settings dialog box, we have provided the options @ 2x, @ 3x, @ 4x. After checking, if there is a resource with the same name as the resource and with the @ 2x, @ 3x, @ 4x suffix, it will be included when publishing Bale. At runtime, the appropriate resources are automatically selected according to the interface magnification factor. This mechanism is fully automatic and programmers have no perception. The only thing that needs to be done is to place the resources in the editor.

Instance properties

Select an image on the stage, and the inspector on the right appears:


We generally do not use new directly to create images, and there is rarely a need to create images separately. It is usually placed directly in other components as a constituent element. If you really need to instantiate an image, you can use the following methods:

GImage aImage = UIPackage.CreateObject("package name", "image name").asImage;

As a basic component of UI, images are designed with simplicity and efficiency in mind, so APIs are not provided to modify images. If you need to change the image dynamically, you should use the GLoader instead.

If the image has a fill mode, you can modify the fill ratio through code, for example:

aImage.fillAmount = 0.5; // 0 ~ 1

In the Unity platform, if you need to assign a Texture2D object to GImage on some special occasions, you can do this:

// It must be noted that GImage does not manage the life cycle of external objects and will not actively destroy your_Texture2D
    aImage.texture = new NTexture (your_Texture2D);

Again, this requirement is still recommended to be implemented using loaders whenever possible.

In the Unity platform, you can set custom materials or shaders for GImage. E.g:

aImage.shader = yourShader;
aImage.material = yourMaterial;