Components and Component Execution Order

    The component class must inherit from a class. Example:

    The life cycle of a component is completely controlled by the node. Unlike ordinary class objects, components cannot be created by constructors:

    1. const component = new MyComponent(); // Error: The component cannot be created by the constructor

    In contrast, components must be created by nodes and added to nodes as follows

    1. const myComponent = node.addComponent(MyComponent);

    When the component is no longer needed, call the node.removeComponent(myComponent) method to remove the specified component and destroy it. Example:

    1. import { Component } from 'cc';
    3. @ccclass("MyComponent")
    4. class MyComponent extends Component {
    5.     constructor () {
    6.         console.log(this.node.name); // Error: The component is not attached to the node
    7.     }
    9.     public printNodeName () {
    10.         console.log(this.node.name);
    11.     }
    12. }

    Component execution order

    1. // Game.ts
    2. import { _decorator, Component, Node } from 'cc';
    3. const { ccclass, property } = _decorator;
    5. import { GameData } from './GameData';
    6. import { Menu }from './Menu';
    8. @ccclass("Game")
    9. export class Game extends Component {
    10.     private configuration = Configuration;
    11.     private gameData = GameData;
    12.     private menu = Menu;
    14.     onLoad () {
    16.         this.gameData.init();
    17.         this.menu.init();
    18.     }
    19. }

    Among them, the init method needs to be implemented in Configuration.ts, GameData.ts and Menu.ts, and the initialization logic is put in it. In this way, it is guaranteed the initialization sequence of Configuration, GameData and Menu.

    Similarly, it is necessary to ensure the update order of each frame of the above three scripts, we can also replace the update scattered in each script with our own defined method:

    1. // Configuration.ts
    2.     static updateConfig (deltaTime: number) {
    4.     }

    Then call these methods in the update of the Game.ts script:

    1. // Game.ts
    2. update (deltaTime: number) {
    3.     this.configuration.updateConfig(deltaTime);
    4.     this.gameData.updateData(deltaTime);
    5.     this.menu.updateMenu(deltaTime);

    The execution order of component scripts on the same node can be controlled by the order of the components in the Inspector panel. The components arranged above will be executed before the components arranged below. We can adjust the arrangement order and execution order of the components through the Move Up and Move Down menus in the gear button at the upper right corner of the component.

    When CompA is above CompB on the Inspector panel, the output may be this way:

    1. CompA onLoad!
    2. CompB onLoad!
    3. CompA start!
    4. CompB start!
    5. CompA update!

    After moving CompA under CompB in Inspector by Move Down in the upper right corner of the CompA component settings menu, the output may be this way:

    1. CompB onLoad!
    2. CompA onLoad!
    3. CompB start!
    4. CompA start!
    5. CompB update!
    6. CompA update!

    If the above method still cannot provide the required control granularity, developers can also directly set the executionOrder of the component. executionOrder affects the execution priority of the component’s life cycle callback. The smaller the executionOrder, the earlier the component will be executed relative to other components. The executionOrder defaults to 0, so if it is set to a negative number, it will execute before other default components. Example:

    1. // Configuration.ts
    2. import { _decorator, Component, Node } from 'cc';
    3. const { ccclass, executionOrder } = _decorator;
    5. @ccclass("Configuration")
    6. @executionOrder(-1)
    7. export class Configuration extends Component {
    9.     onLoad () {
    10.         console.log('Configuration onLoad!');
    11.     }
    12. }

    By setting it as above, Configuration.ts‘s onLoad will be executed before Menu.ts‘s onLoad method.