Cocos 2.x 摄像头跟随主角移动

需要做一个摄像头跟随主角移动的功能

参考 camera 移动 这么基本的 东西难道不应该写在 文档里?

在 https://docs.cocos.com/creator/manual/zh/getting-started/support.html 中，确实看到了demo:

不过这个例子，版本估计是1.9的，有部分API失效了，写的也很复杂。

注：如果Global.js中的 cc.director.getPhysicsManager().enabled = true报错，可以移动到HeroControl.js的onload中。

另外在 范例集合 （ GitHub | Gitee ）中也没找到想要的答案：

官方示例collider/platform中使用了cc.follow:

公众号 Cocos Creator 技术栈 Creator | 主角光环之摄像机跟随

可同时结合 张晓衡 CreatorPrimer|飞机大战（一） 一起学习。

参考官方文档： Camera 摄像机

cullingMask 将决定这个摄像机用来渲染场景的哪些部分。在 属性检查器 中的摄像机组件中的 cullingMask 会列出当前可以选择的 mask 选项，你可以通过勾选这些选项来组合生成 cullingMask。

例如下图中的 cullingMask 设置表示这个摄像机只用来渲染游戏中的 UI 部分，一般游戏中的 UI 部分都是不需要移动的，而游戏节点可能会往屏幕外移动，这时需要另外的一个摄像机去跟随这个游戏节点。

用户可以通过编辑器菜单栏中的 项目 ->项目设置 ->分组管理 来添加或者更改分组，这些分组即是对应的 mask。

background这个节点的Group要改成自定义分组中的background，然后在里面放一个摄像机：

然后在update中，移动这个摄像机：

UI是不动的，所以先把UI分组到自定义的ui组，然后放一个UI摄像机只看这个分组。

然后主摄像机，主角全部用default分组即可。

摄像机跟随抖动问题——老问题曾修复过又出现

RPG角色跟随移动

参考

Unity3D Camera设置结合OpenGL详细解读

Unity 对Camera 属性Clear Flags 的SkyBox/Solid Color/Depth Only深度解析

每帧绘制完后，都需要清空各种缓冲区，最主要的是color和depth，一个负责画面最终呈现的颜色，一个负责景深。重要的是，在当前Camera范围内color和depth会有被覆盖的可能性。在范围外的color和depth有被其它Camera使用的可能性。这里的清除很多时候是为了处理，在当前Camera范围外的区域。

就是用来填充，当前Camera范围内没有被绘制的区域。

没被选中的Layer会被当前Camera给剔除，不会渲染。过滤非选中层的方法有很多，可能都不会调用渲染函数，没必要使用OpenGL的剪裁功能。

正交ortho和透视perspective，以及剪裁平面，就是生成一个矩阵数据。

参考 正交相机与透视相机的区别

正交相机，三只羊一样大。

直接对应了，OpenGL的 glViewport 调用。

当有多个Camera的时候，每个Camera有自己的绘制空间区域和屏幕视口。所包含的物体会通过Camera的范围渲染出来。多个Camera的层级，决定了所包含物体的渲染顺序。这个数字从小到大，越来越靠近屏幕。

通用的几个shader选择，主要处理光照的。

可以把Camera渲染的画面，绘制到一个纹理上，而不是设备的显示缓冲区里。

这个说的是Camera的另一个属性Clipping Planes,这个属性包含两个值Near/Far。举个简单的例子，比如人眼睛，距离人眼睛太近的物体看不清、距离人眼睛太远的物体看不到，这就是Near、Far了。看下图

你看，这个观赏树的近端可以看完整，远景也OK。这个时候Clipping Planes Near == 0.3 Far == 1000

也就是说距Camera小于Near距离的物体被裁剪掉、距Camera大于Far距离的物体被裁剪掉。

那么，怎么能避免物体被裁剪掉，而且还能离摄像头Near>=3呢？那就是，把这个景观树单独用另一个摄像头来显示。具体，看下一个知识点。

这个深度，顾名思义，就是摄像机的深度了。 当只有一个摄像机时，这个属性没有意义。 当有大于两个摄像机时，就牵扯到多个摄像机的前后层叠问题了。

