CocosCreator小游戏排行榜教程

分类栏目:cocos教程

208

先贴上几个链接 :

https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html?q=     这个是介绍了子域和主域之间的通信

https://www.w3cschool.cn/weixinapp/weixinapp-vibrate.html   微信小程序的接口  当时查震动就是在这里找到的

我用的Creator版本是1.9.2。

制作游戏微信小游戏排行榜,你需要创建两个项目,一个项目作为主域存放你的代码,就是你写的游戏逻辑。另外需要新建一个项目作为子域,这个项目用来和微信之间通信。因为开发者只有在子域中才能访问微信提供的 wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() 两个 API,才能实现一些排行榜的功能。

主域构建的时候要在开放域数据代码写上wegame下的一个文件目录,这个文件目录就是子域的代码。

子域构建勾选小游戏开放数据域。

由于每次重新构建的时候,都会将之前的东西先删除再构建,所以要首先构建子域项目,构建完成之后再将子域构建的项目复制过来。我这里选择的是将子域构建目录直接放在主域构建目录的wegame文件夹下,所以我会先构建主域,然后构建子域就可以了,不需要手动去复制粘贴。

打包子域工程的时候,渲染模式选择canvas,选择自动会报错:子域只支持2D渲染模式

主域和子域都构建完成了之后,建立主域与子域之间的通信,另外说一下,调用微信的接口使用的wx. 是只能在微信开发工具或者预览到手机上才有用的,直接调试或者运行,在creator中wx.是会报错的,建议搞一个枚举,不然调试功能的时候很麻烦,或者从微信平台再转回Android要更改或者注释很多代码。

微信中的wx.getOpenDataContext()方法可以获得开放数据域的实例,获得的实例调用postMessage,向子域发送数据,子域通过开启wx.onMessage()接受主域传达的消息。

 

            let openDataContext = wx.getOpenDataContext();

openDataContext.postMessage({

text: 'writeBubbleNum',

bubbleToatalNum:cc.sys.localStorage.getItem("wipeBubbleTotalNum"),

LV:cc.sys.localStorage.getItem("GameLv"),

});

 

 

 

wx子域

 

wx.onMessage(data => {

console.log(data)

switch(data.text){

case "rankList":

self.label_tips.active = true;

self.onLoadRankList();

break;

case "abilityList":

self.label_tips.active = true;

self.onLoadAbilityList();

break;

case "writeBubbleNum":

self.onWriteBubbleNum(data.bubbleToatalNum,data.LV);

break;

default:break;

}

})

 

子域中收到主域传递过来的消息,甄别后进入不同的渠道。我上边的代码前两个是进行读操作,后一个是进行写操作。

 

存储数据wx.setUserCloudStorage(function(){})

 

wx.setUserCloudStorage({

KVDataList: [{key: "writeBubbleNum", value: "" + bubbleToatalNum},{key:"LV",value:"" + LV}],

success:function(res){

console.log("存储数据成功")

},

fail:function(res){

console.log("存储数据失败")

},

complete:function(res){

console.log("存储数据完成")

}

});

读数据就通过微信提供的接口来实现

 

wx.getFriendCloudStorage({

keyList:["LV"], //获取到好友存储的LV值

success:function(res){

console.log("读取等级数据成功")

console.log(res); //微信开发工具中后台可以看到返回的详细数据

                }

    });

 

你申请获得的数据会以下边的格式返回,用户写入的数据都会存储到data当中,如果不清楚可以在后台输出,使用console.log()方法,在微信开发工具中可以查看具体的数据。微信头像的返回是一个URL,可以用cocos官网上提供的一个方法,直接将微信返回的url传入就可以显示头像。

 


//加载头像

    createImage(avatarUrl) {

if (CC_WECHATGAME) {

try {

let image = wx.createImage();

image.onload = () => {

try {

let texture = new cc.Texture2D();

texture.initWithElement(image);

texture.handleLoadedTexture();

this.avatarImgSprite.spriteFrame = new cc.SpriteFrame(texture);

} catch (e) {

cc.log(e);

this.avatarImgSprite.node.active = false;

}

};

image.src = avatarUrl;

}catch (e) {

cc.log(e);

this.avatarImgSprite.node.active = false;

}

} else {

cc.loader.load({

url: avatarUrl, type: 'jpg'

}, (err, texture) => {

this.avatarImgSprite.spriteFrame = new cc.SpriteFrame(texture);

});

}

}

 

这是在子域中的操作,接下来要把子域中的画面渲染到主域上去。微信公众平台提供的方法我试了下,会报错说不能将安全的canvas绘制到不安全的canvas上,一脸懵。搞了半天没解决问题。后边去用了cocos官网的方法,才实现了,可以去看看。

链接是:http://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame-sub-domain.html

上边是官网的代码,值得一提的是我没找到sharedCanvas是在哪里定义的,然后它就直接用了,我将这个sharedCanvas保存为全局变量,通过wx.getOpenDataContext()获得,因为微信调试好麻烦的,我也没试直接用这个玩意。但是我保存全局变量是可以的。

在上边的代码的基础上,我们还要去设置sharedCanvas的宽高,我是设置的设计分辨率的大小。我这里用的self就是this,因为吃过this的亏,所以我在每个方法的第一行都会写上let self = this;

//子域设置尺寸

let openDataContext = wx.getOpenDataContext()

self.sharedCanvas = openDataContext.canvas

self.sharedCanvas.width = 1080;

self.sharedCanvas.height = 1920;

    当子域绘制在屏幕上的时候,游戏会特别卡,在微信小游戏中帧率掉到了恐怖的6帧。后边查了很久才知道就是这么卡,最好的解决方案是调开排行榜的时候暂停游戏。然后我去看了跳一跳还有一些带排行榜的游戏,我发现跳一跳排行榜是在载入界面的入口,要么就是游戏结束后会自己弹出,根本就不存在游戏运行的时候可以查看排行榜。所以,加载排行榜的时候还是暂停游戏,或者干脆游戏中不给玩家看排行榜。

有一些问题,微信小程序的帧率问题,我的小游戏在浏览器和微信开发工具上的模拟器上都不卡,但是在微信小游戏中有一点卡顿,我看了一下帧率,在微信中只有30帧左右波动,而在模拟器中却很流畅,60左右波动,打出android包也是不卡。搜索了很久没找到原因。在cocos论坛上看到了也有类似的情况,引擎团队说是要改底层,我没有解决的能力。不过整体不是很影响。

还有就是在子域中不能修改节点的颜色,会报错。也是引擎级别的bug。后边应该会改进。