CocosCreator3.8研究笔记（七）CocosCreator 节点和组件的介绍
相信很多新手朋友，肯定会问，CocosCreator 中什么是节点？什么是组件？
一、什么是组件（Component）？
Cocos Creator 3.8 的工作流程是以组件式开发为核心，即以组合而非继承的方式进行游戏中各种元素的构建，被称为组件式架构（Entity-Component System）。
所有继承自Component的类都称为组件类，其对象称为组件，组件是由引擎创建，组件类必须是 cc 类。
例如：
import { Component } from 'cc';
@ccclass("MyComponent")
class MyComponent extends Component {
}
二、什么是节点（Node）？
节点是承载组件的实体，我们通过将具有各种功能的组件挂载到节点上，来让节点具有各式各样的表现和功能。
节点是场景的基础组成单位。节点之间是树状的组织关系，每个节点可以有多个子节点。
节点特性：
- 节点包含一组基础属性（位移、旋转、缩放），节点之间通过一组相对变换关系组织在一起。
- 节点间的更新顺序是逐级更新的，子节点的更新依赖于父节点，子节点跟随父节点变换。
- 节点上可以添加组件，将多个组件与节点关联在一起。
三、组件的创建和销毁
组件的生命周期完全由节点操控，与普通类对象不同，组件不能由构造函数创建：
const component = new NewComponent(); // 错误：组件无法由构造函数创建
组件必须由节点来创建，通过如下方法将组件添加到节点上：
const newComponent = node.addComponent(NewComponent);
组件不需要的时候，通过如下方法移除指定的组件并将其销毁：
node.removeComponent(newComponent)
四、组件执行顺序
在同一个节点上的组件执行顺序，可以通过设置组件的 executionOrder来实现。
executionOrder 越小，该组件相对其它组件就会越先执行。
executionOrder 默认为 0，因此设置为负数的话，就会在其它默认的组件之前执行。
例如：有两个组件 CompA.ts 和 CompB.ts ，在main.ts 中使用，假如我们希望CompB.ts 优先执行。
CompA.ts 脚本内容：
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;
@ccclass("CompA")
export class CompA extends Component {
onLoad () {
console.log('CompA onLoad!');
}
start () {
console.log('CompA start!');
}
update (deltaTime: number) {
console.log('CompA update!');
}
}
! 
CompB.ts 脚本内容：
import { _decorator, Component, Node } from 'cc';
const { ccclass, property,executionOrder } = _decorator;
@ccclass("CompB")
@executionOrder(-1)
export class CompB extends Component {
onLoad () {
console.log('CompB onLoad!');
}
start () {
console.log('CompB start!');
}
update (deltaTime: number) {
console.log('CompB update!');
}
}
main.ts 脚本内容：
import { _decorator, Component, log } from 'cc';
const { ccclass, property } = _decorator;
import { CompB } from './CompB';
import { CompA } from './CompA';
@ccclass('main')
export class main extends Component {
@property({type:CompA})
private CompA = null;
@property({type:CompB})
private CompB = null;
onLoad() {
}
start() {
}
update(deltaTime: number) {
}
}
执行顺序如下：
五、 组件的生命周期
Cocos Creator 为组件提供了生命周期的回调函数，只需要定义特定的回调函数，Creator 会在特定的时期自动执行相关脚本，开发者不需要手工调用它们。
按生命周期触发先后，回调函数有以下：
- onLoad
- onEnable
- start
- update
- lateUpdate
- onDisable
- onDestroy
1、onLoad
onLoad 回调，在脚本初始化阶段回调，当节点首次激活时触发。
例如：所在的场景被载入，或者所在节点被激活的情况下。
在 onLoad 阶段，可以保证获取到场景中的其他节点，以及节点关联的资源数据。 通常会在 onLoad 阶段去做一些初始化相关的操作。
例如：
import { _decorator, CCInteger, Component, EventMouse, input, Node,Label, Sprite, find} from 'cc';
const { ccclass, property,type,integer} = _decorator;
@ccclass('PlayerControl')
export class PlayerControl extends Component {
@property({type:Node,visible:true})
node:Node = null;
@property({type:Node,visible:true})
nodeChild:Node = null;
onLoad() {
this.nodeChild = find('test/sp',this.node);
}
}
2、onEnable
当组件的 enabled 属性从 false 变为 true 时，或者所在节点的 active 属性从 false 变为 true 时，会激活 onEnable 回调。
倘若节点第一次被创建且 enabled 为 true，则会在 onLoad 之后，start 之前被调用。
3、start
start回调函数会在组件第一次激活前，也就是第一次执行update` 之前触发。
start 通常用于初始化一些中间状态的数据，这些数据可能在 update 时会发生改变，并且被频繁的 enable 和 disable。
import { _decorator, CCInteger, Component, EventMouse, input, Node,Label, Sprite, find} from 'cc';
const { ccclass, property,type,integer} = _decorator;
@ccclass('PlayerControl')
export class PlayerControl extends Component {
@property({type:Node,visible:true})
node:Node = null;
@property({type:Node,visible:true})
nodeChild:Node = null;
private _timer: number = 0.0;
onLoad() {
this.nodeChild = find('test/sp',this.node);
}
start() {
this._timer = 1.0;
}
update(deltaTime: number) {
this._timer += deltaTime;
if(this._timer >= 10.0){
console.log('enabled false ');
this.enabled = false;
}
}
}
4、update
游戏开发的一个关键点是在每一帧渲染前更新物体的状态和方位。这些更新操作通常都放在 update 回调中。
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;
@ccclass("PlayerControl")
export class PlayerControl extends Component {
@property({type:Node,visible:true})
node:Node = null;
update (deltaTime: number) {
this.node.setPosition(0.0,10.0*deltaTime,0.0);
}
}
5、lateUpdate
如果我们要在动效（如动画、粒子、物理等）更新后进行一些操作，或者在所有组件的 update 都执行完之后才进行其它操作，那就需要用到 lateUpdate 回调。
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;
@ccclass("PlayerControl")
export class PlayerControl extends Component {
@property({type:Node,visible:true})
node:Node = null;
lateUpdate (deltaTime: number) {
this.node.setPosition(0.0,deltaTime,0.0);
}
}
6、onDisable
当组件的 enabled 属性从 true 变为 false 时，或者所在节点的 active 属性从 true 变为 false 时，会激活 onDisable 回调。
7、onDestroy
当组件或者所在节点调用了 destroy()，则会调用 onDestroy 回调，并在当帧结束时统一回收组件。