Egret(白鷺引擎)——Egret+fairyGui 實戰項目入門

前言

　　一行白鷺上青天

需求

　　最近，咱們老闆刷刷的爲了省事，給美術減壓（背景有點長，不說了）。
　　美術出 fairygui，我須要在網頁上看到實時操做，而且看到效果！

需求分析

　　這怕是要了個人狗命啊，可是要年末了，包住飯碗要緊。
　　提煉關鍵字，fairygui，網頁展現，操做，Egret

　　再濃縮一下：fairygui 爲交互素材，白鷺爲引擎，vue爲展現頁面

1、fairygui 是什麼？

　　官方地址：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引擎

2、Egret是什麼？

　　官方地址：https://www.egret.com/

　　白鷺爲開發者提供移動端遊戲開發一站式解決方案，並創建包含核心渲染引擎2D/3D、遊戲開發工具、創意動畫工具、資源工具、原生打包方案等全球首個HTML5完整工做流，幫助全球25萬+活躍開發者高效開展工做。

　　汗顏，牛逼的是用來作遊戲開發的，我可以怎麼辦 我也很絕望啊~

　　爲何選擇Egret？

　　就提供兩個SDK，我有選擇嗎？

　　emmm，第一感受白鷺相對成熟一些，坑沒有這麼多吧（良好的自我安慰心理）

3、兩者結合

　　fairygui 是提供官方案例的

　　我簡單的總結一下，順便說一說這裏面的坑

1. 　　將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. 在代碼裏完成規定的初始化，例如設定默認字體，滾動條等等。

　　　

　　

　　你這樣子覺得就能夠了，必定會報錯的，相信我

　　~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

　　華麗麗的分割線，昨晚尚未寫完，繼續寫

　　算了，不接着寫了（我這該死的 任性啊）

　　成功跑通本身案例的