CocosCreator游戏开发框架（二）：怎么用

上篇文章CocosCreator游戏开发框架（一）：是什么 && 为什么主要介绍了游戏框架的内容。

这篇文章会在框架的基础上开发一个简单的客户端登陆系统，帮助大家快速上手。

需求

• loading场景，在这里处理登录逻辑
  • 连接网络，连接成功显示登录界面
  • 输入账号密码登录，账号本地缓存，然后登录
  • 登录成功之后跳转到主界面
    
    
    
    
    

界面

1、选中拼好的scene/prefab，主菜单 -> 扩展 -> ui-creator -> create-ui-template，插件会在对应的目录生成脚本文件


其中，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-killer），生成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: