Laya2.x遊戲引擎入門系列（一）：Hello World

時間 2021-02-13

標籤 javascript html 前端 java git github web chrome typescript shell 欄目遊戲简体版

原文原文鏈接

Laya環境搭建

本次引擎入門咱們全部示例所有基於目前Laya發佈的最新穩定版引擎（Laya2.1.1），編程語言選擇TypeScript。javascript

這裏咱們不去贅述爲何編程語言要選擇TypeScript了，你們能夠自行百度「TypeScript的優點」，我只能說「一入TypeScript深似海，今後JS是路人」。html

如今咱們開始搭建Laya遊戲開發環境，簡單的來講，咱們只須要準備2個東西: 一個是LayaIDE、一個是TypeScript。前端

LayaIDE自己是基於vscode改版的，同時增長了拖拽生成界面的「設計模式」，IDE自己也會自帶最新版本的引擎文件，只須要在官網下載IDE便可直接開始Laya遊戲開發。java

而咱們的TypeScript則更容易安裝，直接經過npm安裝便可。git

npm i -g typescript

安裝完成後，經過命令tsc -v檢查，展現當前的TypeScript版本號即表示安裝成功。github

有不少同窗在初次使用TypeScript的時候，會把他簡單的看成一個增長類型限制的JavaScript，在剛開始使用中並無啥大毛病，由於TypeScript自己是JavaScript的超集，你在JavaScript想幹的事情在這裏都是沒問題，可是，爲了充分利用好TypeScript，建議你們抽空閱讀一下《深刻理解 TypeScript》這篇教程。web

目錄介紹

環境搭建好以後，就能夠開始咱們的第一個項目了，新建項目 -> 選擇「2d示例項目」 -> 選擇"2.1.1"版本的引擎 -> 點擊建立便可。chrome

項目建好以後，咱們先來介紹一下他的目錄：typescript

.laya：shell
- 存放了項目的配置文件、編譯&發佈腳本（Laya2.2以前編譯腳本compile.js經過browserify編譯，Laya2.2以後經過rollup編譯）;
- 這個目錄中的腳本建議新手不要修改避免整個腳本沒法正常運行，在熟悉編譯腳本以後，若是有特殊編譯需求（例如增長代碼混淆強度）能夠針對compile.js、publish.js作修改；
- 另外目錄中會有chrome的臨時文件，建議加到gitignore文件中；
bin：
- 該目錄主要存放編譯後的代碼文件（業務邏輯代碼，在js目錄下）、「設計模式」下導出的資源文件（圖片、字體、音頻、場景等）、引擎代碼（在libs目錄下）、入口文件（index.html、index.js）；
- index.js爲js的入口文件，能夠根據修改須要引入的js庫，最終編譯工具將會把他們打包成一個文件；

- 後續在業務代碼中若是須要引用各種資源文件，他們的路徑所有是根據導出後bin目錄的結構去引用的，例如
    ```javascript
    // destroy.wav在bin/sound目錄下
    Laya.SoundManager.playSound("sound/destroy.wav");
    ```
- 建議將除了`bin/libs`以外的所有**目錄**加到gitignore中；

laya
- 該目錄主要用於存放編譯前的資源文件(assets目錄)、UI配置文件(.laya)、場景文件（pages目錄）；
libs
- 該目錄存放laya引擎和小遊戲引擎的ts類型定義文件；
src
- 該目錄存放業務邏輯代碼，官方並無給出參考的目錄結構劃分，具體結構劃分能夠自行決定（咱們當前項目的目錄劃分是按照功能模塊進行劃分）；
- GameConfig.ts和ui/layaMaxUI.ts這兩個文件是IDE自動生成的，須要添加到gitignore文件中，且src/ui目錄必定不要放本身的代碼，會被IDE清除；
release(目前沒有，發佈成功後會生成)
- 該目錄主要存放發佈以後的文件，會根據你選擇的發佈類型作區分web、微信小遊戲、oppo快遊戲放到不一樣的目錄下；

Hello World

介紹完整個項目的目錄結構以後，咱們直接上手寫咱們的第一個laya小遊戲「Hello World」。在新建的項目中，將src/Main.ts的內容替換成以下代碼：

class Main {
    constructor() {
        // 一、初始化舞臺，默認背景色爲黑色
        Laya.init(800, 600, Laya['WebGL']);
        // 二、建立文本對象
        let txt = new Laya.Text();
        // 三、設置文本對象
        txt.text = 'Hello World';
        // 四、設置文本其餘屬性
        txt.color = '#fff';      // 文本顏色
        txt.fontSize = 48;       // 字號
        txt.stroke = 3;          // 描邊寬度
        txt.strokeColor = 'red'; // 描邊顏色
        txt.bold = true;         // 加粗
        txt.italic = true;       // 斜體
        txt.pos(280, 250);       // 位置
        // 五、添加到舞臺中
        Laya.stage.addChild(txt);
    }
}

//激活啓動類
new Main();

按照圖片中的操做順序編譯代碼以後在本地瀏覽器查看效果：