摘要：點擊進(jìn)入發(fā)布界面，在發(fā)布平臺選擇微信小游戲，此時生成可以在微信開發(fā)者工具下運行的版本使用微信開發(fā)者工具打開，已經(jīng)可以完美運行了。

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

在src目錄下創(chuàng)建一個新目錄role，用來存放游戲中角色。 在role里創(chuàng)建一個傘兵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);
        }

    }
}

運行起來看下，發(fā)現(xiàn)游戲主畫面上，已經(jīng)多了一個傘兵（請忽略我的很爛的摳圖，手動捂臉^_~ ）

做過前端的應(yīng)該都明白，傘兵掉下來，就是要啟動一個定時器，不斷修改傘兵的Y坐標(biāo)+1，移動傘兵圖片的位置。原理都知道，但是如何實現(xiàn)呢？ 一般定時器有兩種：

setInterval：基于用戶指定時間

requestAnimationFrame ：基于瀏覽器幀能力

相比起來，requestAnimationFrame 性能更高，更適合做動畫。但是在游戲里會有很多地方都用到定時器，如何管理那么多定時器，是非常讓人頭疼的事情。所以Laya也提供了自己的定時器的相關(guān)實現(xiàn)：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();
            //創(chuàng)建定時器
            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; 
        }
    }
}

來看下效果，看起來還不錯

下一步，就改是大炮打傘兵了，當(dāng)然首先得給大炮創(chuàng)建一個炮彈。 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);
        }

嗯，炮彈添加成功，不過，貌似有點問題，怎么炮彈顯示層級在大炮上面了？似乎有點難看？

還記得前端世界里神奇的z-index嗎？ Laya也有，叫zOrder。調(diào)整zOrder的數(shù)值，可以調(diào)節(jié)Sprite的層次（脫了馬甲，我一樣認(rèn)識你，^_^） 把渲染炮彈部分改一下層級：

renderBall():void{
            this.ball= new role.Ball();            
            this.ball.pos(162,540);            
            this.pao.zOrder=10;  //調(diào)高原先大炮的顯示層級
            this.addChild(this.ball);
        }

這次炮彈躲在大炮后面去了，一會兒再讓他出來吧！

炮彈向上飛，就和傘兵向下掉一樣，在幀循環(huán)里不斷修改y值就可以。但是這次，我們要響應(yīng)事件了，必須點擊大炮，觸發(fā)點擊事件后，才發(fā)射炮彈。

再次修改GamePage.ts，這次的重點是多了 this.pao.on(Laya.Event.MOUSE_DOWN,this,this.onMouseDown); 這個事件監(jiān)聽

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();
            //給大炮增加事件監(jiān)聽
            this.pao.on(Laya.Event.MOUSE_DOWN,this,this.onMouseDown);
            //創(chuàng)建定時器
            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; 

            //如果是發(fā)射炮彈狀態(tài)，炮彈向上發(fā)射
            if (this.isSendBall){
                this.ball.y=this.ball.y-3;
            }
        }
    }
}

在運行一下看看：

到目前為止，還進(jìn)行得不錯，就差擊落傘兵了，可憐的傘兵，你的死期就要到了，還差一個碰撞了。

碰撞算法常見的有以下這些：

矩形碰撞：矩形圖片接觸碰撞，計算性能最快，但是如果圖像并不近似矩形的時候，準(zhǔn)確度就不高了。

圓形碰撞：和矩形類似，比如炮彈就是圓的，用圓形檢測，更適合真實情況。

多矩形碰撞：如果圖像相對比較復(fù)雜，可以拆分為多個矩形，在準(zhǔn)確性和性能方面取得平衡。

像素檢測碰撞：如果需要非常精確的碰撞，就要使用像素檢測了，這個性能相對就比較低了。

在Laya里，對于矩形碰撞檢測，提供了Rectangle.intersection()方法，可以非常方便的進(jìn)行矩形檢測。

繼續(xù)修改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; 

    //如果是發(fā)射炮彈狀態(tài)，這炮彈向上發(fā)射
    if (this.isSendBall){        this.ball.y=this.ball.y-3;
    
           //使用矩形碰撞判斷，如果炮彈和傘兵碰撞，則游戲結(jié)束
        if (this.ball.getBounds().intersection(this.soldier.getBounds())){ 
            this.gameOver();
        }
    }
}

再來看下效果：

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

Laya已經(jīng)內(nèi)置了性能監(jiān)測工具，只要初始化后執(zhí)行Laya.Stat.show();就可以打開

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; 
          
         //打開性能監(jiān)測面板
        Laya.Stat.show();

    }

上面清楚的顯示了目前的FPS、Sprite的數(shù)量、DrawCall 、內(nèi)存消耗等，我們優(yōu)化的目標(biāo)就是把這些值降低下來。

減少Sprite的數(shù)量

不可見區(qū)域的Sprite及時移除

靜態(tài)內(nèi)容使用cacheAs=bitmap降低DrawCall

使用Laya.Pool管理對象，減少重復(fù)創(chuàng)建的性能消耗

對象無用時，及時銷毀

定時器及時銷毀

。。。

具體的優(yōu)化手段有很多，大家可以在具體的業(yè)務(wù)開發(fā)中不斷的總結(jié)提煉。

講了那么多的Laya，說好的微信小游戲呢？ 不要急，這就來了，Laya生成的代碼，可以非常方便的發(fā)布到微信小游戲。

點擊

進(jìn)入發(fā)布界面，在發(fā)布平臺選擇“微信小游戲”，此時生成可以在微信開發(fā)者工具下運行的release/wxgame版本

使用微信開發(fā)者工具打開，已經(jīng)可以完美運行了。而且我們發(fā)現(xiàn)laya把我們剛才寫的代碼，和Laya的核心庫一起，都被打包成一個code.js了。

[ 微信開發(fā)者工具 ]

可是，作為微信環(huán)境下的游戲，因為code.js是laya自動生成的，我們開發(fā)還是必須在laya的開發(fā)環(huán)境下，但是laya并不支持微信的接口調(diào)試，那我們可以在Laya里判斷開發(fā)環(huán)境嗎？

當(dāng)然可以，用Laya.Browser.onWeiXin 就可以判斷了，比如：

 if (Laya.Browser.onWeiXin) {
        let wx=Laya.Browser.window.wx;        
         //執(zhí)行微信的API邏輯.....
}

只是調(diào)試起來就有點蛋疼了，得Laya里寫好，發(fā)布到release/wxgame，再在微信開發(fā)者工具里調(diào)試。

總體來說，Laya入門還是比較簡單的，雖然官方也做了很多文檔，也有做視頻教程，但是感覺資料還是有點缺，這次自己研究Laya的歷程分享出來，也算是為Laya社區(qū)做點貢獻(xiàn)吧！

因為本人接觸Laya的時間并不長，也不是專業(yè)的游戲開發(fā)人員，如果有講得不對的，也歡迎及時指出，歡迎大家一起交流。

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布

搜索關(guān)注公眾號「云加社區(qū)」，第一時間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！