摘要：本文由云社區(qū)發(fā)表使用一個(gè)簡(jiǎn)單的游戲開(kāi)發(fā)示例，由淺入深，介紹了如何用引擎開(kāi)發(fā)微信小游戲。前段時(shí)間正好抽空研究了一下這塊的內(nèi)容，現(xiàn)做一個(gè)總結(jié)，針對(duì)如何使用引擎開(kāi)發(fā)微信小游戲給大家做一下介紹。

本文由云+社區(qū)發(fā)表

使用一個(gè)簡(jiǎn)單的游戲開(kāi)發(fā)示例，由淺入深，介紹了如何用Laya引擎開(kāi)發(fā)微信小游戲。

作者：馬曉東，騰訊前端高級(jí)工程師。

微信小游戲的推出也快一年時(shí)間了，在IEG的游戲運(yùn)營(yíng)活動(dòng)中，也出現(xiàn)了越來(lái)越多的以小游戲作為載體運(yùn)營(yíng)的活動(dòng)類型，比如游戲預(yù)約，搶先試完等等，都收到了非常良好的效果。

在支持微信小游戲的游戲引擎中，Cocos，Egret，Laya都對(duì)小游戲的開(kāi)發(fā)提供了很多強(qiáng)大的支持。前段時(shí)間正好抽空研究了一下這塊的內(nèi)容，現(xiàn)做一個(gè)總結(jié)，針對(duì)如何使用Laya引擎開(kāi)發(fā)微信小游戲給大家做一下介紹。因?yàn)闀r(shí)間有限，研究并不深入, 如有高手路過(guò)，忘不吝賜教。

做個(gè)啥游戲呢？“絕地求生”很火，我們做個(gè)“絕地求死”如何？策劃也很簡(jiǎn)單，和絕地求生相反，主角不是跳傘的玩家，而是地面的炮手，大炮要把跳傘的傘兵用大炮一個(gè)個(gè)都消滅掉。

牛逼的策劃有了，咱們進(jìn)入正題，看看怎么實(shí)現(xiàn)吧！

微信小游戲提供了canvas這個(gè)游戲核心組件。利用Canvas可以在畫(huà)布上畫(huà)出文字、圖形、圖像等等。 不過(guò)講微信小游戲之前，得先說(shuō)說(shuō)H5，在H5時(shí)代獲取canvas對(duì)象非常簡(jiǎn)單，如下圖：

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);//清除矩形內(nèi)像素

ctx.scale(scalewidth,scaleheight);//縮放

ctx.rotate(angle);//旋轉(zhuǎn)角度

。。。。

微信小游戲里，也提供了canvas對(duì)象，只不過(guò)獲取接口變了：

wx.createCanvas()

其他H5環(huán)境下有的Canvas API，微信環(huán)境里也都有。

Canvas只是一個(gè)2D的畫(huà)布，要做一個(gè)游戲，動(dòng)畫(huà)總不能少吧？要讓圖片能動(dòng)起來(lái)，這又是怎么做到的呢？請(qǐng)看下圖：

好吧，動(dòng)畫(huà)其實(shí)就是不斷畫(huà)圖片，然后擦除，再畫(huà)圖片，再擦除的循環(huán)過(guò)程，肉眼看起來(lái)，那就是動(dòng)起來(lái)了。

在古老的電影膠片時(shí)代，我們看到的電影，就是一張一張連續(xù)幀的膠片組成的，最后投射到大屏幕上，變成了我們看到的電影。

但是，動(dòng)畫(huà)是講究幀率的，一般如果能達(dá)到每秒60幀，那就和電影一樣是很流暢的動(dòng)畫(huà)效果了。計(jì)算公式：1000ms/60fps=16.67ms，這就要求我們每次動(dòng)畫(huà)里的業(yè)務(wù)邏輯計(jì)算，都要16.6ms里完成，不能影響下一幀的顯示，否則就是卡頓，也就被人說(shuō)這個(gè)游戲好卡，性能好差了。

知道原理了，性能優(yōu)化具體怎么做呢？

Canvas分層 有些游戲中，背景是不變的，為了提高性能，可以把游戲背景抽離出一個(gè)多帶帶的canvas，這樣，在畫(huà)面發(fā)生變化的時(shí)候，不需要重繪整個(gè)背景，只需要繪制變化的那部分就可以。

減少API調(diào)用 每次的ctx的api調(diào)用，都是有性能消耗的，所以，盡量減少每幀的api調(diào)用次數(shù)，具體怎么減少，就要看業(yè)務(wù)需求了。

圖片預(yù)裁剪 圖片的裁剪過(guò)程，也是有性能消耗的，我們可以把裁剪的圖片預(yù)先存起來(lái)，之后在繪制的時(shí)候，直接從內(nèi)存里拿，而不需要每次都重新裁剪。

