最近在自学用Cocos Creator开发一款微信小游戏，期间也遇到了不少问题和坑，好歹算是把自学的第一个小游戏做下来了。游戏就是比较简单的飞机大战，玩家们可以通过关卡收集金币，然后强化飞机来通过更多强力的关卡。游戏内部分素材是用AI生成，部分素材来源于网络，废话不多说，下面进入正题！
目前cocos creator 的编辑器有2个大版本，Cocos Creator 2.x和 Cocos Creator 3D。戒戒用的是后者，目前网上教程和参考代码比较多的是2.4版本的，而且官方也会将 2.4 版本做为 LTS（长期支持）版本，提供后续两年的持续更新。这两者还是有不小的区别的（缓动系统，很多CC前缀等等），如果要迁移的话得花很大的精力去修改。戒戒也建议初学者可以直接选择后者，这样后续如果还要持续更新的话也会少很多维护工作。
工欲善其事必先利其器，先安装一波基础所需的软件，TexturePackerGUI打包图片、CocosDashboard是cocos 的编辑器启动器、VSCODE用来写代码、微信开发者工具就用来上传小游戏。
先制作一个loading场景，用来加载游戏的初始化数据和游戏开始界面，放一个背景图可以widget自适应。再放一些登录按钮和label，由于这款游戏目前戒戒只打算发布在微信小游戏中，所以这里做了一个微信登录的判断，这里也可以获取到微信用户的一些信息，比如头像和昵称等，当然后续也要获取到用户的openid。openid是用户的唯一标识，它可以快速的建立小程序内的用户体系。openid是一个敏感信息所有他不会直接给你，需要你用登录凭证（code）去换取openid，这个在后面再说。
下面简单贴一个检查是否已经授权的函数，可以用来获取用户的昵称和头像。
wxLogin() {
var self = this;
const wx = window['wx'];//避开ts语法检测
const info = this.systemInfo = wx.getSystemInfoSync();//立即获取系统信息
const w: number = this.screenWidth = info.screenWidth;//屏幕宽
const h: number = this.screenHeight = info.screenHeight;//屏幕高
wx.getSetting(
{
success(res) {
//如果用户已经授权
if (res.authSetting["scope.userInfo"]) {
wx.getUserInfo({
success(res) {
console.log("授权成功")
this.userInfo = res.userInfo;
console.log("用户已经授权,用户信息" + res.userInfo.nickName);
console.log("nickName:" + this.userInfo.nickName);
console.log("avatarUrl:" + this.userInfo.avatarUrl);
self.saveUserInfo(this.userInfo);//保存用户信息
self.beginGameButton.active = true;
}
});
//如果用户没有授权
} else {
let button = wx.createUserInfoButton({
type: 'text',
text: '微信登录',
style: {
left: w / 2 - 90,
top: h - 100,
width: 180,
height: 60,
lineHeight: 60,
backgroundColor: "#66CC00",
color: "#FFFFFF",
textAlign: "center",
fontSize: 18,
borderRadius: 10
}
});
//用户授权确认
button.onTap((res) => {
if (res.userInfo) {
console.log("用户同意授权:", res.userInfo.nickName);
this.userInfo = res.userInfo;
console.log(this.userInfo);
self.saveUserInfo(this.userInfo);
self.beginGameButton.active = true;
button.destroy();
} else {
console.log("用户拒绝授权:");
}
});
}
}
}
);
}
好了今天就先说这么多，下一篇文章我们正式开始！对了记得来体验一下这款小游戏哦，打不过的话一定要升级装备！
