FGUI🤣 好懷念(很久沒用了)
官網(wǎng)： https://www.fairygui.com/product.html
教程：https://www.fairygui.com/docs/guide/unity/index.html
API:https://www.fairygui.com/api/html/9b3868b6-73f2-a7b9-0f13-8b1eb3441ecd.htm

FGUI 在Unity 的導(dǎo)入
直接上Unity Asset Store 搜索 下載導(dǎo)包進(jìn)Unity

在官網(wǎng)下載的FGUI 打開 點(diǎn)擊應(yīng)用程序創(chuàng)建新項(xiàng)目

每個(gè)新建的FGUI 項(xiàng)目包含四個(gè)文件

點(diǎn)擊最后一個(gè)文件可以快速打開FGUI 編輯器然后快速打開當(dāng)前項(xiàng)目
第一個(gè).objs 是內(nèi)部數(shù)據(jù)目錄，不需要加入版本管理(.git / .svn)
第二個(gè).assets 是包數(shù)據(jù)放置目錄 用來(lái)存放我們的資源
第三個(gè)就是 FGUI 的一些配置文件的目錄
最后一個(gè) 項(xiàng)目識(shí)別文件，可以隨便更改名字

資源面板用來(lái)存放所有的資源，一般只需要拖拽到package 里面就行

后面直接在Unity 導(dǎo)入包就可以
主工具欄

側(cè)工具欄

一般基本操作都是在包下面新建組件（容器）
然后在組件里面添加我們的UI 圖片 按鈕 滑動(dòng)條等各種UI 控件（元件）
查看控件屬性面板

FGUI 的原點(diǎn)位置在左上角 ，勾選后將變到中間（一般不使用）

雙擊舞臺(tái)中的圖片可以彈出一些圖片設(shè)置

制作序列幀動(dòng)畫

導(dǎo)入圖片序列就好了
直接拖入gif 動(dòng)圖 會(huì)自動(dòng)生成一個(gè)序列幀動(dòng)畫
文本里面點(diǎn)擊輸入后會(huì)變成輸入框

可以使用正則表達(dá)式進(jìn)行輸入限制【0-9】

勾選UBB 語(yǔ)法讓文本支持富文本操作

制作位圖字體

選中顯示列表的多個(gè)元件 點(diǎn)擊側(cè)工具欄的組合 讓這三個(gè)元件形成一個(gè)組合

普通組和高級(jí)組的用法很強(qiáng)大，我還需要好好研究研究，后續(xù)更新
當(dāng)選用高級(jí)組時(shí)
布局里面有水平布局，豎直布局
水平布局

它會(huì)占滿你那個(gè)組并且按照元件的順序來(lái)排列

如果豎直布局也是正好占滿

設(shè)置綠色物體的關(guān)聯(lián)

左左保證他倆左邊水平距離相等
具體的還要自己試了才知道
被關(guān)聯(lián)的那個(gè)物體動(dòng)了才能決定主動(dòng)關(guān)聯(lián)的那個(gè)物體的移動(dòng)
官網(wǎng)的一些關(guān)聯(lián)例子

裝載器和控制器

URL 里面輸入左側(cè)圖片的地址（右鍵復(fù)制URL）或者直接拖入圖片
新建控制器
添加三個(gè)元件分別設(shè)置屬性控制顯示c1 012時(shí)可見
修改組件上的控制器的012 分別控制三張圖片元件的顯示
就很簡(jiǎn)單
操控一個(gè)元件控制它的位置大小也是可行的
點(diǎn)擊關(guān)鍵幀 勾選tween 讓動(dòng)畫可以有連續(xù)的效果不會(huì)一卡一卡的
當(dāng)滾動(dòng)條與列表組合時(shí)，拖把會(huì)拉伸

需要設(shè)置滾動(dòng)條的固定大小

打包進(jìn)Unity
把想要打包的組件設(shè)置為可導(dǎo)出的狀態(tài)

鼠標(biāo)右鍵點(diǎn)擊包然后點(diǎn)擊發(fā)布
發(fā)布到項(xiàng)目文件夾下的樣子

第一種顯示FGUI 的方式

選中UIPanel 設(shè)置packageName 為剛才的FGUI 里面需要顯示的組件名字

然后場(chǎng)景中會(huì)自動(dòng)生成一個(gè)攝像頭 我們需要跟之前的主攝像頭做些調(diào)整

代碼加載UI

按鈕點(diǎn)擊播放動(dòng)效

FGUI里面導(dǎo)入了DoTween 的庫(kù)文件 所以可以在項(xiàng)目中使用DoTween
想要取得某個(gè)組件下的元件可以直接GetChild()


給某一幀的動(dòng)畫添加標(biāo)簽
然后在這個(gè)動(dòng)畫運(yùn)行到這一幀時(shí)執(zhí)行某個(gè)方法
addValueCom.GetTransition(“t0”).SetHook(“AddValue”, AddAttackValue);
給按鈕元件添加方法
mainUI.GetChild(“n0”).onClick.Add(() => { PlayUI(addValueCom); });
獲取當(dāng)前組件的動(dòng)效
Transition t = targetCom.GetTransition(“t0”);
添加播放完之后的回調(diào)
t.Play(() =>
{
mainUI.GetChild(“n0”).visible = true;
GRoot.inst.RemoveChild(targetCom);
}
);
使用Dotween 完成數(shù)值的增加

DOTween.To(()=>startValue,x=> { addValueCom.GetChild("n3").text =Mathf.Floor(x).ToString(); },endValue,0.3f).SetEase(Ease.Linear).SetUpdate(true);

FGUI中的List 的numList 是指列表長(zhǎng)度
numChildren 是指當(dāng)前列表在屏幕上顯示出來(lái)的的Item 的個(gè)數(shù)
當(dāng)我們需要判斷表中的Item 是否在列表居中的位置

list 滑動(dòng)方法添加

下拉框選擇進(jìn)度條加載時(shí)間

動(dòng)態(tài)加載RenderTexture
控制模型的左右旋轉(zhuǎn)

暫時(shí)感覺沒啥寫了 后續(xù)有新的知識(shí)點(diǎn)會(huì)更新 太簡(jiǎn)單了 這個(gè)插件 無(wú)非就是API的積累 后面更新一個(gè)FGUI 的案例博客 哈哈啊哈哈哈哈哈哈哈啊哈😁

總結(jié)

以上是生活随笔為你收集整理的FGUI 使用教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。