Sprite Frame Assets

Sprite Frame is a container for UI rendering and basic graphics, which manages the clipping and tiling data on top of a Texture2D asset (by holding a reference to it).

Importing Sprite Frame Assets

Use the default asset import method to import image assets into the project, then set the type of image as sprite-frame and can then be seen in the Assets Panel.

Image assets will use thumbnails of their own pictures as icons in the Assets Panel. When the image sub-asset is selected in the Assets Panel, a thumbnail of the image is displayed below the Property Inspector.

Using a Sprite Frame

1. The object contained in the container is using textures

In the editor, drag the SpriteFrame asset to the Sprite Frame property of the Sprite component to switch the image displayed by the Sprite. At runtime, taking the content picture in the above picture as an example, The entire asset is divided into image asset (content) ,its sub-asset (spriteFrame) and sub-asset (texture). The assets in the game package can be obtained by the following methods:

Method 1: (load ImageAsset):

const self = this;
const url = 'test_assets/test_altas/content';
loader.loadRes(url, ImageAsset,(err: any, imageAsset) => {
  const sprite = this.getComponent(SpriteComponent);
  const spriteFrame = new SpriteFrame();
  const tex = new Texture2D();
  tex.image = imageAsset;
  spriteFrame.texture = tex;
  sprite.spriteFrame = spriteFrame;
});

Method 2:（load SpriteFrame)：

const self = this;
const url = 'test_assets/test_altas/content/spriteFrame';
loader.loadRes(url, SpriteFrame,(err: any , spriteFrame) => {
  const sprite = this.getComponent(SpriteComponent);
  sprite.spriteFrame = spriteFrame;
});

Assets on the server can only be loaded into ImageAsset. For specific methods, please refer to the Asset Loading documentation.

Cocos Creator will provide a way to package an Image Asset as a SpriteFrame in a later release to make it easier for users to use image assets.

2. The container contains objects that are used by RenderTexture

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. Use is as follows:

const cameraComp = this.getComponent(CameraComponent);
const renderTexture = new RenderTexture();
const size = view.getVisibleSize();
renderTexture.reset({
   width: size.width,
   height: size.height,
   colorFormat: RenderTexture.PixelFormat.RGBA8888,
   depthStencilFormat: RenderTexture.DepthStencilFormat.DEPTH_24_STENCIL_8
});

cameraComp.targetTexture = renderTexture;
const spriteFrame = new SpriteFrame();
spriteFrame.texture = renderTexture;
const sprite = this.getComponent(SpriteComponent);
sprite.spriteFrame = spriteFrame;