cocos creator 2.4.5 2D RPG 无限滚动背景实现

Posted 2021-08-25 LANGZI7758521

要点：

• 场景默认自带一个Camera，渲染场景内所有的物体

• Camea节点可以看做是一个空节点下挂接一个Camea组件，所以本身不可见

• 每个场景都可以有多个Camera，通过关联组名来分组渲染

• 多个Camera的渲染层级符合节点树规则，先按Camera节点的层级分优先级，越下面的Camera，其关联的组越后渲染；同一Camera分组下的节点，越下面的节点越后渲染。越后渲染的节点看起来越接近顶层。

案例

Camera 实践：无限视差滚动地图实现

一、Camera分组渲染

在Cocos Creator 的菜单`项目`->`项目设置`->`分组管理`中更改或添加分组，跟物理碰撞的分组管理是同一设置。

在场景添加多个 Camera，然后在“分组管理”添加多个分组，然后设置 Camera 的 cullingMask 属性为对应的分组，每个Camera渲染的对象就是通过这个cullingMask来过滤的。

步骤如下：

1、创建 Camera 节点。在层级管理器中创建一个空节点，在这个节点上添加一个 Camera 组件，这样一个Camera节点就创建好了。按照这个方法添加两个 Camera 节点，FarCamera 和 NearCamera，分别用来渲染远景和近景。

空节点

添加摄像机

2、分组管理。在分组管理里面添加两个分组，nearbg 和 farbg。

添加分组

3、添加近景和远景节点，分别设置 Group名称

远景

近景

4、设置 Camera 的 cullMask属性，FarCamera 设置为 farbg，NearCamera 设置为nearbg。

远景摄像机

近景摄像机

到这里多摄像机和分组渲染设置完成了，运行模拟器可以看到界面。

运行结果

二、视差原理

视差背景有两种方式，传统方式是观察点不变，移动近景和远景地图，控制近景和远景地图移动的速度不同产生视差，就形成了无限滚动的视差背景。

但是我们这里讲的是相反的过程，背景图片固定不动，移动观察点（摄像机）。由于运动的相对性，背景图片就相对向相反方向移动。

原理一

如图所示，摄像机不断移动，很快就会超过farbg1的可视边界，所以要做两个背景图，当移动到farbg1的边界时，将另一张相同的背景挨着farbg1的边界放下，这样不断交替设置farbg的位置，就能无限滚动。

原理一

同样的原理设置近景，背景的移动速度跟Camera移动的速度大小相等方向相反，两个Camera移动的速度有差异就形成了无限滚动视差背景。

三、静景

有一些元素是不动的，我们称之为静景，比如太阳，月亮，挂在天上不动，如何实现？

其实很简单，用一个Camera渲染它们，Camera不移动就好了。

实现方式：新增分组 celestial，将 MainCamera 开启，然后设置 cullingMask 为 celestial，添加一个 sun 节点，分组设为 celestial。

还有的时候，对于游戏里面的人物，需要单独设置一个摄像机进行渲染，这样可以方便做一些镜头特效，比如镜头跟随，镜头缩放等，这个将在其他文章详细讲解，请关注本公众号。

实现方式：项目设置里面新增分组player，在场景编辑器新增一个player节点用来做人物跑动，分组设为player。场景编辑器新增一个节点，命名为PlayerCamera，添加一个Camera组件，cullingMast设置为player。

PlayerCamera只渲染一个player节点，这样看到界面上人物一直在跑，其实人物根本没有动，只不过是背景的Camera在移动而已。

最终效果：

效果预览

源码下载链接：https://download.csdn.net/download/LANGZI7758521/20462453