引擎使用Cocos
前言
1. 底层技术
首先是开发语言，微信小游戏只支持 JavaScript，当然可以编译为 JS 的 TypeScript 以及 CoffeeScript 都可以作为开发语言使用。\
其次是小游戏所支持的游戏库 API，主要包含 HTML5 的 Canvas 2D API 和 WebGL 1.0 API，使用任何一种 API 都可以完成游戏最重要的渲染功能，不过不能够混用，除此之外，只有 WebGL 渲染模式可以支持 3D 渲染。
2. 中间件：游戏引擎
当然，直接使用 Canvas 2D 或 WebGL 来制作游戏是门槛很高，也非常费时费力的一件事，你肯定不希望一个小游戏项目拖上一年半载吧？所以使用 HTML5 游戏引擎其实是非常明智的选择，引擎封装出的高层接口可以大大降低开发者的开发门槛，缩短项目周期。目前国内的三家主流引擎 Cocos Creator、Egret、Laya 均已支持小游戏发布，Phaser.js、Three.js 等国外 HTML5 引擎虽然并没有支持直接发布，经过一些定制也是可以成功运行在小游戏环境中。
## login
- 使用 Cocos Creator 创建游戏登录场景；
- 使用 Creator 拖动控件, 还原设计稿 ，依托 Creator 的良好的工作流,使得这部分的工作可以由游戏策划或者 UI 设计者来完成，程序开发者只需要在场景中挂载相应的游戏逻辑脚本。举个例子，在登录按钮挂在一个 uiLogin.js 的脚本完成用户登录功能
我们新建 js 脚本文件 选场景控件 添加组件 onload加个监听
```
onLoad() {
this.nodeDict["start"].on("click", this.startGame, this);
},
startGame() {
Game.GameManager.matchVsInit();
}
```
初始化Matchvs SDK
```
var uiPanel = require("uiPanel");\
cc.Class({
extends: uiPanel,
properties: {},
onLoad() {
this._super();
this.nodeDict["start"].on("click", this.startGame, this);
},
startGame() {
Game.GameManager.matchVsInit();
}
});
```
回头看看回调罢-**Game.GameManager.js**
```
matchVsInit: function() {
mvs.response.initResponse = this.initResponse.bind(this);
mvs.response.errorResponse = this.errorResponse.bind(this);
// 回调
mvs.response.loginResponse = this.loginResponse.bind(this);
var result = mvs.engine.init(mvs.response, GLB.channel, GLB.platform, GLB.gameId);
if (result !== 0) {
console.log('初始化失败,错误码:' + result);
}
```
我们再去Matchvs SDK找下初始化参数
```
channel: 'x',
platform: 'x',
gameId: xxxxxx,
gameVersion: x,
appKey: 'appKey',
secret: 'sercet',
```
返回UserID,则登录成功
`gameManager.js`
```registerUserResponse: function(userInfo) {
var deviceId = 'abcdef';
var gatewayId = 0;
GLB.userInfo = userInfo;
console.log('开始登录,用户Id:' + userInfo.id)
var result = mvs.engine.login(
userInfo.id, userInfo.token,
GLB.gameId, GLB.gameVersion,
GLB.appKey, GLB.secret,
deviceId, gatewayId
);
if (result !== 0) {
console.log('登录失败,错误码:' + result);
}
},
loginResponse: function(info) {
if (info.status !== 200) {
console.log('登录失败,异步回调错误码:' + info.status);
} else {
console.log('登录成功');
this.lobbyShow();
}
},
```
我们来到匹配方面
**uiMatchingpvp.js**
joinRandomRoom: function() {
```
var result = mvs.engine.joinRandomRoom(GLB.MAX_PLAYER_COUNT, '');
if (result !== 0) {
console.log('进入房间失败,错误码:' + result);
}
},
```
老样子 监听
第一期结束 下一期为游戏同屏