使用Laya引擎開發微信小遊戲（下）

時間 2019-11-10

標籤使用 laya 引擎開發微信遊戲欄目遊戲简体版

原文原文鏈接

本文由雲+社區發表

6. 動畫

6.1 建立傘兵對象

在src目錄下建立一個新目錄role，用來存放遊戲中角色。在role裏建立一個傘兵Soldier.ts對象文件。javascript

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

    }
}

運行起來看下，發現遊戲主畫面上，已經多了一個傘兵（請忽略個人很爛的摳圖，手動捂臉^_~ ）java

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

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

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的時間並不長，也不是專業的遊戲開發人員，若是有講得不對的，也歡迎及時指出，歡迎你們一塊兒交流。

此文已由做者受權騰訊雲+社區發佈

搜索關注公衆號「雲加社區」，第一時間獲取技術乾貨，關注後回覆1024 送你一份技術課程大禮包！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。