Depth值越大，越靠上，也就是越靠外，也就是可以遮挡值较小的摄像机的画面。比如MainCamera就默认为-1，然后新建摄像机就是0，在上边。

那么回到刚才景观树这个问题，如果想用一个摄像机专门展示景观树，而且还在主摄像机中可以看到，那么Depth必然要大一些，在主摄像机的上面喽。接下来，我们就来讨论Clear Flags 的Depth Only啦：

我们先试着把显示景观树的摄像机的Clear Flags设置为SkyBox或者Solid Color，我们会发现主摄像机镜头被天空盒或者纯色挡住了。然后将ClearFlags改为Depth only,我们会发现，景观树成功的嵌入了主摄像机的其他景色中，浑然天成。根据Depth only字面意思来讨论，也就是说，这个时候摄像机的未渲染部分的显示内容取决于深度，未渲染部分显示什么由深度小于本摄像机的内容来决定。

现在回到q的话题。我做了一个小例子，如图就是场景，其中有三个Enemy,一个Player(蓝色),一个Gun（绿色）：

然后先是只有一个Camera,我们看看效果：

那么我把q的Layer设置成GunLayer,然后在MainCamera中CullingMask中取消对GunLayer的显示。然后新建Camera，把深度设置为0（因为MainCamera的深度为-1），Clear Flags设置成Depth only，把CullingMask中只勾选GunLayer,那么这个新的Camera就只显示Gun了。调整Camera的位置到适合位置。看效果：

人物举q的姿势，很自然吧？

接下来，我将专门解析这段话的含义，觉得上面的翻译有些不好，我自己尝试翻译了下

那么我理解的意思就是设置成Depth only的Camera中的物体，将会凌驾在其他任何物体上，当然，只能凌驾在Depth比他小的物体上。不受3D位置的前后影响。能够完整的呈现在观察者面前。

我做实验如下：

我先将一个Enemy顶进了q里：

再来观察效果：

q还在外面，没有顶进去。很明显，其他物体的3D位置信息没有体现出来，不然就不是这个效果了。

至此，这个Depth Only，的含义已经很传神了。

参考

cocos3.0官方文档 camera

cocos3.0官方文档 渲染排序说明

Visibility 属性用于设置哪些层级（Layer）的节点应该被相机观察到，可同时选择多个 Layer。注意：从 Cocos Creator 3.0 开始，2D 元素（例如 Sprite）的渲染也遵从 Layer 与 Visibility 的判断，开发者可以根据需要自行调整 Layer 与 Visibility。

当开发者在 Visibility 属性中勾选了多个 Layer 时，Visibility 属性值便是通过将多个 Layer 的属性值执行 | *** 作计算得出。

排序是一个很简单的功能，但是最终的呈现却是根据不同平台提供的渲染能力来的。因此，在这里说明一下， 如果遇到了 UI 渲染出错，花屏，闪屏等现象，首先要检查的就是场景里所有相机（Camera 和 Canvas）的 ClearFlag，确保场景里必须有一个相机要执行 Solid_Color 清屏 *** 作。

具体如何设置 ClearFlag，可参考以下几种情况：

如果场景中只有一个 UI Canvas 或者 3D Camera，那么 ClearFlag 属性设置为 Solid_Color。

如果场景中包含 UI 背景层、3D 场景层、 UI *** 作层，则：

如图，设计分辨率1080*2000时，默认canvas的camera属性。其中orthoHeight是高度2000的一半。如果设计分辨率是1080*1920，则orthoHeight就是960了。

上图摄像机盒子的厚度是由far来控制的，默认摄像机位置Z是1000，默认Far是2000。如果将far改为1000，则刚好看到canvas的内容。

默认的正交摄像机，改fov没影响。在透视摄像机中，改Fov和摄像机的坐标以及旋转角度，就能得到合适的画面。

新建一个Scene，以下 *** 作全部使用默认配置：

分析：

BUTTON以及CANVAS的LAYER全是UI_2D，其相应的CAMERA，设置的VISIBILITY确保只看到这些，然后使用的DEPTH_ONLY会叠加到场景中的主摄像机上。

