前言：
好久沒更新博客了，以前很多都不會，所以常常寫博客總結，倒是現在有點點經驗了就懶了。在過去的幾個月里，在canvas游戲框架方面，擼過了CreateJS，玩得了Egret，又學過PIXI.js。在移動前端方面，尤其是小游戲開始有一點點小經驗了。但只是小經驗，為什么說是小經驗？
首先，深度不足，雖然用得最熟最多的白鷺，可是習慣了JavaScript，對TypeScript的OOP編程掌握得還不夠；其次，對Egret等游戲框架了解的廣度還不夠，還有相當部分用法沒用到。雖然能夠應付朋友圈里傳播的大多數的H5小游戲，可是還有很大的進步空間。尤其是欠缺重度游戲以及性能方面的處理。所以，不論是一般的Web前端方面，還是H5游戲方面，我都要繼續努力學習了。不足錯漏之處，懇請大家多多指點。
什么是Egret？
Egret是一套HTML5游戲開發解決方案，產品包含Egret Engine，Egret Wing，EgretVS，Res Depot，Texture Merger，TS Conversion，Egret Feather，Egret Inspector，DragonBones，Lakeshore等。而核心產品是Egret Engine，是一個基於TypeScript語言開發的一個HTML5游戲引擎，其余的大多是開發和輔助工具。
關於這個引擎和工具方面的介紹，我就不多說了，以下是白鷺的下載地址，咋們直接從安裝完成后講起。
Egret官網：http://egret.com/
准備階段：
首先，安裝完egret engine后在桌面打開這個logo
，雙擊后你能看到以下引擎界面：
如果你已經下載最新版，那就直接使用最新版本就好，假如從別的地方拷到了不同版本的項目，那就必須打開這個界面再安裝不同的引擎版本，以打開其他人不同版本的代碼。
接下來點擊工具按鈕，從界面上我們可以看到很多工具，但是做H5小游戲常用的只有Egret Wing、Texture Merger等，部分人可能需要做重游或者native app的，可能需要其他的工具，但這里不作介紹。沒用過哈哈哈~~
繼續選擇下載，由於我這里都已經下載安裝好了，所以界面上顯示已安裝，這里比較簡單就不詳說了。
使用階段：
在以上工具都准備后，在engine界面或者桌面圖標點擊打開Egret Wing，會看到以下畫面：
Wing可以理解為專門使用TypeScript開發白鷺項目的IDE了，以后我們使用egret過程中，會一直跟這個界面打交道。
好，現在我們先創建一個項目，我先建一個游戲項目，置於其他界面有什么區別呢，可以自行新建試試。EUI是主要做交互界面的，空項目是沒有配置好相關需要的代碼以及功能模塊的，例如做緩動效果的Tween和加載的RES等等，所以為了方便，我們一般直接新建游戲項目。
然后進入下一步：
在這里，你需要配置游戲界面的大小，視頻模式以及旋轉設置。尺寸直接是設計圖寬高，而視口我們一般會選擇showALL（顯示全部內容，不變形但會在留白），
網上也有一部分人開發的時候用fixedWidth（適配寬度，高度不足時會隱藏底下部分，適用於只有一些動畫在上方，且下方是無關重要的背景時）。
還有一些人（例如我有時候）會用到百分百滿屏的exacFit，設計師弄一個適中的尺寸，然后按照這種模式鋪滿全屏，有少數很寬或很長的屏幕會有一點變形，但是不影響游戲體驗與界面。但是不好的地方是PC或pad打開會變形。
選擇完之后，我們點擊完成。打開新建的項目目錄：
src是TypeScript源碼目錄，bin-debug是調試環境編譯出來的js，libs是文件包的引用目錄，template主要是app用到的runtime；
resource是我們項目中的資源路徑，一般我們把圖片音頻等素材放置asset目錄下，json等配置文件放置config目錄下，default.res.json是我們用於加載資源的json配置文件，一般不修改名字，后面會講到怎么使用。
egretProperties是我們這個項目的一些配置記錄信息，一般我們不需要動它。而index.html就是我們游戲的主界面文件。
打開index.html
我們可以看到游戲界面所需的js，都自動生成並引用好了。這一部分我們不需要也不能手動去修改。
但是你可以在style標簽中修改背景色或者在div屬性值中修改配置參數，如渲染的幀率（一般我們設成60，如果是計算量大的，我們再適當降低），在這里我們可以重新修改剛剛新建游戲時的適配模式、寬高、旋轉等；
將data-show-fps和data-show-log設成true，我們就可以看到游戲運行的實時幀率了。
幀率可以檢測游戲運行的流暢度（性能），渲染數量越多，同時計算量越大，性能就越差，掉幀就越多。所以幀率越高，則表示性能越好，流暢度高。
另外，在底部，我們還能看到一個egret.runEgret({})的運行方法，在這里，你可以修改egret的渲染模式，默認是"webgl"。但是如果你需要用到跨域圖片資源或者有大量的圖片和文字，你最好還是使用"canvas"模式，避免跨域報錯和性能問題。
明天更新第二篇，敬請期待。
轉載請注明出處，謝謝。
