使用Laya引擎开发微信小游戏

| 导语使用一个简单的游戏开发示例，由浅入深，介绍了如何用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 环境搭建

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

到 https://www.layabox.com/ 去下载最新的版本，并进行安装。目前有1.X版本和2.0版本。（本文使用1.7.20版本做示例）

然后就可以创建一个新的游戏项目了，我们可以现在选择创建一个UI示例项目

[ 创建新工程 ]

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();

Laya.MiniAdpter.init() 是Laya提供的对小游戏提供的适配，因为在小程序&小游戏环境下，并没有Bom和DomAPI，比如，没有window，document, 所以需要这样一个适配器，对小游戏的开发方式，进行兼容。

4.1.2. bin/index.html

修改bin目录下的index.html ,删掉LayaUISample.ts的引用，改为下面的方式：

<!--启动类添加到这里-->
<!--jsfile--Main-->
<script src="js/GameMain.js"></script>
<!--jsfile--Main-->

在index.html里，提供了很多Laya的类库，这些类库，最终会被打包成合并一个code.js. 因为微信小游戏的体积限制，我们不需要把所有的库都加载进来，只选择我们需要的库就好了，用不到的可以都删除。

4.1.3. run

接下来，点击运行，就会出现模拟器界面了。

[ 运行模拟器 ]

先别管黑乎乎的一团，下面我们就要增加“Hello World”了。

4.2 绘制文字

4.2.1. Laya.Text

再次修改GameMain的代码如下，重点是 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();

在上面的代码中，我们给Stage舞台上，添加了Text对象，然后点击运行

啊哦，传说中的HelloWorld终于出现了

4.3 绘制图片

4.3.1 loadImage

Laya的Sprite提供了一个非常简单的 loadImage 方法，可以即时加载图片并加载到舞台上。

//设置舞台背景色
 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.loader ，来解决加载的问题。我们把上面的代码再修改下，实现先加载完图片，然后再绘制图片。

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 sprite精灵图，这样制作成图集，不但加载性能更高，而且也更便于制作帧动画。

图集的加载类似这样：

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.Loader.IMAGE 不同的是，type变成了 Laya.Loader.ATLAS 。

那图集怎么制作呢？还有，大量的游戏界面，真的就靠手动一张图片一张图片的显示吗？ 当然不！因为我们接下来该了解下UI编辑器了。

5. UI编辑器

UI编辑器，当然是用来编辑UI的，大多数的客户端程序开发环境，都有类似的UI编辑器。点击左侧的

图标，进入UI编辑器模式，如下图：

具体UI编辑器的功能介绍，建议还是看 官方文档 ，这里就不赘述了。

5.1创建UI

因为我们创建的是默认UI项目，所以UI编辑器里，有一个TestPage.ui，可以不用管他，我们创建一个自己的UI。 点击 文件->新建文件

进入新建页面窗口，页面类型有View 和Dialog两种，因为这里我们做的是整个页面，所以选View。如果你有兴趣去看源码，其实Dialog也是基于View实现的，只不过多了Dialog的一些特性。

如果对这个view后面还有逻辑代码要写，建议勾选“创建逻辑类”，这样就会自动在View目录下自动创建一个和UI对应的GamePage.ts

[ 新建页面UI ]

5.2 导入资源

在assets目录下，新建一个demo资源目录，把需要的图片都扔进去，然后在UI编辑器的资源面板最下方找找到刷新按钮

，新增资源图片后，一定要记得点下刷新，否则资源面板的内容不会自动刷新。

只要是demo文件下的图片，都会被自动打包成图集，路径就是 res/atlas/demo.atlas 。 不知道有没有同学发现，在上面的图片中，有部分资源显示“不打包”，这是什么原因的？

点击文件-》项目设置，我们会看到图集限制了能被打入图集的单图的最大宽高，和最终图集的最大宽高，默认标准可以自行修改。超过这个图集标准的图片，就不会打包到图集中去，就需要手动加载了。

[ 请在这里填写图片描述 ]

5.3 编辑UI

编辑页面功能，会用ppt的，应该都会用了，拖个图片谁不会？直接把资源管理器的图片，拖到右侧场景编辑器里。这次我们拖了一个蓝天白云的背景，并在最下方放了一个大炮，看起来还有点意思。

顶部有一排图标，是用来协助对齐图片用的，提供了顶部对齐，底部对齐，左对齐，右对齐，中线对齐等等，如果图片很多，用这个对齐就很方便了。

右侧的属性栏，就比较常用了。 var这里，你可以给你拖进来的图片组件，给个变量名，这个变量名，最后会在之前自动生成的逻辑类里用到。我们把大炮定个变量名“pao”，后面会用到；x,y,width,height这里，就是坐标和宽高，就不用多说了吧？

5.4 导出UI

UI做好以后，有个重要的工作，就是千万别忘记导出。很多初学者，经常会忘记这点。导出UI，才会重新生成图集和UI相关设置。

导出以后，我们看laya/pages/GamePage.ui 文件，不用管里面的详细内容，里面就是刚才我们拖拽图片，自动生成的响应配置文件。

