FairyGUI Editor是一款跨平臺的開源性UI設(shè)計開發(fā)軟件。FairyGUI 編輯器采用強大的可視化直觀界面，無需代碼即可編輯，采用獨特的FairyBatching技術(shù)，可自動優(yōu)化復(fù)雜界面的DC數(shù)量，支持如圖文混排、表情輸入、虛擬列表、循環(huán)列表，像素級點擊檢測、打字效果等，提供多個主流游戲引擎SDK，操作更加靈活高效。

【基本介紹】

FairyGUI提供了一個強大的UI編輯器，使用習(xí)慣與Adobe系列軟件保持一致，美術(shù)設(shè)計師和策劃都可以輕松上手。
與市場上其他UI編輯器不同，F(xiàn)airyGUI編輯器重視設(shè)計師體驗，摒棄了腳本和配置文件這些需要代碼思維的操作。借助FairyGUI提供的 組件、關(guān)聯(lián)、控制器 以及 動效，我們可以在不寫代碼的情況下使用編輯器輕松地制作大量復(fù)雜的帶有動畫效果的自動布局的UI。
FairyGUI提供了多個游戲引擎SDK：Unity、Cocos2d-x、Cry Egine, Havok Vision/Project Anarchy、白鷺、LayaAir、Haxe、Pixi、Flash、Starling，未來還將支持UE4、LibGDX等。借助FairyGUI-SDK，你可以輕松在UI中使用3D對象、粒子等元素，而且FairyGUI還解決了環(huán)形進度條、像素點擊測試、圖文混排、循環(huán)列表、虛擬列表、曲面UI、VR輸入等UI開發(fā)中常見的痛點。

【軟件功能】

1、強大的文本控件。支持動態(tài)字體，位圖字體，以及外部工具(例如BMFont等)制作的位圖字體，同時支持HTML語法和UBB語法，支持復(fù)雜的圖文混排。輸入文本支持IOS原生表情的直接輸入。支持字體的描邊效果，陰影效果，支持漸變色文字。
2、強大的列表控件，支持多種布局，支持虛擬列表和循環(huán)列表，即使列表項目數(shù)量巨大也拒絕卡頓。虛擬列表還支持不等高ITEM、多種ITEM資源混合等高級特性。支持表格、樹等高級列表控件。
3、支持圖片的九宮格和平鋪處理，支持九宮格內(nèi)各個宮格的平鋪處理。支持圖片變色和灰度。
4、所見即所得。操作簡易，使用習(xí)慣與Adobe系列軟件保持一致，策劃和美術(shù)設(shè)計師都可以輕松上手。
5、在編輯器即可組合各種復(fù)雜UI組件，無需編寫代碼。不需要程序員編碼擴展UI組件。
6、支持平移、縮放、旋轉(zhuǎn)、傾斜、翻轉(zhuǎn)等常規(guī)的2D變換。
7、支持基礎(chǔ)的繪圖功能，例如矩形、圓形、多邊形等。
8、支持序列幀動畫編輯和使用。自帶序列幀動畫編輯器，同時支持導(dǎo)入由Flash CS、Animate CC等工具制作的動畫。
9、內(nèi)置多種手勢支持。
10、編輯器提供時間軸設(shè)計UI動效，可以組合透明度、位置、大小、顏色等十幾種屬性的動畫效果。并可實時看到每幀的效果。支持插入聲音。支持嵌套動效。
11、支持矩形遮罩和自定義圖形遮罩。
12、支持濾鏡。
13、支持逐像素檢測的點擊檢測方式。
14、支持將UI組件綁定到任何模型上，例如實現(xiàn)曲面UI。
15、內(nèi)置文本的打字效果。
16、內(nèi)置普通窗口管理器，彈出窗口管理器，拖放管理器。
17、支持事件的冒泡機制。
18、封裝了所有輸入方式的底層細節(jié)，無論是鼠標(biāo)輸入、單點觸摸輸入、多點觸摸輸入、VR輸入，你都只需要使用相同的事件偵聽方式處理UI交互。
19、支持在UI層中插入任何3D物體，例如模型、粒子、骨骼動畫等。
20、編輯狀態(tài)下使用分散的素材，發(fā)布時自動打包圖集。支持定義多個圖集，Unity版本自動支持抽出A通道的壓縮方式。

