以王者荣耀为例:手游MOBA的摄像机研究

发表于2019-02-25
评论7 1.9k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏策划行业精英群

361498939
最近迷上了《王者荣耀》,但玩的时候有一个较大的痛点:某些技能范围较大,甚至超出了屏幕,很多时候技能都不确定自己是否打中,只能“盲狙”。另外,由于手机游戏的设置,不能像鼠标操作一样很好地观察地形,团战发生时,不能很好地同时兼顾查看战场和操作自己的英雄。

像《王者荣耀》这一类的手游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界面的过渡都需要有穿插动效一样,镜头的移动,最好是能够平滑过渡,就像我们看电影,导演需要将画面跳转,也是采用镜头平移,同一个场景下,从当前的视野,平移到另外一个视野。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台