【cocos creator】世界坐标转换 | 摄像机学习（详细，举例子解析）

cocos creator坐标转换

看了官方文档，对于坐标转换依旧一脸懵逼，然后就各种百度，做了个小小的总结。
官方文档安排：https://docs.cocos.com/creator/manual/zh/content-workflow/transform.html

1.区分世界坐标和本地坐标（节点坐标）

当我们在本地坐标添加子节点，子节点位置是相对本地坐标，而非世界坐标，只有最后绘制场景的时候本地坐标系内的节点才会被映射成世界坐标系。

世界坐标：即绝对坐标，原点为左下角。
本地坐标：即相对坐标，原点就是它的锚点，锚点一般在中心点（0.5，0.5）的位置。

2.坐标转换的理解

坐标转换就两种：
本地坐标转世界坐标：convertToWorldSpaceAR
世界坐标转本地坐标：convertToNodeSpaceAR

疑问：什么时候使用convertToNodeSpaceAR？什么时候使用convertToNodeSpace？

	**convertToNodeSpaceAR**：node的原点在中间（0.5，0.5）的时候使用。
	**convertToNodeSpace**：node的原点在左下角（0，0）的时候使用。

如果我们要把坐标节点坐标转换到摄像机坐标下，一般都是要先转换到世界坐标，再转换到摄像机坐标下。不能直接转换。

//camera.js,(摄像机脚本)
let w_pos = this.playerNode.convertTowordSpaceAR(cc.v2(0,0)      //把plsyer转转换成世界坐标
let n_pos = this.node.parent.convertToNodeSpaceAR(w_pos)         //再把世界坐标转换成摄像机坐标
this.node.position = n_pos

摄像机

摄像机是玩家观察游戏世界的窗口，场景中至少需要有一个摄像机，也可以同时存在多个摄像机。如果场景没有摄像机，场景在浏览器浏览的时候是黑屏的。当我们创建一个新项目的时候，Canvas节点下都会有一个主摄像机。
官网文档安排：https://docs.cocos.com/creator/manual/zh/render/camera.html

摄像机的属性

1. backgroundColor—— 摄像机的背景色
摄像机的背景色，用来清除屏幕的其他颜色，就相当于在摄像机的镜头上加上了一块有颜色的纸，摄像机拍出来的画面都是那个颜色。一般和clearFlags一起用，一起接着看下去就懂了。

实操部分：
在不渲染其他东西的情况下，背景颜色和勾不勾选颜色的区别。

2. Depth——摄像机深度
摄像机深度一般是用来渲染摄像机的顺序的，主摄像机为-1，新创建的其他摄像机默认为0，当值越小，该摄像机就会先渲染。先渲染的摄像机会被后面的摄像机画面遮挡。

3. cullingMask——渲染场景
cullingMask 将决定这个摄像机用来渲染场景的哪些部分。当勾选了Everything的时候，所有分组都会显示。
举个例子，有yellow场景和blue两个场景，勾选了Everything，则两个都会显示。当我只勾选了yellow场景的cullingMask，则只会渲染yellow的场景，blue场景不会被渲染。

实操部分：

4. clearFlags——清除操作
指定渲染摄像机时需要做的清除操作。就相当于摄像机有三个操作功能，分别是Color（颜色），Depth（深度），Stencil（模板），你渲染摄像机的时候你不要哪个功能的意思，不要这个功能你就不要勾选。

	Depth：
				清除摄像机深度缓冲区
				
	Stencil：
				清除摄像机模块缓冲区
	Color：
			上面说到摄像机的背景颜色属性，在这里就会用到，当摄像机的背景颜色设置为红色，我们在这里又勾选了Color，
			最后渲染出来的场景全部都是红色，其他ui全部被遮盖掉。

5. Rect——矩形
决定摄像机绘制在屏幕上的哪个区域，便于实现类似小地图那样的 Viewport，值为 0～1。X和Y是设置小地图的位置，W和H是设置小地图的宽高。

实操部分：

6. Zoom Ratio——摄像机缩放比
摄像机缩放比，默认值为1，当值越大，显示的画面就越大。很容易理解，就相当于放大镜。

实操部分：

7.alignWithScreen——自动调整大小
摄像机会自动将视窗大小调整为整个屏幕的大小。

摄像机的理解基本就这些，其实还有很多的···

小花学习笔记：如果错误的请多多指教呀！