【安裝教程】

下載FairyGUI-Editor
下載好后，即可得到文件夾 FairyGUI-Editor，雙擊打開，找到 FairyGUI-Editor.exe ，具體如下圖


雙擊打開 FairyGUI-Editor.exe 即可打開應(yīng)用，具體如下圖

為了方便實用，選擇 FairyGUI-Editor.exe，右鍵發(fā)送到桌面作為快捷方式，具體如下圖

【使用教程】

打開項目和創(chuàng)建項目
啟動FairyGUI編輯器后，首先顯示的是打開項目/創(chuàng)建項目的窗口：

歷史記錄 曾經(jīng)打開過的項目可以直接從列表中點擊打開。
刪除 點擊右上的垃圾桶按鈕刪除選定的打開歷史記錄。
打開其他 通過選擇一個項目描述文件 xxx.fairy 打開一個已有項目。
打開目錄 通過選擇項目所在的目錄打開一個已有項目。適用于打開2.x版本的項目。

編輯器支持同時打開多個項目。Windows平臺下，可以直接啟動多個FairyGUI編輯器。Mac平臺下，你可以在打開一個項目后，再點擊菜單“文件”->“在新窗口打開項目”打開其他項目。

在指定位置創(chuàng)建一個新的UI項目。
項目名稱 任意的項目名稱。
項目類型 UI項目類型，即目標(biāo)平臺。不同的平臺類型在資源組織、發(fā)布上有一定的差別。不需要擔(dān)心這里選擇錯了項目類型，在項目創(chuàng)建后可以隨時調(diào)整UI項目類型，操作位置在菜單“文件”->“項目屬性”里。

資源管理
FairyGUI的項目在文件系統(tǒng)的結(jié)構(gòu)為：

FairyGUI是以包為單位組織資源的。包在文件系統(tǒng)中體現(xiàn)為一個目錄。assets目錄下每個目錄都是一個包。包內(nèi)的每個資源都有一個是否導(dǎo)出的屬性，一個包只能使用其他包設(shè)置為已導(dǎo)出的資源，而不設(shè)置為導(dǎo)出的資源是不可訪問的。同時，只有設(shè)置為導(dǎo)出的組件才可以使用代碼動態(tài)創(chuàng)建。
包發(fā)布后可以得到一個描述文件和一張或多張紋理集（不同平臺的文件數(shù)量和打包方式可能有差別）。FairyGUI是不處理包之間的依賴關(guān)系的，如果B包導(dǎo)出了一個元件B1，而A包的A1元件使用了元件B1，那么在創(chuàng)建A1之前，必須保證B包已經(jīng)被載入，否則A1里的B1不能正確顯示（但不會影響程序正常運行）。這個載入需要由開發(fā)者手動調(diào)用，F(xiàn)airyGUI不會自動載入。
如何劃分包，有一個原則，就是不要建立交叉的引用關(guān)系。例如避免A包使用B包的資源，B包使用C包的資源這類情況。我們一般都建立一個或多個公共包，把整個項目需要頻繁使用到的資源放在這里，把一些基礎(chǔ)組件，例如按鈕、滾動條、窗口背景等也放到這里。其他包需要使用時直接從公共包拖入就可以了。除了公共包，其他包相互之間盡量不發(fā)生引用關(guān)系。簡潔的依賴關(guān)系可以使程序員更輕松地控制UI資源的載入和卸載。
包劃分的粒度一般沒有一個硬性的規(guī)定。在具體實踐中，有不同的方案，比如有的人喜歡分的比較細，一個模塊一個包；有的人喜歡包少一點，就把不同UI模塊的資源和組件都堆在一起。這些方案對UI的運行性能影響都不大。但是圖片資源盡量不要太分散，因為不同包的圖片是不能打在同一張紋理集上的，如果資源太分散，可能造成紋理集的留空過多，浪費空間。