5.5 使用UI

下面我们要把刚才编辑的GamePage显示出来，那就回过头来，再次修改GameMain.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();

运行一下，主界面游戏背景，和大炮都已经架设好了，好的开端，就是成功的一半了。

接下来，根据最初的牛逼策划，我们要像pubgm一样，让伞兵从天下掉下来，怎么实现？接着看动画部分吧！

6. 动画

6.1 创建伞兵对象

在src目录下创建一个新目录role，用来存放游戏中角色。 在role里创建一个伞兵Soldier.ts对象文件。

module role{
    export class Soldier extends Laya.Sprite{
        constructor(){   
            super();            
            this.init();
        }    

        init():void{  
            var img:Laya.Sprite = new Laya.Sprite();
            img.graphics.drawTexture(Laya.loader.getRes("demo/soldier.png"),0,0,100,86);
            this.addChild(img);
        }
    }
}

修改GamePage.ts,把伞兵加入到游戏主画面中去，重点看 renderSoldier()

module view{    
    export class GamePage extends ui.GamePageUI{
        private soldier:role.Soldier;        
        constructor(){
            super();            
            this.init();
        }

        init():void{
            this.renderSoldier();
        }

        renderSoldier():void{ 
            this.soldier= new role.Soldier();
            this.addChild(this.soldier);
        }

    }
}

运行起来看下，发现游戏主画面上，已经多了一个伞兵（请忽略我的很烂的抠图，手动捂脸^_~ ）

6.2 让伞兵掉下来

做过前端的应该都明白，伞兵掉下来，就是要启动一个定时器，不断修改伞兵的Y坐标+1，移动伞兵图片的位置。原理都知道，但是如何实现呢？ 一般定时器有两种：

• setInterval： 基于用户指定时间
• requestAnimationFrame ： 基于浏览器帧能力

相比起来，requestAnimationFrame 性能更高，更适合做动画。但是在游戏里会有很多地方都用到定时器，如何管理那么多定时器，是非常让人头疼的事情。所以Laya也提供了自己的定时器的相关实现： Laya.timer 来简化定时器的使用，这个定时器同样是基于帧率的，我们来看看这个怎么用。

修改GamePage如下，重点看 Laya.timer.frameLoop

module view{    
    export class GamePage extends ui.GamePageUI{
        private soldier:role.Soldier;
        constructor(){
            super();
            this.init();
        }

        init():void{
            this.renderSoldier();
            //创建定时器
            Laya.timer.frameLoop(1,this,this.onLoop);
        }

        renderSoldier():void{
            this.soldier= new role.Soldier();
            this.addChild(this.soldier);
        }

        onLoop():void{            
            //让伞兵45度下降
            this.soldier.y=this.soldier.y+1; 
            this.soldier.x=this.soldier.x+1; 
        }
    }
}

来看下效果，看起来还不错

7. 碰撞

7.1 增加炮弹

下一步，就改是大炮打伞兵了，当然首先得给大炮创建一个炮弹。 Ball.ts

module role{
    export class Ball extends Laya.Sprite{ 
       constructor(){
           super();
           this.init();
        }    

        init():void{ 
            var img:Laya.Sprite = new Laya.Sprite();
            img.graphics.drawTexture(Laya.loader.getRes("demo/ball.png"),0,0,45,54);
            this.addChild(img);
        }
    }
}

在GamePage上添加炮弹

renderBall():void{            
            this.ball= new role.Ball();
            this.ball.pos(162,540);
            this.addChild(this.ball);
        }

嗯，炮弹添加成功，不过，貌似有点问题，怎么炮弹显示层级在大炮上面了？似乎有点难看？

7.2 调整Sprite层级

还记得前端世界里神奇的z-index吗？ Laya也有，叫zOrder。调整zOrder的数值，可以调节Sprite的层次（脱了马甲，我一样认识你，^_^） 把渲染炮弹部分改一下层级：

renderBall():void{
            this.ball= new role.Ball();            
            this.ball.pos(162,540);            
            this.pao.zOrder=10;  //调高原先大炮的显示层级
            this.addChild(this.ball);
        }

这次炮弹躲在大炮后面去了，一会儿再让他出来吧！

7.3 点击大炮发射炮弹事件

炮弹向上飞，就和伞兵向下掉一样，在帧循环里不断修改y值就可以。但是这次，我们要响应事件了，必须点击大炮，触发点击事件后，才发射炮弹。

再次修改GamePage.ts，这次的重点是多了 this.pao.on(Laya.Event.MOUSE_DOWN,this,this.onMouseDown); 这个事件监听

module view{    export class GamePage extends ui.GamePageUI{
        private soldier:role.Soldier;
        private ball:role.Ball;
        private isSendBall:boolean=false;        
        constructor(){            
            super();
            this.init();
        }

        init():void{
            this.renderSoldier();
            this.renderBall();
            //给大炮增加事件监听
            this.pao.on(Laya.Event.MOUSE_DOWN,this,this.onMouseDown);
            //创建定时器
            Laya.timer.frameLoop(1,this,this.onLoop);
        }

