关于 Sprite 渲染模式

前言

关于 Sprite 渲染模式


# 一. 普通(Simple)

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

需改尺寸会整体拉伸图像, 使用序列帧动画和普通图像。

# 关于顶点:

普通模式是常规的四边形,有4个顶点;


# 二. 九宫格(Sliced)

修改尺寸时四个角的区域不会拉伸,使用 UI 按钮和面板背景。

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

# 关于顶点:

九宫格模式下 Assembler 将节点拆分为9个四边形,每个四边形对应纹理上的一个“格子”


注意

九宫格 会增加 drawcall,根据实际使用场景,酌情使用, 不要盲目的使用。


# 三. 平铺(Tiled)

修改尺寸时会不断平铺原始大小的图片。

图像将会根据 Sprite 的尺寸重复平铺显示。如果 SpriteFrame 包含 九宫格配置,平铺时将保持九宫格的四周宽度不变,只平铺中心部分。

# 关于顶点:

平铺模式下 Assembler 根据纹理的重复次数对节点进行“拆碎”,相当于每重复一次就产生1个四边形;


# 四. 填充(Filled)

设置一定的填充起始位置和方向,能够以一定比率剪裁显示图片;

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

属性选择填充模式后,会出现一组新的属性可供配置,让我们依次介绍它们的作用:

属性 功能说明
Fill Type 填充类型选择,有 HORIZONTAL(横向填充)VERTICAL(纵向填充)RADIAL(扇形填充) 三种。
Fill Start 填充起始位置的标准化数值(0 ~ 1,填充总量的百分比),选择横向填充时,Fill Start 设为 0,就会从图像最左边开始填充。
Fill Range 填充范围的标准化数值(同样从 0 ~ 1),设为 1,就会填充最多整个原始图像的范围。
Fill Center 填充中心点,只有选择了 RADIAL 类型才会出现这个属性。决定了扇形填充时会环绕 Sprite 上的哪个点,所用的坐标系和 Anchor 锚点 是一样的。

# 五. 网格(MESH)

正常图片 设置了 网格模式后, 图片会显示不出来。

必须使用 TexturePacker 4.x 以上版本并且设置 ploygon 算法打包出的 plist 文件才能够使用该模式。

使用 网格模式 可以实现多边形裁剪图片 例如拼图