根据官方文档所说，场景中的Camera 设置为Solid_Color即可。

如上图，当把模型的scale调大后，会出现面部贴图糊掉。此时改一下camera的near属性即可。

参考

各位大佬，3D模型怎么做适配呀

急！creator3d的适配问题

Creator 3D Camera按宽度适配的解决方案

这里要注意，增加fov会导致屏幕宽高的可视区域都会加大。在特别瘦长的手机屏幕上，为了保证屏幕宽度范围内看到所有模型，就会导致额外看到屏幕顶部和底部更多内容。

自动释放资源： 切换场景后，上一个场景中的资源，从内存中释放。

延迟加载资源： 意味着不用等待所有资源加载完毕，才显示场景。（快速切换场景，资源陆续在画面显示）

普通图，子层为一张spriteFrame。

创建方式：拖拽场景节点，到资源管理器。

精灵图，子层为多张spriteFrame。（精灵图合成软件：TexturePacker、Zwoptex）

打包时，将所在目录中的所有碎图，合成为图集。

数字为内容的图集。

动态字体：.ttf

位图字体：.fnt + .png（存在于同一目录）

小型动画

模式： web audio、dom audio

*** 作流程：

（1）导出：文件 =>资源导出，选择 .fire场景文件，输出assets目录的 .zip压缩包。

（2）导入：文件 =>资源导入，选择压缩包源路径、解压路径，输出assets目录内容。

基于size mode，尽量去除spriteFrame无像素的部分，减小图片尺寸。

作用： 用于变换、子节点定位基准。

对摄像机、渲染组件的了解。

对widget、layout等UI组件的了解。

（1）创建动画的基本流程

（2）时间曲线（双击动画线，进入编辑窗口）

（3）事件管理（双击游标、加减按钮控制参数个数）

（4）脚本控制

碰撞组件（普通碰撞）

（1）editing——是否为编辑模式

（2）regenerate points——计算图形边界，自定生成控制点，数值为控制点的生成密度 / 准确度

（3）ctrl + 点击——删除控制点

（4）组件类型：矩形、圆形、多边形

（5）设置碰撞组（项目 =>项目设置 =>分组设置）：

制定分组 =>匹配分组 =>碰撞组件所在节点上，设置所属分组

（6）脚本控制

Box2D物理引擎（高级碰撞）

（1）audioSource组件

（2）脚本控制

（1）定义 CCClass

（2）实例化

（3）判断类型

（4）构造函数（ctor）

（5）实例方法

（6）继承（extends）

（7）父构造函数

（8）完整声明属性

properties常用参数

（1）获得组件所在的节点

（2）获得其它组件

（3）获得其它节点及其组件

（4）访问已有变量里的值（通过模块访问）

（1）节点状态和层级 *** 作

（2）更改节点的变换（位置、旋转、缩放、尺寸）

（3）颜色和不透明度

（4）常用组件接口

cc.Component 是所有组件的基类，任何组件都包括如下的常见接口：

（1）创建新节点

（2）克隆已有节点

（3）创建预制节点

（4）销毁节点

（1）加载和切换

（2）通过常驻节点，进行场景资源管理和参数传递

（3）场景加载回调

（4）预加载场景

（1）资源属性的声明

（2）静态加载（在属性检查器里设置资源）

（3）动态加载

（4）加载远程资源和设备资源

（5）资源的依赖和释放

（1）监听事件

（2）关闭监听

（3）发射事件

（4）派送事件

（5）事件对象（回调参数的event对象）

（1）鼠标事件类型和事件对象

（2）触摸事件类型和事件对象

（3）其它事件

（1）动作控制

（2）容器动作

（3）即时动作

（4）时间间隔动作

（5）动作回调

（6）缓动动作

（1）XMLHttpRequest——短连接

（2）WebSocket——长连接

对象池的概念

在同一场景中，需要多次进行节点的生成、消失时，假如直接进行创建、销毁的 *** 作，就会很浪费性能。因此，使用对象池，存储需要消失的节点，释放需要生成的节点，达到节点回收利用的目的。

工作流程

（1）初始化对象池

（2）从对象池请求对象

（3）将对象返回对象池

清除对象池

---