一、安裝與部署

安裝引擎，看了下好像沒什麼需要學的。

二、命令列手冊

用法

egret [command]

 就和git還有npm一樣的用法嘛其實，舉例使用：

1、執行名為【HelloWorld】的一個專案

egret run HelloWorld

2、編譯名為【HelloWorld】的一個專案

egret build HelloWorld

 接下來具體介紹命令列表。

command列表

create

建立新專案

用法：

egret create project_name [--type core|eui]

 引數說明：

舉例：

1、建立名為【HelloWorld】的一個空專案

egret create HelloWorld

2、建立名為【HelloWorld】的一個eui專案

egret create HelloWorld --type eui

create_lib

建立新第三方庫專案

用法:

egret create_lib lib_name

引數說明:

create_app

從h5遊戲生成app

用法:

egret create_app app_name -f h5_game_path -t template_path

引數說明:

如果是在專案資料夾下編譯，就不要加專案路徑。注意：路徑最好加引號，防止路徑中有空格導致報錯。

build

構建指定專案

用法:

egret build [project_name] [-e] [--target wxgame|bricks|ios|android]

引數說明:

如果是在專案資料夾下執行命令，可以不加專案名稱。

舉例：

1、編譯【HelloWorld】

egret build HelloWorld

2、編譯【HelloWorld】的同時編譯引擎

egret build HelloWorld -e

3、編譯【HelloWorld】的同時編譯微信小遊戲專案

egret build HelloWorld --target wxgame

publish

釋出專案

用法：

egret publish [project_name] [--version [version]] [--target wxgame|bricks|ios|android]

引數說明：

如果是在專案資料夾下執行命令，可以不加專案名稱。

舉例：

釋出【HelloWorld】到微信小遊戲

egret publish HelloWorld --version 0.03 --target wxgame

run

啟動本地伺服器，並在預設瀏覽器中執行指定專案

用法：

egret run [project_name] [--port 3000]

引數說明：

如果是在專案資料夾下執行命令，可以不加專案名稱。

舉例：

在指定埠下執行【HelloWorld】專案

egret startserver HelloWorld --port 3002

clean

重置專案中的引擎程式碼

用法：

egret clean [project_name]

引數說明：

如果是在專案資料夾下執行命令，可以不加專案名稱。

upgrade

升級專案程式碼

Egret Launcher v1.0 之後的 upgrade

用法：

egret upgrade [project_name] --egretversion [target version]

引數說明：

如果是在專案資料夾下執行命令，可以不加專案名稱。

舉例：

升級當前目錄下專案到 5.1.0

egret upgrade --egretversion 5.1.0

Egret Launcher v1.0之前的 upgrade

用法：

egret upgrade [project_name]

引數說明：

如果是在專案資料夾下執行命令，可以不加專案名稱。

舉例：

升級【HelloWorld】專案

egret upgrade HelloWorld

關於Egret Launcher v1.0 中專案降版本的說明

修改專案根目錄下的配置檔案 'egretProperties.json' 中的 'egret_version' 欄位下的版本號

執行 egret clean 後項目降到目標版本

make

修改引擎原始碼後，編譯引擎原始碼。如果沒有特殊需求，不建議普通使用者使用

用法：

egret make

info

獲得Egret資訊，如當前Egret版本，以及安裝路徑

用法：

egret info

help

瞭解各個command的細節

用法：

egret help [command]

三、入口檔案說明

index.html為專案的入口問價，下面是body標籤裡的預設配置，可以根據專案需求修改：

<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
         data-entry-class="Main"
         data-orientation="auto"
         data-scale-mode="showAll"
         data-frame-rate="30"
         data-content-width="640"
         data-content-height="1136"
         data-multi-fingered="2"
         data-show-fps="false" data-show-log="false"
         data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
    </div>

• data-entry-class：檔案類名稱
• data-orientation：旋轉模式
• data-scale-mode：適配模式
• data-frame-rate：幀頻數
• data-content-width：遊戲內舞臺的寬
• data-content-height：遊戲內舞臺的高
• data-multi-fingered：多指最大數量（一開始沒搞懂這個引數是啥意思，查了一下反應過來，這是手機螢幕上同時允許的最多手指操作）
• data-show-fps：是否顯示fps幀頻資訊
• data-show-log：是否顯示egret.log的輸出資訊
• data-show-fps-style：fps面板的樣式，支援5種屬性，x:0，y:0，size:30，textColor:0xffffff，bgAlpha:0.9

