前言
对于一个微信小游戏来说,好友排行榜绝对是必不可少的功能,能一定程度上增加玩家的战斗力和活跃度,实实在在地增加小游戏的曝光量。
这篇文章皮皮将讲解如何给小游戏项目加入微信好友排行榜功能~
不吹不黑,这绝对是新手开发者的福音!不接受任何反驳!
前排提示:文章中的 排行榜子域项目 已经上传至我的开源主页,甚至 改都不用改,接上项目就能用 ,链接在底部传送门~
正文
微信开放数据域
要让小游戏接入微信好友排行榜功能,我们必须先了解下什么是 开放数据域 ,来看看 Cocos 官方文档中的解释:
也就是说,我们的小游戏项目想要加入好友排行榜功能,就需要 单独再创建一个子项目专门用来展示好友排行榜 ,并且 只有在子项目中才可以调用微信提供的数据操作 API 。
主域(主项目)
首先我们需要在主项目中 增加一个显示排行榜的按钮 并 搭建排行榜的 UI 框架 。
- 我们应该尽可能将 UI 部分放在主域中展示。
- 必要的细节部分才在子域(子项目)中展示,保证效果的前提下越少越好啦。
注意到 wxSubContextView (叫啥名随你啦)节点了吗?
- 这个节点上有一个 WXSubContentView 组件,有了它,这个节点就会成为子域的容器。也就是说,子域的内容会显示在这个节点上,所以 子域的大小必须和这个节点一致 。
- 另外需要注意的是,容器节点还需要一个空的 Sprite 组件来渲染子域的内容。
- 然后来写一下排行榜的控制脚本,在主域中我们可以通过 wx.postMessage 函数向子域发送信息,获取排行榜或者设置玩家的分数。
const { ccclass, property } = cc._decorator; |
子域(子项目)
新建一个项目作为我们的子域,关于子域我们需要 注意 以下两点:
- 将子域的 Canvas 节点的 Canvas 组件的设计分辨率调整为我们主域的容器节点的大小 ,否则子域内容会被缩放,导致运行效果与预期不一致!
- 这里还要提一点,子域的 分辨率越低性能越高 ,反之 分辨率越高性能越低但是显示效果更好 。
- 将子域的 Main Camera 节点的 Camera 组件的 Background Color 属性的不透明度(Alpha)设为 0 ,否则运行时子域内容就是一片漆黑!
接下来就是和普通场景一样制作我们需要的好友列表 UI:
- 用 ScrollView 组件来展示我们的排行榜,并制作展示好友信息的预制体 item 。
- 编写 RankItem 组件,添加到 item 预制体上,主要用来设置好友头像、昵称和分数。
- 编写 Rank 组件,包含主要的设置、获取数据和更新好友信息展示的逻辑;在子域中,我们使用 wx.onMessage 来监听主域发来的消息。
- 点击编辑器左上方工具栏的 [ 项目 –> 项目设置 –> 模块设置 ] , 取消勾选我们子域中没有用到的组件并保存 ,这一步的目的是 减少子域的包体大小 。
打包运行
- 首先是我们的 主域 (主项目):打开 构建发布 面板,设置好参数后填写你的微信小游戏 appid ,然后将下方的 开放数据域目录设置为你的子域项目名 ,然后进行构建。
- 然后是 子域 (子项目):同样是打开 构建发布 面板,将 发布平台 设置为 微信小游戏开放数据域 , 发布路径 设置为 *我们主项目的导出目录(一般为 ${ 你的项目目录/build/wechatgame/ }) *,然后进行构建。
最后,主项目和子项目都构建完成后,我们用 微信开发者工具运行我们的主项目 ,点击加载排行榜,可以看到我们已经成功加载了好友排行榜啦!
- 如果你那里没有显示任何东西的话,那说明你还没有上传过分数~
- 另外如果微信开发者工具报错“[GameOpenDataContext] 子域只支持使用 2D 渲染模式”,不用担心,这是正常情况,你的代码没问题,不必理会。
补充
- 最后再补充一点,wx 是微信的内置全局变量,而在 Cocos Creator 中不存在 wx 这个全局变量,所以在 VSCode 中调用 wx 的函数会报错。
- 所以我在主项目和子项目中都添加了一个 wx.d.ts 声明文件,来表明 wx 以及其函数的存在,VSCode 就不会再报错了,而且还有智能提示!
- 我的开源游戏脚手架 eazax-ccc 就包含此文件,另外我的开源主页中也有单独的 wx.d.ts 仓库,下面是 wx.d.ts 文件的内容:
传送门
更多分享
公众号
菜鸟小栈
我是陈皮皮,这是我的个人公众号,专注但不仅限于游戏开发、前端和后端技术记录与分享。
每一篇原创都非常用心,你的关注就是我原创的动力!
Input and output.