離屏繪制 直接操作上屏的canvas，性能是很差的，尤其是有單幀繪制操作很多的時(shí)候，性能下降更明顯。 這個(gè)時(shí)候，我們可以預(yù)先創(chuàng)建一個(gè)離屏的canvas，預(yù)先在這個(gè)canvas完成這一幀要繪制的所有動(dòng)作，最后一次性的把這個(gè)離屏canvas繪制到上屏canvas中。

避免阻塞 由于我們需要保證16.67ms就要完成一次幀的繪制，如果這一幀里，邏輯運(yùn)算時(shí)間超過(guò)16ms怎么辦？那就一定會(huì)卡幀了。 我們可以使用webworker之類的技術(shù)，把耗時(shí)的邏輯計(jì)算在另一個(gè)線程執(zhí)行，或者把任務(wù)進(jìn)行拆解，降低每幀的耗時(shí)。

當(dāng)然還有很多其他更多的技巧和手段來(lái)提升canvas的性能，在這樣的情況下如果我們直接使用canvas去開(kāi)發(fā)一個(gè)游戲，還會(huì)面臨比如碰撞算法、物理系統(tǒng)之類的問(wèn)題。 所以，如果只用canvas去開(kāi)發(fā)游戲，就如同你在吃雞游戲里，只拿了一把平底鍋，你怎么和別人正面剛？

所以，我們需要一把98K把自己武裝起來(lái)，那就是使用游戲引擎開(kāi)發(fā)。

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

從各種支持度上來(lái)講，laya是目前支持度最好的，也據(jù)laya側(cè)的宣傳，他的性能也是最高的。（關(guān)于性能的問(wèn)題，因外部水軍比較多，在沒(méi)有做實(shí)際詳細(xì)測(cè)試前，暫時(shí)不發(fā)表評(píng)價(jià)。）

在公司內(nèi)部，都有三種引擎的游戲?qū)崿F(xiàn)，下面是截止5月份的公開(kāi)數(shù)據(jù)的引擎占比：

其實(shí)三個(gè)引擎都提供了很好的支持度，一般來(lái)說(shuō)，如果原先使用過(guò)Cocos實(shí)現(xiàn)過(guò)APP端游戲要移植到微信小游戲端來(lái)的，使用Cocos是最好的選擇，如果是從頭開(kāi)發(fā)一款小游戲，那還是在Egret和Laya里選擇一款吧！

前面講了那么多，都還只是前戲，只是為了大家對(duì)游戲的開(kāi)發(fā)有個(gè)初步的了解，從這一節(jié)開(kāi)始我們就進(jìn)入正題了。

到 https://www.layabox.com/ 去下載最新的版本，并進(jìn)行安裝。目前有1.X版本和2.0版本。（本文使用1.7.20版本做示例）

然后就可以創(chuàng)建一個(gè)新的游戲項(xiàng)目了，我們可以現(xiàn)在選擇創(chuàng)建一個(gè)UI示例項(xiàng)目

[ 創(chuàng)建新工程 ]

當(dāng)然就是給你寫(xiě)代碼的地方，感覺(jué)這個(gè)編輯器，就是在VSCode的基礎(chǔ)上改的。連最頂上的Code標(biāo)識(shí)都還在。也因?yàn)檫@樣，所以才能很好的支持TypeScript。

[ 代碼模式布局 ]

為什么要使用TypeScript? 本文不詳細(xì)展開(kāi)比較，只需要了解TypeScript 是Javascript的超集，因?yàn)槎嗔藗€(gè)“Type”表示他支持強(qiáng)類型，并且由于靜態(tài)類型化，在寫(xiě)代碼的時(shí)候編輯器就能提示你的錯(cuò)誤，所以更適合開(kāi)發(fā)游戲這種邏輯復(fù)雜的應(yīng)用就好了。當(dāng)然最終TypeScript還是會(huì)像ES6一樣，被編譯成普通的Javascript執(zhí)行。但是在開(kāi)發(fā)階段管理代碼來(lái)說(shuō)，已經(jīng)可以駕馭大型項(xiàng)目了。

就是用來(lái)設(shè)計(jì)UI界面的地方，拖拖拽拽就可以把游戲頁(yè)面整出來(lái)。Laya提供了好多組件，如果有需要的可以使用，當(dāng)然也可以不用他的組件，自己搞自己的自定義組件。

[ 設(shè)計(jì)模式布局 ]

都說(shuō)作為一個(gè)程序員，買(mǎi)來(lái)文房四寶之后，寫(xiě)下的第一行字，一定是“Hello World”。（我拿著公司剛發(fā)的 20周年LAMY紀(jì)念鋼筆，寫(xiě)的第一行字，居然也是“Hello World”，汗~~~）

