Detailed explanation of CocosCreator MVC architecture

Overview

This article will introduce the MVC architecture commonly used in game clients. The MVC of a game is divided as follows:

M: 1) A single global data center World, where all game module data has entries, 2) Each module’s own data structure.

V: 1) UI interface and scene made by creator prefab, 2) ViewCtrl of display logic of each interface

C: 1) Global MainCtrl, 2) Business logic class ModuleCtrl of each module

Specific modules

Let’s introduce the M part first. Because the data of one module also needs to be accessed in other modules, such as the friend module, it also needs to be accessed during chat and in the ranking list. The data should have a singleton global data center class World, and the data classes of all game modules have entries in World. These data can be obtained and set from the server after the player logs in.

export class World {
    private static instance: World = null;
 
    private _test: TestData = null;
 
    /**
     * Singleton mode */
    private constructor() {
 
    }
 
    /**
     * Get instance */
    public static get inst(): World {
        if (!World.instance) {
            World.instance = new World();
        }
 
        return World.instance;
    }
 
    // FOR TEST
    public set test(val: TestData) {
        this._test = val;
    }
 
    public get test(): TestData {
        return this._test;
    }
}

In this way, modules can independently design their own data structures, request changes to the ModuleCtrl of the corresponding module by sending messages, and read them through World.

export class TestData {
    private _text: string = null;
 
    public constructor() {
 
    }
 
    public set text(val: string) {
        this._text = val;
    }
 
    public get text(): string {
        return this._text;
    }
}

Messages can be dispatched when data is updated, and the interface can listen to the messages for refresh.

The following describes the association between the interface and the script code. As introduced in the previous chapter, Cocos Creator is based on the component model. I made each UI interface into a prefab, and each prefab can add a script component to control the display logic of this interface.

In the pop-up window management, I mentioned that I designed a class called ViewCtrl that inherits cc.Component. All interface display logic classes inherit ViewCtrl and are added to the corresponding interface prefab. As mentioned earlier, messages will be dispatched when data is updated. ViewCtrl listens to data update messages and refreshes the associated interface.

const {ccclass, property} = cc._decorator;
 
@ccclass
export default class TestViewCtrl extends ViewCtrl {
}

ViewCtrl only processes the display logic of the interface, not the data business logic. The data business logic of the module is processed by the ModuleCtrl of the module. ViewCtrl responds to user operations and dispatches messages, while ModuleCtrl listens for and processes messages. The ModuleCtrl of most modules is mainly used for network communication and modification of cached data of this module.

export class TestCtrl {
 
    public constructor() {
 
    }
 
    public init(): void {}
 
    public start(): void {
        NotifyCenter.addListener(MSG_TEST_HTTP, (src: any, data: any) => {
            this.testHttp();
        }, this);
    }
 
    public testHttp(): void {
        let data = {
            mod: 1, // module cmd: 1, // command}
 
        let params: HttpReq = {
            path: "",
            method: HTTP_METHOD_GET
        }
 
        MainCtrl.inst.http.sendData(data, params, (data: NetData) => {
            World.inst.test = new TestData();
            World.inst.test.text = "123";
        }, (code: number, reason: string) => {});
    }
}

As mentioned earlier, the C layer also has a global singleton MainCtrl. This class is mainly responsible for module registration, providing global operation interfaces (such as displaying and hiding interfaces/scenes), and network communication processing.

The above is a detailed explanation of the CocosCreator MVC architecture. For more information about the CocosCreator MVC architecture, please pay attention to other related articles on 123WORDPRESS.COM!