CocosCtreator知识点4:Creator中的坐标系和节点属性详解

Creator中的坐标系和节点属性详解

在CocosCreator中，游戏场景（Scene）是开发时组织内容的基础，也是呈现给玩家所有游戏内容的载体。而节点是场景的基础组成单位。可以把场景理解为组织内容的空间或平台，所有的内容（节点）通过其位置属性确定在该空间中的某个位置呈现。而为了确定空间某一点的位置，去规定该点坐标的标准，就是该空间所用的坐标系。在该坐标系下，有了特定位置属性的节点在运行时会呈现在屏幕上的特定的位置。

世界坐标系（World Coordinate）/笛卡尔坐标系

规定坐标的标准，或者说坐标系有很多种类，个人接触的第一个、也是印象最深刻的坐标系是“直角坐标系”，也叫正交坐标系。
在CocosCreator中，采用的标准是笛卡尔右手坐标系，默认 x 向右，y 向上，z 向外，同时使用 -z 轴为正前方朝向。

该标准在Creator中又叫“世界坐标系”，「世界」用来表示我们的游戏场景，也叫做绝对坐标系。它为场景中的所有节点、对象和图形元素提供了一个公共的定位标准。

在Cocos Creator 中，世界坐标系的原点位于屏幕的左下角。这意味着X轴正方向向右延伸，Y轴正方向向上延伸。这一设定遵循了OpenGL坐标系的传统，即原点在屏幕左下角，X轴正向右，Y轴正向上。有了坐标系和原点，就可以表示该场景（空间）里任一节点的位置，这也是理解并进行空间定位的基础。

本地坐标系（Local Coordinate）

在Creator中，节点包含了一组基础属性（位置、旋转、缩放），其中的位置（position）属性的设定是基于其夫节点的坐标系，而非世界坐标系。
世界坐标系是场景内容定位的基础，但如果直接操作和编辑大量节点的世界坐标会很复杂和底效。 CocosCreator中有父子关系的树状结构，子节点的更新依赖于父节点，为了方便组织和管理，每个节点都有独立的坐标系，子节点的位置属性定义是以其夫节点的坐标系为标准。和节点相关联的这种坐标系，被称为本地坐标系，也叫相对坐标系。
将节点位置定义为相对于父节点的本地坐标，使得在调整父节点位置或旋转时，其所有子节点能够自动跟随移动和旋转，保持相对位置关系不变。这种层级结果化的坐标系极大简化了场景的搭建和制作，设计人员无需关心节点的世界坐标，而专注于节点及其子节点的变换是简单而高效的。最后在绘制整个场景时 Creator 会把这些节点的本地坐标映射成世界坐标系坐标。

在上图中，场景空间的世界坐标原点在屏幕的左下角，画布的位置以该坐标系为参考在屏幕的中心。在该结构中，Canvas是一个根级别节点，Scene是它的父节点，会发现根节点的相对坐标和世界坐标是重合的。
再来看一张图：

当场景中包含了不同层级的节点结构，会从特殊的场景节点开始处理场景中的每个节点。上图中的canvas是一个根级别的节点。首先根据 Canvas 的 位置（Position） 属性，在世界坐标系中确定 Canvas 的本地坐标系原点位置。接下来会处理Canvas的所有直接子节点，也就是上图中的 NodeA（以及和 NodeA 平级的节点NodeC）。根据 NodeA 的 Position 属性，在 Canvas 的本地坐标系中确定 NodeA 在世界坐标系中的位置,NodeA的父节点Canvas的位置累加NodeA的位置，就是NodeA在世界坐标系（场景）中的位置。之后不管有多少级节点，都继续按照层级高低依次处理，每个节点都使用父节点的坐标系和自身位置属性来确定在世界坐标系中的位置，世界坐标都可以通过从根节点到该节点的逐级累加（矩阵乘法）变换得到。

节点的旋转（Rotation）

