微信小游戏从了解到游戏发布的全流程技术介绍!

微信小游戏推出后,LayaAir引擎也同步支持了微信小游戏的开发,由于很多开发者对微信小游戏的开发流程不够了解,不太清楚如何下手。为此,我们在2018年的开工首日,从简介篇,小游戏创建篇,综合介绍篇三部分,全面介绍微信小游戏的开发、测试,与重要项目规则。

简 介 篇
首先,我们要了解什么是微信小游戏?

腾讯官方的解释是:

微信小游戏是微信小程序的一个类目,它即点即玩,无需下载安装,体验轻便,可以和微信内的好友一起玩,比如PK、围观等。

即点即玩,无需下载安装。这应该就是H5游戏了吧?

怎么解释呢?这要先从H5的定义说起……

通常大家都认为H5就是HTML5的简称,但是在开发者的眼里,HTML5只是一个WEB技术标准,符合这个标准的,并且能在浏览器里运行的游戏才是HTML5游戏。而更多的人,对技术了解不多。为了便于理解,把即点即玩,无需下载安装的游戏都称之为H5游戏,还有人叫手机页游。

微信小游戏的运行环境并不是浏览器,也不能在浏览器中运行,而是运行于微信APP中的Runtime。尽管微信小游戏的接口兼容大部分Canvas和Webgl,具有即点即玩,无需下载安装的HTML5特性。显然,从严格的定义来讲,微信小游戏不是标准的HTML5游戏。

那么,如何能做到开发的游戏还能在浏览器中也运行起来呢?开发者只能使用微信小游戏的开放API开发吗?

带着这两个问题,我们继续介绍。

众所周知,LayaAir引擎是基于HTML5的全平台引擎,既然是全平台,那当然不能错过微信小游戏啦!

所以,在微信小游戏发布的当天,LayaAir引擎也为开发者推出微信小游戏的适配库。自LayaAir 1.7.14版开始,开发者下载最新版本引擎或IDE,只需要按照适配教程文档,初始化一下适配程序,即可将HTML5游戏项目无缝适配为微信小游戏项目。

这样,通过LayaAir引擎开发出来的项目,不仅可以运行在浏览器中、或者打包成为APP(iOS与Android)、还可以运行在微信小游戏的平台中。

或许,开发者还想了解,既然微信小游戏不是HTML5,那在开发的过程中需要注意哪些差异呢?

如果是采用微信官方API开发的话,还是要有一些要注意的,比如不支持DOM与BOM、小游戏只能有一个画布、不支持Eval、不支持XML等等……

但是,

对于LayaAir引擎的开发者来讲,不用刻意去了解到底有哪些差异,按照正常的LayaAir引擎开发规则去开发就可以了。即便是已经采用LayaAir引擎开发完成的老项目,替换最新版本引擎类库后,在主程序入口的Laya.init()之前,调用MiniAdpter.init()这个方法,去初始化一下适配程序,把预加载的本地包内容放入到layaNativeDir目录,即可完美支持微信小游戏。

AS3版本初始化

//AS3版本初始化微信小游戏的适配
  MiniAdpter.init();
  //初始化引擎
  Laya.init(1136,640);

TypeScript或JavaScript版本初始化:

//TS或JS版本初始化微信小游戏的适配
Laya.MiniAdpter.init();
//初始化引擎
Laya.init(1136,640);
小游戏创建篇

一、准备好开发环境

1、下载并安装LayaAirIDE集成开发环境

LayaAirIDE是LayaAir引擎的集成开发环境,集成了LayaAir引擎与示例项目,UI、动画等可视化编辑,项目代码编写与管理等开发工具。开发者可以直接采用LayaAirIDE创建微信小游戏的示例项目。

官网下载地址 :http://ldc.layabox.com/layadownload/?type=layaairide

Tips:LayaAirIDE 1.7.14版本才开始集成微信小游戏开发

2、下载并安装微信小游戏开发工具

微信小游戏开发工具是小游戏开发与测试的环境,由于LayaAir引擎的开发者完全可以使用LayaAirIDE进行项目开发,那么安装这个小游戏开发工具主要是用于小游戏项目编译、预览、真机测试与调试、上传发布等。

在小游戏开发文档的首页里,通过导航链接前往开发者工具下载页面 ,去下载开发工具。

开发工具下载地址: https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html 3、创建一个小程序开发者帐号,获得开发者ID(AppID)

尽管没有AppID也可以开发调试,但是功能会受到限制。所以在开发之前,最好先去创建一个小程序开发者帐号。

注册地址:https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN

二、创建微信小游戏项目

