Creator实战项目TS【FlappyBird】-- ScriptBase、ConfigMgr、Game整体框架分析_mlbb creator base

一：ScriptBase.ts
脚本基类，为了便于统一管理，给每个脚本创建一个基类。

//主要用于让所有要被Game管理的脚本继承，里面只有四个生命周期函数。
const {ccclass, property} = cc._decorator;

@ccclass
export default class ScriptBase extends cc.Component {

    onInit(){

    }

    onLateInit(){

    }

    onUpdate(dt){

    }

    onLateUpdate(dt){

    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

二、Configer.ts
这个基类专门用于存储Game所管理的各个脚本，定义了所有的声明周期函数，其他只要是要由Game管理的脚本都继承这个类。

1. Configer继承于脚本基类scriptBase；
2. 先定义一个接口（结构体）命名为Data，把名字和脚本对象绑在一起（脚本对象的类型为基类类型scriptBase）；
3. 默认导出ConfigMgr类（类型一般首字母大写）；
4. 把ConfigMgr设成单例；
5. 定义数组、写一个函数addData将名字与脚本存进数组、写一个函数getData用于获取脚本；
6. 处理所存储的所有脚本的生命周期函数。

import ScriptBase from './ScriptBase'

//相当于绑定，把名字跟脚本绑定，后续存储后，才好查找。
interface Data{
    configName:string,
    configTs:ScriptBase
}

//默认导出 ConfigMgr类
export default class ConfigMgr {
    
    //1、单例对象
    static instance:ConfigMgr = null;
    //静态函数，之后可以直接通过类名调用，获取单例函数  ConfigMgr.getInstance()
    static getInstance():ConfigMgr{
        if(!ConfigMgr.instance){   //ConfigMgr.instance 也可以写成  this.instance 
            ConfigMgr.instance = new ConfigMgr();
        }
        return ConfigMgr.instance;
    }

    //2、存储的数组 存储 绑定的 名字与脚本 的对象  （私有）
    private arrConfig:Data[] = [];
    constructor() {
        
    }

    //3、存储节点名字与脚本接口，后续注册的时候可以传入名字跟脚本，就会被存储到数组里面
    addData(name:string,scriptTS:ScriptBase):void{
        //创建一个Data类型的对象
        //根据接口里面的类型创建出对象的属性
        let configData:Data ={
            configName:name,     //configName赋值为传进来的数据name
            configTs:scriptTS
        };
        //压入数组，存储对象
        this.arrConfig.push(configData);
    }

    //4、获取接口，后续可以通过存储的节点名字（层级管理器里面的节点名字）拿到对应的脚本
    getData(name:string):ScriptBase{
        //遍历数组，拿到每个元素（对象）里面的configName属性是否跟传递进来的name一样，如果一样返回 脚本
        for(let value of this.arrConfig){
            if(name === value.configName){
                return value.configTs;
            }
        }
        //循环结束，如果没有找到返回null
        return null;
    }


	//处理所存储的脚本的生命周期函数
    onInitMgr(){     //处理所存储的所有脚本的onInit函数
        for(let value of this.arrConfig){
            //拿到脚本 value.configTs
            value.configTs.onInit();
        }
    }

    onLateInitMgr(){    //处理所存储的所有脚本的onLateInit函数
        for(let value of this.arrConfig){
            //拿到脚本 value.configTs
            value.configTs.onLateInit();
        }
    }

    onUpdateMgr(dt){     //处理所存储的所有脚本的onUpdate函数
        for(let value of this.arrConfig){
            //拿到脚本 value.configTs
            value.configTs.onUpdate(dt);
        }
    }

    onLateUpdateMgr(dt){      //处理所存储的所有脚本的onLateUpdate函数
        for(let value of this.arrConfig){
            //拿到脚本 value.configTs
            value.configTs.onLateUpdate(dt);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

三、总控制脚本Game.ts
用于控制游戏场景里面所有节点的生命周期函数。

1. 写一个函数_registerMgr()用于注册所有的脚本，即把Game管理的所有脚本添加到ConfigMgr的单例里面。
2. 在Game的生命周期函数里，去遍历拿到每个脚本分别执行他们的生命周期函数。

import ConfigMgr from './ConfigMgr';
import ScriptBase from './ScriptBase'
const {ccclass, property} = cc._decorator;

@ccclass
export default class Game extends cc.Component {

    //公布的是父类类型的数组，后续只要是继承于脚本基类得脚本挂的节点都可以拖到属性检查器上
    @property(ScriptBase)
    arrConfigTs:ScriptBase[]=[];//这个数组里面存储的是 Game节点属性检查器里面拖过去的节点的脚本。

    onLoad () {
		//在初始化开始前，调用注册
        this._registerMgr();
        
        //调用ConfigMgr初始化各个脚本接口
        ConfigMgr.getInstance().onInitMgr();
    }

    start () {
        ConfigMgr.getInstance().onLateInitMgr();
    }

    update (dt) {
        ConfigMgr.getInstance().onUpdateMgr(dt);
    }

    lateUpdate(dt){
        ConfigMgr.getInstance().onLateUpdateMgr(dt);
    }

    _registerMgr(){
        //遍历arrConfigTs数组，拿到每个脚本  名字以节点名字命名
        for(let value of this.arrConfigTs){
            let name:string = value.node.name;
            let configTs:ScriptBase = value;
            //拿到ConfigMgr单例，把这两个数据存储进去。
            ConfigMgr.getInstance().addData(name,configTs);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41