38
以王者荣耀为例：手游MOBA的摄像机研究-腾讯游戏学院
source link: http://gad.qq.com/article/detail/289341
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
最近迷上了《王者荣耀》，但玩的时候有一个较大的痛点：某些技能范围较大，甚至超出了屏幕，很多时候技能都不确定自己是否打中，只能“盲狙”。另外，由于手机游戏的设置，不能像鼠标操作一样很好地观察地形，团战发生时，不能很好地同时兼顾查看战场和操作自己的英雄。
像《王者荣耀》这一类的手游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界面的过渡都需要有穿插动效一样，镜头的移动，最好是能够平滑过渡，就像我们看电影，导演需要将画面跳转，也是采用镜头平移，同一个场景下，从当前的视野，平移到另外一个视野。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK