FGUI🤣 好怀念(很久没用了)
官网: 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 的导入

直接上Unity Asset Store 搜索 下载导包进Unity

unity FGUI unity fgui 导入_unity FGUI


在官网下载的FGUI 打开 点击应用程序创建新项目

unity FGUI unity fgui 导入_官网_02


每个新建的FGUI 项目包含四个文件

unity FGUI unity fgui 导入_unity FGUI_03


点击最后一个文件可以快速打开FGUI 编辑器然后快速打开当前项目

第一个.objs 是内部数据目录,不需要加入版本管理(.git / .svn)

第二个.assets 是包数据放置目录 用来存放我们的资源

第三个就是 FGUI 的一些配置文件的目录

最后一个 项目识别文件,可以随便更改名字

unity FGUI unity fgui 导入_工具栏_04


资源面板用来存放所有的资源,一般只需要拖拽到package 里面就行

unity FGUI unity fgui 导入_工具栏_05


后面直接在Unity 导入包就可以

主工具栏

unity FGUI unity fgui 导入_UI_06


侧工具栏

unity FGUI unity fgui 导入_UI_07


一般基本操作都是在包下面新建组件(容器)

然后在组件里面添加我们的UI 图片 按钮 滑动条等各种UI 控件(元件)

查看控件属性面板

unity FGUI unity fgui 导入_unity FGUI_08


FGUI 的原点位置在左上角 ,勾选后将变到中间(一般不使用)

unity FGUI unity fgui 导入_工具栏_09


双击舞台中的图片可以弹出一些图片设置

unity FGUI unity fgui 导入_unity FGUI_10


制作序列帧动画

unity FGUI unity fgui 导入_官网_11


导入图片序列就好了

直接拖入gif 动图 会自动生成一个序列帧动画

文本里面点击输入后会变成输入框

unity FGUI unity fgui 导入_UI_12


可以使用正则表达式进行输入限制【0-9】

unity FGUI unity fgui 导入_工具栏_13


勾选UBB 语法让文本支持富文本操作

unity FGUI unity fgui 导入_工具栏_14


制作位图字体

unity FGUI unity fgui 导入_UI_15


选中显示列表的多个元件 点击侧工具栏的组合 让这三个元件形成一个组合

unity FGUI unity fgui 导入_工具栏_16


普通组和高级组的用法很强大,我还需要好好研究研究,后续更新

当选用高级组时

布局里面有水平布局,竖直布局

水平布局

unity FGUI unity fgui 导入_工具栏_17


它会占满你那个组并且按照元件的顺序来排列

unity FGUI unity fgui 导入_官网_18


如果竖直布局也是正好占满

unity FGUI unity fgui 导入_官网_19

设置绿色物体的关联

unity FGUI unity fgui 导入_工具栏_20


左左保证他俩左边水平距离相等

具体的还要自己试了才知道

被关联的那个物体动了才能决定主动关联的那个物体的移动

官网的一些关联例子

unity FGUI unity fgui 导入_工具栏_21


装载器和控制器

unity FGUI unity fgui 导入_unity FGUI_22


URL 里面输入左侧图片的地址(右键复制URL)或者直接拖入图片

新建控制器

添加三个元件分别设置属性控制显示c1 012时可见

修改组件上的控制器的012 分别控制三张图片元件的显示

就很简单

操控一个元件控制它的位置大小也是可行的

点击关键帧 勾选tween 让动画可以有连续的效果不会一卡一卡的

当滚动条与列表组合时,拖把会拉伸

unity FGUI unity fgui 导入_官网_23


需要设置滚动条的固定大小

unity FGUI unity fgui 导入_unity FGUI_24


打包进Unity

把想要打包的组件设置为可导出的状态

unity FGUI unity fgui 导入_工具栏_25

鼠标右键点击包然后点击发布

发布到项目文件夹下的样子

unity FGUI unity fgui 导入_unity FGUI_26


第一种显示FGUI 的方式

unity FGUI unity fgui 导入_工具栏_27


选中UIPanel 设置packageName 为刚才的FGUI 里面需要显示的组件名字

unity FGUI unity fgui 导入_官网_28

然后场景中会自动生成一个摄像头 我们需要跟之前的主摄像头做些调整

unity FGUI unity fgui 导入_unity FGUI_29


代码加载UI

unity FGUI unity fgui 导入_unity FGUI_30


按钮点击播放动效

unity FGUI unity fgui 导入_UI_31


FGUI里面导入了DoTween 的库文件 所以可以在项目中使用DoTween

想要取得某个组件下的元件可以直接GetChild()

unity FGUI unity fgui 导入_unity FGUI_32


unity FGUI unity fgui 导入_官网_33


给某一帧的动画添加标签

然后在这个动画运行到这一帧时执行某个方法

addValueCom.GetTransition(“t0”).SetHook(“AddValue”, AddAttackValue);
 给按钮元件添加方法
 mainUI.GetChild(“n0”).onClick.Add(() => { PlayUI(addValueCom); });
 获取当前组件的动效
 Transition t = targetCom.GetTransition(“t0”);
 添加播放完之后的回调
 t.Play(() =>
 {
 mainUI.GetChild(“n0”).visible = true;
 GRoot.inst.RemoveChild(targetCom);
 }
 );

使用Dotween 完成数值的增加

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

FGUI中的List 的numList 是指列表长度

numChildren 是指当前列表在屏幕上显示出来的的Item 的个数

当我们需要判断表中的Item 是否在列表居中的位置

unity FGUI unity fgui 导入_官网_34


list 滑动方法添加

unity FGUI unity fgui 导入_官网_35


下拉框选择进度条加载时间

unity FGUI unity fgui 导入_官网_36


动态加载RenderTexture

unity FGUI unity fgui 导入_UI_37


控制模型的左右旋转

unity FGUI unity fgui 导入_工具栏_38


暂时感觉没啥写了 后续有新的知识点会更新 太简单了 这个插件 无非就是API的积累 后面更新一个FGUI 的案例博客 哈哈啊哈哈哈哈哈哈哈啊哈😁