以王者荣耀为例：手游MOBA的摄像机研究
发表于2019-02-25
最近迷上了《王者荣耀》，但玩的时候有一个较大的痛点：某些技能范围较大，甚至超出了屏幕，很多时候技能都不确定自己是否打中，只能“盲狙”。另外，由于手机游戏的设置，不能像鼠标操作一样很好地观察地形，团战发生时，不能很好地同时兼顾查看战场和操作自己的英雄。
像《王者荣耀》这一类的手游MOBA游戏，特别是虚拟摇杆方式的，已经脱离原来端游MOBA的鼠标操作（实际上是即时战略）的方式，变成了类似暗黑的这种动作RPG游戏，所以有很多端游的经典MOBA元素（例如插眼、控视野）不能很好地实现，团战、队友配合也因为视野的原因受到限制。
另外，也许是为了增加游戏新的乐趣，王者荣耀现在越来越多出各种手长技能的英雄，那同时带来的视野限制就愈加明显。本质来说，手游MOBA对比端游MOBA，少了一个操作维度——视野控制。
端游MOBA的鼠标操作，可以很方便地在“推一下”画面边缘来调整视野，而手游MOBA只有两个操作维度——左右手两个大拇指，很难再腾出第三个操作维度来控制视野（这点和手游吃鸡也一样，缺少一个“射击”这个操作维度）。
摄像机就是我们的画面，也可以称之为镜头，电影和一些主机单机游戏，对摄像机都有非常巧妙的运用，甚至有专门的镜头导演来处理这方面的工作。
所幸游戏的开发者也进行了一些优秀的设计来解决这个问题，主要是两个方向：1、抬升摄像机。2、摄像机偏移。
《王者荣耀》
一、抬升摄像机
百里守约-2技能
总体来看，摄像机运动分为三个部分：
1、抬升：随着技能范围圈的扩展（射程提高），摄像机同步缓缓拉高，玩家视野变大
2、固定：摄像机高度固定在最高点，不再运动
3、回落：摄像机快速回落，恢复到正常高度
摄像机运动的优化：
为了平滑摄像机的移动，带来舒适的感觉。
1、延后抬升：
通过录屏查看每一帧，我们可以发现，按下技能按钮那一瞬间，技能圈范围的扩散动作就开始了。但是摄像机的抬升动作，并不在按下技能同时进行的，而是持续按住若干时间后（技能圈扩散到一定范围后）才开始抬升动作的。
这样做的好处在于，摄像机抬升动作是一种很打破常规的现象，玩家先接受技能圈扩散，然后摄像机随着技能圈扩散抬升，更容易接受。
另外，更重要的一点就是，玩过守约的玩家都知道，实战情况下，需要使用2技能“贴脸射击”，即和敌人零距离接触的情况下，无需瞄准，快速点击-松开2技能按钮立即释放技能。
如果按下同时就开始了摄像机的抬升，那么玩家在快速点击-松开操作时，无论速度多块，都会经历一下“摄像机快速抬升又马上下落”的“跳闪”的感觉，会造成视觉极度不适。
2、技能圈的扩散和抬升同步
摄像机的抬升幅度，和技能圈扩散的幅度，非常巧妙地同步。如何看出来的？通过抽取录屏的中间几帧，我们可以看到，摄像机的抬升“抵消”了技能圈的扩散，造成了一个错觉：技能圈没有扩散，而是只是摄像机在抬升。
对比上面的截图发现，技能圈范围好像没有变大，但只要看塔的大小就知道，已经拉伸了很多了。
这样的好处在于，可以减少视觉负担，让人感觉“只有一个在变化”。
另外，也发现了一个有趣的现象，在动画的最后几帧，技能圈没有扩大反而缩小了，实际上是技能圈先停止放大，但摄像机依然向上抬升了若干高度。
3、延后回落
实际上，释放完技能或取消技能后，摄像机并不是立即回落的，而是空中停顿若干秒后，才开始回落。
通过看取消技能的录屏，我们可以很明显地观察到这一点：
其实道理很容易理解，高中物理我们学过，把一块石头垂直抛起，石头上升的速度越来越慢，最后像是停在了空中，然后才开始下落。这种更符合我们常识的运动方式，会让我们觉得更加自然。
另外，一些通用的优化方法如减速移动我就不另外介绍了，总之，这个技能无论是视觉效果、代入感等做得都很不错。
沈梦溪3技能
大招和守约类似，我只说不同的地方：
1、沈梦溪3技能的技能摄像机抬升，是在按下技能按钮的同时进行的（啪啪啪打脸），快速点击-松开技能按钮实现的操作不是原地释放而是取消技能释放（纳尼？），为什么这样设计呢？
我的理解是，守约的2技能其实是不需要指定方向的（默认是脸的朝向），而梦溪的3技能是范围打地板的法术技能，需要指定一个释放位置（长按一定时间后会指定为自己脚下）。
另外梦溪的3技能在实战中的定位，很少会需要快速贴脸释放，而是拉长距离发挥其距离和范围优势。
2、摄像机的下落时间的区别。如果技能没有释放出去（仅拉伸摄像机但取消了），摄像机是直接回落的。如果技能释放出去了，摄像机会在空中略微停顿一会（需要查看炸弹轰炸的效果）。
总的来说，王者荣耀最近越来越多出这些手长的英雄和技能，摄像机抬升不是个好办法。摄像机抬升本身会带来战场信息优势（你比别人看的远），摄像机观看的半径每多1码，带来的优势是几何式上升的（因为可视面积增得更大）。
看女娲的技能描述我们就可以知道，抬高视野本身，也是有“技能强度”的因素影响的，但“视野”这个因素不能很好地转化为常规数值（攻血法），这就导致这类技能的平衡性是很难做的（虽然也有人认为这个特性聊胜于无）。
守约的2技能抬高摄像机还好理解，凭什么沈梦溪的技能也能抬高摄像机看这么远？而且一旦认为抬高摄像机对技能强度的平衡有影响，那么势必会削弱其数值（例如伤害等等），具体削多少？只能看不停地试试试了。
一味地抬高摄像机是偷懒的做法，但是，例如干将、墨子，甚至是玄策等，手长技能距离远看不到的问题依然是无法解决，所幸还有其他解决方案。
二、摄像机偏移
这是目前我比较看好的一种方式，但只有几个英雄技能有，分别是吕布的大招、司马懿的大招、女娲的传送。
我们先看一下吕布的大招：
在总的技能范围内，还有一个内圈的概念，大致是我红色虚线划出的区域。
1、当技能指示器的中点（也就是你手指触点投射位置），在内圈内移动时，摄像机不做任何变化。
2、当指示器中点超出红色区域，就进入了另外一个状态，摄像机不再锁定英雄，而是会随着你手指的移动而移动，姑且称之为摄像机偏移状态。且这个状态不可逆，即使把中点再移回内圈，依然会保持这个状态。
摄像机偏移状态下，手指触点和技能指示器的依然保持着映射关系：
如上图，技能按钮的叉叉就是手指的位置，对应游戏内地板上技能指示器的中点位置，技能按钮外的范围（红色虚线圈圈）对应游戏内实际的技能范围圈（大出了屏幕），以这个比例关系，手指可以很轻松地控制技能指示器的位置。
但是，摄像机偏移状态下，摄像机的位置既不绑定英雄身上，也不绑定技能指示器的中点，是在这两个点的中间位置，那么具体是如何确定的呢？
为了搞清楚这一点，我们就还原一下，摄像机是如何从静止到移动的：
1、首先，中点位置在内圈内，摄像机位置和英雄位置重合
2、随着我们继续拖动技能指示器，拉出外圈后，摄像机就开始移动了（为了区别我用了黄色标出）。
看得出，摄像机的移动和技能指示器移动呈比例关系的（因为，只要技能指示器移动一点点，摄像机就会相应移动一点点）
3、由于游戏是采用倾斜视角，为了防止误解，我把这个比例关系进行了简化，大家可以很直观地看明白：
简化成下图：
由于技能指示器从内圈开始走，摄像机才开始跟着走，所以当摄像机走过dist_x距离时，技能指示器走过了dist_y距离，这样就能很清楚地知道两者的比例关系了。
但是，摄像机的移动和技能指示器的移动真的是按比例对应的吗？
我们知道，当启动摄像机偏移后，摄像机和技能指示器中点的起点是不一样的，如下图：
由于技能指示器不能超过技能范围，所以拉到最边缘，技能指示器中点的运动轨迹应该和技能范围圈重合。
那么，摄像机移动的轨迹，就有两种可能性：
1、比例对应
这种对应方式，摄像机的轨迹应该是下图这样：
摄像机以英雄为圆心，画一个正圆，但由于技能指示器左边走的少，右边走的多，和摄像机的移动对应的话，将导致摄像机左边移动的速度慢，右边移动的速度快。
2、数值对应
相当于是，例如：技能指示器移动10个像素，摄像机移动1个像素（由于摄像机是个3D空间的概念，矢量单位不是像素而是码，为了方便理解叫像素），如此，摄像机的运动轨迹应该是下图这样：（像是个鸡蛋）
到底是哪种对应方式呢？我们直接进入游戏试试就知道了。
拿出我的量天尺，计算一下手指移动同样的距离，摄像机在向左或往右两边移动的距离是否一致就可以了。（至于量天尺的用法，可参考我之前写的那篇文章）
具体过程我就不再演示了，验证过之后发现应该是第2种鸡蛋式的运动轨迹。
不过，这样的粗略方法不能做到精确测量，由于游戏视角是一定倾斜角度，必须也要把这个给计算进去。具体过程我也不再赘述了，关键点在于要知道游戏到底倾斜了多少，我提供一个思路，有兴趣的可以自己去试试：
1、先找一个没有摄像机偏移的英雄，将技能摇杆移到0点位置，由于摇杆和技能指示器是一比一对应的，所以技能指示器也应该在英雄上方90°的位置。
2、但实际上位置却微微往右偏了，大家知道这就是由于摄像机倾斜引起的，所以我们再截一张把技能指示器放在英雄上方90°的位置，再比较两张图的夹角，通过计算就可以知道摄像机倾斜了多少了。
这样一来，我们就搞清楚了吕布大招摄像机偏移背后的机制了。总的来说，这种交互方式观感还是很好的，能很好地解决超远距离技能看不到的问题，不用去学难用的三指操作，是一个很好的设计。
如果非要挑毛病的话，就是这个技能没有很好地处理实战中，玩家拉出指示器时“手抖”或不停移动的情况，一旦进入了摄像机偏移状态，摄像机的位置是会随着手指的任意移动而改变，这就像你看新闻直播时摄影师不停抖来抖去一样难受。所幸这个技能使用的摄像机拖动范围很小，技能从按下到释放时间也很短，而且是大招不会频繁释放，所以问题还不太大。
另外，给大家提个小问题，如果这套机制想应用到墨子的2技能上，应该如何处理？给个提示，吕布的大招是范围地板技能，需要指定方向和距离，因为其释放距离不是固定的（可以放脚下可以放最外圈），但墨子的2技能只需要指定方向，其实更简单，但要如何平滑摄像机的移动呢？
可以先想一下，答案其实就在下文《虚荣》游戏的介绍里。
另外介绍一下司马懿大招和女娲传送的摄像机偏移：
1、总体逻辑和吕布的类似，由于技能的总范围略大（约半张地图这样远），所以内圈的范围也比较大，大概画了一下，都超出了屏幕下方位置。
2、当拖出内圈后，摄像机就不再附着于英雄，而是“吸附”在了技能指示器上。观察下图可以发现，拖出外圈的那一瞬间，摄像机就和英雄脱钩，同时和技能指示器挂钩，之后无论指示器如何移动，摄像机始终保持固定的那一段距离：（当然不能移动外屏幕范围外）
总的来说，司马懿大招（女娲传送用的是一样的机制）的摄像机偏移没有吕布大招做得精巧，但相对简单容易理解，并且其技能特性是需要发挥其距离优势（摆远了放），所以这种方式摄像机偏移也够用。
《虚荣》
虚荣是广大手游MOBA开发者除王者荣耀以外又一款借（chao）鉴（xi）对象。采用了独立一套设计逻辑，技术上也比较先进（画面，以及支持120帧率）。
虚荣的游戏摄像机的移动机制更为平滑，对于超长距离的技能也采用了摄像机镜头偏移的机制，这里我就拿一个英雄技能来剖析是如何实现的。
上图是鱼人大招的录屏，看起来和王者荣耀里吕布的大招有点像，但看起来更加平滑舒适，主要是采用一种叫做“平滑插值”方法来实现。
启动摄像机偏移机制后，由于技能指示器的移动确立了摄像机新的位置，但摄像机没有立即移动到目标位置，而是延迟若干毫秒后再移动。
看下面这个录屏更为明显，这就是和王者荣耀的区别。
简单地说“平滑插值”，就是延后响应，让摄像机不是瞬间达到目标位置，而是略微延后，很多单机游戏都采用了这种方式，例如SFC游戏《大金刚》，可以减少摄像机的大幅度移动，减少眩晕感。
个人认为，虚荣的镜头移动体验更佳，并且这种机制对应手指的”抖动“也有良好的效果，由于摄像机总是“慢半拍”，所以过于频繁的移动反而不会引起摄像机的频繁移动。虽然从竞技角度上来说“即刻响应”是需要的，但是摄像机就是玩家的眼睛，我们无法忍受眼前的景物不停地切换、晃动，应该更注重体验感。
根据观察这些游戏后，总结出此类2.5D视角手游MOBA游戏的移动摄像机的一些方法，希望对大家有帮助：
1、不要立马动摄像机
如果某个机制触发了摄像机的移动，不要即可移动，可以使用“缓慢加速”的方式，尽量多提供一些线索、隐喻，让这一个过程不突兀。
另外，需要停住移动中的摄像机时，尽量使用“减速移动”，这种移动方式更符合我们人类的心理认知，感受也更舒适。
2、摄像机能少动就少动
例如吕布的大招摄像机偏移的距离，尽量保持克制，能少移动就少移动。
摄像机的移动速度也尽可能放缓，略微延后一些关系也不大。
3、摄像机移动一定要有过渡，尽量使用平推，不要跳变
什么是平推，什么是跳变？
举个例子，我们玩王者荣耀有两种方法查看地图其他位置的方法，一种是直接点击左上角的小地图，将画面切换到点击的位置，另外一种方法就是右上角拖屏区域可以拖动地图至想要查看的区域。第一种就是跳变，第二张就是平推。
就像现在UI界面的过渡都需要有穿插动效一样，镜头的移动，最好是能够平滑过渡，就像我们看电影，导演需要将画面跳转，也是采用镜头平移，同一个场景下，从当前的视野，平移到另外一个视野。