在script標籤內，有專案的啟動引數，如下圖所示：

egret.runEgret({ renderMode: "webgl", audioType: 0, 
calculateCanvasScaleFactor:function(context) {
    var backingStore = context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio || 1;
    return (window.devicePixelRatio || 1) / backingStore;
}});

啟動引數是一個物件，包括一下3個可選屬性：

• “renderMode”: 引擎渲染模式，”canvas” 或者 “webgl”
• “audioType”: 使用的音訊型別，0:預設，2:web audio，3:audio 兩者的區別，可以參考文件
• “calculateCanvasScaleFactor”：螢幕的物理畫素適配方法，使用預設的即可

四、專案配置檔案說明

這個寫在第一篇裡，可以從這裡跳轉。

五、模組配置

在專案配置檔案egretProperties.json中，modules欄位定義了專案中引用的所有庫檔案。

其中，引擎庫可以分為2種。

1、內建庫

• egret 引擎核心庫
• egret3d 引擎3D庫
• assetsmanager 資源管理模組
• dragonBones 龍骨
• eui UI元件庫
• game 遊戲庫
• media 多媒體庫
• socket websocket網路通訊庫
• tween 緩動動畫庫

內建庫可以省略path欄位，預設和egret_version使用相同的版本，也可以在path欄位裡單獨設定該庫使用的版本。

2、第三方庫

Egret官方提供一些常見的第三方庫供開發者使用。開發者也可以在專案中配置自己的庫。

六、tsconfig配置檔案

tsconfig.json是Typescript專案的配置檔案，TypeScript編譯器編譯程式碼之前，會首先讀取這個配置檔案，並根據其中的屬性來設定TypeScript專案的編譯引數。

使用方式

1 ) 在建立 egret 專案時，會自動在專案根目錄下生成名為 “tsconfig.json” 的文字檔案。

2 ) 下面為引擎預設的引數，可以根據您專案的需求，自己修改：

{
    "compilerOptions": {
        "target": "es5",
        "outDir": "bin-debug",
        "experimentalDecorators": true,
        "lib": [
            "es5",
            "dom",
            "es2015.promise"
        ],
        "types": []
    },
    "include": [
        "src",
        "libs"
    ]
}

詳細說明compilerOptions裡的欄位：

• target：編譯之後生成的JavaScript檔案需要遵循的標準，預設為es5，相容性較好，不建議修改（不過現在大家都在學es6了吧）
• outDir：編譯出來的js檔案，預設編譯到bin-debug裡，目前暫不支援修改。
• experimentalDecorators：啟用實驗性質的語法裝飾器，引擎裡的部分庫使用了最新的語法，需要開啟這個配置。
• lib：編譯需要的庫檔案，預設有3個，你可以根據需求自行新增。
• 其他常用引數
  • "sourceMap":true ：把.ts檔案編譯成.js檔案時，生成對應的.js.map檔案，該檔案可以讓使用者直接在瀏覽器裡除錯ts檔案。
  • "removeComments":true ：編譯.js時刪除原本.ts檔案中的註釋。

3）設定其他欄位，比如與compilerOptions平級的還有include欄位，表示哪些檔案會參與編譯，在引擎4.x之前的版本，該欄位為exclude，表示哪些檔案不參與編譯。

4）執行egret build命令，可以按照配置檔案來編譯egret專案。

七、編譯順序說明

在Egret中，需使用TypeScript編寫程式，最終編譯成瀏覽器可讀的JaveScript。

測試依賴關係

總的來說，當好幾個類之間存在互相引用的關係的時候，可能會存在一個檔案載入在它引用的類所在的檔案載入之前，導致瀏覽器報錯該類未定義。想要解決這個問題，TypeScript中，可以使用<reference>標籤來表示引用關係。例如TestB引用了TestA，則只需要在TestB之前加入如下注釋即可：

///<reference path="TestA.ts" />

八、第三方擴充套件庫

看的有點一知半解，，之後用到的時候再詳細補充吧。