Image Sliced & Tiled 回顾

Sclied的应用

Border设置的技巧

Tiled 中间区域，非横纵拉伸，平铺

：Sliced Image
通常用来制作UI上的尺寸大小不同的面板。
如果为每一种不同大小的面板做一张Texture Asset，会增大Texture Sheet的Size，这会增加内存的消耗。

如果直接对图片进行缩放，你不能保证面板是等比的大小，这会导致变形，即便是等比例进行缩放，也会出现象素失真的情况。

Sliced通过特定算法对Image的尺寸进行拉伸，并且可以保持四个边比例不变，只需要一张很小的Texture Asset，通过算法缩放，便可以支持不同尺寸需求的面板。

Sliced的应用，节省了Texture Sheet的Size，也就意味着节省了内存的消耗。

Sclied 将图片切割成9个区域，如下（来自google):

image.png

感谢网友做了这么棒的一张图:)

Unity 中点击特定的Texture Asset,在Inspector面板中，点击Sprite Editor 按钮，会打开编辑界面，可以编辑Border，四个点：

Left,Right,Top,Bottom

image.png

我们直观看到的就是横纵两条绿色的直线，这样可以将图片划分为9
块，9个区域，在缩放的时候，9个区域的缩放策略是不同的。

上面的图片已经进行了标明，下面这张图对9块区域进行了编号，可以更方便我们查看：

image.png

缩放的策略：

：A，C，G，I 保持比例，不缩放
：B，H 横向缩放
：D，F 纵向缩放
：E，双向（横，纵）缩放

在实际开发的过程中，这种区域的划分，并不总是1:1的，如上面两张图示，L，R，T，B均是1:1

对于下面这张图，如何设置Border，才能保证自由的拉伸，并且边角的花保持比例？

image.png

首先将ACGI，即四条边给切割出来，对于横向和纵向的拉伸，其实只需要一个象素就可以，最中间的，保证他切割的区域没有切掉特定象素的地方。

设置如下：

image.png

Border设置的技巧：

先切割确保不变的四个边角，然后保证横向、纵向、中间区域，没有切割不同的象素（即保证区域内是纯色的象素，这样拉伸才不会看出来）。

最后说一下,Tiled，Tiled是平铺的效果，也需要设置Border参数，平时不同尺寸的拉伸我们通过Sclied就可以满足，但如果我希望中间区域E，不再是横纵向的拉伸，而是根据尺寸进行平铺，即内容的重复，那么就必须采用Tiled.

比如下面这张图：

image.png

我希望他在拉伸的时候，中间不再是简单的横纵拉伸的效果：

image.png

而是平铺：

image.png

这样就需要采用Tiled的缩放策略。

上面这个例子在实际应用可能有些牵强，但下面这张图，就比较有说服力了：

image.png

一把梯子，梯子的宽高是不固定的，如果我采用Sclied的形式，梯子会变形比较严重：

image.png

保持比例不变的四个边角没有问题，但中间的区域，梯子间隔被拉大的明显，而且失真严重，我要的效果是梯子间距离不变，而且随着我高度增加，梯子的节数也要跟着增加，像是无限延长的梯子，这时候就需要Tiled策略了，让中间区域平铺。

但在这里还有一点需要注意，因为是平铺，一定要注意梯子的”首尾“相连的问题，避免出现梯子间隔在大小不同的情况，正确的切割如下：

image.png

为了让“首尾”可以相连，取一节梯子的一半。

image.png