# UISprite image rendering

# Overview

The rendering component of the two-dimensional image determines the size and position of the rendering area according to the Transfrom size and anchor point of the node.

UISprite

# Attributes

# Rendering type type

// Image rendering type enumeration value engine.UISprite.Type
enum Type {
  Simple = 0, // Basic rectangle image rendering, default value
  Sliced = 1, // Jiugongge image rendering mode
  Tiled = 2, // Tiled rendering mode
  Filled = 3, // Filled rendering mode
}

Simple Rectangle picture rendering.
Sliced The nine-square grid image rendering will be based on the SlicedRect of SpriteFrame to define nine areas of the nine-square grid. The eight areas on the edges are fixed in size, and the middle area is stretched according to the rendering area of the node. -Support fillDir for the use of Horizontal / Vertical, at this time, realize horizontal or vertical fill rendering on the basis of Jiugongge.
Tiled Tiled image rendering will be based on the tile area calculated by Rect and tileScale of SpriteFrame to fit the rendering area of the node and start tiling from the upper left corner to ensure that the image is full Render the entire rendering area, and out-of-bounds rendering will be hidden.
Filled Fill image rendering will determine the type of filling according to fillDir, invertFill determines the filling direction, and fillAmount determines the fill ratio for rendering.
```
// Fill type enumeration value engine.UISprite.FillDirectionType
enum FillDirectionType {
  Horizontal,
  Vertical,
  Radial90,
  Radial180,
  Radial360,
}
```

# Picture slice spriteFrame

Image slice used for image rendering. When the user clears the texture (set to Empty), the built-in transparency texture will be used.

# Picture flip filp

Whether the rendering of the image in all directions is flipped

// Flip type enumeration value engine.UISprite.FlipType
enum FillDirectionType {
  Nothing, // default value
  Horizontally,
  Vertically,
  Both,
}

# Instructions

# Code usage

UISprite is a rendering component, so it needs to be mounted on a non-rendering node.

const uiSpriteComponent = entity.addComponent(engine.UISprite);
uiSpriteComponent.spriteFrame = spriteFrameAssets;

# Editor use

Right click-UI-New Sprite

# Use Cases

Use various rendering elements