        renderSoldier():void{ 
            this.soldier= new role.Soldier();
            this.addChild(this.soldier);
        }

        renderBall():void{
            his.ball= new role.Ball();
            this.ball.pos(162,540);            
            this.pao.zOrder=10;            
            this.addChild(this.ball);
        }

        onMouseDown():void{
           this.isSendBall=true; 
        }

        onLoop():void{            
           //让伞兵45度下降
            this.soldier.y=this.soldier.y+1; 
            this.soldier.x=this.soldier.x+1; 

            //如果是发射炮弹状态，炮弹向上发射
            if (this.isSendBall){
                this.ball.y=this.ball.y-3;
            }
        }
    }
}

在运行一下看看：

到目前为止，还进行得不错，就差击落伞兵了，可怜的伞兵，你的死期就要到了，还差一个碰撞了。

7.4 炮弹与伞兵的碰撞

碰撞算法常见的有以下这些：

• 矩形碰撞： 矩形图片接触碰撞，计算性能最快，但是如果图像并不近似矩形的时候，准确度就不高了。
• 圆形碰撞： 和矩形类似，比如炮弹就是圆的，用圆形检测，更适合真实情况。
• 多矩形碰撞： 如果图像相对比较复杂，可以拆分为多个矩形，在准确性和性能方面取得平衡。
• 像素检测碰撞： 如果需要非常精确的碰撞，就要使用像素检测了，这个性能相对就比较低了。

在Laya里，对于矩形碰撞检测，提供了 Rectangle.intersection() 方法，可以非常方便的进行矩形检测。

继续修改GamePage.ts

gameOver():void{
    Laya.timer.clear(this,this.onLoop); //停止游戏帧定时器
    this.renderBoom(); //显示爆炸图片
    this.removeChild(this.soldier); //删除伞兵
    this.removeChild(this.ball); //删除炮弹
}
onLoop():void{
    //让伞兵45度下降
    this.soldier.y=this.soldier.y+1; 
    this.soldier.x=this.soldier.x+1; 

    //如果是发射炮弹状态，这炮弹向上发射
    if (this.isSendBall){        this.ball.y=this.ball.y-3;
    
           //使用矩形碰撞判断，如果炮弹和伞兵碰撞，则游戏结束
        if (this.ball.getBounds().intersection(this.soldier.getBounds())){ 
            this.gameOver();
        }
    }
}

再来看下效果：

Boom，伞兵成功被大炮打中，“绝地求死”完美收工！

8. Laya的性能优化

8.1 性能监测工具

Laya已经内置了性能监测工具，只要初始化后执行 Laya.Stat.show(); 就可以打开

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; 
          
         //打开性能监测面板
        Laya.Stat.show();

    }

上面清楚的显示了目前的FPS、Sprite的数量、DrawCall 、内存消耗等，我们优化的目标就是把这些值降低下来。

8.2 优化手段

• 减少Sprite的数量
• 不可见区域的Sprite及时移除
• 静态内容使用cacheAs=bitmap降低DrawCall
• 使用Laya.Pool管理对象，减少重复创建的性能消耗
• 对象无用时，及时销毁
• 定时器及时销毁
• 。。。

具体的优化手段有很多，大家可以在具体的业务开发中不断的总结提炼。

9. 发布到微信小游戏

讲了那么多的Laya，说好的微信小游戏呢？ 不要急，这就来了，Laya生成的代码，可以非常方便的发布到微信小游戏。

点击

进入发布界面，在发布平台选择“微信小游戏”，此时生成可以在微信开发者 工具 下运行的release/wxgame版本

使用微信开发者工具打开，已经可以完美运行了。而且我们发现laya把我们刚才写的代码，和Laya的核心库一起，都被打包成一个code.js了。

[ 微信开发者工具 ]

10. 开发环境兼容

可是，作为微信环境下的游戏，因为code.js是laya自动生成的，我们开发还是必须在laya的开发环境下，但是laya并不支持微信的接口调试，那我们可以在Laya里判断开发环境吗？

当然可以，用 Laya.Browser.onWeiXin 就可以判断了，比如：

if (Laya.Browser.onWeiXin) {
        let wx=Laya.Browser.window.wx;        
         //执行微信的API逻辑.....
}

只是调试起来就有点蛋疼了，得Laya里写好，发布到release/wxgame，再在微信开发者工具里调试。

=总结=

总体来说，Laya入门还是比较简单的，虽然官方也做了很多文档，也有做视频教程，但是感觉资料还是有点缺，这次自己研究Laya的历程分享出来，也算是为Laya社区做点贡献吧！

因为本人接触Laya的时间并不长，也不是专业的游戏开发人员，如果有讲得不对的，也欢迎及时指出，欢迎大家一起交流。

为什么腾讯是蓝色的？

论双11创意，这家真的让我hold不住了！

QQ“嘀嘀嘀嘀嘀嘀”的提示音正式成为首个经司法确认的声音商标

奔走相告！登机忘记带身份证 刷个“二维码”就能行