3D瓦片地图采坑录

  欢迎参与讨论,转载请注明出处。

前言

  由于Demo的场景风格主打像素风格(这里的像素风格指具备一定精度的风格,而非时下流行的马赛克),故决定使用瓦片(Tile)地图来实现。也就是这种东西:
0
  游戏地图将由一个个规范化的单位图片拼接而成,是为瓦片。在早期的像素风格游戏可谓相当流行,因其构造成本低(无论从技术上还是美术上),而却能灵活拼接出各种各样的地图。于是我们也打算如此,但是在3D游戏下搞瓦片地图确是罕见得很。于是便开始了采坑之旅,遂成本文。

Sprytile

  首先我们想到了在3D游戏下最接近瓦片地图思想的方案:Terrain,一般3D大地图都用类似方案:对一张平面地图进行各种揉捏形成地形,并在此之上涂抹各种图素。但可惜对于瓦片地图而言未免杀鸡用牛刀了,且在各方面都不能做到最适化,遂不考虑。
  其次便是Unity官方自带的2D Tilemap Editor,对瓦片方面的需求倒是满足了,可惜3D瓦片并不只是在一张平面上进行,而通过多张平面旋转组成场景未免勉强,遂放弃。
  既然在Unity这边行不通,那么便考虑生产端的Blender有什么合适的插件了。果不其然找到了Sprytile,一看就明白,就是它了:
1
  使用准备好的tile图集,划分格子,在Blender以格子为单位进行填涂,每个格子将会是一个面,支持XYZ三个平面进行,在填涂完成后可作为正常模型进行各种操作。一切看起来是那么的美好,然后一路到了游戏后……

过滤之殇

  以前篇的截图便可看出问题所在:
2
  可以看到地板之间存在奇怪的黑线:
3
  根据插件文档提供的Unity导出说明来看,必须要将地图贴图的过滤模式设置为Point,即邻近过滤:
4
  嗯,黑线果然消失了。那么问题便出在图片的过滤模式了,回去复习了下纹理过滤,答案昭然若揭:
5
  由于瓦片地图的习惯会将相关图素集成一块,形成连续的图块:
6
  那么在线性过滤下,图块的边缘像素在采样的时候将会混进相邻图块的颜色,于是那些奇怪的黑线便是这么来的。
  也许读者会认为:不用线性过滤不就得了,毕竟插件作者也是这么认为的。可惜我们做的风格并不适合用邻近过滤,那将显得与人物画风差异过大且马赛克:
7
  细心观察上图底部,这是开启抗锯齿(MSAA)导致的。查阅资料后发现这是MSAA的特点导致,如此哪怕我们想靠邻近过滤解决也是没门……当然也考虑过更换为其他抗锯齿的方式,但是效果都不甚喜人,于是开始寻觅解决之道。

无奈的解法

  首先考虑对tile图片进行下手:既然边缘会采样到相邻图块的像素,那么将它们隔开不就得了,如此:
8
  当然这么做的话要让Sprytile有所支持才行,好在它是开源的。Blender的插件改起来也还算容易,毕竟会在界面提示标识好功能函数名。结果还是翻车了:
9
  瓦片之间出现了奇怪的透明点,仔细一想便明白了:透明像素一样会被采样到,所以会影响到透明度。于是迅速想到下个方案:让每个图块外扩边缘1像素,这样边缘的采样只会采样到相同颜色的像素:
10
  很不错,黑线什么的都消失了,哪怕是开着MSAA。同时美术也在Blender琢磨出了一种方法:在不做任何处理的贴图的基础上,将瓦片地图模型的UV全部缩小一点(参考值:0.96),如此便不会直接采样到边缘像素,从而以牺牲了一点点边缘效果解决了问题。
  两者的效果最终是差不多的,但都是不完美的,在编辑器里便一目了然:
11
  可以看得出,格子之间的边界可谓泾渭分明,这是因为每个格子都是独立的mesh,它们并不是作为一个整体去渲染,也就不存在视为一个整体去采样。也就无法达到真正意义上2D游戏里要达到的效果(格子之间彻底融为一体)。要这么做有两种方式:第一种是根据瓦片地图的填涂情况最终生成大贴图与新模型,但这种方式相当不优化,并且会急剧增大包体。其次是仿照以前的2D游戏做法:游戏本身使用邻近过滤渲染,最后将渲染成图进行拉伸放大(放大方式采用线性过滤),但这是牺牲画面分辨率带来的。
  经过以上总结可以看出,基本不存在非常完美的解决方案,只能矮子里拔大个了:UV缩小的方案从工序上最为简单,且显示效果也能接受(没对比过原版基本看不出太多异样)。

后记

  一开始我们觉得这种瓦片地图1个格子就占2个三角形,面数会不会太高了。结果在参考其他游戏的情况时发现《闪之轨迹3》的一组垃圾桶的面数……
12
  嗯,一组垃圾桶的面数都完爆我整个瓦片地图模型了,法老控牛逼!
  顺带一提的是,刚才提到的格子边界问题在Unity官方的2D Tilemap Editor也是存在的,只能说是瓦片地图的局限性了,好在离得远也看不太出。