Egret——Egret+fairyGui 實戰專案入門
前言
一行白鷺上青天
需求
最近，我們老闆刷刷的為了省事，給美術減壓（背景有點長，不說了）。
美術出 fairygui，我需要在網頁上看到實時操作，並且看到效果！
需求分析
這怕是要了我的狗命啊，但是要年底了，包住飯碗要緊。
提煉關鍵字， fairygui ， 網頁展示，操作，Egret
再濃縮一下： fairygui 為互動素材，白鷺為引擎，vue為展示頁面
一、fairygui 是什麼？
官方地址： ofollow,noindex"> http://www.fairygui.com/guide/
FairyGUI提供了一個強大的UI編輯器， 使用習慣與Adobe系列軟體保持一致 ，美術設計師和策劃都可以輕鬆上手。
airyGUI提供了多個遊戲引擎SDK： Unity 、 Cocos2d-x 、 Cry Egine , MonoGame , Havok Vision/Project Anarchy 、 Egret 、 LayaAir 、 CocosCreator 、 Haxe 、 Pixi 、 Flash 、 Starling ，未來還將支援 UE4 、 LibGDX 等。藉助FairyGUI-SDK，
你可以輕鬆在UI中使用3D物件、粒子等元素，而且FairyGUI還解決了環形進度條、畫素點選測試、圖文混排、迴圈列表、虛擬列表、曲面UI、VR輸入等UI開發中常見的痛點
提供的SDK： Egret 、 LayaAir
言外之意，我要是想要用到fairyGui，我還要一個H5引擎
二、Egret是什麼？
官方地址： https://www.egret.com/
白鷺為開發者提供移動端遊戲開發一站式解決方案，並建立包含核心渲染引擎2D/3D、遊戲開發工具、創意動畫工具、資源工具、原生打包方案等全球首個HTML5/">HTML5完整工作流，幫助全球25萬+活躍開發者高效開展工作。
汗顏，牛逼的是用來做遊戲開發的，我能夠怎麼辦 我也很絕望啊~
為什麼選擇Egret？
就提供兩個SDK，我有選擇嗎？
emmm，第一感覺白鷺相對成熟一些，坑沒有這麼多吧（良好的自我安慰心理）
三、二者結合
fairygui 是提供官方案例的
我簡單的總結一下，順便說一說這裡面的坑
- 將FairyGUI庫以及依賴的rawinflate庫拷貝到libs目錄。（如果你在編輯器釋出時沒有勾選
壓縮描述檔案，那麼這個庫是不需要的）
敲重點： 這句話我反覆了好了幾遍，剛開始根本摸不著頭腦，哪裡來的FairyGUI庫？？？？
找來找去，思來想去，把官網都要翻遍了
眼睛尖的我發現，原來要去下載他的官方案例，才有這個FairyGUI庫
一如既往的貼心（白鷺SDK下載地址）： http://www.fairygui.com/product/#Egret-SDK
2. 複製一份rawinflate.min.js，並改名為rawinflate.js。（如果你在編輯器釋出時沒有勾選 壓縮描述檔案 ，那麼這個庫是不需要的）。
這句話是什麼意思呢：編輯器是指fairygui ，貼心的我再次截圖
3. 在egretProperties.json檔案中新增:
{
"name": "rawinflate",
"path": "./libs/rawinflate"
},
{
"name": "fairygui",
"path": "./libs/fairygui"
}
貼心的我，再次截圖，其實呢，就是在白鷺裡面引用fairygui庫 我用的是最新的白鷺 5.XX
4.使用FairyGUI編輯器完成UI編輯。釋出目錄請選擇Egret工程的resource/assets目錄。釋出後得到兩個（或以上）檔案。
這個我還是再次截圖吧！fairygui釋出，一定要選擇Egret哦！不然就是打出了很多多餘的檔案
設定好了以後，釋出專案，把這些檔案複製到白鷺專案裡面（這個 直接用你下載的demo 例項就好 如果你不想再她的基礎之上，你可以直接在自己的專案中引用）
5. 在default.res.json裡，將上述的檔案新增到定義中。副檔名為fui檔案，型別請選擇為bin。注意：Egret自動檢測新增的資源，名稱通常會自動加上下劃線和字尾，例如basic.fui，名稱自動設定為“basic_fui”，這裡我們要手動將_fui去掉，名稱只需要為“basic”
這個就是靜態資源的匯入
一定要記得 .fui 檔案的引用
6. 在程式碼裡完成規定的初始化，例如設定預設字型，滾動條等等。
你這樣子以為就可以了，一定會報錯的，相信我