Sprite Component Reference

    Add a Sprite component to the node by clicking the Add Component button below the Inspector panel and selecting 2D -> Sprite.

    To use , please refer to the Sprite API documentation and the scene of the test-cases-3d project.

    After adding the Sprite component, drag the SpriteFrame type asset from the Assets to the Sprite Frame property reference. Then, the asset image can be displayed through the Sprite component.

    If this SpriteFrame asset is contained within an Atlas asset, then the property of the Sprite will be set up along with it.

    Rendering mode

    Currently, the Sprite component supports the following rendering modes:

    • Simple mode: rendering the Sprite according to the original image asset. It is normally used along with Use Original Size to guarantee the image shown in the scene is in full accordance with the image designed by the graphic designer.

    • Tiled mode: The image will be repeated to fit the size of the Sprite. If the SpriteFrame is , the corners will also remain unscaled while the other areas will be repeated.

      tiled

    When the Type property selects FILLED, a new set of properties appears to be configured. So let’s explain their roles in turn.

    PropertyFunction Explanation
    Fill TypeFill type selection, including HORIZONTAL, VERTICAL, and RADIAL.
    Fill StartNormalized values for filling starting position (from 0 ~ 1, denoting the percentage of total population), when you select a horizontal fill, the is set to 0, and it is populated from the leftmost edge of the image.
    Fill RangeNormalized values for padding ranges (same from 0 ~ 1). When set to 1, it fills up the entire range of the original image.
    Fill CenterFill center point, this property can only be modified if the RADIAL fill type is selected. Determines which point on the Sprite is used as pivot when the FillType is set to RADIAL.

    Fill Range Supplemental description

    Under both the HORIZONTAL and VERTICAL fill types, the values set by Fill Start affect the total number of fills, if Fill Start is set to 0.5, even if Fill Range is set to 1.0, the actual padding is still only half the total size of the Sprite.

    The Fill Start in the RADIAL type only determines the orientation of the starting fill, when Fill Start is set to 0, start filling from the x axis positive direction.

    Fill Range determines the total amount of padding, which fills the entire circle when Fill Range is set to 1. A counter anticlockwise fill when is positive, and is filled clockwise when negative.