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

要点:

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

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

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

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

案例

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

一、Camera分组渲染

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

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

步骤如下:

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

cocos creator 2.4.5 2D RPG 无限滚动背景实现_第1张图片

空节点

cocos creator 2.4.5 2D RPG 无限滚动背景实现_第2张图片

添加摄像机

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

cocos creator 2.4.5 2D RPG 无限滚动背景实现_第3张图片

添加分组

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

cocos creator 2.4.5 2D RPG 无限滚动背景实现_第4张图片

远景

cocos creator 2.4.5 2D RPG 无限滚动背景实现_第5张图片

近景

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

cocos creator 2.4.5 2D RPG 无限滚动背景实现_第6张图片

远景摄像机

cocos creator 2.4.5 2D RPG 无限滚动背景实现_第7张图片

近景摄像机

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

cocos creator 2.4.5 2D RPG 无限滚动背景实现_第8张图片

运行结果

二、视差原理

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

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

cocos creator 2.4.5 2D RPG 无限滚动背景实现_第9张图片

原理一

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

cocos creator 2.4.5 2D RPG 无限滚动背景实现_第10张图片

原理一

同样的原理设置近景,背景的移动速度跟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

你可能感兴趣的:(Cocos,Creator)