FairyGUI的項目文件結(jié)構(gòu)

.objs 內(nèi)部數(shù)據(jù)目錄。注意：不要加入版本管理，因為這里的內(nèi)容是不需要共享的。

assets 包內(nèi)容放置目錄，資源內(nèi)容都在這里面，里面還可以分不同的包，便于區(qū)分管理（看下圖）

settings 配置文件放置目錄。

****.fairy 項目識別文件，也就是項目名稱

目錄

在編輯器中對應(yīng)顯示如下：

編輯器目錄

編譯器主界面

標(biāo)題

注意左方功能區(qū)的顯示列表，按顯示順序排列，列表中越往下的元件顯示在越前面。可以在列表中直接拖拽改變元件改變它們在顯示列表中的位置。

動效時間軸

在左側(cè)功能區(qū)動效里面增加動效后雙擊動效即可進去時間軸

1. 時間顯示單位是秒

2. 參與動效的各個元件和屬性，左邊元件名稱可以起名規(guī)范些，以后若是想在Unity中用代碼控制也方便（因為代碼中控制是需要用名字來查找的），右側(cè)顯示的是屬性（XY-改變位置，Size-改變大小，Rotation-改變旋轉(zhuǎn)，還有改變透明度，顏色，縮放，傾斜，可見性，聲音，震動，濾鏡等等）。想要添加新屬性的話，在舞臺(中央操作區(qū))右鍵元件即可出現(xiàn)

3. 各個屬性的時間軸。 表示關(guān)鍵幀， 表示兩個關(guān)鍵幀之間使用插值動畫（右鍵創(chuàng)建Tween，支持自定義：選中關(guān)鍵幀后在右側(cè)功能區(qū)有緩動函數(shù)） ， 紅色小紅旗則表示這個關(guān)鍵幀有Label（標(biāo)簽），可以通過代碼按標(biāo)簽名稱訪問進而實現(xiàn)幀監(jiān)聽（比如走到某一幀執(zhí)行其他邏輯）。

4. 信息顯示區(qū) ，F(xiàn)PS是幀率，在右側(cè)功能區(qū)檢查器最上方修改；frame便是當(dāng)前從第幾幀開始播放；time表示播放頭的時間是多少，單位是秒

5. 時間軸放大/縮小，當(dāng)編輯的動效很長時，將她拉大即可

6. 時間軸上和Unity時間軸一樣都可以在上面操作，左鍵包含單選/多選/拖動，右鍵包含轉(zhuǎn)換為關(guān)鍵幀/清除關(guān)鍵幀/插入幀/創(chuàng)建或刪除Tween等

引用/搜索/控制臺

引用：查詢一個資源被其他資源引用的情況，或者查詢一個資源引用其他資源的情況，關(guān)鍵是還能替換，6的很

搜索：輸入關(guān)鍵字，檢索出相關(guān)內(nèi)容

控制臺：顯示軟件的提示信息，分為提示信息，警告信息和錯誤信息。

測試界面：

當(dāng)你想看看運行效果的時候，可以點擊主工具欄的測試按鈕或者F5運行

你可以設(shè)置全局適配參數(shù)，修改設(shè)備預(yù)覽，橫豎屏等操作。當(dāng)時要注意在動效播放過程中，不要改變屏幕大小，否則會出現(xiàn)異常。

項目設(shè)置

默認(rèn)值

注意：這些參數(shù)是編輯器內(nèi)的默認(rèn)值，與運行時無關(guān)。運行時需要用UIConfig重新進行全局的設(shè)置。而且后者的設(shè)置也不一定需要和這里的設(shè)置相同。

字體：修改所有文本的默認(rèn)字體，可以使用項目中的字體（ttf文件）也可以用系統(tǒng)自帶的（你電腦C:\Windows\Fonts下有什么字體這就有什么字體）

字體顏色/大?。涸O(shè)置在舞臺中（中央操作區(qū)）新建文本的默認(rèn)顏色和大小

默認(rèn)軸心：即坐標(biāo)原點，默認(rèn)左上角即可

垂直滾動條/水平滾動條：設(shè)置制作UI時所有帶滾動功能的容器需要使用的滾動條資源。這就是說，你將一個組件或者一個列表的“溢出處理”設(shè)置為“垂直滾動”、“水平滾動”或者“自由滾動”后，不需要每次設(shè)置滾動條，自動就會使用這里設(shè)置的滾動條資源。如果某個組件需要使用和全局設(shè)置不一樣的滾動條，在當(dāng)前組件拖動上去覆蓋掉即可。全局設(shè)置和單獨設(shè)置都支持。

按鈕點擊聲音：設(shè)定按鈕的默認(rèn)點擊聲音。設(shè)置后，所有按鈕點擊都會播放這個聲效，除非按鈕自己獨立設(shè)置另外的聲效。這個設(shè)置僅用于編輯器內(nèi)，運行時使用UIConfig.buttonSound設(shè)定。

