往期技术派文章：

第01期《野蛮人大作战》从开发到上线

第02期 Cocos Creator 2.0 摄像机的灵活运用

第03期插件推荐 CC_inspector +

第04期实时竞技小游戏技术分享

技术派第 05 期，Cocos 邀请到了具有多年手游开发经验的大掌教，他将为大家带来关于摄像机技术的干货分享。

大掌教，从事游戏开发多年，精通 Cocos/Unity 等游戏引擎，精通安卓/iOS/H5等多种平台开发，发表过多个开源项目和 100 多篇原创博文，经验丰富，技术精湛。

《Camera 摄像机详解》

大掌教

前言

Cocos Creator 从 v2.0 开始发生了巨大变化，其中最大的变化莫过于 Camera 组件了。为什么说最大的改变是 Camera 组件，因为这是一个全新的组件，将游戏世界的渲染窗口暴露出来，这也将是引擎从 2d 渲染转向 3d 渲染的关键。

Camera 是游戏渲染的窗口，场景里至少需要一个 Camera，否则将无法渲染任何对象，世界将是一片黑暗。

要点：

一个场景至少需要一个 Camera，可以同时存在多个 Camera

Camera 本身不可见，渲染大小就是当前屏幕大小

同一场景多个 Camera 可以分组渲染，各自渲染各自的分组对象

多个 Camera 渲染的对象层次，由 Camera 深度 Depth 决定，值越大越后面渲染。同一个 Camera 渲染的对象，按照节点本身层级渲染，子节点总是在父节点后渲染

案例

Camera 案例：无限视差滚动背景。

Camera 组件属性可参考官方文档：

https://docs.cocos.com/creator/manual/zh/render/camera.html#摄像机属性

一、分组渲染

Cocos Creator 编辑器在菜单项目->项目设置->分组管理中更改或添加分组，物理碰撞的分组管理也是这里设置的。

要实现分组渲染，首先需要在场景添加多个 Camera，然后在“分组管理”添加多个分组，然后设置 Camera 的 cullingMask 属性为对应的分组。

1、创建 Camera 节点。先创建一个空节点，然后在这个节点上添加 Camera 组件。添加两个 Camera 节点，FarCamera 和 NearCamera，用来分别渲染远景和近景。

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

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

4、设置 Camera 的 cullMask 为对应分组，FarCamera 设置为 farbg，NearCamera 设置为nearbg。

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

二、视差原理

背景图片固定不动，移动摄像机。因为我们看到的画面都是摄像机渲染的画面，渲染区域就是屏幕大小。由于运动的相对性，我们观察的视角就是摄像机视角，和摄像机同步，背景图片就相对向相反方向移动。

如图，由于横向不断移动，所以要做两个背景图，不断交替设置位置。

同样的原理，再设置一个近景，两组 Camera 移动的速度设置的不一致，就实现了无限滚动视差背景。

三、静景

有一些元素是不动的，比如太阳，月亮，挂在天上，如何实现？

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

最终效果：

四、Demo源码地址

https://github.com/fylz1125/CreatorDocuments

直播

非常感谢大掌教带来关于 Camera 的精彩分享，自 Cocos Creator v2.0 版本起，引擎新增了很多新特性，大掌教也将在后续带来更多的干货分享，欢迎关注！

学习一个游戏引擎不是学习 API 的调用，而是要学习引擎的设计原理和应用方式，达到一通百通的境界。

即日起每天晚上 21:00，大掌教将会在腾讯课堂直播讲解 Creator 游戏开发技术与实战经验。以 Cocos Creator v2.0.6 精心制作的《捕鱼达人》为案例，阐述游戏引擎的设计原理和使用方法，深入浅出地讲解 Creator 开发的各个环节，几乎涵盖 Creator 所有的功能模块，欢迎感兴趣的开发者关注。

课程适用于零基础、想独立开发手游的学员，通过学习这门课程，新手学员能够快速入门 Cocos Creator 游戏开发，另外，讲师还将不定期发布文档和源码。

直播地址（21点开课噢）：

https://ke.qq.com/course/378768

技术派，是 Cocos 全新推出的专栏，我们将不定期邀请知名的游戏制作者，为广大开发者分享来自真实项目的实用的开发技术和实战经验。欢迎大家推荐想要学习的游戏产品和想要了解的技术知识，也诚邀有技术分享意愿的开发者联系我们噢~

Cocos 技术派 05 | Camera 摄像机详解相关推荐

3D 小游戏《欢乐贪吃龙》关键技术盘点 | Cocos 技术派第13期
<欢乐贪吃龙>是由 SK2GAME 基于 Cocos Creator v2.2 研发的一款 3D 休闲小游戏,游戏画面卡通精美,玩法简单,玩家将扮演一只"贪吃龙",在 ...
cocos creator 安卓原生平台环境_竞技对抗小游戏单挑篮球开发历程 | Cocos技术派第12期...
本文来自于"Cocos 荣耀讲师"征稿活动第1期,最先发表于 Cocos 中文社区,作者 ID:蟹老板,2017年加入社区,文章作品包括<猎头专家的开发历程>等. Co ...
【技术综述】万字长文详解Faster RCNN源代码
文章首发于微信公众号<有三AI> [技术综述]万字长文详解Faster RCNN源代码作为深度学习算法工程师,如果你想提升C++水平,就去研究caffe源代码,如果你想提升python水 ...
[系统安全] 四十四.APT系列(9)Metasploit技术之基础用法万字详解及防御机理
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
容器编排技术 -- Kubernetes kubectl scale 命令详解
容器编排技术 -- Kubernetes kubectl scale 命令详解 1 kubectl scale 2 语法 3 示例 4 Flags kubectl scale 扩容或缩容 Deploy ...
容器编排技术 -- Kubernetes kubectl rolling-update 命令详解
容器编排技术 -- Kubernetes kubectl rolling-update 命令详解 1 kubectl rolling-update 2 语法 3 示例 4 Flags kubectl ...
容器编排技术 -- Kubernetes kubectl replace 命令详解
容器编排技术 -- Kubernetes kubectl replace 命令详解 1 kubectl replace 2 语法 3 示例 4 Flags kubectl replace 使用配置文件 ...
容器编排技术 -- Kubernetes kubectl patch 命令详解
容器编排技术 -- Kubernetes kubectl patch 命令详解 1 kubectl patch 2 语法 3 示例 4 Flags kubectl patch 使用(patch)补丁修 ...
容器编排技术 -- Kubernetes kubectl label 命令详解
容器编排技术 -- Kubernetes kubectl label 命令详解 1 kubectl label 2 语法 3 示例 4 Flags kubectl label 更新(增加.修改或删除) ...

Cocos 技术派 05 | Camera 摄像机详解