《英雄联盟》核心地图召唤师峽谷：战争迷雾的优化

一元

　　在2013年年底，Riot的地图团队开始全速更新英雄联盟核心地图召唤师峽谷。这是一个异常艰巨的任务：团队不仅要更新地图的观感，同时还要保留玩家喜欢的元素，而且不能增加最低硬件要求。自召唤师峽谷升级（也可以称为SRU）以来，已经过去了一年多时间，现在回首来看，我有理由相信我们的团队做了一件了不起的事情。升级后的地图更具活力，更加吸引玩家，同时让游戏更具竞技性。在这篇文章中，我将介绍我们在这个项目中克服的一个困难：战争迷雾的优化。

召唤峽谷旧新版本对比

　　当地图团队拉开召唤师峽谷更新序幕时，每个功能，每个创意，甚至每个半夜梦到的东西都一一摆上台面。总体艺术方向和风格是什么？我们在地图的什么地方可以收缩移动路径？或者我们在地图什么位置可以添加新功能？河流的走向又要如何设计？当他们开始对新地图做改进，尝试一些新的资源时，某些事情像手指疼一样折磨着我们。其中一个就是战争迷雾—地图中那些黑暗的区域，包含隐藏地图，团队可以通过英雄，技能或者侦察来破除战争迷雾。艺术家已经知道战争迷雾有一些视觉保真度的困难，但在新地图的水晶效果背景下，这是很难看的。

旧的战争迷雾在新地图开发版本中的效果图

旧的战争迷雾在新地图开发版本中的效果图2

　　注意九尾狐视野边缘的锯齿和渐变的离散度。这两种情况都是视觉分散的游戏体验。在召唤师峽谷升级以前，这些问题因环境的高频细节，是不易察觉的。（旁白，请注意最终改进和抛光处理后的版本与前面开发版本的比较）

　　消除分离渐变是一个没有尽头的工作，为了一个简单的可视性标志，我移除了一个离散梯度的概念。不幸的是，几乎没有直接的办法可以消除战争迷雾的锯齿以达到边缘平滑。构成英雄联盟可视化系统的一些低分辨率数据导致一些底层问题。为了节省资源，让游戏可以在低性能的硬件上流畅运行，我们通常特意将一些元素以低分辨率存储，如阴影和视觉效果。在战争迷雾中整个地图被一个128x128网格所覆盖。

　　一个显而易见的简单办法是通过战争迷雾来解决。然而，在调研过程中我发现相关代码存在性能问题，一个流行的双倍256x256分辨率即便使用四倍的CPU成本仍然会遇到不可接受的性能问题。代码重构是一个有意思的挑战，但在我们的计划中没有足够的资源来做这件事情。我开始在底层数据不变的情况下寻找方法来改善这个情况。

　　使用战争迷雾渲染之前，我们已经对128x128数据做高斯模糊处理，所以我想如果增加模糊度，有可能隐藏难看的锯齿。不幸的是，它们并不是这么容易就能搞定的。首先我注意到，当前的战争迷雾渲染代码不支持一个可分离的模糊处理。如果你利用图像过滤器的可分离性，是可以使用更低成本达到相同或相似效果（在这种情况下是指模糊效果）。我还知道一个比较流行的技术，可以巧妙地利用线性纹理采样，以进一步降低模糊成本。我开始尝试使用不同的模糊类型和技术，但是同样的128×128图片，过于模糊，而且速度太快。出于玩家的明确需求，游戏设计师希望在可视区和战争迷雾之间的过渡可以严格遵循设计效果。所以我需要在一个狭窄波段内做一个平滑的，视觉上令人愉快的过渡。很明显，我需要更高的分辨率来达到这种效果。

　　我面临一个艰难的决定，我是不是要咬紧牙关，找时间来重构整个可视化系统？我准备和产品经理坐下来聊聊，我突然顿悟，对游戏造成影响的不是底层数据的精度，而是它的视觉表现。巧妙地将数据从128x128升级到512x512（足以实现在狭窄波段内平滑过渡的目标，我曾以为会很大）可以极大的提高战争迷雾的外观。经过集思广益和深思熟虑，我想出以下简单的升级方案：

　　每一个像素变成一个4x4的反锯齿块，一劳永逸地解决锯齿问题。左边的 2×2块代表一个原始的像素（红色部分）和三个相邻的128×128图片。右边的4×4 块代表一个升级后的512x512，全部使用灰色像素或者反锯齿来缓解过渡。总共有16种独特的模式。下面是拍摄的一个对比

128×128 FoW (4倍缩放)

512×512 FoW (升级后的4倍缩放)

512×512 FoW (升级后的4倍缩放并且经过模糊处理 )

　　我终于打败了锯齿？你可以看到，原始数据升级后，可以很好的削除锯齿。这种技术的高级版本已经使用了一段时间。如果你在一个老游戏机上面使用模拟器，你可能已经体验了这种技术，如果你感兴趣，有一篇2011年的论文和相关主题的文章。

　　在召唤师峽谷的开发过程中，战争迷雾产生了很多复杂性，功能和一些彻底的失败，但我想告诉你一些糟糕的细节，好吧，可能只是一个糟糕的细节。虽然还不清楚，但旧的战争迷雾确实让我们的地图过于暗色化。

　　旧的代码确实让部分地图过于暗色化，导致完全清除了战争迷雾。这意味着艺术家所创造的每一种质地都比预期稍微暗淡一些。没有人注意地！我刚刚战胜了可恶的锯齿，但我充满了信心，并同样搞定了暗色化问题。我只是简单地将色彩可视放大参数从差不多0.9调整到1.0，现在游戏界面明亮了很多。

当前地图中的战争迷雾 图1

当前地图中的战争迷雾 图12

　　我非常乐意倾听来自于您的任何反馈，并尽我最大努力回答你的所有疑问。谢谢！

via：杰微刊

相关阅读：揭秘《英雄联盟》的自动化测试