增刪改資源
你可以直接在文件管理器（或Finder）進行這些操作：
增加資源 可以直接將素材放置到包目錄里。也可以將另外項目的包直接拷入到assets目錄。然后點擊庫面板上面的刷新按鈕。
移動資源 可以將素材在包內(nèi)各個文件夾里移動。但不能跨包移動，否則引用關(guān)系將丟失。然后點擊庫面板上面的刷新按鈕。
刪除資源 可以直接在包目錄里刪除素材；然后點擊庫面板上面的刷新按鈕。
替換資源 可以用外部工具打開素材編輯，也可以直接替換文件。這類操作無需刷新，返回到編輯器就可以看到最新修改的結(jié)果。

package.xml
每個包里都有一個package.xml文件，這個是包的數(shù)據(jù)庫文件，如果這個文件被破壞，那么包的內(nèi)容將無法讀取。在多人協(xié)作的情況下，如果package.xml出現(xiàn)沖突，請謹慎處理。

庫面板
進入編輯器后，主界面的左邊是庫面板。庫面板包括資源庫和收藏夾兩個子面板。

庫面板里采用樹狀結(jié)構(gòu)顯示。頂層節(jié)點是包，每個包下面可以創(chuàng)建文件夾?？梢灾苯釉阪I盤上按包名第一個字符的拼音的首字母，直接定位包。
可以直接將圖片、聲音、動畫、文字等素材從文件管理器（或Finder）中拖動到資源庫中。素材在同一個包中可以在各個文件夾中移動，也可以使用復(fù)制和粘貼功能。如果要更新素材，可以點擊資源，在右鍵菜單中選擇“更新資源”，也可以在文件管理器（或Finder）中直接替換文件，后者適合批量操作。
資源URL地址
在FairyGUI中，每一個資源都有一個URL地址。選中一個資源，右鍵菜單，選擇“復(fù)制URL”，就可以得到資源的URL地址。無論在編輯器中還是在代碼里，都可以通過這個URL引用資源。例如設(shè)置一個按鈕的圖標(biāo)，你可以直接從庫中拖入，也可以手工粘貼這個URL地址。這個URL是一串編碼，并不可讀，在開發(fā)中使用會造成閱讀困難，所以我們通常使用另外一種格式：ui://包名/資源名。兩種URL格式是通用的，一種不可讀，但不受包或資源重命名的影響；另一種則可讀性較高。
資源導(dǎo)出
包內(nèi)的每個資源都有一個是否導(dǎo)出的屬性，已導(dǎo)出的資源的圖標(biāo)右下角有一個小紅點。使用右鍵菜單提供的功能可以方便的切換一個或多個資源的導(dǎo)出屬性。
收藏夾
收藏夾提供了一個快速訪問常用組件的功能?？梢詫⒁恍┏Ｓ玫慕M件或素材放置在收藏夾里，便于快速訪問。也可以實現(xiàn)一個類似控件面板的功能。在資源庫里右鍵單擊一個或多個資源，然后在右鍵菜單中選擇“加入收藏夾”，就可以將資源加入收藏夾。

