Cocos Engine-节点与组件

 

本文字数：3460字

预计阅读时间：13分钟

Cocos Creator的工作流程是以组合方式进行实体构建，及组件式架构（组件-实体系统Entity-Component System）。节点（Node）是承载组件的实体，通过将具有各种功能的组件挂载到节点上去实现各式的表现和功能。在日常的开发过程中，我们更多关注的是功能的使用，对组件内部具体实现逻辑未有更多探究，而对实现结构的了解其实更能帮助我们理解开发逻辑及脉络。本文将对Cocos Engine的节点和组件进行深入讨论，具体基础内容请读者结合Cocos官方文档手册补充理解。

创建节点：
通过层级管理器-创建节点。可在场景编辑器和层级管理器中看到节点信息。 

此处创建一个新的sprite节点，表示这是一个由sprite组件负责提供功能的节点。

那么到底什么是节点？有什么作用？
节点是Cocos基本类，用于定义抽象的界面元素。具有以下作用：

1. 描述UI窗口层级,通过节点树可以直观描述游戏界面中每个界面元素之间的父子关系,构建清晰的层级关系（层级关系影响最后的渲染顺序）

2. 描述空间信息

3. 作为事件监听器，监听用户的具体操作，并广播传递给节点监听者（组件）

4. 作为逻辑组件的容器，承载逻辑组件

一、节点-窗口层级&visit 

每个视觉元素都是一个节点，在开发过程中需要理清各个节点间关系和访问顺序

1. 节点的窗口层级以树形结构构成，顶层节点为父节点，下面的为子节点。

2. 遍历时，从根节点按照深度优先策略进行遍历，越靠近根位置的节点越先访问到。

3. 访问到执行，世界空间计算->顶点位置计算->mask设置等，构建出GL能访问的模型（model），最后形成一个model数组，然后顺序渲染Model

4. 兄弟节点在特定时机会根据zIndex执行排序，否则按照Creator的从上到下顺序

二、节点-空间信息 

节点都是根据位置信息在画布上进行绘制渲染，需了解空间信息，进而明确节点间的位置关系。

• Cocos和OpenGL坐标系均使用笛卡尔右手系，原点左下角，x向右，y向上。

• 空间信息，由positiion，anchor，size，scale，rotation，skew，共同决定。

• 世界坐标系（绝对坐标系）是场景内的统一坐标系，左下点为原点。

• 本地坐标系，是每个节点关联的坐标系，锚点为原点。

GL使用空间信息步骤：
图形学中，一般用4*4矩阵来描述空间变换信息， position，scale，rotation，skew这些信息共同来组成下面的矩阵。
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
在visit流程中，先通过_localTransform将坐标信息转换为本地空间矩阵，再通过_worldTransform转换为世界坐标空间矩阵（父节点的世界空间矩阵*本地空间矩阵）。最后根据根据世界矩阵 + size + anchor计算获得矩形4个顶点的世界坐标。 

如图，由于两个主要节点和背景节点没有任何关系，因此它们的位置都是在世界坐标系下的数值，基本上没有规律，当我们需要让节点在背景范围内移动时，要计算出节点新的位置也需要动一番脑筋。Cocos节点父子关系的重要作用之一就是能够在本地坐标系下使用子节点的变换属性（所以在本地坐标系下，不要用xxx节点在（50，50）这样来描述position，应该用xxx节点的锚点距离父节点的锚点为（50，50）来描述position）。
使用本地坐标系的位置信息能够直观的反应两个子节点的摆放逻辑。这样的工作方式能够更直接的体现设计师在搭建场景时的想法，在后续让节点在背景范围内运动的过程中，也更容易获得边界范围。另外当需要将一组节点作为一个整体进行移动、缩放、旋转时，节点的父子关系也可以让我们只关心父节点的变换操作，而不需要再去对子节点进行一一的遍历和计算.

三、节点-touch事件监听流程

事件处理是在节点（cc.Node）中完成的。对于组件，可以通过访问节点 this.node 来注册和监听事件。监听事件可以通过 this.node.on() 函数来注册，方法如下：

   
cc.Class({   
  extends: cc.Component,   
  properties: {   
  },   
  onLoad: function () {   
    this.node.on('mousedown', function ( event ) {   
      console.log('Hello,Node!');   
    });   
  },   
});  
    

当我们不再关心某个事件时，我们可以使用 off 方法关闭对应的监听事件。需要注意的是，off 方法的参数必须和 on 方法的参数一一对应，才能完成关闭。

 
cc.Class({
  extends: