Egret Engine學習筆記(二)——專案配置
一、安裝與部署
安裝引擎,看了下好像沒什麼需要學的。
二、命令列手冊
用法
egret [command]
就和git還有npm一樣的用法嘛其實,舉例使用:
1、執行名為【HelloWorld】的一個專案
egret run HelloWorld
2、編譯名為【HelloWorld】的一個專案
egret build HelloWorld
接下來具體介紹命令列表。
command列表
create
建立新專案
用法:
egret create project_name [--type core|eui]
引數說明:
關鍵字 | 描述 |
---|---|
project_name | 專案名稱,按照作業系統的命名規範命名 |
--type | 要建立的專案型別 core 或 eui,預設值為core |
舉例:
1、建立名為【HelloWorld】的一個空專案
egret create HelloWorld
2、建立名為【HelloWorld】的一個eui專案
egret create HelloWorld --type eui
create_lib
建立新第三方庫專案
用法:
egret create_lib lib_name
引數說明:
關鍵字 | 描述 |
---|---|
lib_name | 第三方庫名稱,按照作業系統的命名規範命名 |
create_app
從h5遊戲生成app
用法:
egret create_app app_name -f h5_game_path -t template_path
引數說明:
關鍵字 | 描述 |
---|---|
app_name | 移動應用專案名稱,按照作業系統的命名規範命名 |
-f | app專案所對應h5專案的路徑 |
-t | 對應 Native Support 路徑 |
如果是在專案資料夾下編譯,就不要加專案路徑。注意:路徑最好加引號,防止路徑中有空格導致報錯。
build
構建指定專案
用法:
egret build [project_name] [-e] [--target wxgame|bricks|ios|android]
引數說明:
關鍵字 | 描述 |
---|---|
project_name | 專案名稱,按照作業系統的命名規範命名 |
-e | 編譯指定專案的同時編譯引擎目錄 |
--target | 編譯的目標版本,可選引數有wxgame:微信小遊戲;bricks:玩一玩;android:安卓專案;iOS:iOS專案 |
如果是在專案資料夾下執行命令,可以不加專案名稱。
舉例:
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]
引數說明:
關鍵字 | 描述 |
---|---|
project_name | 專案名稱,按照作業系統的命名規範命名 |
--version | 設定釋出之後的版本號,可以不設定 |
--target | 編譯的目標版本,可選引數有wxgame:微信小遊戲;bricks:玩一玩;android:安卓專案;iOS:iOS專案 |
如果是在專案資料夾下執行命令,可以不加專案名稱。
舉例:
釋出【HelloWorld】到微信小遊戲
egret publish HelloWorld --version 0.03 --target wxgame
run
啟動本地伺服器,並在預設瀏覽器中執行指定專案
用法:
egret run [project_name] [--port 3000]
引數說明:
關鍵字 | 描述 |
---|---|
project_name | 專案名稱,按照作業系統的命名規範命名 |
--port | 指定埠號 |
如果是在專案資料夾下執行命令,可以不加專案名稱。
舉例:
在指定埠下執行【HelloWorld】專案
egret startserver HelloWorld --port 3002
clean
重置專案中的引擎程式碼
用法:
egret clean [project_name]
引數說明:
關鍵字 | 描述 |
---|---|
project_name | 專案名稱,按照作業系統的命名規範命名 |
如果是在專案資料夾下執行命令,可以不加專案名稱。
upgrade
升級專案程式碼
Egret Launcher v1.0 之後的 upgrade
用法:
egret upgrade [project_name] --egretversion [target version]
引數說明:
關鍵字 | 描述 |
---|---|
project_name | 專案名稱,按照作業系統的命名規範命名 |
target version | 要切換的目標版本號 |
如果是在專案資料夾下執行命令,可以不加專案名稱。
舉例:
升級當前目錄下專案到 5.1.0
egret upgrade --egretversion 5.1.0
Egret Launcher v1.0之前的 upgrade
用法:
egret upgrade [project_name]
引數說明:
關鍵字 | 描述 |
---|---|
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" />
八、第三方擴充套件庫
看的有點一知半解,,之後用到的時候再詳細補充吧。