Unity TileMap 瓦片与瓦片之间的线条
问题
在使用 TileMap 制作 2D 游戏的时候, 发现瓦片与瓦片之间总是存在一条缝隙, 这条缝隙什么颜色的都有, 可是我已经把所有素材的过滤方式都设置为了: "Point (no filter)", 为什么还会有这个问题呢? 原本以为是瓦片之间没拼接好, 大小没设置对(原谅我没有图形学方面的知识), 后来查阅资料得知, 目前美工在制作 2D 游戏素材时, 基本都会将同类的精灵图放到一张贴图中, 这样紧贴着的两个精灵图在某种特殊情况下就会出现使用了相邻精灵图中像素的问题.
从上面的素材图中可以看到, 多个精灵图组成了一张贴图, 其中中间位置的一张看似像 "车轮印" 的精灵图和右侧一张表示 "海洋" 的贴图相连, 于是在游戏中就会出现这种情况:
代表 "车轮印" 精灵图的右侧就会出现代表 "海洋" 精灵图的一个蓝色的像素, 导致出现了一条蓝色的细线. 实乃万恶之源!
先说一下已经试过的网友们的方法.
将 TileMap 的 cell 大小设置为接近 1 的值
默认情况下 TileMap 中 cell 的大小为 1 个单位, 瓦片在地图中的大小通常也是一个单位, 于是就想到将 cell 大小设置为比 1 个单位小那么一丢丢, 让最外围的一个像素不显示出来不就好了~ 赶紧尝试一下, 于是:
乍看上去好像没有细线了, 但是放大一下就会发现, 不仅是右侧有蓝色的细线, 现在上方也有了...呃...看来这种方法不适合我啊~
建立图集
听另一位大佬说, 将精灵图添加到图集时, Unity 会自动补全像素, 因此可以作为一个解决此问题的办法, 于是赶紧照着大佬说的操作一番~ 然后:
关于图集的知识我也不是很懂, 总之依旧没有实现比较完美的效果, 或者是让我满意的效果...可以看到图中确实已经没有了蓝色的细线, 但是会发现瓦片与瓦片之间的衔接变得很不自然, 有一条明显的分界线...呃...看来这种方法同样不适合我~
素材分辨率
后来我想到了之前做泰拉瑞亚的仿制 demo 时曾出现过的一个情况, 当时自己从网上搞来一批素材, 开始搭建人物. 人物的素材是拆成很多部分的, 我在拼接这些部分的时候发现像素对应不起来, 当时我的解决办法是把图片的分辨率改成了 2 的幂, 当时改成了 64, 然后像素就能对应上了. 同时我也发现 Unity 中有一项 Max Size 的设置, 这里也只支持 2 的幂, 会不会就是这里导致 Unity 会自动补全像素呢? 于是我赶紧将素材都改为了 2 的幂, 256 X 256, 重新导入并设置好后, 神奇的一幕发生了:
而且瓦片与瓦片之间也衔接的不错, 虽然仔细观察还是有瑕疵, 但是这应该是素材自身的问题了!
MSAA 多重采样
再到后来编写摄像机脚本的时候, 发现摄像机中有一个 MSAA 的设置选项, 忽然想起之前大佬提到过 MSAA 啊! 赶紧查一下 MSAA 是啥!
MSAA 是 "多重采样" 技术, 用来实现 "抗锯齿" 的效果. 在不规则图形的渲染中需求比较大. 下面是一张简单表示 MSAA 效果的图片. (引用自文章: 深入剖析MSAA)
由此可见在没有开启 MSAA 时, 一条斜线上的锯齿感非常明显, 开始 MSAA 之后, 斜线上的锯齿感便开始弱化. 理想状态下可以无限接近于真正的斜线.
但是在我这个项目中, MSAA 反而会形成困扰, 导致瓦片之间衔接不好, 甚至出现前面所说的细线, 毕竟游戏本就是像素风格嘛~ 于是我开始好奇将 MSAA 关闭后会有什么效果呢?
于是我回退到之前没有修改素材分辨率的版本, 找到摄像机中的 MSAA 选项, 选择 "Off", 然后神奇的一幕又发生了, 关闭 MSAA 后, 也实现了近乎完美的瓦片衔接...
那我之前耗费那么多时间处理素材是图啥子嘞~ 😭 又吃了没文化的亏~
总结
如果你的项目中也出现了文章中所提到的问题, 不妨尝试尝试这几种方法:
将 TileMap 的 cell 大小设置为接近 1 的值.
建立图集, 在图集的 Padding 处设置自动补全的像素值, 可选: 2 4 8.
![图集自动补全像素]()
处理素材的分辨率为 2 的幂.
关闭 MSAA
参考文章
3D 瓦片地图采坑录
深入剖析 MSAA
绘制地图(Tile Map)
图集(Atlas)