Laya實戰-打地鼠JS版本的ES6重構

時間 2019-11-17

標籤 laya 實戰版本 es6 欄目 JavaScript 简体版

原文原文鏈接

前言

在上一篇文章《從零開始製做微信小遊戲-彈一弾》中，我使用了純原生的Canvas搭配Matter物理引擎，製做了一個彈一弾的微信小遊戲，在其文末我提到了將來會寫一篇使用專業遊戲引擎製做H5遊戲的文章html

這一篇文章就是這個目的。目前國內主流成熟的H5遊戲引擎有兩個，分別是Laya和Egret，其中白鷺（Egret）發佈時間較早，發展到如今已經很成熟，有至關多的商業遊戲案例。Laya是後來崛起的H5遊戲引擎，號稱性能速度最快，也有了不少商業遊戲案例。實際上關於二者對比的文章互聯網上比比皆是，但其實二者支持的語言和功能都差很少，不管選擇哪個均可以前端

演示

能夠瀏覽器/微信掃碼體驗試玩，也能夠直接訪問 cheneyweb.github.io/laya-hitmol… 進行遊戲體驗git

引擎

本文選擇了Laya，主要出於如下幾點考慮github

LayaAir更輕量，一個IDE幾乎涵蓋了H5遊戲開發的全部支撐功能
Laya引擎推出時間較晚，參考了不少引擎的設計優勢，總體API設計簡潔高效
支持一鍵導出微信小程序
Laya官方文檔詳細且全面，論壇活躍度高，且有詳細的視頻教程，本文的案例就是基於其視頻教程《Laya引擎官方實戰教學—JS版本打地鼠》分解重構還原的

引擎與原生

其實遊戲引擎在國外已經成熟使用不少年了，可是國內H5遊戲採用引擎開發一直沒有大面積鋪開，很大緣由上是由於大部分前端遊戲入門者，若是沒有專門指引和接受過遊戲開發的系統化學習，面對遊戲引擎使用，是至關困難的一件事情web

從最簡單的角度分析，我將闡述對比原生開發，採用遊戲引擎開發會有哪些不一樣和優點編程

可視化圖片/音效/動畫/特效等資源加載和調整，這一點是使用遊戲引擎開發和傳統原生開發最明顯的區別，它使得遊戲開發者能關注於遊戲元素的呈現，而不是如何在遊戲中加載和使用

全代碼文件自動管理，引用，打包，這一點使得遊戲程序開發者不須要再關心各類亂七八糟的工具引入，在Laya中，代碼中的類文件能夠隨意使用，不須要繁瑣的引入

大量封裝好的循環動畫API，邏輯API等等，使得遊戲編碼量大幅降低，在本文中描述的打地鼠遊戲，實際編碼量就只有兩百行左右，很是少

多鍾適配支持，統一的輸入事件，使得H5遊戲只須要編寫一套交互，不管是PC瀏覽器仍是手機觸控，均可以輕鬆搞定

極高的開發效率，我本身的體會使用遊戲引擎開發，對比原生開發，能夠提升十倍以上的效率，也就是隻有相同原生遊戲十分之一的開發時間

實踐

其實這篇文章的實踐過程很難寫，由於和我以往的文章不一樣，能夠經過代碼展現和分析，逐步實現。遊戲引擎的開發只有30%時間會在編碼上，剩餘的更可能是在使用IDE進行遊戲設計上，這是頗有意思的一點json

並且在我看來，遊戲開發也是最能貫徹面向對象編程思想的開發，而這種思想，也偏偏是很難經過文字描述的，可是無論怎麼樣，我會盡可能用簡單的方式，描述使用遊戲引擎製做一款遊戲的全流程小程序

另外須要說明的是，Laya官方教程中，JS版本的打地鼠，是採用ES5編寫的，代碼會有些冗餘和複雜，因此我所有採用ES6重構了一遍，看起來更加簡潔清爽微信小程序

遊戲入口

任何遊戲都有入口程序，Laya遊戲的入口十分簡單，只須要初始化引擎，而後加載版本控制和資源以後，就能夠啓動遊戲界面了在本文的演示遊戲中，使用WebGL的渲染模式，性能最好，若是不支持，會自動切換Canvas以獲取最好的兼容性瀏覽器