過濾顯示包
當(dāng)庫面板里的包比較多時，查找東西比較麻煩?？梢园岩恍┎怀Ｓ玫陌[藏起來。點擊庫面板上的

與編輯器鏈接
激活這個功能后，當(dāng)活動文檔發(fā)生切換時，會同時在資源庫中選中活動文檔對應(yīng)的組件。
快速定位
按資源名稱拼音或者英文的第一個字母，可以在當(dāng)前選中項的同一層次快速定位到該資源。
復(fù)制、粘貼和粘貼全部
庫里面的資源可以復(fù)制粘貼。使用右鍵菜單中的“復(fù)制” “粘貼” “粘貼全部”或者“Ctrl+C” “Ctrl+V”都可以完成。
“粘貼”和“粘貼全部”在跨包復(fù)制時體現(xiàn)區(qū)別。
粘貼全部 把選定的資源以及它（們）所有引用到的資源一并粘貼過來。
粘貼 只會粘貼選定的資源以及它（們）引用到但沒有設(shè)置為導(dǎo)出的資源?？旖萱I為Ctrl+V。
提示：復(fù)制、粘貼功能支持跨項目，同時打開兩個項目后，就可以互相復(fù)制粘貼。

主工具欄

屏蔽顯示控制器 屏蔽后所有被顯示控制器隱藏的內(nèi)容都會顯示出來。

屏蔽關(guān)聯(lián)系統(tǒng) 屏蔽后手動修改元件坐標(biāo)和大小關(guān)聯(lián)系統(tǒng)不會動作。

提醒信息 如果當(dāng)前文檔內(nèi)有同名對象，會顯示黃色嘆號。

在庫中顯示 點擊可在庫中定位這個組件。


側(cè)工具欄


可以在拖動和選擇兩種模式間切換。特別的，在選擇模式下，按住空格就可以臨時切換為拖動模式，釋放空格就可以切換為選擇模式。


基礎(chǔ)控件區(qū)域。點擊后再在舞臺上點擊一個位置，則在對應(yīng)位置生成一個對象。


組合和取消組合。組合的快捷鍵是Ctrl+G，取消組合的快捷鍵是Ctrl+Shift+G。


對齊操作。選定多個元件后，再點擊這里的按鈕，可以執(zhí)行對應(yīng)的對齊功能。例如選定兩個元件后，點擊左右居中，則兩個元件將設(shè)置為中線對齊。如果只選擇了一個元件，則該元件對容器組件執(zhí)行對應(yīng)的對齊功能。例如，選定一個元件后，點擊左右對齊，則元件將移到容器組件的中間位置。又例如，選定一個元件后，點擊相同寬度，則元件的寬度將設(shè)置為與容器組件相同。


自定義排列。點擊后彈出自定義排列的對話框。


控制器工具欄

點擊加號可以增加新的控制器。點擊控制器名稱可以進入控制器編輯界面。點擊控制器的各個頁面按鈕切換頁面。

動效工具欄

點擊加號可以增加新的動效。點擊動效名稱可以進入動效編輯界面。

顯示列表

這里顯示的當(dāng)前正在編輯的組件的顯示列表。按顯示順序排列，列表中越往下的元件顯示在越前面。
顯示列表面板的操作有：
點擊每行行頭“眼睛”對應(yīng)的位置可以隱藏元件，僅用于輔助編輯，不影響運行時。
點擊每行行頭“鎖”對應(yīng)的位置可以鎖定元件，鎖定后元件無法選中，僅用于輔助編輯，不影響運行時。
點擊鎖圖標(biāo)可以解鎖所有元件。
點擊眼睛圖標(biāo)可以解除所有元件的隱藏狀態(tài)。
在顯示列表中拖拽可以改變元件在顯示列表中的位置。

舞臺

舞臺是組件的編輯區(qū)域。添加內(nèi)容到舞臺的方法有：
側(cè)工具欄上點擊基礎(chǔ)控件，然后點擊舞臺。
從資源庫或收藏夾中直接拖拽資源到編輯區(qū)域。
可直接粘貼剪貼板中的文字或圖片。圖片會自動導(dǎo)入到資源庫，然后再放置到舞臺上。
可以從Windows資源管理器或者Finder中直接拖入資源。如果該資源是位于assets目錄下的，也就是說已經(jīng)是包里的資源里，那么對應(yīng)包里的資源會放置到舞臺上，不會發(fā)生資源重復(fù)導(dǎo)入到資源庫的情況。這個設(shè)計可以部分解決目前庫面板不能顯示所有圖片縮略圖的不便利性，因為在Windows資源管理器或者Finder中你可以方便的查看縮略圖，同時，如果你是使用多屏工作，還可以起到類似將庫面板放置單獨一屏的作用。
中間不同于周邊顏色的是組件區(qū)域。但你并不需要把所有內(nèi)容都放置到組件區(qū)域內(nèi)。默認情況下，超出組件區(qū)域的內(nèi)容依然會被顯示，但組件的大小僅由組件區(qū)域決定。某些特別的功能，例如濾鏡，只對組件區(qū)域生效，所以建議把內(nèi)容都放置在組件區(qū)域內(nèi)。

常用的舞臺操作有：
選定 點擊一個元件單選，按住SHIFT點擊多個元件多選。點擊空白處取消所有選擇。在空白處按下并拖動進行框選。
移動 按住元件拖動，如果拖動時按住SHIFT，則移動限制在垂直方向或者水平方向。使用鍵盤上、下、左、右箭頭鍵可以移動選定的元件，每按一次移動1像素，如果同時按下SHIFT鍵，則移動加速，每次移動10像素。
縮放 拖拽選定框邊緣的8個調(diào)整點，可以改變元件的寬度和高度。
組合 選定多個元件后，按CTRL+G建立一個組合。

【常見問題】

UI包加載失敗
如果你使用的FairyGUI編輯器版本小于3.1.5，那么包描述文件的格式為純文本，當(dāng)這個文件從GIT上拉下來時，有可能由于GIT的自動轉(zhuǎn)換換行符功能導(dǎo)致文件內(nèi)容發(fā)生變化從而造成FairyGUI識別錯誤。解決辦法是關(guān)閉GIT的自動轉(zhuǎn)換換行符功能，然后再重新拉一次下來。
如果你使用的FairyGUI編輯器版本大于等于3.1.5，那么包描述文件的格式已修改為二進制，不再受GIT的影響。仍然出現(xiàn)這個錯誤的原因是新的格式需要Unity SDK 1.8.3或以上版本支持。舊版本無法識別這個格式，就會報這個錯誤。解決辦法是升級你的Unity SDK，升級你的Unity SDK，升級你的Unity SDK，重要事情說三遍。
如果暫時不想升級，可以修改xxx.fairy（你的項目描述文件），將里面的version="3.1"改成version="3"，這樣編輯器就會使用舊的文本格式發(fā)布。
除了上面這個錯誤，如果包仍然不能加載，檢查包名和路徑是否正確，特別要注意包只能放置在Resources目錄或者它的子目錄下，否則就只能打AB包。再看看是不是Unity的項目放置在了帶中文名稱的目錄，這都有可能造成載入失敗。

顯示白屏/提示atlas not found
Unity5.5版本開始，紋理設(shè)置新增了TextureShape屬性，把他設(shè)置為2d就可以了。

運行報錯且看不到界面，但編輯模式?jīng)]問題
這種錯誤一般是因為使用UIPanel，原因可能有：
1.你的UI包沒有正確放置到Resources目錄，或者Resources拼錯了！太多新手犯這樣的錯誤。
2.如果有跨包引用，需要使用AddPackage手動載入依賴包，并且注意，AddPackage必須在UIPanel創(chuàng)建之前，建議放到Awake。
3.如果包發(fā)布后移動過位置，或者修改過名稱，重新設(shè)置一下UIPanel的包和組件名。