在节点的基础属性中除了位置属性，还有旋转和缩放属性。
旋转（Rotation） 由 X、Y 和 Z 属性组成，默认为 (0, 0, 0)。当改变 X 属性时，表示节点会以 x 轴为中心进行逆时针/顺时针旋转，以此类推，改变 Y 或者 Z 属性时也是一样的。

• 当属性值为 正 时，节点 逆时针 旋转。
• 当属性值为 负 时，节点 顺时针 旋转。
  旋转属性同样会影响到子节点。

需要注意的是： 属性检查器 中的 Rotation 所对应的属性是欧拉角属性 EulerAngles
在API中用eulerAngles 或 angle表示

而在API中的rotation是用四元数表示
在CocosCreator中，四元数（Quaternion）和欧拉角（Euler Angles）都是用来表示三维空间中物体旋转的方法。欧拉角比较直观、简单、易操作，比如在编辑中操作物体的角度使用的就是欧拉角，四元数更抽象，但计算更高效，而且可以避免欧拉角万向节死锁现象以及避免欧拉角连续旋转带来的精度丢失，四元数有天然的优势。

• 欧拉角（Euler Angles）
  • 形式：欧拉角可以分解为三个独立的旋转角（通常按XYZ顺序）组成，表示物体依次绕固定轴（如X、Y、Z轴）进行的旋转。每个旋转角通常以度或弧度为单位。这种方式简单易懂，特别在编辑器中更直观。
  • 特性：欧拉角在进行复合（连续）旋转或插值时，必须要考虑到旋转顺序（不同的顺序会有不同的结果）和万向节死锁问题（在某一旋转角度达到或接近90度时，后续的旋转轴与前一个旋转轴变得平行或几乎平行，原本独立的三个旋转自由度中有一个实际上失去了独立控制）。此外，欧拉角在进行多次旋转复合后，由于浮点数误差累积，可能导致旋转结果的不精确。
  • 应用：欧拉角用于2D或3D物体的基本旋转设置，或者在需要直观展示和编辑旋转角度的场合，例如编辑器中手动设置物体旋转，或者用户界面的角度展示等。
• 四元数（Quaternion）:
  • 形式：四元数通常写作q = (w, x, y, z)，其中 ( w ) 是实部（scalar part），( (x, y, z) ) 是虚部（vector part）。其通过复数的扩展来表示旋转，其本质是一个旋转操作，包括旋转轴（由虚部 ( (x, y, z) ) 表示）和旋转角度（由实部 ( w ) 与虚部的模长关系确定）。或者表示为a + bi+ cj + dk，其中a、b、c 、d是实数，i、j和k本身的几何意义可以理解为一种旋转，其中i旋转代表Z轴与Y轴相交平面中Z轴正向向Y轴正向的旋转，j旋转代表X轴与Z轴相交平面中X轴正向向Z轴正向的旋转，k旋转代表Y轴与X轴相交平面中Y轴正向向X轴正向的旋转，-i、-j、-k分别代表i、j、k旋转的反向旋转。
  • 特性：四元数本身可以直接表示一个连续的旋转操作，无需分解为围绕特定轴的多个旋转。它可以避免欧拉角的万向节死锁（Gimbal Lock）问题。而且在计算旋转复合操作时更简单直观。其插值运算可以生成自然平滑的旋转动画。而且四元数的旋转计算比欧拉角更稳定、精确且不易受浮点误差累积影响。
  • 应用：在需要进行连续或复合旋转、避免万向节死锁、实现平滑插值、处理物理模拟或动画系统等场合更适用。
• 欧拉角和四元数的应用各有优缺点，在实际应用中可以根据需求分别使用，当然在使用 API 时一定要注意它们的区别，以及和编辑器面板属性名的对应。

节点的缩放（Scale）

缩放（Scale） 属性也是由 X、Y 和 Z 三个属性组成，分别表示节点在 x 轴、y 轴和 z 轴上的缩放倍率，缩放属性会影响所有子节点。在世界坐标系下显示的缩放倍率是子节点每一层级的缩放属性全部 相乘的结果。这和 位置、旋转 属性其实是一致的，只不过 位置 和 旋转 属性是 相加 作用，而 缩放 属性是 相乘。