首先刪掉系統(tǒng)剛才默認(rèn)的文件“LayaUISample.ts”,然后新建文件GameMain.ts

import WebGL = Laya.WebGL;
class GameMain  {    
    constructor() {
         //TS或JS版本初始化微信小游戲的適配
        Laya.MiniAdpter.init(true,false);        
         //初始化布局大小
        Laya.init(375,667, WebGL);
                 
         //布局方式設(shè)定
        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提供的對(duì)小游戲提供的適配，因?yàn)樵谛〕绦?小游戲環(huán)境下，并沒(méi)有Bom和DomAPI，比如，沒(méi)有window，document, 所以需要這樣一個(gè)適配器，對(duì)小游戲的開(kāi)發(fā)方式，進(jìn)行兼容。

修改bin目錄下的index.html ,刪掉LayaUISample.ts的引用，改為下面的方式：

在index.html里，提供了很多Laya的類庫(kù)，這些類庫(kù)，最終會(huì)被打包成合并一個(gè)code.js. 因?yàn)槲⑿判∮螒虻捏w積限制，我們不需要把所有的庫(kù)都加載進(jìn)來(lái)，只選擇我們需要的庫(kù)就好了，用不到的可以都刪除。

接下來(lái)，點(diǎn)擊運(yùn)行，就會(huì)出現(xiàn)模擬器界面了。

[ 運(yùn)行模擬器 ]

先別管黑乎乎的一團(tuán)，下面我們就要增加“Hello World”了。

再次修改GameMain的代碼如下，重點(diǎn)是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);        

        //布局方式設(shè)定
        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;

        //創(chuàng)建Text對(duì)象
        var txt:Laya.Text = new Laya.Text();        
 
        //給Text的屬性賦值
        txt.text = "Hello World";//設(shè)定文字內(nèi)容
        txt.color = "#ffffff"; //設(shè)定顏色
        txt.fontSize=20; //設(shè)定字體大小
        txt.pos(100,200); //設(shè)定位置

        //將Text對(duì)象添加到舞臺(tái)
        Laya.stage.addChild(txt);
    }
}
new GameMain();

在上面的代碼中，我們給Stage舞臺(tái)上，添加了Text對(duì)象，然后點(diǎn)擊運(yùn)行

啊哦，傳說(shuō)中的HelloWorld終于出現(xiàn)了

Laya的Sprite提供了一個(gè)非常簡(jiǎn)單的loadImage方法，可以即時(shí)加載圖片并加載到舞臺(tái)上。

//設(shè)置舞臺(tái)背景色
 Laya.stage.bgColor="#1e83e8";
//創(chuàng)建img Sprite精靈
var img:Laya.Sprite = new Laya.Sprite();
//加載顯示圖片，坐標(biāo)位于100,50，并設(shè)置寬高 130*108
img.loadImage("demo/paratrooper.jpg",100,50,130,108);
//把圖片添加到舞臺(tái)
Laya.stage.addChild(img);

預(yù)覽如下，是不是很簡(jiǎn)單？

但是這個(gè)方法，其實(shí)并不實(shí)用，在真實(shí)項(xiàng)目中，一般會(huì)有很多圖片，我們不會(huì)一張一張圖片的去加載，而是預(yù)先加載好，再去顯示圖片。也就是我們常常在游戲主界面看到的進(jìn)度條，其實(shí)就是在加載資源。

Laya提供一個(gè)資源加載器：Laya.loader ，來(lái)解決加載的問(wèn)題。我們把上面的代碼再修改下，實(shí)現(xiàn)先加載完圖片，然后再繪制圖片。

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))
}
//加載完成后，把圖片繪制到畫(huà)布上
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);
 }
//這里可以獲取到加載的進(jìn)度，以后可以制作進(jìn)度條
onLoadProgress(percent:number):void{
        console.log("percent->"+percent);
}

只是預(yù)加載圖片還不夠，實(shí)際場(chǎng)景由于有很多小圖片，所以我們可以把這些小圖片拼合成圖集，這就類似在前端在做性能優(yōu)化的有時(shí)候所使用的css sprite精靈圖，這樣制作成圖集，不但加載性能更高，而且也更便于制作幀動(dòng)畫(huà)。

圖集的加載類似這樣：

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

和之前的圖片加載時(shí)Laya.Loader.IMAGE不同的是，type變成了Laya.Loader.ATLAS。

那圖集怎么制作呢？還有，大量的游戲界面，真的就靠手動(dòng)一張圖片一張圖片的顯示嗎？ 當(dāng)然不！因?yàn)槲覀兘酉聛?lái)該了解下UI編輯器了。

UI編輯器，當(dāng)然是用來(lái)編輯UI的，大多數(shù)的客戶端程序開(kāi)發(fā)環(huán)境，都有類似的UI編輯器。點(diǎn)擊左側(cè)的

