本文通过一个简单的游戏开发实例，从最简单到最复杂地介绍了如何使用Laya引擎开发微信小游戏。
微信小游戏上线已经快一年了，在IEG的游戏运营活动中，以小游戏为载体的活动类型越来越多，例如游戏预约、抢先体验等，并收到了很好的效果。
在支持微信小游戏的游戏引擎中，Laya 为小游戏的开发提供了很多强大的支持。前段时间正好抽空研究了一下这部分内容，现在就做个总结，介绍一下如何使用 Laya 引擎开发微信小游戏。由于时间有限，研究得并不深入，如果有高手路过，还请不吝赐教。
做啥游戏好？《绝地求生》很火，不如我们做个《绝地求生》？方案也很简单，和绝地求生不一样，主角不是跳伞的玩家，而是地面上的炮手，必须用大炮把伞兵一个个消灭。
现在我们有了一个很棒的计划，让我们开始行动并看看如何实施它！
1. 如果不使用引擎会发生什么情况？
1.1 理解
微信小游戏提供了这个核心游戏组件，你可以用它在画布上绘制文字、图形、图片等。不过在讲微信小游戏之前，我们得先讲一下 H5。在 H5 时代，获取对象很简单，如下图：
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);//旋转角度 。。。。
在微信小游戏中，也提供了物品，但是获取接口发生了变化：
wx.createCanvas()
其他H5环境可用的API在微信环境同样可用。
1.2 动画原理
它只是一个 2D 画布。要制作游戏，动画是必不可少的，对吧？如何让图片动起来？见下图：
其实动画就是画图、擦图、再画图、再擦图的循环过程，肉眼看上去就是运动。
在过去的电影时代，我们看到的电影都是由一帧帧连续的胶片组成，最后投射到大屏幕上才成为我们看到的电影。
1.3 动画性能优化
但是动画对帧率是有要求的，一般能达到60帧每秒的话，就是像电影一样流畅的动画效果了，计算公式为：/=16.67ms，这就要求动画中每一个业务逻辑计算都要在16.6ms内完成，不能影响到下一帧的显示，不然就会卡，人家就会说这个游戏卡，性能差。
知道了原理，那么具体该如何进行性能优化呢？
当然，还有很多其他的技巧和方法可以提高性能，这种情况下，如果直接用它来开发游戏，还会面临碰撞算法、物理系统等问题，所以，如果只用它来开发游戏，就好比你在吃鸡游戏中，手里只有一个煎锅，怎么和别人正面对抗呢？
所以我们需要一款98K来武装自己，也就是利用游戏引擎进行开发。
2. 为什么选择Laya？
目前支持微信小游戏的引擎有三个：
从各项支持程度来看，目前对laya的支持最好，而且根据laya的宣传，其性能也是最好的。（至于性能问题，由于外部恶意代码较多，在实际详细测试前不做评论。）
在公司内部，引擎游戏分为三类，以下是截止5月公开数据的引擎占比：
其实这三个引擎都提供了很好的支持，总体来说，如果你已经用它们实现了一个APP游戏，想移植到微信小游戏端，使用它们是最好的选择，如果你是从零开始开发一款小游戏，那么就选择其中之一吧，Laya！
3.Laya环境搭建
前面说的都只是铺垫，只是为了让大家对游戏开发有个初步的了解。从这一节开始，我们才进入正题。
前往下载最新版本并安装。目前有1.X和2.0版本。（本文以1.7.20版本为例）
然后就可以创建一个新的游戏项目了。我们现在可以选择创建一个 UI 示例项目
[创建新项目]
3.1 代码模式
当然是写代码的地方了，感觉这个编辑器是基于 修改的，连最上面的 Code 标识都还在，正因为如此，才能提供良好的支持。
【代码模式布局】
为什么要用它？本文不详细对比，你只需要知道它是 ES6 的超集就行。因为“Type”表示它支持强类型，又因为是静态类型，所以编辑器可以在你写代码的时候提示错误，所以它更适合开发游戏等逻辑复杂的应用。当然，它最终也会像 ES6 一样被编译成普通执行。但在开发阶段管理代码方面，它已经可以应付大型项目了。
3.2 设计模式
用于设计UI界面，可以通过拖拽的方式创建游戏页面，Laya提供了很多组件，有需要的可以自行使用，当然你也可以使用它们，创建自己的自定义组件。
[设计模式布局]
4. Laya's
都说作为一名程序员，买了文房四宝之后，写的第一行字一定是“ ”。（我拿着公司刚发的二十周年LAMY纪念款钢笔，写的第一行字也是“ ”，汗~~~）
4.1 游戏初始化
4.1.1..ts
首先删除系统默认创建的“.ts”文件，然后新建一个文件.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();
Laya..init() 是 Laya 为小游戏提供的适配，因为在小程序&小游戏环境中，是没有 Bom 的，比如没有，所以需要这样的适配器来兼容小游戏的开发方式。
4.1.2. bin/.html
修改bin目录下的.html，删除.ts的引用，改为以下内容：
在.html中，提供了许多Laya的库，这些库最终会被打包成一个合并的code.js，由于微信小游戏的大小限制，我们不需要加载所有的库，只要选中我们需要的库，删除不需要的库即可。
4.1.3. 运行
接下来点击运行，就会出现模拟器界面。
[运行模拟器]
现在先不要担心黑色部分，我们将在下面添加“ ”。
4.2 绘制文本
4.2.1. Laya.文本
修改后的代码如下，关键点是var txt:Laya.Text = new Laya.Text();
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; //创建Text对象 var txt:Laya.Text = new Laya.Text(); //给Text的属性赋值 txt.text = "Hello World";//设定文字内容 txt.color = "#ffffff"; //设定颜色 txt.fontSize=20; //设定字体大小 txt.pos(100,200); //设定位置 //将Text对象添加到舞台 Laya.stage.addChild(txt); } } new GameMain();
在上面的代码中，我们向舞台添加一个文本对象，然后单击运行。
噢 传说中的那个终于出现了
4.3 绘制图片
4.3.1
Laya提供了一种非常简单的方法来即时加载图像并加载到舞台上。
//设置舞台背景色 Laya.stage.bgColor="#1e83e8"; //创建img Sprite精灵 var img:Laya.Sprite = new Laya.Sprite(); //加载显示图片，坐标位于100,50，并设置宽高 130*108 img.loadImage("demo/paratrooper.jpg",100,50,130,108); //把图片添加到舞台 Laya.stage.addChild(img);
预览如下，是不是很简单呢？
但是这种方式并不实用，在现实项目中，图片通常很多，我们不会一张一张的加载，而是提前加载好，然后显示出来。也就是我们经常在游戏主界面看到的进度条，其实就是在加载资源。
4.3.2 资源预加载
Laya提供了一个资源加载器：Laya.来解决加载问题，我们修改上面的代码，先加载图片，再绘制。
private imgPath1:string="demo/paratrooper.jpg"; private imgPath2:string="demo/shell.jpg"; constructor() { //.....省略N行代码 this.renderImage(); //....省略N行代码 } renderImage():void{ //定义图片路径集合 var resArray=[ {url:this.imgPath1,type:Laya.Loader.IMAGE}, {url:this.imgPath2,type:Laya.Loader.IMAGE} ] //使用加载器加载图片路径 Laya.loader.load(resArray,Laya.Handler.create(this,this.onLoadComplete),Laya.Handler.create(this,this.onLoadProgress)) } //加载完成后，把图片绘制到画布上 onLoadComplete():void{ console.log("加载完成"); var img1:Laya.Sprite = new Laya.Sprite(); img1.graphics.drawTexture(Laya.loader.getRes(this.imgPath1),100,50,100,100); Laya.stage.addChild(img1); var img2:Laya.Sprite = new Laya.Sprite(); img2.graphics.drawTexture(Laya.loader.getRes(this.imgPath2),100,300,100,100); Laya.stage.addChild(img2); } //这里可以获取到加载的进度，以后可以制作进度条 onLoadProgress(percent:number):void{ console.log("percent->"+percent); }
4.3.3 图库
只进行图片预加载是不够的，实际场景中小图片很多，我们可以将这些小图片组合成图集，这和前端性能优化中有时会用到的 CSS 精灵类似，这样制作图集不仅加载性能更高，而且制作帧动画也更加容易。
图集的加载类似这样：
var resArray=[ {url:"res/atlas/demo.atlas",type:Laya.Loader.ATLAS}, ] Laya.loader.load(resArray,Laya.Handler.create(this,this.onLoadComplete),Laya.Handler.create(this,this.onLoadProgress))
和Laya..不同的是，当之前的图片加载完成后，类型就变成了Laya..
如何制作图集？还有，我们真的需要手动一张一张地展示大量的游戏界面吗？当然不需要了！因为接下来我们要学习UI编辑器。
5. UI 编辑器
UI 编辑器当然是用来编辑 UI 的，大部分客户端程序开发环境都有类似的 UI 编辑器，点击左侧
图标进入UI编辑模式，如下图：
关于UI编辑器具体功能的介绍，建议参考官方文档，这里就不再赘述了。
5.1 创建 UI
因为我们创建了一个默认的 UI 项目，所以 UI 编辑器中有一个 .ui。你可以忽略它并创建自己的 UI。点击 File->New File
进入 New Page 窗口。页面有两种类型：View 和 。由于我们在这里创建整个页面，因此选择 View。如果您有兴趣查看源代码，它也是基于 View 的，但功能更多。
如果该视图有逻辑代码需要编写，建议勾选“创建逻辑类”，它会自动在View目录下创建对应UI的.ts文件。
[ 全新页面界面 ]
5.2 导入资源
在目录下新建一个demo资源目录，把需要的图片全部扔进去，然后找到UI编辑器资源面板底部的刷新按钮。
添加新的资源图片后，一定要点击刷新，否则资源面板的内容不会自动刷新。
只要是demo文件中的图片，都会被自动打包成图集，路径为res//demo。不知道大家有没有注意到，上图中，有些资源显示为“未打包”，这是什么原因呢？
点击文件 -> 项目设置，会看到图集限制了可以包含进图集的单张图片的最大宽高，以及最终图集的最大宽高，默认标准可以自行修改，超出此图集标准的图片将不会被打包进图集，需要手动加载。
[请在此处填写图片描述]
5.3 编辑界面
编辑页面功能应该是会用PPT的人都会用到的，谁不会拖图片呢？直接把图片从资源管理器拖到右边的场景编辑器里就可以了。这次我们拖了一个蓝天白云的背景，在最下面放了一门大炮，看上去还挺有意思的。
顶部有一排图标帮助对齐图片，提供了顶对齐、底对齐、左对齐、右对齐、居中对齐等，如果图片比较多，用这个对齐方式很方便。
右边的属性栏比较常用，var里面可以给拖进来的图片组件起一个变量名，这个变量名在之前自动生成的逻辑类中会用到，我们给大炮起一个变量名“pao”，后面会用到；x,y，这里就是坐标和宽高，不用多说了吧？
5.4 导出界面
UI完成后还有一件很重要的事，就是不要忘记导出，很多新手经常忘记这一点，只有导出UI才能重新生成图集和UI相关设置。
导出之后我们看laya//.ui文件，里面的细节不用管，里面就是我们刚才拖动图片时自动生成的响应配置文件。
5.5 使用用户界面
接下来我们需要将刚刚编辑的内容显示出来，所以我们再回去修改.ts。
class GameMain { //定义静态变量 gamePageView public static gamePageView:view.GamePage; constructor() { //... this.renderImage(); //... } renderImage():void{ //资源加载 var resArray=[ {url:"res/atlas/demo.atlas",type:Laya.Loader.ATLAS}, ] Laya.loader.load(resArray,Laya.Handler.create(this,this.onLoadComplete),Laya.Handler.create(this,this.onLoadProgress)) } onLoadComplete():void{ //初始化view GameMain.gamePageView = new view.GamePage(); //添加到舞台 Laya.stage.addChild(GameMain.gamePageView); } } new GameMain();
运行一下，主界面游戏背景和大炮都设置好了，好的开始是成功的一半。
接下来按照原先的方案，我们要让伞兵像游戏中那样从天上掉下来。该怎么实现呢？我们先看动画部分吧！