2d相机技术

地址:Cocos Store
首先说明一点,技术难度不高,有能力的完全可以自己去实现,有需求又想节省时间的可以用我的demo去魔改,9.9买不了吃亏买不了上当。技术原理来自这篇文章:
Scroll Back:2D 横版游戏摄像机运镜原理与实践

2d相机运镜技术封装及演示demo

“摄像机运镜,这个在游戏开发历史上起码存在了30年的老命题,相关的讨论居然乏善可陈。”

Itay Keren在GDC 2015年独立游戏峰会上对他关于2d相机运镜技巧做了演讲,后来的修订版文章中如此吐槽到。现在已经快要过去10年了,这个槽可以继续吐。

言归正传,本帖是个cocos store商品介绍讨论反馈贴。商品内容想必大家也能想到了,就是对上述大佬的技术文章中提到的相机运镜技巧的封装。

1固定位置

固定位置指的是摄像机锁定在玩家角色所在位置,相机中心时刻在玩家角色身上。这种方式适用于主角在画面中的比例不是很大的情况,主角移速也不宜太快。非常简单并且基本都能想到的模式,不过多赘述。

  • 在我封装的camera2dHelp组件中,勾选usePositionLocking,并且为相机选定跟随目标,即可实现。
  • 固定位置可以细分横向和纵向,在原文中提到的游戏中就有一些横向上使用固定位置,纵向上使用其他一些相机技术的例子。在我封装的组件中,可以通过修改positionLockingDir选项来实现横纵向控制。

2平滑插值

平滑插值能够避免摄像机突然加速或者转向造成的不适感。适用于主角移速较快,或者主角在画面中比例较大等情况。

  • 在勾选开启了usePositionLocking后,可以勾选出现的useLerp选项。
  • 在勾选了useLerp后,可以修改出现的lerpRatio,调节平滑速度

3摄像机窗格

这是一个很经典,但是很多人都没有注意到的技术。简单来说就是设定一个方框,主角在方框内移动时,相机不会跟着移动,可以避免频繁地移动相机造成的不好体验。但是当主角移动到原理相机中心时,到达某一个特定的位置后,相机就会跟着移动。从玩家视角看,就像是有个方框,主角移动后会推动方框从而移动相机一样。

  • 可以通过勾选useCameraRect来启用摄像机窗格
  • demo中加了辅助线来演示窗格方框,最终发布项目时请自行剔除
  • 原文提到过单方向的摄像机窗格,这种实现,只要调节摄像机窗格参数,让其余三条边线处于非常远的地方即可。
  • 摄像机窗格也可以设置平滑插值,这会允许高速移动的主角突破窗格区域,让相机的移动速度从0逐渐变大,避免相机突然移动时的不适感。

4边缘捕捉

简单来说就是移动到地图边缘了,这时不该继续移动相机,否则会穿帮。

  • 可以通过useEdge实现,可以调节四个方向上的边缘值。
  • 封装的内容只负责相机移动,主角的移动限制请根据自己项目情况做控制

5平台捕捉

很简单的原理,实现也容易,只是没有接触过不容易想到。适用于平台跳跃之类的横版动作游戏,当主角踩到某个平台后,立即调整相机高度到适配于这个平台的位置。

  • 勾选usePlatformSnapping启用
  • 修改platformOffset来调节应用了平台捕捉后,相机实际和平台对齐的位置
  • 当触碰到平台时,通过调用camera2dHelp的setPlatfromHeight来设置平台高度
  • 离开平台时,通过将platformActive参数设置为false来解除平台捕捉的影响
  • 通过修改platformLerpRatio来调节平滑插值的速度,由于平台捕捉没有见过瞬间变动的,所以这里没有给是否使用平滑插值开关,直接默认使用插值计算了。

6平均位置、区域聚焦