顯示不出圖片/文字，但沒有報錯
項目中沒有放置FairyGUI的著色器，即插件里Resources/Shaders里的著色器。請重新安裝插件。

UI顯示有重復(fù)，或者UI銷毀后依然顯示
1.場景里沒有放置主相機。
2.主相機的ClearFlags錯誤設(shè)置為了Depth。
3.場景里還有其他相機，且它的Culling Mask設(shè)置勾選了UI。

字體渲染效果不對
如果你設(shè)置了字體后，覺得字體效果不對，可以用以下的方式排查：
1.如果是只用了字體名稱，沒有使用ttf字體文件的，那么你需要再次確認你的操作系統(tǒng)（例如Windows）里是否有安裝這種字體，字體名稱是否正確。對于部分字體，Unity能識別的字體名稱不一定是字體的中文名稱。查看準(zhǔn)確的系統(tǒng)字體名稱，你可以將ttf文件拖入到Unity，就可以在Inspector的”Font Names”里看到正確的字體名稱。也可以下載FontCreator軟件，查看字體的Font Family屬性。
2.如果是用了ttf文件的，那么運行時在Project視圖，點擊ttf文件左邊的箭頭后，可以看到ttf文件下有Font Texture和Font Material。Font Texture里應(yīng)該有你游戲中使用到的文字，并能看到渲染效果。如果能看到，說明這個字體在Unity中的渲染效果就是這樣。