CocosCreator小游戏排行榜
先贴上几个链接 :
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() 获取当前用户也玩该小游戏的好友的用户数据
- wx.getGroupCloudStorage() 获取当前用户在某个群中也玩该小游戏的成员的用户数据
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。后边应该会改进。
CocosCreator小游戏排行榜相关推荐
- CocosCreator | 微信小游戏排行榜 微信开放域
更多笔记和源码请关注:[微信公众号] CocosCreator笔记 演示 技术摘要 主域工程 微信授权 创建子域节点 向子域发送消息 子域工程 读写用户云托管数据 接收主域发送的消息 构建运行 实现 ...
- CocosCreator微信小游戏排行榜开发
CocosCreator微信小游戏排行榜开发 开发前言 步骤1 开发前言 第一次接触微信小游戏开发的小伙伴,可以看看排行榜的开发和注意事项: 一.开发微信排行榜的话,用户的信息需要从微信提供的API获 ...
- 基于Laya游戏引擎实现微信小游戏排行榜
我们都知道,微信小游戏和小程序目前风头十足,很多公司都逐渐增加了相关业务线来迅速推广自己的产品和抢占用户群.说到微信小游戏,就不得不提到排行榜这个功能,就目前游戏行业,似乎都离不开排行榜这个重要功能, ...
- CocosCreator微信小游戏排行榜及开放数据域的理解与使用
微信小游戏开放数据域及排行榜的使用 好久没有写博客了,距离上一次博客,已经有了近半年之久,这段时间发生了太多的事,当然,这些不是今天的主题,接下来我们主要讲一讲微信小游戏开放数据域的使用,以及如果制作 ...
- 微信小游戏排行榜:Cocos Creator
上一篇文章介绍了主域和子域的概念,微信小游戏:主域子域,这一篇介绍一下怎样在微信小游戏中制作好友排行榜 创建工程 由于开放数据域是一个封闭.独立的 JavaScript 作用域,所以开发者需要创建两个 ...
- LayaAirIDE实现微信小游戏排行榜绘制(开放数据域)
看这篇文章的前提是你 1.已经在微信Web开发者平台里使用wx.setUserCloudStorage接口把自己的数据存储到微信提供的服务器上, 2.并且已经通过wx.getFriendCloudSt ...
- pixijs微信小游戏排行榜开放域开发
关于微信小游戏开放域的基本概念本文不作介绍请去微信官文文档阅读: 主域: 在这你有几件事要作,第一准备好给离屏canvas用的容器:第二作好离屏canvas事件交互,比如切换菜单/关闭窗口:第三循环里 ...
- 微信小游戏排行榜页滚动查看排行榜(canvas指定区域溢出滚动,懒渲染)
在微信小游戏中,好友排名数据是能在关系数据域操作,整个关系数据域只会返回一个最终的sharedCanvas,并且这个canvas不能调用toDataURL()方法,所以要展示好友排行榜的话只能在关系数 ...
- TypeScript:鱼群算法(CocosCreator小游戏)
最近想学一下CocosCreator,于是,编辑器下载,启动. 众所周知,边写边学才是最快的学习方法,得写个Demo练练手,那么写什么呢?听说现在<墨虾探蝌>挺火的,那就抄(学习的事怎么能 ...
最新文章
- Java 批量文件不打包下载_【Java】Java批量文件打包下载zip
- shell学习之常用命令总结
- 【pyhon】怨灵侍全本漫画批量下载爬虫1.00
- C#教程8:面向对象编程【02】
- 第三十七期:为什么2019年人工智能算法岗求职竞争如此激烈?
- vue中数组长度_如何在Vue.js中获取计算数组的长度
- 部署weblogic 12c时遇到的问题
- 剑指offer20题——leetcode主站65题
- 数据中心机房设备标签规范建议
- python转json的函数_python将字符串转换成json的方法小结
- markdownpad2 行内公式
- 【转】qlv文件如何转换成mp4 怎样把下载好的qlv格式视频转换成MP4格式
- python中标点符号大全及名字_标点符号大全及名字
- 零基础学编程觉得很枯燥,很难坚持学习下去怎么办?
- NETDMIS5.0建立坐标系举例2023
- @keyup.enter失效问题
- mac打开chm文件
- arma模型平稳性和可逆性的条件,如何理解MA模型的可逆性条件?它有什么意义?...
- 婚纱影楼高价买样片忽悠新人成行业潜规 不同影楼样片相同实拍效果差距大
- 【Electron】Electron开发入门(五):项目打包