1、用LayaAirIDE创建小游戏示例项目

打开LayaAirIDE,新建项目。选择”微信小游戏示例“,设置项目名称、项目路径、开发语言类型、引擎版本。就可以创建小游戏项目了,如下图所示。

Tips:本示例暂以ActionScript3开发语言为例,后面会讲一下TS和JS项目与AS3项目的区别。

2、查看示例项目效果

创建完项目之后,我们可以直接点一下调试按钮(如下图所示)。就可以看到我们的示例什么样子。

Tips:这一步除了编译js,主要为了让大家记住我们的示例什么样子,后面,如果小游戏效果也是这样的就没错了。

3、简单了解项目的发布目录。

LayaAir开发者应该了解,项目目录/bin下级的h5目录才是运行目录。LayaAirIDE已经自动在示例项目内创建了小游戏的适配程序,所以这个目录下的内容直接复制到小游戏的项目目录下(项目超过4M要特别处理,后面细讲)。

特别提醒

当TS与JS目录下多个js文件时,没有合并可能会导致报错,AS项目编译器已做了合并处理。如果是TS或JS项目,1.7.14 beta版本只能先采用第三方的JS合并工具(比如webPack)将JS合并,然后再复制到小游戏的项目目录运行。LayaAirIDE计划1.7.14正式版本开始集成微信小游戏自动合并发布的功能。在LayaAirIDE中实现任何语言版本都可以一键发布为小游戏项目的目标。

三、创建小游戏项目

1、开发者帐号登录,选择项目类型

打开”微信web开发者工具“,用开发者的微信扫码登录。然后选择小程序项目点击进入项目设置。

2、设置小程序项目

在小程序项目设置面板里,为了快速体验小游戏项目,我们暂时将项目目录设置在LayaAirIDE创建的小游戏示例项目的运行目录。(正式开发,要另外创建一个发布目录,避免运行目录的资源超过4M被小游戏拒绝上传)

AppID在小程序开发者帐号里获得(如下图所示)。如果没有,可以点击小AppID输入框下的小游戏进行体验,但是功能会受到限制。

3、微信开发者工具的编译与调试

完成小游戏项目的创建后,点击编译,即可在工具内预览效果和调试,AS3项目的话,由于JS在编译时自动合并了,所以到这一步应该非常顺利,可以看到模式器中的效果与LayaAirIDE中的调试效果是一致的。

如果是TS或JS版本。如果不手动修改一定会报错。我们可以在调试器里看到报错信息,这块的调试就是chrome的调试方式,所以就不细讲了。

报错的原因基本上是由两个问题导致。

第一、TS与JS版本目前还没有集成小游戏的JS合并功能,所以多个JS文件会因为跨文件的执行域问题报错。

第二、同样是由于LayaAirIDE暂时还没有集成JS合并,所以小游戏的入口程序game.js里,引擎并未自动引入游戏的入口文件。所以不手动修改,肯定是找不到入口文件的。

解决方案

第一、要使用第三方JS合并工具,将多个JS合并成为一个JS。然后修改入口程序game.js,将合并后的js引入即可。

修改后的game.js参考:

require("./weapp-adapter.js");
require("./main.min.js");

第二、如果引擎JS不想合并到一起,也是可以的,只把项目JS合并到一起就行了。但是要在入口程序里将多个引擎JS引用进来。

修改后的game.js参考:

require("./weapp-adapter.js");
require("./libs/min/laya.core.min.js");
require("./libs/min/laya.wxmini.min.js");
require("./libs/min/laya.webgl.min.js");
require("./libs/min/laya.ui.min.js");
require("./main.min.js");

第三、有没有不合并的解决方式呢,也是可以的,因为JS文件的声明如果不是全局的,在其他JS环境下无法找到定义,那么,我们将变量的声明改成全局变量,那就可以解决了。比如,我们的小游戏示例程序,通过调试器可以看出是找不到TestPageUI,那么我们在layaUI.max.all.js找到TestPageUI将其变为window.TestPageUI(如下图所示),然后再修改入口程序game.js,引用所有的JS就可以了。

修改后的game.js参考:

require("./weapp-adapter.js");
require("./libs/min/laya.core.min.js");
require("./libs/min/laya.wxmini.min.js");
require("./libs/min/laya.webgl.min.js");
require("./libs/min/laya.ui.min.js");
require("./js/ui/layaUI.max.all.js");
require("./main.min.js");

需要提醒的,如果项目比较大,那改的地方就会比较多。至少在当前,并不推荐这种方式,因为IDE每次发布和更新项目时,又会被覆盖掉。建议采用JS合并的方式,将多个项目JS合并成为一个JS。