快捷菜單

在這設(shè)置后，當(dāng)以后你在任何地方修改字體大小顏色或字體樣式的時候，不用設(shè)置了，直接用下拉菜單選擇即可。

項目分支

對有的項目來說這節(jié)很重要。

分支功能是用來實現(xiàn)多態(tài)設(shè)計的，比如多語言版本存在UI的差別，除了基本文字的中英文差別，還有圖片藝術(shù)字中英文等差別，要保證資源名稱一致，這和Android的思想一致。

我們都是在主干上開發(fā)，隨時可以建立任意多個分支，然后分支上添加有差別的內(nèi)容即可

注意，它和代碼倉庫中的分支概念不一樣。UI分支不包含主干的資源，它只放置與主干有差別的內(nèi)容，降低資源容量

詳細(xì)內(nèi)容可看官方文檔教程

發(fā)布設(shè)置

紋理集

發(fā)布的時候編輯器會將項目中的圖片資源放到一起，當(dāng)放不小的時候會自動分頁，如圖

這的設(shè)置修改影響著發(fā)布出來的紋理集大小，一般默認(rèn)的即可，自己可以修改看看都有什么效果，除了發(fā)布路徑你自己修改，其他內(nèi)容一般情況下保持默認(rèn)的即可。

難道真這么簡單？小空剛開始也挺順利，后面資源多了也開始蹦出不少問題：

問題一：Gif圖的序列幀剛好被分配到了兩個紋理集上，而要求Gif幀需要在一張紋理集上，編輯器就會在你發(fā)布的時候給你提示：發(fā)布失敗，動畫被自動發(fā)布到不同的紋理集上，這會導(dǎo)致…

想要解決，我們只需要將這個Gif圖改為單獨的紋理集就行了（雙擊會彈出設(shè)置）。Gif在編輯器中是動畫形式，詳情請看本系列的動畫小節(jié)。

問題二：再深入的問題又來了，一款游戲，再小他也是有不少資源的。紋理集設(shè)置默認(rèn)是2048*2048像素的（在發(fā)布設(shè)置中可修改），保不齊修改更大的尺寸（4096像素？或者8192像素？）。發(fā)布后放到Unity運行你會發(fā)現(xiàn)，哎呦我去，怎么變模糊了？UI給圖給岔劈了？不對啊，在FairyGUI中看沒問題啊。難道問題出在Unity？

不錯，你發(fā)布出來的紋理集資源放到Unity里默認(rèn)是2048的，你已經(jīng)修改成更高像素的了，還用2048的來解析，不出問題才怪。只需要修改最大尺寸對應(yīng)上即可。

問題三：以為這就完了？還能再深入，這點小空也是著實被坑了一把。即使你設(shè)置了如上內(nèi)容，睜大鈦合金雙眼仔細(xì)看，還是能看出一些不舒服的地方：可能部分有點點“灰邊”，而在FairyGUI中卻沒有。

沒錯又是Unity搞得鬼，看上圖右側(cè)部分，有個壓縮選項，默認(rèn)Unity紋理集是法線壓縮，你改為none即可。

讀者要是第一次學(xué)習(xí)FairyGUI，這幾個問題能看著不知其所以然。沒關(guān)系，接著往下了解，當(dāng)看完教程實際上手后，你會發(fā)現(xiàn)這的坑。

FairyGUI基礎(chǔ)元素

============

元件

–

在舞臺（中央操作區(qū)）的任意都是元件，右邊操作區(qū)是元件的屬性面板設(shè)置

基礎(chǔ)元件：圖片，圖形，動畫，文本，裝載器，組件

組合型元件：標(biāo)簽，按鈕，下拉框，滾動條，滑動條，進度條

特殊元件：列表，樹

不同屬性面板可修改的內(nèi)容大同小異，基本圍繞在修改名稱，位置，尺寸，縮放，軸心，遮罩，穿透，文本修改，圖片，屬性控制（縮放移動等過度動效）。

圖片

–

視覺效果上最常見實現(xiàn)之一就是圖片了，她是FairyGUI中最基礎(chǔ)的元素，它的設(shè)計是盡量考慮到簡潔而且高效的。支持的格式PNG，JPG，TGA，SVG。

在這我們強調(diào)下九宮格縮放和平鋪，九宮格繪制會遵循下面的規(guī)則：

1. 保持4個角部分不變形

2. 單向拉伸4條邊（即在4個角兩兩之間的邊，比如上邊，只做橫向拉伸）

3. 雙向拉伸中間部分（即九宮格的中間部分，橫向，縱向同時拉伸，PS：拉伸比例不一定相同）

這個Android的.9圖片異曲同工

