5.unity图片分割(Slice Sprite)、tile绘制技巧

今天的主题有两个

一、unity图片分割(Slice Sprite)

目标：把一张素材切成很多小素材，这样子使用图片可以节省资源唷！

二、tile绘制技巧

目标：制作可以拼凑的tile素材。

制作图片会使用绘图软件，ps、clip、procreate、sai都可以，只要能保留png档案都适合。

1.可无限延伸(循环)不会感到奇怪

2.可随机拼凑成地图的素材

一、unity图片分割(Slice Sprite)

1.导入图片

将Sprite mode设定成Multiple

设定好之後，点选Sprite Editor进入编辑视窗

会跳出题示问你要不要应用sprite，点选Apply

2.切割图片

进入编辑视窗後，点选Slice(如果没看到可以把视窗放大就有搂)

设定要切割的内容，我的主图是300×300，因此我要切成100×100大小。

点选Slice，unity就贴心的切好罗

3.完成分割

设定分割图片名称，不设定也可以，系统会自动编号，也可以自订分割大小。

关闭视窗时一样问你要不要套用此设定，点选Apply

完成後可以在下方素材中看到已经分割好的样子。

二、tile绘制技巧

１．无限延伸(循环)图片做法

1.先自己做一张图片

2.将他左右切一半，然後平行交换

(不用切的特别准一定要中间，重点是切掉的地方挪到边边的时候要对准)

3.接着切上下，然後垂直交换，这样就完成罗！

※贴到tilemap就可以得到美美的循环图罗

２．可拼凑成地图的素材

一开始画地图碎片的时候我使用一张一张画，每一张都是100×100，设定好标记点之後开图层画。

（这时候就要感叹一下clip没有一次汇出图层的功能很可惜，所以那时都用procreate画）

之後发现sprite是个好东西之後，就直接用clip画成完整的图，在拿到unity里面切割。

进入正题——
基本上只要画好这１５片，就可以组出各式各样的岛和海线。
（为甚麽是１５种呢？将每一片单位分成四格，然後算组合总共有１５种唷XD)
（4个角角+4个上下左右的边+4个只缺角角的+2个斜对角+1个完整的）
（比较数学的算法...每一格涂或不涂? 2^4-1(四格都不涂)这样XD阿哈哈）

为了可以随机组合，我设了一个接合规则：接合点都设在中间。
因此在画素材的时候，不管是哪一片要接合的地方都要在中点位置。
可以根据自己的需求、地图、特色制定规则，不同的规则会有不同的效果唷。

由上方１５片随机拼凑的小岛