⚡️微信小游戏入门手册⚡️

radawn
5,277 阅读13分钟

前段时间“🐑了个🐑”爆火网络，不知道大家都玩通关了没？

没错，我通关了~（稍稍炫耀下）

于是跟风写了这篇文章，也希望能给对小游戏感兴趣的小伙伴们带来启发。

一、什么是微信小游戏？

小游戏就是指小程序里能运行的 HTML5 游戏。小游戏既属于小程序，也属于 H5 游戏。

小游戏的特点
  1. 轻量化

小程序和小游戏的代码包体积都受限制。小游戏 “小” 的特点十分显著。因此小游戏的类型也多集中于玩法休闲的轻量级游戏。

  1. 流畅体验

小游戏被赋予了基于 WebGL 的 3D 渲染、本地存储、分包加载、热更新、支付等众多游戏所需具备的能力，使其更接近原生游戏。另一方面，小游戏实现了后台运行功能，用户无需担心切换消息界面时游戏自动退出的问题（几分钟限制），场景切换更加流畅自如。

  1. 去中心化
  2. 即点即玩
小游戏的创收设计
  1. 虚拟支付创收

收益怎么计算? 暂行规则如下：

开发者收益 = 小游戏道具内购总流水收入 - 腾讯渠道技术服务费 - 腾讯依法代扣代缴税款(如有)

如：游戏币、英雄、皮肤解锁、功能道具、抽卡、周期性增值服务等；

  1. 广告创收

小游戏接入的广告可以有两种形态：Banner 广告和激励视频广告，囊括了活动推广 / 应用下载 / 商品推广 / 公众号推广等多种类型。

了解如何接入微信小程序广告组件

单日广告收入流水10万元以内（含）的部分，开发者可获其中50%

单日广告收入流水超过10万元的部分，开发者可获其中30%

二、微信小游戏的开发基础

小游戏的运行环境是一个不同于浏览器的宿主环境，没有提供 BOM 和 DOM API，提供的是 wx API。

小游戏只支持 JavaScript，当然可以编译为 JS 的 TypeScript 和 CoffeeScript 也可以作为开发语言。

开发工具

小游戏和小程序一样，使用微信开发者工具进行开发调试。

下载地址：开发者工具

关于Adapter

使用 wx API 模拟 BOM 和 DOM 的代码所组成的库称之为 Adapter。

小游戏的运行环境没有 DOM，也就没有全局的 document 对象。假设我们要创建一个 Canvas 元素，在小游戏环境下使用 document.createElement('canvas') 会引起报错，需要使用 wx.createCanvas()。

当然还有一个解决方案，使用 wx API 来进行模拟，这样一来，在小游戏环境下使用 document.createElement('canvas') 也可以正常运行，实现代码如下：

var document = {

createElement: function (tagName) {

    tagName = tagName.toLowerCase()

    if (tagName === 'canvas') {

         return wx.createCanvas()

       }else if (tagName === 'image') {

         return wx.createImage()

       }

     }

}

//这时代码就可以像在浏览器中创建元素一样创建 Canvas 和 Image 了。

var canvas = document.createElement('canvas')

var image = document.createImage('image')

基于游戏引擎来开发或者移植现在的 H5 游戏时，Adapter 可以对游戏引擎（基于浏览器环境）或 H5 游戏在小游戏运行环境下做一层适配，确保游戏正常运行。

微信小游戏官方实现了一个 Adapter，叫 weapp-adapter。

下载地址： weapp-adapter.zip

运行框架

我们可以通过 wx API 来实现渲染、支付等原生和微信功能，这是通过脚本绑定技术来实现的。在小游戏环境中，通过脚本绑定技术将 iOS 和 Android 原生平台实现的渲染、网络、存储、音视频等接口，及微信原生层的用户、支付、文件、多媒体等接口绑定为 JavaScript 接口。

脚本绑定技术： 将原生语言的接口桥接到脚本接口上，当在脚本层调用接口时，会自动转发到原生层，调用原生接口。

开发前准备
  1. 注册小游戏，前往小程序注册页面。

完成注册后，页面跳转到小程序后台首页，引导我们继续补充信息和下载开发工具。

个人主体无法开启虚拟支付

  1. 获取 AppID 与 AppSecret

补充信息并下载开发工具后，点击下图的“开发设置”链接获取 AppID 与 AppSecret 。需要进行重置才能获得 AppSecret ，请务必妥善保管，此后若丢失则必须再次重置重新生成，会对运营中的服务造成很大麻烦。

  1. 通过微信开发者工具创建一个游戏项目

项目结构

小游戏有两个必要的文件，放在根目录下：

  • game.js，是项目的入口文件
  • game.json，是项目的配置文件
什么是分包加载？

所谓的分包加载，即把游戏内容按一定规则拆分这几包，在首次启动时先下载必要的包，这个必要的包我们称为**「主包」**，开发者可以在主包内触发其它分包的下载，从而把首次启动的下载耗时分散到游戏运行中。

