2018年8月2日

一口气读懂Sprite Type四种渲染模式

作者 admin

其中渲染模式包括：普通（Simple）、九宫格（Sliced）、平铺（Tiled）和填充（Filled）渲染四种模式

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

如果进行拉伸处理

在浏览器他是这个样子的-> 对比着看会发现图片出现了拉伸的效果。

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

1.通过资源管理器里面点击图片进行编辑，

2. 自定义缩放百分比

现在来看一下浏览器的实时对比效果

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

1.编译器中的设置

浏览器实时效果

1.自定义效果(垂直填充)

填充说明：

填充模式（Filled）

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

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

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 为正值时逆时针填充，为负值时顺时针填充。