圖標(biāo)，進(jìn)入U(xiǎn)I編輯器模式，如下圖：

具體UI編輯器的功能介紹，建議還是看官方文檔，這里就不贅述了。

5.1創(chuàng)建UI

因?yàn)槲覀儎?chuàng)建的是默認(rèn)UI項(xiàng)目，所以UI編輯器里，有一個(gè)TestPage.ui，可以不用管他，我們創(chuàng)建一個(gè)自己的UI。 點(diǎn)擊 文件->新建文件

進(jìn)入新建頁(yè)面窗口，頁(yè)面類型有View 和Dialog兩種，因?yàn)檫@里我們做的是整個(gè)頁(yè)面，所以選View。如果你有興趣去看源碼，其實(shí)Dialog也是基于View實(shí)現(xiàn)的，只不過(guò)多了Dialog的一些特性。

如果對(duì)這個(gè)view后面還有邏輯代碼要寫(xiě)，建議勾選“創(chuàng)建邏輯類”，這樣就會(huì)自動(dòng)在View目錄下自動(dòng)創(chuàng)建一個(gè)和UI對(duì)應(yīng)的GamePage.ts

[ 新建頁(yè)面UI ]

在assets目錄下，新建一個(gè)demo資源目錄，把需要的圖片都扔進(jìn)去，然后在UI編輯器的資源面板最下方找找到刷新按鈕

，新增資源圖片后，一定要記得點(diǎn)下刷新，否則資源面板的內(nèi)容不會(huì)自動(dòng)刷新。

只要是demo文件下的圖片，都會(huì)被自動(dòng)打包成圖集，路徑就是 res/atlas/demo.atlas。 不知道有沒(méi)有同學(xué)發(fā)現(xiàn)，在上面的圖片中，有部分資源顯示“不打包”，這是什么原因的？

點(diǎn)擊文件-》項(xiàng)目設(shè)置，我們會(huì)看到圖集限制了能被打入圖集的單圖的最大寬高，和最終圖集的最大寬高，默認(rèn)標(biāo)準(zhǔn)可以自行修改。超過(guò)這個(gè)圖集標(biāo)準(zhǔn)的圖片，就不會(huì)打包到圖集中去，就需要手動(dòng)加載了。

[ 請(qǐng)?jiān)谶@里填寫(xiě)圖片描述 ]

編輯頁(yè)面功能，會(huì)用ppt的，應(yīng)該都會(huì)用了，拖個(gè)圖片誰(shuí)不會(huì)？直接把資源管理器的圖片，拖到右側(cè)場(chǎng)景編輯器里。這次我們拖了一個(gè)藍(lán)天白云的背景，并在最下方放了一個(gè)大炮，看起來(lái)還有點(diǎn)意思。

頂部有一排圖標(biāo)，是用來(lái)協(xié)助對(duì)齊圖片用的，提供了頂部對(duì)齊，底部對(duì)齊，左對(duì)齊，右對(duì)齊，中線對(duì)齊等等，如果圖片很多，用這個(gè)對(duì)齊就很方便了。

右側(cè)的屬性欄，就比較常用了。 var這里，你可以給你拖進(jìn)來(lái)的圖片組件，給個(gè)變量名，這個(gè)變量名，最后會(huì)在之前自動(dòng)生成的邏輯類里用到。我們把大炮定個(gè)變量名“pao”，后面會(huì)用到；x,y,width,height這里，就是坐標(biāo)和寬高，就不用多說(shuō)了吧？

UI做好以后，有個(gè)重要的工作，就是千萬(wàn)別忘記導(dǎo)出。很多初學(xué)者，經(jīng)常會(huì)忘記這點(diǎn)。導(dǎo)出UI，才會(huì)重新生成圖集和UI相關(guān)設(shè)置。

導(dǎo)出以后，我們看laya/pages/GamePage.ui 文件，不用管里面的詳細(xì)內(nèi)容，里面就是剛才我們拖拽圖片，自動(dòng)生成的響應(yīng)配置文件。

下面我們要把剛才編輯的GamePage顯示出來(lái)，那就回過(guò)頭來(lái)，再次修改GameMain.ts

class GameMain  {

    //定義靜態(tài)變量 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();         
         //添加到舞臺(tái)
         Laya.stage.addChild(GameMain.gamePageView);
    }

}
new GameMain();

運(yùn)行一下，主界面游戲背景，和大炮都已經(jīng)架設(shè)好了，好的開(kāi)端，就是成功的一半了。

接下來(lái)，根據(jù)最初的牛逼策劃，我們要像pubgm一樣，讓傘兵從天下掉下來(lái)，怎么實(shí)現(xiàn)？接著看動(dòng)畫(huà)部分吧！

關(guān)注云+社區(qū)，及時(shí)獲取下篇更新