目前小游戏分包大小有以下限制：

  • 整个小游戏所有分包大小不超过 20M
  • 单个分包不限制大小，主包不超过 4M

分包加载的配置：

假设现有项目的目录结构如下：

├── game.js

├── game.json

├── images

│   ├── a.png

│   ├── b.png

├── stage1

│   └── game.js

│   └── images

│       ├── 1.png

│       ├── 2.png

└── stage2.js

现在希望将 stage1 和 stage2.js 都作做分包，需要在 game.json 中配置相应的 subpackages，subpackages 的路径 root 既可以是一个文件夹，也可以是单个 js 文件。

没有配置在 subpackages 中的目录和 js，将会被打包到主包中。

{
...
"subpackages": [
{
"name": "stage1",

"root": "stage1/" 
// 可以指定一个目录，目录根目录下的 game.js 会作为入口文件，目录下所有资源将会统一打包

}, {
"name": "stage2",

"root": "stage2.js" // 也可以指定一个 JS 文件

}]
...
}

三、游戏引擎介绍

选择一个适合的游戏引擎是一个项目最基础，也是很核心的一部分

Egret

白鹭引擎是企业级游戏引擎，有团队维护。Egret 在工作流的支持上做的是比较好的，游戏开发过程中的每个环节基本都有工具支撑。官网上的示例，教程也是比较多，提供中文文档。

开发语言：TypeScript、JavaScript

LayaAir

在渲染模式上，LayaAir 支持 Canvas 和 WebGL 两种方式；在工具流的支持程度上，主要是提供了 LayaAir IDE。LayaAir IDE 包括代码模式与设计模式，支持代码开发与美术设计分离，提供中文文档。

开发语言：ActionScrpit、TypeScript、JavaScript

Pixi.js

一般来说，WebGL 的渲染速度都会比 Canvas 快，这是由俩者的绘制路径决定的。

Pixi 最大的特点在于，Pixi 具有完整的 WebGL 支持，却并不要求开发者掌握 WebGL 的相关知识，并在需要时无缝地回退到 Canvas 。然而，Pixi 也有不足的地方，对于动画的支持是比较缺乏的，在实际开发中，常常需要引进额外的动画库，如 GSAP。

Phaser

Phaser 在渲染方面直接封装了 Pixi；Phaser 内嵌了3个物理引擎，提供粒子系统、动画、预下载和设备适配方案；兼容性方面，Phaser 的焦点是放在移动端浏览器上的；Phaser 能实现丰富的游戏功能，适合复杂度高的游戏开发，英文文档。

开发语言：TypeScript、JavaScript

Cocos2d-x

Cocos2d-x 是业界比较老牌的游戏引擎了，同时支持 C++ ，Lua 和 JavaScript 三种开发语言，官方用例来看更倾向于 C++ 开发，适合做一些中大型游戏开发。开发示例多为 C++ 示例，JS 不多；

Hilo

Hilo 是阿里团队推出的一个开源项目，支持模块化开发，适合用来开发营销小游戏；其体积也是比较轻量的，Hilo 支持 DOM 渲染，Canvas 渲染和 WebGL 渲染。

开发示例较少，均为官方示例 开发语言：JavaScript

Three.js

实际上，Three.js 官方定位并不是游戏引擎，而是一个 JS 3D 库。Three.js 更倾向于展示型的视觉呈现，比较少直接拿 Three.js 来开发 H5 游戏。

渲染环境上，Three.js 支持 WebGL 和 CSS3D 两种渲染模式。

开发示例充足，英文文档。

开发语言：JavaScript

CreateJS

CreateJS 官方提供了 TweenJS 支持动画开发，同时提供了音频和预下载的支持，对于 H5 游戏基础功能的支持是足够的。在兼容性方面，CreateJS 支持 PC 端和移动端几乎所有的浏览器。CreateJS 还支持用 flash CC 开发导出由 CreateJS 渲染的 H5 游戏。

开发示例充足，英文文档。

开发语言：JavaScript

游戏引擎应用广度：

Cocos、Egret、 Laya 、Phaser、CreateJS、Three.js 等热门框架，都已经完成了自身引擎及其工具对小游戏的适配和支持，不仅实现了对应的 Adapter，还在开发工具中实现了将项目编译成微信小游戏代码的功能。

接下来就可以自己选择游戏引擎，参考文档进行开发了~

四、小游戏性能优化指南

因小游戏的体积限制，开发完成后，性能优化也是重要的一环。

小游戏的启动时序

启动过程分为代码包加载与首屏渲染两个阶段。

从玩家点击游戏到看到游戏画面时会经历一系列的加载动作，其中包含小游戏框架本身的准备与开发者的初始业务逻辑。

  • 代码包加载：环境加载、下载代码包

  • 首屏渲染：小游戏框架加载注入、业务代码注入、首屏渲染准备等