如果你想使用平鋪來進行縮放的話，除了Flash和Haxe版本，應(yīng)該盡量避免使用較小面積的圖片平鋪填充到較大的面積，因為這樣會產(chǎn)生大量的網(wǎng)格，甚至可能溢出報錯。

圖片還支持填充效果，比如順時針，90度等，修改填充比列可以實現(xiàn)技能CD冷卻效果。

資源適配

Android有布局適配，里面同樣需要對mdpi,xhdpi,xxhdpi等切不同分辨率的圖，F(xiàn)airyGUI同樣支持，你只需要讓美工切出圖，并且相同圖片不同分辨率的文件名后綴用@2x、@3x、@4x結(jié)尾，只有放好資源即可，在發(fā)布對話框里的時候勾選@2x，@3x，@4x選項，后續(xù)處理機制是自動無感知的，我們不需要關(guān)心。

動畫

–

編輯器支持創(chuàng)建、編輯和使用序列幀動畫。創(chuàng)建序列幀動畫的方式共有三種：

1. 使用Adobe Animate CC/Flash等動畫編輯工具制作好動畫，導(dǎo)出帶plist或eas擴展名的描述文件以及相關(guān)的貼圖（應(yīng)放置在相同目錄），然后將描述文件（僅描述文件，不是貼圖）拖入編輯器即可生成動畫素材。

2. 點擊菜單“資源”->”新建動畫”，或者點擊主工具欄按鈕，可以創(chuàng)建一個新的空白動畫。然后在動畫編輯界面點擊“導(dǎo)入圖片序列”，導(dǎo)入多張圖片。

3. 直接拖入一個GIF文件到編輯器，GIF會自動轉(zhuǎn)換為序列幀動畫。

無論從何種方式創(chuàng)建的動畫，在編輯器里，動畫素材都是以一個單一文件存在（擴展名為jta）。也就是說，無論動畫是從庫里的圖片文件創(chuàng)建的，還是從外面導(dǎo)進來的，都不會再有對單個圖片的依賴。例如，如果你是從資源庫里拖圖片進入動畫編輯器創(chuàng)建動畫的，創(chuàng)建完成后，這些圖片與動畫再沒有任何關(guān)系。如果你要設(shè)置動畫所在的紋理集，在動畫編輯器里對動畫進行設(shè)置，對那些圖片設(shè)置是無效的。

圖形

–

FairyGUI支持生成簡單的圖形，比如矩形，圓形，正多邊形，和多邊形（這個支持任意編輯），還有一個無（空白），這個無，她不消耗任何顯示資源，一般用來做占位用途，但有一點這個空白類型的圖形和全透明的圖形是不一樣的。透明的圖形可以阻擋點擊事件，而空白類型的圖形點擊事件會穿透下去。

強調(diào)：不要小瞧這個圖形組件，她的作用可真不小，小空玩的不亦樂乎，可謂是發(fā)揮極限。

拿來阻擋事件，拿來做多樣化遮罩都是小操作，什么偽關(guān)聯(lián)，偽動效，各種偽中介。

我會在后續(xù)的案例教程中實踐應(yīng)用到，記得給個三連哦（關(guān)注點贊+收藏）

剛才說了多邊形是支持編輯的，那怎么編輯呢？

常用的操作有：

1. 拖動圓點調(diào)整頂點位置；

2. 左鍵點擊一個圓點，在檢查器里改變點的坐標(biāo)數(shù)值；

3. 右鍵點擊舞臺，選擇右鍵菜單中的“增加頂點”；

4. 右鍵點擊一個圓點，選擇右鍵菜單中的“刪除頂點”；

5. 在檢查器里勾選“鎖定形狀”，然后通過第1或者第2種方法改變某個頂點位置，其他頂點會同時改變位置，相當(dāng)于一個整體移動所有頂點的效果。

占位

上面說了占位，就跟排隊買票或者打飯一樣，你有事不在先找個人幫你占著排隊，等你回來和對方替換一下?？瞻讏D形就是這個功能，你可以在Unity中用代碼來將原生對象放進這個占位上，blankObject.SetNativeObject(UnitySprite); 很絲滑的就插進去了。

裝載器

裝載,，裝載，裝裝載載，加載，加載，加加載載，一看就是用來動態(tài)載入資源的玩意。

具有什么屬性右側(cè)一目了然，可以隨便試試，一般勾選下自動大小就行。重點是我們?nèi)绾蝿討B(tài)賦值：利用GLoader

GLoader可以載入圖片、動畫和組件。如果是UI包里的資源，那么通過“ui://包名/圖片名”這種格式的地址就可以載入。但實際項目中，可能我們還需要載入和顯示一些不在UI包里的，我們稱之為“外部”的圖片。默認(rèn)的GLoader具有有限度的的加載外部資源的能力，它們是：

1. AS3 使用flash.display.Loader加載的外部資源。

