地址: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去操作相机即可。


