CocosCreator遊戲開發框架（二）：怎麼用

上篇文章CocosCreator遊戲開發框架（一）：是什麼 && 爲什麼主要介紹了遊戲框架的內容。

這篇文章會在框架的基礎上開發一個簡單的客戶端登陸系統，幫助大家快速上手。

需求

• loading場景，在這裏處理登錄邏輯
  • 連接網絡，連接成功顯示登錄界面
  • 輸入賬號密碼登錄，賬號本地緩存，然後登錄
  • 登錄成功之後跳轉到主界面
    
    
    
    
    

界面

1、選中拼好的scene/prefab，主菜單 -> 擴展 -> auto-ui -> create-script，插件會在對應的目錄生成腳本文件

其中，auto_loading會作爲一個組件添加到UILoading中，如下

這樣，以後我們要訪問節點是，直接this.ui.就會有代碼提示了

是不是很方便呢。

2、將UILoading.ts掛載到loading.fire根節點Canvas下（編輯器直接拉就行了）

3、在UILoading.ts中處理監聽按鈕事件，UIBase已經封裝好了onRegisterEvent和unRegisterEvent

onShow() {
	// 監聽btn_login點擊事件
	this.onRegisterEvent(this.ui.btn_login, this.onLogin, this);
}
onHide() {
	// 取消btn_login點擊事件
	this.unRegisterEvent(this.ui.btn_login, this.onLogin, this);
}
onLogin() {
	UIHelp.ShowTips('Login Action');
}

4、運行loading場景，點擊登錄按鈕

其他的界面都是這樣，不多說。

網絡和proto

1、新建一個login.proto

syntax = "proto3";

import "base.proto";

//@comment("登錄",10000,"C2G_Login")
message C2G_Login {
    string cmd = 1;  
    //登錄名  
    string name = 2;
    // 密碼
    string pw = 3;
}

//@comment("登錄返回",10001,"G2C_Login")
message G2C_Login {
    string msg = 1;
}

2、運行proto插件（擴展 -> proto -> create-message），生成ProtoMessage.ts

3、在GameController處理遊戲初始化

import { Network } from "./network/Network";
import { SingletonFactory } from "./utils/SingletonFactory";
import GameDataCenter from "./data/GameDataCenter";
import ProtoLoader from "./network/ProtoLoader";

class GameController {
    network: Network = null;

    constructor() {
    }

    init() {
        // 新建一個網絡單例
        this.network = SingletonFactory.getInstance(Network);
        // 初始化數據模塊
        GameDataCenter.initModule();
        // proto文件加載
        ProtoLoader.load();
    }
}

export default new GameController();

4、用VSCode打開服務端工程（hello-ws），主菜單 -> 調試 -> 啓動調試，運行服務端工程

5、在UILoading.onStart()中進行遊戲初始化，網絡連接成功後會顯示login節點

onStart() {
	// 遊戲初始化
	GameController.init();
	// 連接網絡
	GameController.network.connect();
}

數據model

每加一個大功能/大模塊，就在assets\script\data\model目錄下新建一個文件夾，裏面用於存放該模塊的相關數據類。

1、新建AccountModel.ts繼承IDataModel

import { G2C_Login, C2G_Login } from "../../../ProtoMessage";
import IDataModel from "../IDataModel";
import UIHelp from "../../../utils/UIHelp";
import EventMng from "../../../manager/EventMng";
import { GameEvent } from "../../const/EventConst";

const KEY_ACCOUNT = 'account';

export default class AccountModel extends IDataModel {
    constructor() {
        super('account');
    }

    /**緩存賬號到本地 */
    saveAccount(account: string) {
        this.Set(KEY_ACCOUNT, account);
        this.Save();
    }

    /**從本地讀取緩存賬號 */
    getAccount() {
        return this.Query(KEY_ACCOUNT, '');
    }

    /**需要重寫 */
    getMessageListeners() {
        return {
            // key爲消息名，value爲觸發函數
            ['G2C_Login']: (msg) => { this.G2C_LoginSuccess(msg) },
        }
    }

    /**請求登錄 */
    Login(account: string, password: string) {
        let login = new C2G_Login();
        login.cmd = 'login';
        login.name = account;
        login.pw = password;
        this.sendProtocolMsg(login);

        this.saveAccount(account);
    }

    /**登錄成功 */
    G2C_LoginSuccess(msg: G2C_Login) {
        UIHelp.ShowTips('登錄成功！' + msg.msg);
        EventMng.emit(GameEvent.LOGIN_SUCCESS);
    }
}

2、在GameDataCenter.initModule()方法中註冊該數據模塊，initModule在GameController.init()方法中調用

// GameDataCenter.ts
initModule() {
    this.account = this.newModel(AccountModel);
}

3、UILoading.ts中處理登錄邏輯

import auto_loading from "../../../Data/AutoUI/scene/auto_loading";
import UIBase from "../UIBase";
import UIHelp from "../../../utils/UIHelp";
import GameController from "../../../GameController";
import EventMng from "../../../manager/EventMng";
import { SocketEvent, GameEvent } from "../../../data/const/EventConst";
import GameDataCenter from "../../../data/GameDataCenter";

const { ccclass, menu, property } = cc._decorator;

@ccclass
@menu("UI/scene/UILoading")
export default class UILoading extends UIBase {
	ui: auto_loading = null;

	protected static prefabUrl = "db://a";
	protected static className = "UILoading";

	onUILoad() {
		this.ui = this.node.addComponent(auto_loading);

		this.ui.loginNode.active = false;
	}

	onShow() {
		// 監聽btn_login點擊事件
		this.onRegisterEvent(this.ui.btn_login, this.onLogin, this);

		// 監聽事件
		EventMng.on(SocketEvent.SOCKET_OPEN, this.onSocketOpen, this);
		EventMng.on(GameEvent.LOGIN_SUCCESS, this.onLoginSuccess, this);
	}

	onHide() {
		// 取消監聽btn_login點擊事件
		this.unRegisterEvent(this.ui.btn_login, this.onLogin, this);

		// 取消監聽事件
		EventMng.off(SocketEvent.SOCKET_OPEN, this.onSocketOpen, this);
		EventMng.off(GameEvent.LOGIN_SUCCESS, this.onLoginSuccess, this);
	}

	onStart() {
		// 遊戲初始化
		GameController.init();
		// 連接網絡
		GameController.network.connect();
	}

	onSocketOpen() {
		this.ui.loginNode.active = true;
		// 讀取緩存賬號
		let account = GameDataCenter.account.getAccount();
		if (account != '') {
			this.ui.edit_account.getComponent(cc.EditBox).string = account;
		}
	}

	onLogin() {
		let account = this.ui.edit_account.getComponent(cc.EditBox).string;
		let password = this.ui.edit_password.getComponent(cc.EditBox).string;
		GameDataCenter.account.Login(account, password);
	}

	onLoginSuccess() {
		// 登錄成功，切換到主界面
		cc.director.loadScene('main');
	}
}

最後

運行loading場景就可以跑起來了。

github地址：點這裏