Skip to content

Sprite 组件

介绍

Sprite 通常是一个 2D 图片渲染组件,负责读取图片资源中的纹理颜色渲染为游戏背景或界面。

创建一个纯色背景的游戏背景

步骤如下:

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

  • 添加纯色 spriteFrame: 使用 internal 内置资源库中 default_ui 文件夹中的 default_sprite_splash.pngspriteFrame 资源作为 Sprite 组件的 spriteFrame

  • 修改 Sprite 节点大小: 设置 Sprite 组件的 sizeMode 属性为 custom,修改 Sprite 节点的 UITransform 组件的 contentSize 属性的 widthheight 的值。

  • 修改 Sprite 颜色:如果 Sprite 的 spriteFrame 属性不为空,那么修改 Sprite 组件的 color 属性,可以改变 Sprite 组件的最终显示颜色。

编辑器内手动添加 Sprite 组件

点击节点 属性检查器 上的 添加组件 按钮,然后选择 2D/Sprite 即可添加 Sprite 组件到节点上。

此时 Sprite 组件的 spriteFrame 属性为空,无法显示任何图像,需要开发者手动添加任意 SpriteFrame 类型的资源到 spriteFrame 属性上进行渲染。

Sprite 组件属性

CustomMaterial

自定义材质(3D 中使用)

Color

图片颜色

SpriteAtlas

Sprite 显示图片资源所属的图集

SpriteFrame

图片资源

Grayscale

灰度模式,开启后 Sprite 会使用灰度模式渲染。

Size Mode

指定 Sprite 的尺寸

  • Trimmed 表示会使用原始图片资源裁剪透明像素后的尺寸

  • Raw 表示会使用原始图片未经裁剪的尺寸

  • Custom 表示会使用自定义尺寸。当用户手动修改过 Size 属性后,Size Mode 会被自动设置为 Custom,除非再次指定为前两种尺寸。

Type

渲染模式,包括普通(Simple)、九宫格(Sliced)、平铺(Tiled)和填充(Filled)四种模式,

Trim

是否渲染原始图像周围的透明像素区域

注意

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

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

渲染模式

Simple 普通模式

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

Sliced 九宫格模式(任意拉伸)

图像将被分割成九宫格,并按照一定规则进行缩放以适应可随意设置的尺寸(size)。通常用于 UI 元素,或将可以无限放大而不影响图像质量的图片制作成九宫格图来节省游戏资源空间 请参照后面的制作可以任意拉伸的UI图

Tiled 平铺模式(重复)

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

Filled 填充模式(截取)

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

  • FillType

填充类型选择,有 HORIZONTAL(横向填充)、VERTICAL(纵向填充)和 RADIAL(扇形填充)三种。

  • Fill Start

填充起始位置的标准化数值(从 0 ~ 1,表示填充总量的百分比),选择横向填充时,Fill Start 设为 0,就会从图像最左边开始填充

注意

  1. FillType 为 HORIZONTAL(横向填充) Start 为 0 就是从左边填充

  2. FillType 为 VERTICAL(纵向填充) Start 为 0 就是从上边填充

  • Fill Range

充范围的标准化数值(同样从 0 ~ 1),设为 1,就会填充最多整个原始图像的范围。

  • Fill Center

填充中心点,该属性只有选择了 RADIAL 填充类型才能修改。决定了扇形填充时会环绕 Sprite 上的哪个点。