4、真机测试与调试

除非是一些新手遇到的小游戏的兼容问题,由于LayaAirIDE里也可以调试项目效果,基本上两边的效果不会有不一致的情况。所以这里最重要的是点击预览功能,通过手机微信扫码,在微信内进行真机测试与调试。

用微信扫码后,就启动了小程序项目,点击右上角的浮窗按钮,可以打开调试和打开性能监控面板。

开启真机调试与性能监控面板后,如下图所示。

至此,一个完整的小游戏开发流程就结束了。是不是很简单。采用LayaAirIDE开发的小游戏项目,基本上是无缝用于微信小游戏项目。

综合介绍篇

一、LayaAirIDE中的小游戏目录结构介绍

1、资源目录规划

res目录内是资源目录,LayaAirIDE里的res目录下是游戏项目中用到的资源。

这里重点提一下,微信小游戏允许每个游戏有4M本地物理容量,用于游戏前期加载,超过4M的小游戏项目是拒绝上传的。所以,一旦你的整个项目(资源和JS的总和)超过4M,就要从外网加载资源。 截图上的目录结构是IDE生成和创建的,少了一个layaNativeDir(后续版本应该会补上)。这里要重点说明一下,LayaAir引擎在底层对4M本地包目录进行了处理,当使用引擎的加载方法Laya.loader.load()加载资源时,layaNativeDir目录下的内容会直接从本地使用,其它目录下才会从网络动态加载。所以,我们需要手动创建一个layaNativeDir目录,用于存放小游戏4M包内的资源。 需要提醒开发者的是,开发测试时,如果要使用外网动态资源,需要勾选不校验安全域名(如下图所示)。

因为4M的限制。所以,游戏项目内,开发者需要规划好哪些是需要前期加载上传的内容,哪些是需要从外网加载的内容。建议把内容较大并且更新频率高的,都放到外网动态加载,要上传的项目包内,仅包括初始化加载必须的,和很少要改动的内容即可。尤其是大型游戏项目,可能JS加起来就2M多,那么仅剩的空间,只能用于Loading页的背景图资源。

Tips:4M的本地包内容无法动态更新或删除。每次修改必须要重新上传发布。

2、小游戏应用程序主文件

示例中的LayaUISample.max.js是LayaAirIDE创建的项目文件,也是小游戏应用程序的主文件,TS或JS项目如果开发时有多个项目文件的,需要合并成为一个JS文件作为小游戏应用程序的主文件。

3、小游戏项目文件

game.js、game.json、project.config.json、weapp-adapter.js 都是微信小游戏的项目文件,只有创建小游戏项目的时候LayaAirIDE才会创建。

二、一些踩过的“坑”

1、管理项目,只能创建、切换和删除。

在微信开发者工具里,项目一旦建立,没有编辑修改项目信息的地方。如果想修改项目信息,不用费力气去找这个功能了,直接删除项目重新创建即可。因为工具里的删除只会删除项目信息相关的内容,项目本身不会被删除。

项目菜单里点击查看所有项目可以查看到当前存在的项目列表,直接点击项目,可以实现切换,点击加号创建按钮可以创建一个新项目。

如果想删除项目,点击管理项目可进入项目批量删除的界面。

2、读本地文件必须是ASCII编码

之前提到每个游戏有4M本地物理存储空间,这里需要特别注意的,如果需要读取本地物理空间内的配置文件,比如json文件。由于浏览器加载文件编码没有限制,引擎没有预留编码设置接口。而小游戏里读本地资源会校验编码,所以,当小游戏本地文件的编码格式不是ASCII,那就会报错。如果有配置文件存在4M的本地包内。目前必须要改为ASCII编码,后续引擎版本计划支持编码读取设置。

Tips:本地程序文件之间的引用(比如require或import)或者才是从网络中动态加载读取,都没有编码的校验限制。

3、不支持loader预加载声音使用

用LayaAir引擎开发小游戏时,要注意,不支持通过loader预加载声音文件的使用方式,声音播放直接用SoundManger音频管理类即可。

想了解更多微信小游戏的内容,可以关注开发者中心的技术文档,我们会不断的进行技术上的更新。如有关于微信小游戏的问题,欢迎LayaAir引擎的开发者前往开发者社区提出,我们针对每一个问题都有官方工作人员帮您解答。

社区地址:https://ask.layabox.com/

开发者中心:https://ldc.layabox.com/

END

原文发布于微信公众号 - Layabox(layabox)

原文发表时间:2018-01-02

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

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券