遊戲前端學習（一） typescript + egret + egret-EUI系列
本系列主要是我的工作學習歷程，包括日常採坑，遊戲相關的程式設計、語法、擴充套件庫等。所以文章會有點流水賬的形式。
最近找了份新的工作，主要是微信小遊戲開發的，由於我擁有 Java、JavaScript、微信小程式開發等基礎，所以目前主要補充的知識點有 typescript、egret、包括 egret 的擴充套件類庫：egret-eui。
工作第一天：
我選擇從 Egret Engline 2D 文件入手，瞭解以後要接觸的工作的大概內容。首先是下載並安裝 Egret Launcher 包括 Egret Wing 3，這些按照官網提示就能完成。通過閱讀與下載Hello World的Demo
簡單過了一遍專案內容後，我從顯式物件和顯式容器這邊開始瞭解專案的基礎知識。
首先我覺得這塊比較類似 Android 開發的形式，首先是搭建容器，再往容器裡面新增物件。基礎層面上元件化思想可以說是非常強烈了。與 JavaScript 不同，這邊物件包括佈局相互間都有一定的關聯性，少了哪個物件可能在編譯階段就會報錯。
核心顯示類
不同的內容對應不同的顯示物件，Egret 中一共封裝了8個顯示相關的核心類，如下表。
| 類 | 描述 |
|---|---|
| DisplayObject | 顯示物件基類，所有顯示物件均繼承自此類 |
| Bitmap | 點陣圖，用來顯示圖片 |
| Shape | 用來顯示向量圖，可以使用其中的方法繪製向量圖形 |
| TextField | 文字類 |
| BitmapText | 點陣圖文字類 |
| DisplayObjectContainer | 顯示物件容器介面，所有顯示物件容器均實現此介面 |
| Sprite | 帶有向量繪製功能的顯示容器 |
| Stage | 舞臺類 |
類的思想與 Java 相似，在自定義類中可以選擇繼承以上8個核心類，在類中編寫自定義方法建立相關佈局、元件包括一些邏輯處理。
值得一提的是在方法內新增物件的方法是 addChild（物件名），大概是新手最常接觸的一個方法了。
常用的繼承容器有 Sprite ， Sprite 繼承自 DisplayObjectContainer，同時實現了 Graphics 繪圖功能，可以在上面進行向量繪圖、遮罩計算、濾鏡與渲染等。
而在基礎的繪圖等之外，官網還介紹了文字、事件機制、網路包括定時器等機制，這些機制與 JavaScript 用法區別不大，主要是語法上有差異，通過閱讀並在專案中加以多次使用可以快速上手並掌握的。
第二天：
第二天我從官網的Demo開始入門，官網的Demo可以提供免費下載，選擇一些重複性低的，跟著程式碼過一遍，基本就能對每個功能都跟熟悉點。這天我主要在觀察程式碼，發現程式碼形式和 Android 相似度更高，並且閱讀了部分 api 的繼承關係，瞭解一下組成關係。
第三天：
第三天我從 Typescript 文件， egret-EUI，包括教學示例入手。著重瞭解 typescript 的名稱空間，這一塊比較抽象，需要多花點時間仔細閱讀。名稱空間比較好玩的點是可以將一個單一檔案拆分成多個檔案。通過繼承、exports 等將資料處理在不同等級的封閉層內。
往下看了 EUI 庫內的 EXML，這個我覺得類似於把 HTML 和 Android 給糅合起來，同時支援 JSP 模式的一個模式語言。
而 EUI 庫內的面板意思是將面板的邏輯與樣式分離開來，可以在 json 檔案中設定相關主題（包括自定義主題），再在面板中使用語句啟用主題。
EUI 庫內的資料集合，主要設定項有資料來源、資料模板、資料樣式、列表元件、選項卡和自定義項呈示器。列表作為繼承資料項的一個新類，列表中多出了選中項的概念，可以設定列表預設選中項，同時列表可以做出多選的操作。
容器有多種形式的展現，從簡單的 Group 到層疊。面板、滾動控制容器等。從 Group 開始，他們都比原生容器 Sprite 多了兩個方法【getElementAt() 和 numElements() 】；層疊容器是多個子項在同個頁面展示，通常配合導航欄選項卡一起使用；面板容器是擁有標題欄和內容，標題欄的位置是可以自由設定的；滾動控制容器就是頁面過長就進行滾動控制展開的一個容器頁面，滾動條開始與停止決定權在滾動控制容器的開發者。