Laya2.x遊戲引擎入門系列（二）：UI界面開發

前端開發和遊戲開發

相信選擇laya遊戲引擎這類h5遊戲引擎的開發者或多或少都有一些前端的開發經驗，在開始開發小遊戲以後會努力尋找和過往開發經歷類似的地方。最後會發現兩者之間的關係相似於網頁開發和node.js服務端開發之間的關係，雖然都是使用了前端的開發語言（JS或TS），可是背後涉及的知識點卻徹底不一樣。

小遊戲所有是經過canvas或者webgl畫在頁面中，而網頁開發是經過瀏覽器去作的渲染。咱們在網頁開發中不少想固然的事情，在h5遊戲開發中就要費很大勁去實現，例如，網頁中父容器的高度是能夠經過內部內容撐起來的、自定義列表自己就是支持鼠標拖拽滾動事件、瀏覽器會記錄咱們網頁訪問的記錄。若是你想在小遊戲中實現這些特性都須要本身去開發實現。

即便有不少東西都不一樣，咱們仍是能夠在開發小遊戲的過程當中借鑑一些以前的開發h5網頁的經驗，例如，小遊戲性能優化、小遊戲內部的ui組件開發思路、網頁開發中經常使用的設計模式。這些咱們均可以繼續在小遊戲中使用。甚至咱們平時在網頁開發中使用的類庫，在小遊戲中也是可使用，例如lodash、md5這樣的工具庫。不過千萬要注意不要引入相似vue、jquery這種存在操做dom樹的類庫，由於小遊戲自己並無DOM、BOM環境。

在開始小遊戲開發以前，我先來介紹一些和小遊戲、laya引擎、oppo快遊戲相關的關鍵術語。

小遊戲：

• 舞臺：顯示遊戲元素的平臺，相似咱們的html標籤是整個遊戲的根結點，一切元素必須放到舞臺中才能展現出來
• 顯示對象：遊戲舞臺中任何元素都是一個顯示對象；

Laya引擎：

• 場景：Laya2提倡場景管理開發，你在界面中新建的任何界面（場景scene，頁面view、彈窗dialog）所有都是以scene結尾，同時引擎還會幫助你加載場景相關的資源，你只須要關心場景內部的邏輯開發便可；
• runtime: 這裏的runtime指的是場景對應的邏輯類，你能夠在構建完ui界面以後在單獨編寫邏輯；
• 遊戲設計寬高：Laya.init時定義的寬高，也能夠直接理解成設計稿的寬高；
• 遊戲stage寬高：舞臺的實際寬高，這裏的寬高都是基於Laya提供的縮放模式，針對設計寬高做出縮放、裁剪以後獲得寬高；
• 遊戲畫布寬高: 通常來講大小等於遊戲場景寬高；

OPPO快遊戲

• rpk代碼包：快遊戲的代碼包，包含了遊戲運行須要的業務邏輯代碼和靜態資源，整個代碼文件以.rpk結尾;
• 快遊戲rumtime：這裏的runtime指的是小遊戲自己的運行環境；

UI開發

瞭解完基礎知識以後咱們能夠嘗試開發本身的ui了，目前主流的3種遊戲引擎Laya、Cocos、白鷺所有都支持IDE拖拽和編寫代碼這2種方式生成界面。

經過IDE生成UI

咱們先從簡單的IDE拖拽開始，準備實現一個在輸入框中改變文字，界面中實時更改文字的效果。

建立一個新的項目，在左側菜單欄選擇IDE的編輯模式

在test文件夾中右鍵新建場景

在場景中添加組件，並經過編輯器賦予一些的樣式屬性

在script目錄中新建InputDemo.ts做爲場景的runtime類

InputDemo.ts代碼以下：

export default class InputDemo extends Laya.Scene {
    onEnable() {
        let $input: Laya.TextInput = this.getChildByName('input') as Laya.TextInput;
        let $container: Laya.Text = this.getChildByName('container') as Laya.Text;

        $input.on(Laya.Event.INPUT, this, (text, value) => {
            $container.text = $input.text;
        });
    }
}
複製代碼

