个人开发者看这里,小游戏换量计划正式启动!

微信小游戏换量计划旨在帮助 Cocos Creator 小游戏开发者相互换量,开启一个从『A游戏』通向『B游戏』的传送门,提高游戏的曝光率用户活跃度

「Creator星球游戏开发社区」公众号与「微笑游戏」公众号以及旗下的「微笑盒子」微信小程序联合为 Cocos Creator 小游戏开发者提供了一个简单易用的小游戏导航控件,目前支持3大模式5类应用场景:

  1. 本地模式
  2. 微信云模式
  3. 微笑模式

下图是几种用法在微信上的测试效果:

下详细介绍一下导航控件的具体的使用方法。

01 本地模式

本地模式最为简单,只需要将 GameNavigator 预制体拖入场景,输入appid即可使用。由于没有任何服务器支持,你需要将跳转的游戏图标保存到工程并自行设置一下,如下图:

同时还需要将游戏 appid 填写到微信配置文件 game.json 文件中,如下代码所示:

{
    "deviceOrientation": "portrait",
    "networkTimeout": {
      "request": 5000,
      "connectSocket": 5000,
      "uploadFile": 5000,
      "downloadFile": 5000
    },
    "subpackages": [],
    "navigateToMiniProgramAppIdList": [
        "wx8ee2e9bead348dfa",
        "wxcaa2fc5e0e4d4e4c",
        "wx723627b94b2611ca",
        "wxdbbab1b26ac80510",
        "wx28adee02aa5bebbe"
    ]
}

在微信小游戏中,我们要直接跳转的游戏都必须将 appid 填写在 navigateToMiniProgramAppIdList 数组里面,这种方式我称为“直跳”。

没有填写到数组里的游戏怎么办呢?不用担心,后面我们会介绍「微笑游戏」支持一种称之为“二阶跳”的方式。

02 微信云模式

微信云模式是小游戏使用了微信云开发,将需要跳转的游戏信息保存到了微信云数据库中,使用方式与本地模式完全一样,此模式不用设置游戏图标和游戏名字。

微信云设置

使用微信云模式,需要在云数据中创建一个名为“gameInfos”的集合,如下图:

目前每一条游戏记录的数据结构如下:

{
    appid: String,   //游戏appid
    name:  String,   //游戏显示名字
    icon:  String,   //游戏显示图标
}

上面的icon是游戏图标的URL地址,您可以将图片上传到微信云存储中,将链接粘贴到这里。

Shawn会提供完整案例工程,工程中有备份的 gameInfos 集合表数据,你也可以直接导入在上面做增改。

客户端设置

游戏数据在微信云上配置好后,还需要在客户工程中设置一下您的微信云环境名,找到 wxconfig.js 文件,修改下图中 env 字段的内容:

env 是您当前对应的微信云环境,一个微信小游戏默认支持 2 个环境,一个可以用于开发测试,一个用于发布上线环境。打开微信云,顶部菜单按钮中点击设置就能看到:

控件使用

微信云模式仍然是使用 GameNavigator 组件,将 Type 属性设置为 WX_GAME,看下图:

游戏信息保存在服务器上,因此会有一个数据下载、图标加载的过程,在图标还未显示出来时,会有一个旋转的小动画!

微信云模式还支持随机 appid 的方式,当您所指定的 appid 在你的微信云数据库中不存在时,它将会随机显示出一个游戏来,因此 appid 您不设置也是可以的。

03 微笑模式

微笑模式是由微笑盒子提供小游戏信息,目前微笑盒子已支持数十个微信小游戏,且而还收录有游戏的二维码,支持我们前面说的“二阶跳”的能力,下图是微笑盒子微信小程序界面:

微信后台设置

首先要在微信小游戏后台“开发设置”中添加「微笑游戏」的域名,看下图:

设置好 request 安全域名后,大概需要1分钟左右在游戏中生效,这时你就可以直接使用 GameNavigator 导航组件了,用法没有区别,指定 appid 就好。

上传游戏信息

GameNavigator 组件属性设置为 SARS_GAME,SARS 的全称是 “smile and remain smile” 而不是 Sars 非典病毒!

目前「微笑游戏」暂还不支持随机游戏加载,必须提供「微笑盒子」收录的游戏 appid 才行。同时「微笑游戏」公众号上提供了开发者上传自己的小游戏信息的工具,看下图:

进入微笑游戏提供的游戏助手中输入游戏id、名字、图标、二维码等信息。

二阶跳

这里再讲一下二阶跳,当我们要跳转的游戏没有设置到微信的 game.json 配置文件中时,通过微笑游戏收录的二维码,我们可以在小游戏中通过长按识别二维码跳转,看下面视频中的演示:

通过”二阶跳“可以非常方便地实现任意小游戏的跳转,Shawn将会在微信云模式中也支持”二阶跳“模式,你可以方便地通过服务器控制游戏的跳转。

结语

最后我们再看一下工程资源结构,请看下图:

导航控件的所有资源都在 assets/game-legends 目录下

  1. prefabs 目录中的 GameNavigator 预制体即上面所讲解的游戏导航控件;
  2. scripts 目录中的 SarsGameHelper 是对微笑提供的游戏数据获取的封装,以及二维码的预览;wxconfig 则是对微信云环境配置和微信云数据库的初始化。
  3. textures 目录为 GameNavigator 控件所用到的图片资源
  4. 最外层的 test-game-navigator 测试场景,里面演示了以上3种游戏加载方式,5种使用方法。

目前微信小游戏是个人开发者,通过技术变现最为可行的方式之一。但大多数小游戏在过了公测阶段之后,每天的收益大概0~5元之间,非常的尴尬。Shawn 希望更多的小游戏开发者,能一起手牵手联合起来多交流、多沟通,通过相互引导用户增加更多的游戏曝光机会,这是 Shawn 目前能想到做的事情!

感谢您的支持,下面是工程源码:

https://pan.baidu.com/s/1mHDuqUgLrzFEFIjYJDiENQ

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏樯橹代码

css-in-js 探讨

Web开发是需要掌握多种技术。我们习惯于与多种语言密切合作。而且,随着开发Web应用程序变得越来越普遍和差别细微化,我们经常寻找创造性的方法来弥合这些语言之间的...

12720
来自专栏IT码农

js获得浏览器高度和宽度 参数

document.documentElement.clientHeight -->浏览器的高度

19730
来自专栏BAT的乌托邦

从@Async案例找到Spring框架的bug:exposeProxy=true不生效原因大剖析+最佳解决方案【享学Spring】

本文标题包含有'靓丽'的字眼:Spring框架bug。相信有的小伙伴心里小九九就会说了:又是一篇标题党文章。 鉴于此,此处可以很负责任的对大伙说:本人所有文章...

90520
来自专栏BAT的乌托邦

聊聊Spring的bean覆盖(存在同名name/id问题),介绍Spring名称生成策略接口BeanNameGenerator【享学Spring】

众所周知,Spring容器可以简单粗暴的把它理解为一个大大的Map,存储着容器所管理的所有的单实例对象。我们从使用getBean(String beanName...

77320
来自专栏樯橹代码

Rxjs 响应式编程-第五章 使用Schedulers管理时间

自从接触RxJS,就开始在我的项目中使用它。有一段时间我以为我知道如何有效地使用它,但有一个令人烦恼的问题:我怎么知道我使用的运算符是同步还是异步?换句话说,O...

10730
来自专栏BAT的乌托邦

使用@Async异步注解导致该Bean在循环依赖时启动报BeanCurrentlyInCreationException异常的根本原因分析,以及提供解决方案【享学Spring】

今天在自己工程中使用@Async的时候,碰到了一个问题:Spring循环依赖(circular reference)问题。 或许刚说到这,有的小伙伴就会大惊失...

2K30
来自专栏IT码农

几个有趣的Javascript Hack

访问任意网站,在地址栏输入以上代码,会发生当前网页已经变成编模式了。将上述代码中的true改成false重新执行一遍即可恢复。

6820
来自专栏樯橹代码

究竟什么是DOM?

文档对象模型或“DOM”是网页的接口。 它本质上是页面的API,允许程序读取和操作页面的内容,结构和样式。

16130
来自专栏樯橹代码

被忽略的console.log

除了console.log之外,还有更多方式调试JavaScript来输出值。 看起来很明显我们没有。

11220
来自专栏樯橹代码

Rxjs 响应式编程-第二章:序列的深入研究

童年的回忆中的益智视频游戏,你必须使用各种技巧在屏幕上引导下降的水流。您可以拆分流,稍后将它们合并,或者使用倾斜的木板来改变它们的方向。你必须要有创造力才能使水...

11420

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励