自我介紹一下，小編13年上海交大畢業(yè)，曾經(jīng)在小公司待過，也去過華為、OPPO等大廠，18年進入阿里一直到現(xiàn)在。

深知大多數(shù)Android工程師，想要提升技能，往往是自己摸索成長或者是報班學(xué)習(xí)，但對于培訓(xùn)機構(gòu)動則幾千的學(xué)費，著實壓力不小。自己不成體系的自學(xué)效果低效又漫長，而且極易碰到天花板技術(shù)停滯不前！

因此收集整理了一份《2024年Android移動開發(fā)全套學(xué)習(xí)資料》，初衷也很簡單，就是希望能夠幫助到想自學(xué)提升又不知道該從何學(xué)起的朋友，同時減輕大家的負(fù)擔(dān)。

既有適合小白學(xué)習(xí)的零基礎(chǔ)資料，也有適合3年以上經(jīng)驗的小伙伴深入學(xué)習(xí)提升的進階課程，基本涵蓋了95%以上Android開發(fā)知識點，真正體系化！

由于文件比較大，這里只是將部分目錄大綱截圖出來，每個節(jié)點里面都包含大廠面經(jīng)、學(xué)習(xí)筆記、源碼講義、實戰(zhàn)項目、講解視頻，并且后續(xù)會持續(xù)更新

如果你覺得這些內(nèi)容對你有幫助，可以添加V獲取：vip204888 （備注Android）

學(xué)習(xí)分享

在當(dāng)下這個信息共享的時代，很多資源都可以在網(wǎng)絡(luò)上找到，只取決于你愿不愿意找或是找的方法對不對了

很多朋友不是沒有資料，大多都是有幾十上百個G，但是雜亂無章，不知道怎么看從哪看起，甚至是看后就忘

如果大家覺得自己在網(wǎng)上找的資料非常雜亂、不成體系的話，我也分享一套給大家，比較系統(tǒng)，我平常自己也會經(jīng)常研讀。

2021最新上萬頁的大廠面試真題

七大模塊學(xué)習(xí)資料：如NDK模塊開發(fā)、Android框架體系架構(gòu)…

只有系統(tǒng)，有方向的學(xué)習(xí)，才能在段時間內(nèi)迅速提高自己的技術(shù)。

這份體系學(xué)習(xí)筆記，適應(yīng)人群：
**第一，**學(xué)習(xí)知識比較碎片化，沒有合理的學(xué)習(xí)路線與進階方向。
**第二，**開發(fā)幾年，不知道如何進階更進一步，比較迷茫。
第三，到了合適的年紀(jì)，后續(xù)不知道該如何發(fā)展，轉(zhuǎn)型管理，還是加強技術(shù)研究。如果你有需要，我這里恰好有為什么，不來領(lǐng)??！說不定能改變你現(xiàn)在的狀態(tài)呢！
由于文章內(nèi)容比較多，篇幅不允許，部分未展示內(nèi)容以截圖方式展示

了

很多朋友不是沒有資料，大多都是有幾十上百個G，但是雜亂無章，不知道怎么看從哪看起，甚至是看后就忘

如果大家覺得自己在網(wǎng)上找的資料非常雜亂、不成體系的話，我也分享一套給大家，比較系統(tǒng)，我平常自己也會經(jīng)常研讀。

2021最新上萬頁的大廠面試真題

[外鏈圖片轉(zhuǎn)存中…(img-niUh0oPq-1711964527837)]

七大模塊學(xué)習(xí)資料：如NDK模塊開發(fā)、Android框架體系架構(gòu)…

[外鏈圖片轉(zhuǎn)存中…(img-FlmqZO6y-1711964527838)]

只有系統(tǒng)，有方向的學(xué)習(xí)，才能在段時間內(nèi)迅速提高自己的技術(shù)。

這份體系學(xué)習(xí)筆記，適應(yīng)人群：
**第一，**學(xué)習(xí)知識比較碎片化，沒有合理的學(xué)習(xí)路線與進階方向。
**第二，**開發(fā)幾年，不知道如何進階更進一步，比較迷茫。
第三，到了合適的年紀(jì)，后續(xù)不知道該如何發(fā)展，轉(zhuǎn)型管理，還是加強技術(shù)研究。如果你有需要，我這里恰好有為什么，不來領(lǐng)取！說不定能改變你現(xiàn)在的狀態(tài)呢！
由于文章內(nèi)容比較多，篇幅不允許，部分未展示內(nèi)容以截圖方式展示

本文已被CODING開源項目：《Android學(xué)習(xí)筆記總結(jié)+移動架構(gòu)視頻+大廠面試真題+項目實戰(zhàn)源碼》收錄文章來源地址http://www.zghlxwxcb.cn/news/detail-851522.html

到了這里，關(guān)于Unity跨平臺UI解決方案：可能是最全的FairyGUI系列教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！