Sprite Frame Assets

    Use the default method to import image assets into the project, then set the type of image as sprite-frame in the Inspector, and save it by clicking the green checkmark button in the upper right corner.

    Creator will automatically create a spriteFrame asset under the imported image assets as shown below.

    spriteframe

    An image asset will have a thumbnail of its own image as icon in Assets. When an image sub-asset is selected in Assets, a thumbnail of the image is displayed below the Inspector.

    If the engine has Dynamic-Atlas enabled, Dynamic-Atlas will automatically merge the appropriate textures into one large texture at the start of the scene to reduce Drawcall. If the UV coordinates of the texture are used in the custom , the UV calculation in the will be wrong and the Packable property of the texture needs to be set to false to prevent the texture from being packed into the Dynamic-Atlas.

    In the editor, drag the SpriteFrame assets into the SpriteFrame property of the to switch the image displayed by Sprite.

    At runtime, taking the imported image named content above as an example, the entire asset is divided into three parts:

    • content：Image source assets ImageAsset
    • Sub-asset texture of content, the mapping asset Texture2D

    When assets are stored in the directory, we can load directly to the spriteFrame asset with the following code example.

    1. Assets on the server can only be loaded to the source ImageAsset. For specific methods, please refer to the dynamic load asset documentation. The code example for creating a SpriteFrame asset is as follows:

      Users can also fill in the information manually. Example:

    2. Create from an ImageAsset drawn by Canvas. Example:

      Users can also fill in the information manually. Example:

    RenderTexture is a rendering texture that renders content from the camera directly to a texture instead of the screen. SpriteFrame can easily display 3D camera content on the UI by managing RenderTexture. For specific usage and code example, please refer to Render Texture.