# UISprite图片渲染

# 概述

二维图片的渲染组件,根据节点的 Transfrom 大小与锚点,决定渲染区域大小与位置。

UISprite

# 属性

# 渲染类型 type

// 图片渲染类型枚举值 engine.UISprite.Type
enum Type {
  Simple = 0, // 基础矩型图像渲染,默认值
  Sliced = 1, // 九宫格图像渲染模式
  Tiled = 2,  // 平铺渲染模式
  Filled = 3, // 填充渲染模式
}
  • Simple 矩形图片渲染。
  • Sliced 九宫格图片渲染,会基于 SpriteFrameSlicedRect 定义九宫格的九个区域,边缘的八个区域大小固定,中间区域根据节点的渲染区域进行拉伸。
    • 支持 fillDirHorizontal / Vertical 的使用,此时,会在九宫格的基础上实现水平或垂直的填充渲染
  • Tiled 平铺图片渲染,会基于 SpriteFrameRecttileScale 算出的 tile 区域,去适配节点的渲染区域,从左上角开始平铺,保证图片充满渲染整个渲染区域,越界的渲染会隐藏掉。
  • Filled 填充图片渲染,会根据 fillDir 决定填充的类型,invertFill 决定填充方向,fillAmount 决定填充比例进行渲染。
    // 填充类型枚举值 engine.UISprite.FillDirectionType
    enum FillDirectionType {
      Horizontal,
      Vertical,
      Radial90,
      Radial180,
      Radial360,
    }
    

# 图片切片 spriteFrame

图片渲染所使用的图片切片,当用户清除贴图(设置为Empty),就会使用 内置的透明贴图

# 图片翻转 filp

图片在各个方向的渲染是否翻转

// 翻转类型枚举值 engine.UISprite.FlipType
enum FillDirectionType {
  Nothing, // 默认值
  Horizontally,
  Vertically,
  Both,
}

# 使用方法

# 代码使用

UISprite 是渲染组件,因此需要挂载到非渲染节点上。

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

# 编辑器使用

右键 - UI - 新建Sprite

# 使用案例

使用各类渲染元素