优化方案
  • 配置小游戏分包： 小游戏的分包能力，可以实现按需加载代码包。在开发中，可以根据业务场景划分模块（如：商店、任务、背包等），把这些模块作为代码包配置为多个子包，主包仅实现主场景和核心逻辑，保证主包尽量小，以提升游戏呈现速度。
  • 做好资源分组和缓存： 资源也可以进行分组，按需进行加载；小游戏为每个微信每位用户分配了 50M 的缓存空间，对于一些大型的资源或需要动态替换的资源，通过接口下载后，可缓存到本地，用户再次进入游戏时，直接从本地读取资源，游戏呈现速度也能大幅提升。
  • 合理使用对象池： 游戏中有重复使用的对象，实时进行对象的创建和销毁，很带来一定的性能开销。因此，在使用对象前，需先预创建足够数量的对象，通过对象池统一管理，每次使用完后进行回收，以供复用。
  • 及时触发垃圾回收： 游戏运行一段时间后，占用可能会不断加大。因此，需要在适当时机触发 GC，以降低游戏内存使用。在回合制的游戏中，可以在每个回合开始或结束触发 GC；在 wx.onShow 或 wx.onHide时也可触发 GC。

GC 时机是由 JavaScriptCore 来控制的，并不能保证调用后马上触发 GC。

  • 精简复杂的逻辑计算： 频繁的复杂计算会带来性能损耗，开发完成后，要及时做 Code Review，减少一些非必要的操作。
  • 资源和动效的优化： 图片体积压缩，使用合适尺寸的图片资源，合并雪碧图，音效体积压缩，裁剪合理长度的音效等，这些手段在微信小游戏都是同样适用的。于帧动画，在不影响体验的情况下，可适当做抽帧处理。
  • 根据监控数据和用户反馈优化迭代： 通过对游戏进行数据上报和监控，可以分析游戏过程中玩家的行为，并及时发现游戏设计中不合理或存在问题的地方；游戏圈和客服组件的接入，可以更近距离与玩家进行沟通，收集游戏反馈。基于监控数据或用户反馈，都可以对游戏做出适当的优化迭代。
获取小游戏的启动性能数据

提升小游戏启动对于用户新进留存具有非常重要的价值。 通过小游戏数据助手应用中的“数据 - 性能分析”，开发者可以掌握到现网玩家上报的启动时长与留存数据。

异常监控排查

官方推出了实时错误日志和异常告警的功能。

开发者可从小程序/小游戏管理后台：开发->开发管理->运维中心->错误日志，进而查看当前小程序/小游戏的错误日志信息。如图所示：

基于游戏引擎开发的小游戏，是经过游戏引擎二次打包的，所以如果开发者需要定位到游戏开发的源码，构建小游戏时，需默认勾选输出source map，小游戏错误日志才可以利用上传的 Source Map 文件进行错误分析。

游戏运行性能，对于玩家核心玩法的体验至关重要，优秀的运行性能是玩家长期留存、在线时长的重要保证！

五、小游戏生态接入

  1. 接入游戏圈：

游戏圈是微信为小游戏提供游戏交流、用户互动、反馈收集等社区能力的服务。

接入游戏圈仅需要在游戏入口处调用 wx.createGameClubButton() 方法：

// 创建并显示游戏圈按钮
let button = wx.createGameClubButton({
    icon: 'green',
    style: {
        left: 10,

        top: 76,

        width: 40,

        height: 40
    }
})
// 隐藏
button.hide()
// 显示
button.show()
// 销毁
button.destroy()
  1. 管理员配置：

开发者可以在后台指定客服人员维护游戏圈，设置路径：小程序后台 => 设置 => 游戏设置

游戏圈管理员具有操作帖子置顶、沉底、屏蔽等权限，管理和维护健康的游戏圈内容与社区环境。

  1. 上报数据：

前台和后台各有一个可以用于上报数据的接口：

  1. 排行榜配置：

小游戏后台 => 设置 => 游戏设置 => 排行榜配置

完成上一步的数据上报功能，并成功发版、上报真实数据后。在后台的游戏设置页面将会出现排行榜配置。

六、如何发布小游戏

当我们小游戏完成编码后，我们需要将完整的代码包提交至微信后台审核

  1. 进入开发管理页面，找到所需提交的版本，点击“提交审核”
  2. 勾选“已阅读并了解平台审核规则”，进入提交审核信息填写界面。

在提交审核之前，需要提前准备好以下文件：

非文化互动二级类目需提交：《计算机软件著作权登记证书》、《游戏自审自查报告》

文化互动二级类目需提交：《商标注册证》、《游戏自审自查报告》

牌类三级类目需额外提交：《广电总局版号批文》

开通虚拟支付游戏均需提交：《广电总局版号批文》

七、总结

小游戏的开发需要自己上手才能更快了解跟掌握，肯定不仅仅只有上边那些，大家可以自由发挥，随意吐槽，欢迎交流👏🏻

avatar
文章
阅读
粉丝