Done!

經過代碼生成UI

經過代碼生成UI僅僅是將生成界面的過程所有搬運到業務邏輯中完成，經過API新建UI組件，而後經過Laya.stage.addChild(ui)方法將ui直接插入到頁面中，其餘的綁定事件的邏輯不變，這裏咱們就不贅述了，有興趣的同窗能夠本身嘗試寫一寫。

場景發佈模式

在編輯模式時新建場景，有一個選項「導出類型」，一開始開發的時候你們可能會有疑問，這究竟是個啥東西？

內嵌模式：生成場景類，同時會把ui數據內嵌到類裏面

加載模式：生成場景類，會把全部UI數據放到ui.json裏，使用時須要加載

分離模式：生成場景類，同時生成單個場景數據文件，每次加載一個場景文件

文件模式：只生成場景數據文件

這裏摘錄一下laya官方文檔裏面的解釋，咱們經過代碼簡單的解釋一下。

內嵌模式，會在ui/layaMaxUI.ts文件中生成場景類，同時，會把全部場景相關的代碼都放到這個場景類中，這種模式打開頁面速度最快。可是，小遊戲基本都會限制包體大小，若是全部代碼都存放在js/ts文件中，這樣沒辦法經過異步加載場景數據的方式減小包體大小。

加載模式，會在ui/layaMaxUI.ts文件中生成場景類，可是，內部的場景數據所有都定義在bin/ui.json目錄下面，同時，若是你想使用場景，則須要手動加載場景文件，而後，在建立場景。

主動加載場景

主動建立view

分離模式 & 文件模式，由於這兩種模式比較相似咱們就不分開講了，兩者都會生成場景數據，可是，文件模式並不會生成場景類。這一點致使兩者在使用場景中的UI組件時會有一點點小小的差別，分離模式能夠直接經過this對象來找到組件，例如this.input，而文件模式只能經過this.getChildByName('xxx')來獲取。我的感受分離模式更好用一些（由於全部UI組件所有能夠很方便的獲取到），不過官方推薦使用文件模式。

原本還想在講一下多屏幕適配的，不過發現最近文檔更新了作了詳細介紹這裏就不贅述了。

Laya2.x遊戲引擎入門系列介紹

筆者19年5月開始深度參與了一個OPPO快遊戲項目（相似微信小遊戲），從零開始折騰到如今,終於算是入了H5遊戲開發的門。目前關於Laya引擎開發快遊戲的教程還很少，因而筆者決定把這幾個月踩過的坑、解決的問題、總結的經驗都記錄下來，方便其餘準備入坑的同窗提早規避。

Laya2.x遊戲引擎入門系列預計會寫如下文章，記錄如何從零開始完成一個快遊戲的開發和上架：

• Laya2.x遊戲引擎入門系列（一）：Hello World
• Laya2.x遊戲引擎入門系列（二）：UI界面開發
• Laya2.x遊戲引擎入門系列（三）：經常使用的動畫開發【寫做中】
• Laya2.x遊戲引擎入門系列（四）：像素級還原文字【構思中】
• Laya2.x遊戲引擎入門系列（五）：數據通訊【構思中】
• Laya2.x遊戲引擎入門系列（六）：2D物理世界【構思中】
• Laya2.x遊戲引擎入門系列（七）：遊戲調試【構思中】
• Laya2.x遊戲引擎入門系列（八）：項目工程化【構思中】
• Laya2.x遊戲引擎入門系列（九）：上架前最後一步準備【構思中】
• Laya2.x遊戲引擎入門系列（十）：常見問題彙總【構思中】
• 未完待續。。。

同時，Laya2目前將引擎代碼經過TypeScript進行了重構，你們若是在寫代碼中遇到什麼疑問均可以直接在GitHub源碼中找到答案，後續筆者也會寫一些關於Laya2源碼解析的文章，有興趣的朋友能夠關注。

第一次嘗試寫完整的教學文章，若有錯誤或不嚴謹的地方，請務必給予指正，十分感謝！