有时候,相机的焦点并不完全取决于主角。例如多人游戏,相机焦点一般会在玩家们的平均位置。又例如打boss时,玩家期望能够时刻看到boss,这时相机焦点用boss和玩家坐标的中点更好。也有一些情况下,我们需要的目标不是一个移动的对象,而是单纯的一个固定坐标点,原文中就提到一款射击游戏《几何战争》,它会综合参考战机和关卡地图中央位置来移动摄像机。这种系统适合封闭的小型关卡,尤其是那种威胁主要来自画面中央的关卡。

  • 可以给camera2dHelp组件设定多个target,tagert是我封装的一个类(targetAndFocusPoint),包括了一个node对象和一个offset偏移量,但node对象不存在时,它就等同于一个固定位置
  • targetAndFocusPoint可以设置权重。相机的最终焦点会根据各个target的权重来计算。有时我们的需求不仅仅是单纯地平均位置,例如和一个巨大的boss对战时,可能会需要相机更偏向于boss,这时便可以加大boss的权重。

7缩放适应

一般出现于多个相机跟随目标的情况。如果跟随目标距离很远,此时相机会出现无法将目标都显示在视野内的情况。在格斗游戏中,一般会限制角色的移动,当双方角色处于左右两边时,无法继续后退。这不属于相机的技巧范围,不多赘述。使用相机的缩放适应则是在这种情况下,放大相机的视野,保证目标都在视野内。

  • 通过勾选zoomtofit启用缩放适应

8静态正前聚焦、双向正前聚焦

简单来说就是相机焦点不在角色正中心,而是偏向移动方向一侧。例如一般的横版游戏是从左往右跑,那么相机的焦点可以设置在主角右侧一些的位置,这样保证前方有更多的视野。

双向正前聚焦则是主角可以左右来回移动的情况,这时可以将焦点动态地改动。

  • 静态正前聚集的实现,只要对targetAndFocusPoint的offset偏移量进行调节即可
  • 双向正前聚焦,没有想到很好的封装方法,所以做了个demo,直接用tween去变动offset,可以参照demo场景实现

9基于区域的锚点

这个技术指的是在一个游戏的不同关卡、不同区域,使用不同的相机锚点。这个功能没有什么封装的必要,实现起来,只要根据项目具体的情况,修改camera2dHelp组件的targets即可

10加速拉动域

在玩家越过摄像头窗口的边界时,让摄像头加速追上。其实就是摄像机窗格加上平滑插值。

11加速推动域

我仔细看了许久,才确定和加速拉动域不是同一个东西。个人觉得这个东西比较诡异,效果和加速拉动域差不多,使用起来似乎也没有太多的应用场景。所以没有费力去做封装。

12线索聚焦

画面焦点会受游戏世界中的提示线索影响(例如引起注意的物品)。实现时修改相机焦点偏移量即可。

13预判位置

根据玩家位置预判移动。实际上就是玩家往哪边跑,相机焦点就往哪边偏移,并且跑动越快,偏移量越大。也是根据实际情况,修改相机偏移量即可。

14摄像机路径

简单来说就是相机的焦点固定在一条线上移动。实际操作上,一般用于横版游戏,相机的x轴紧跟主角,高度则是预设好的,根据x计算出的一个值。写一个y=f(x)的函数,根据项目实际情况,设定各个区域端的相机高度即可。

15电影式路径

摄像机暂停平常的功能,來呈现「画面外」的背景叙事。最简单(容易被想到)也是最难(具有各种复杂的情况)。思考许久,不知如何封装。具体实现用tween去操作相机即可。

5赞

下单了,爸妈用过都说好

买不了吃亏买不了上当~
物美价廉!量大管饱!

下单了,孩子很爱吃

下单了,敏感肌能用

没下单,期待发货~

已经发货了,另外送一份红包,五星好评加晒图即可领取

下单了,老公很爱穿

这都什么虎狼之词 :joy:

已发布2.x版本

已买,好评返现了200,赞:+1:

已破产,别再给我好评了,求求啦。 :broken_heart:

大佬,这里面的边缘捕捉在调整过摄像机高度后仍有效吗

没明白什么意思,你是说设置上方边缘吗?