使用一个简单的游戏开发示例，由浅入深，介绍了如何用Laya引擎开发微信小游戏。

作者：马晓东，腾讯前端高级工程师。

微信小游戏的推出也快一年时间了，在IEG的游戏运营活动中，也出现了越来越多的以小游戏作为载体运营的活动类型，比如游戏预约，抢先试完等等，都收到了非常良好的效果。

在支持微信小游戏的游戏引擎中，Cocos，Egret，Laya都对小游戏的开发提供了很多强大的支持。前段时间正好抽空研究了一下这块的内容，现做一个总结，针对如何使用Laya引擎开发微信小游戏给大家做一下介绍。因为时间有限，研究并不深入, 如有高手路过，忘不吝赐教。

做个啥游戏呢？“绝地求生”很火，我们做个“绝地求死”如何？策划也很简单，和绝地求生相反，主角不是跳伞的玩家，而是地面的炮手，大炮要把跳伞的伞兵用大炮一个个都消灭掉。

牛逼的策划有了，咱们进入正题，看看怎么实现吧！

1. 如果不用引擎会怎样？

1.1 Canvas了解下

微信小游戏提供了canvas这个游戏核心组件。利用Canvas可以在画布上画出文字、图形、图像等等。 不过讲微信小游戏之前，得先说说H5，在H5时代获取canvas对象非常简单，如下图：

var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d");

常用的一些API：

ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); //绘制图片  ctx.fillText(text,x,y,maxWidth); //绘制文字  ctx.rect(x,y,width,height); //绘制矩形  ctx.clearRect(x,y,width,height);//清除矩形内像素  ctx.scale(scalewidth,scaleheight);//缩放  ctx.rotate(angle);//旋转角度  。。。。

微信小游戏里，也提供了canvas对象，只不过获取接口变了：

wx.createCanvas()

其他H5环境下有的Canvas API，微信环境里也都有。

1.2 动画的原理

Canvas只是一个2D的画布，要做一个游戏，动画总不能少吧？要让图片能动起来，这又是怎么做到的呢？请看下图：

好吧，动画其实就是不断画图片，然后擦除，再画图片，再擦除的循环过程，肉眼看起来，那就是动起来了。

在古老的电影胶片时代，我们看到的电影，就是一张一张连续帧的胶片组成的，最后投射到大屏幕上，变成了我们看到的电影。

1.3 动画性能优化

但是，动画是讲究帧率的，一般如果能达到每秒60帧，那就和电影一样是很流畅的动画效果了。计算公式：1000ms/60fps=16.67ms，这就要求我们每次动画里的业务逻辑计算，都要16.6ms里完成，不能影响下一帧的显示，否则就是卡顿，也就被人说这个游戏好卡，性能好差了。

知道原理了，性能优化具体怎么做呢？

• Canvas分层 有些游戏中，背景是不变的，为了提高性能，可以把游戏背景抽离出一个单独的canvas，这样，在画面发生变化的时候，不需要重绘整个背景，只需要绘制变化的那部分就可以。
• 减少API调用 每次的ctx的api调用，都是有性能消耗的，所以，尽量减少每帧的api调用次数，具体怎么减少，就要看业务需求了。
• 图片预裁剪 图片的裁剪过程，也是有性能消耗的，我们可以把裁剪的图片预先存起来，之后在绘制的时候，直接从内存里拿，而不需要每次都重新裁剪。
• 离屏绘制 直接操作上屏的canvas，性能是很差的，尤其是有单帧绘制操作很多的时候，性能下降更明显。 这个时候，我们可以预先创建一个离屏的canvas，预先在这个canvas完成这一帧要绘制的所有动作，最后一次性的把这个离屏canvas绘制到上屏canvas中。
• 避免阻塞 由于我们需要保证16.67ms就要完成一次帧的绘制，如果这一帧里，逻辑运算时间超过16ms怎么办？那就一定会卡帧了。 我们可以使用webworker之类的技术，把耗时的逻辑计算在另一个线程执行，或者把任务进行拆解，降低每帧的耗时。

当然还有很多其他更多的技巧和手段来提升canvas的性能，在这样的情况下如果我们直接使用canvas去开发一个游戏，还会面临比如碰撞算法、物理系统之类的问题。 所以，如果只用canvas去开发游戏，就如同你在吃鸡游戏里，只拿了一把平底锅，你怎么和别人正面刚？

所以，我们需要一把98K把自己武装起来，那就是使用游戏引擎开发。

2. 为什么选择Laya？

目前支持微信小游戏的引擎，有Cocos，Egret，Laya，我们先看下三者的功能比较：

从各种支持度上来讲，laya是目前支持度最好的，也据laya侧的宣传，他的性能也是最高的。（关于性能的问题，因外部水军比较多，在没有做实际详细测试前，暂时不发表评价。）

在公司内部，都有三种引擎的游戏实现，下面是截止5月份的公开数据的引擎占比：

其实三个引擎都提供了很好的支持度，一般来说，如果原先使用过Cocos实现过APP端游戏要移植到微信小游戏端来的，使用Cocos是最好的选择，如果是从头开发一款小游戏，那还是在Egret和Laya里选择一款吧！

3. Laya 环境搭建

前面讲了那么多，都还只是前戏，只是为了大家对游戏的开发有个初步的了解，从这一节开始我们就进入正题了。

到 

[ 创建新工程 ]

3.1 代码模式

当然就是给你写代码的地方，感觉这个编辑器，就是在VSCode的基础上改的。连最顶上的Code标识都还在。也因为这样，所以才能很好的支持TypeScript。

[ 代码模式布局 ]

为什么要使用TypeScript? 本文不详细展开比较，只需要了解TypeScript 是Javascript的超集，因为多了个“Type”表示他支持强类型，并且由于静态类型化，在写代码的时候编辑器就能提示你的错误，所以更适合开发游戏这种逻辑复杂的应用就好了。当然最终TypeScript还是会像ES6一样，被编译成普通的Javascript执行。但是在开发阶段管理代码来说，已经可以驾驭大型项目了。

3.2 设计模式

就是用来设计UI界面的地方，拖拖拽拽就可以把游戏页面整出来。Laya提供了好多组件，如果有需要的可以使用，当然也可以不用他的组件，自己搞自己的自定义组件。

[ 设计模式布局 ]

4. Laya的HelloWorld

都说作为一个程序员，买来文房四宝之后，写下的第一行字，一定是“Hello World”。（我拿着公司刚发的 20周年LAMY纪念钢笔，写的第一行字，居然也是“Hello World”，汗~~~）

4.1 游戏初始化

4.1.1.GameMain.ts

首先删掉系统刚才默认的文件“LayaUISample.ts”,然后新建文件GameMain.ts

import WebGL = Laya.WebGL; class GameMain  {         constructor() {          //TS或JS版本初始化微信小游戏的适配         Laya.MiniAdpter.init(true,false);                  //初始化布局大小         Laya.init(375,667, WebGL);                            //布局方式设定         Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;         Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL;         Laya.stage.alignV = Laya.Stage.ALIGN_CENTER;         Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;     } } new GameMain();