Sprite 组件使用范例 ​

Sprite 通常是一个 2D UI 组件，负责读取图片资源中的纹理颜色渲染为游戏背景或界面。通过以下步骤可以在场景中快速创建一个显示图像颜色的游戏背景：

1. 添加 Sprite: 在场景中已经添加 Canvas 组件的节点中添加一个子节点，并设置此子节点的 Layer 属性为 Layers.Enum.UI_2D，最后为这个子节点添加一个 Sprite 组件。

2. 添加 spriteFrame: 将资源管理器中的 SpriteFrame 类型资源设置为 Sprite 组件的 spriteFrame 属性，用于渲染游戏背景颜色。

3. 添加纯色 spriteFrame: 如果想要创建纯色背景（例如蓝绿色背景），可以使用 internal 内置资源库中 default_ui 文件夹中的 default_sprite_splash.png 的 spriteFrame 资源作为 Sprite 组件的 spriteFrame。

4. 修改 Sprite 节点大小: 当为 Sprite 组件 spriteFrame 属性添加 SpriteFrame 类型资源后，Sprite 组件会读取 spriteFrame 资源的宽高数值并设置到节点的 UITransform 组件的 contentSize 属性上。当 Sprite 组件的 Size Mode 为 Trimmed 或 Raw 时，此时使用 spriteFrame 资源的宽高作为节点的尺寸大小并覆盖节点原有尺寸大小。如果 Size Mode 属性为 Custom，则不会改变节点的尺寸大小。

5. 修改 Sprite 颜色：如果 Sprite 的 spriteFrame 属性不为空，那么修改 Sprite 组件的 color 属性，可以改变 Sprite 组件的最终显示颜色。

编辑器内手动添加 Sprite 组件 ​

点击节点 属性检查器 上的 添加组件 按钮，然后选择 2D/Sprite 即可添加 Sprite 组件到节点上。此时 Sprite 组件的 spriteFrame 属性为空，无法显示任何图像，需要开发者手动添加任意 SpriteFrame 类型的资源到 spriteFrame 属性上进行渲染。

Sprite 属性 ​

添加 Sprite 组件之后，通过从 资源管理器 中拖拽 SpriteFrame 类型的资源到 SpriteFrame 属性引用中，就可以通过 Sprite 组件显示资源图像。

如果拖拽的 SpriteFrame 资源是包含在一个 Atlas 图集资源中的，那么 Sprite 的 Atlas 属性也会被一起设置。

若要动态更换 SpriteFrame 则需要先动态加载图片资源，然后再进行替换，详情请参考 获取和加载资源：动态加载。

渲染模式 ​

Sprite 组件支持以下几种渲染模式：

• 普通模式（Simple）：根据原始图片资源渲染 Sprite，一般在这个模式下我们不会手动修改节点的尺寸，来保证场景中显示的图像和美术人员生产的图片比例一致。

• 九宫格模式（Sliced）：图像将被分割成九宫格，并按照一定规则进行缩放以适应可随意设置的尺寸(size)。通常用于 UI 元素，或将可以无限放大而不影响图像质量的图片制作成九宫格图来节省游戏资源空间。详细信息请阅读 使用 Sprite 编辑器制作九宫格图像 一节。

• 平铺模式（Tiled）：当 Sprite 的尺寸增大时，图像不会被拉伸，而是会按照原始图片的大小不断重复，就像平铺瓦片一样将原始图片铺满整个 Sprite 规定的大小。

  

• 填充模式（Filled）：根据原点和填充模式的设置，按照一定的方向和比例绘制原始图片的一部分。经常用于进度条的动态展示。

填充模式（Filled） ​

Type 属性选择填充模式后，会出现一组新的属性可供配置：

Fill Range 填充范围补充说明 ​

在 HORIZONTAL 和 VERTICAL 这两种填充类型下，Fill Start 设置的数值将影响填充总量，如果 Fill Start 设为 0.5，那么即使 Fill Range 设为 1.0，实际填充的范围也仍然只有 Sprite 总大小的一半。

而 RADIAL 类型中 Fill Start 只决定开始填充的方向，Fill Start 为 0 时，从 x 轴正方向开始填充。Fill Range 决定填充总量，值为 1 时将填充整个圆形。Fill Range 为正值时逆时针填充，为负值时顺时针填充。

API 文档 ​

图像的组件接口请参考 Sprite API。

范例 Demo ​

关于使用可以参考范例 Sprite（GitHub | Gitee）。