class LayaApp {
    constructor() {
        // 初始化引擎
        const WebGL = laya.webgl.WebGL
        Laya.init(800, 600, WebGL)
        //設置版本控制類型爲使用文件名映射的方式
        Laya.ResourceVersion.type = Laya.ResourceVersion.FILENAME_VERSION
        //加載版本信息文件
        Laya.ResourceVersion.enable("version.json", Laya.Handler.create(this, this.beginLoad))
        // 設置stage屬性
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER
        Laya.stage.alignW = Laya.Stage.ALIGN_CENTER
        Laya.stage.screenMode = Laya.Stage.SCREEN_NONE
        Laya.stage.bgColor = "#ffffff"
    }
    // 加載資源
    beginLoad() {
        Laya.loader.load("res/atlas/ui.atlas", Laya.Handler.create(this, this.onLoaded), null, Laya.Loader.ATLAS)
    }
    // 加載完成回調
    onLoaded() {
        // 啓動遊戲界面
        LayaApp.gameStartView = new GameStartView()
        Laya.stage.addChild(LayaApp.gameStartView)
    }
}

// 實例化遊戲應用
new LayaApp()
複製代碼

如下部分描述讓我糾結了許久，由於我實在不知道用什麼方式和文本表達，若是要將遊戲的開發步驟每一步都寫出來，怕是要貼上上百張圖片和寫上比遊戲編碼多十倍的文字。我想這也是爲何Laya官方選擇採用視頻教程的方式來指引初學者入門吧

其實本文的目的更多的是讓初學者可以對H5遊戲引擎可以有個大概的概念，因此如下內容就更多的是闡述H5遊戲引擎的一些強大功能特效，閱讀本文以後，再去看Laya官方的視頻教程，可能會達到事半功倍的效果

資源引用

Laya的資源管理器只須要將資源文件放置在資源關聯路徑下，即可輕鬆加載全部資源文件，爲下一步可視化編輯遊戲界面打下基礎，具體的IDE操做方法請參考 LayaAir IDE—資源管理器

界面實現

在引入資源文件以後，咱們即可以爲所欲爲創造咱們想象的遊戲界面，首先建立UI界面，而後往UI界面上拖拽資源，接着將其佈局或安排層級，最後就是爲咱們須要的界面元素設置屬性。最後的這一步十分關鍵，由於這是鏈接可視化設計與程序編碼的橋樑經過var屬性或name屬性，就能夠在代碼中使用相對應的界面元素，十分便捷簡單，這是遊戲引擎極大提升生產效率的重要一步，一樣，具體IDE操做方法請參考 LayaAir IDE—UI場景編輯器

/** * 啓動界面類 */
class GameStartView extends ui.GameStartUI {
    constructor() {
        super()
        // 居中顯示
        this.centerX = 0
        this.centerY = 0
        // 啓動事件
        this.startBtn.on(Laya.Event.CLICK, this, this.onStartGame)
    }
    onStartGame() {
        // 移除啓動界面
        this.removeSelf()
        // 加載遊戲界面
        if (!LayaApp.gameView) {
            LayaApp.gameView = new GameView()
        }
        LayaApp.gameView.gameStart()
        Laya.stage.addChild(LayaApp.gameView)
    }
}
複製代碼

在這裏須要提一下的是代碼中使用到的this.startBtn，咱們能夠看到的是在整個類的代碼中都沒有定義，但其實咱們卻能夠直接使用！

緣由就是在Laya的設計面板中，咱們建立啓動界面時，已經爲其中的啓動按鈕設置了var屬性，因此咱們能夠直接在代碼中使用，並且Laya封裝了API，咱們更能夠進一步直接使用按鈕事件響應

看到這裏，應該均可以理解了遊戲引擎如何將設計元素與編碼邏輯相關聯，而這也只是其中的一個例子

精靈實現

遊戲中每每除了靜態界面元素，還會有不少的動畫，甚至是特效等等複雜元素，而這些經過遊戲引擎均可以作到可視化編輯，以打地鼠中的錘子敲擊動畫爲例，咱們經過如下方式就能夠製做一個簡單的序列幀動畫，而後經過爲其設置屬性，就能夠在編碼中引用更多相關IDE操做方法能夠參考 LayaAir IDE—UI頁面、粒子、動畫、腳本新增面板詳解

/** * 錘子類 */
class Hammer extends ui.HammerUI {
    constructor() {
        super()
        this.visible = false
    }
    // 開始使用
    start() {
        this.visible = true
        Laya.Mouse.hide()
        Laya.stage.on(Laya.Event.MOUSE_DOWN, this, this.onMouseDown)
        Laya.stage.on(Laya.Event.MOUSE_MOVE, this, this.onMouseMove)
        this.onMouseMove()
    }
    // 結束使用
    end() {
        this.visible = false
        Laya.Mouse.show()
        Laya.stage.off(Laya.Event.MOUSE_DOWN, this, this.onMouseDown)
        Laya.stage.off(Laya.Event.MOUSE_MOVE, this, this.onMouseMove)
    }
    onMouseDown() {
        this.hit.play(0, false)
    }
    onMouseMove() {
        this.pos(Laya.stage.mouseX - this.width / 2, Laya.stage.mouseY - this.height / 2)
    }
}
複製代碼