从0开始的Unity3D游戏开发 FGUI

发布于 2018-08-23  1141 次阅读


本篇中开始介绍FGUI框架
ET4.0版本中开始支持FGUI作为UI框架,FGUI功能丰富且无需写代码,美术/程序员都能用。
我个人来说,很乐意于将FGUI作为主要的生产工具使用,这里也照例记录学习路径。

对于没有接触过任何UI框架的新手来说,需要知道一些关于FGUI的介绍和初级使用视频,官方的肯定是最好的。
官方网址是FGUI
官网中有关于FGUI的详细API和教程,Unity使用者建议先看视频走一遍流程。

ET中使用FGUI

首先要找到支持FGUI的分支版本,可在ET的github中查找/下载。
ET-Branch_FGUI\FairyGUI是FGUI的工程目录;
ET-Branch_FGUI\Unity\Assets\Res\FairyGUI是包文件输出目录;
ET将使用FGUI发布的二进制文件读取UI配置;

为二进制文件添加Asset标记

DEMO中约定:包名为Lobby的二进制文件标记为lobby.unity3d
FGUI的发布文件名自动添加了“_fui.bytes”后缀

加载FGUI

使用event系统来处理界面加载操作。

FUIComponent fuiComponent = Game.Scene.GetComponent<FUIComponent>();
FUI ui = await FUILoginFactory.Create();
fuiComponent.Add(ui);

一个UI界面需要提供:用于初始化UI的工厂类+处理UI逻辑的组件
在本例中相当于:FUILoginFactory和FUILoginComponent

UI工厂类

UI工厂类读取了资源,并创建UI的Entity,也就是FUI,这里相当于使用FGUI的代码加载方式。
TextAsset asset = (TextAsset)loadFunc(assetPath + "_fui", ".bytes", typeof(TextAsset), out dm);
这里的FUI类似于其他Entity,如Gamer,与Hierarchy中的GameObject存在对应关系;
FUI绑定了一个GObject作为游戏中的物体基础;

UI组件

谈到组件就是一系列的awake/update,以及扩展方法,FUGI组件也需要在awake中绑定必要的ui元件;
包是FUI类型的Entity,输入框/按钮也是FUI类型的Entity;
使用二进制文件加载的组件并不能显示出ui元件本来的名字,只能看到UI类型名如:Button/Input;
可以通过FairyGUI编辑器浏览ui元件列表。
UI组件中获取包的Entity:self.GetParent<FUI>();
获取包中的ui元件:包.Get("元件名");
按钮元件添加点击事件:元件.GObject.asButton.onClick.Add(委托方法);
获取输入框元件字符串:元件.GObject.asTextInput.text;
因为FGUI的产品文档很健全,可以查看官方上的API,比如GObject Class。

UI逻辑迁移

在ET的FGUI分支中,演示了将UI中的逻辑代码转移到外部的LogicHelper,这样使用起来会方便很多,修改方法时不用再去找对应的UI组件文件,可以将此规范添加到日常写代码中。

FGUI效果预览

就ET-Unity前端来说,需要掌握各种元件的对外接口-执行事件,还需要知道各种元件的组合能实现什么效果。
因为一个FGUI包中可以包含多个元件/组件的特性,我们重点关注其可以实现的功能即可。

基础元件:图片/文本/按钮/列表
样式:布局方式/字体/颜色
变换:平移/旋转/动画
交互:按/拖动/扫
功能:背包/进度条/表情包/血条/章节/冷却/邮箱/聊天框/商城
扩展:多语言/自适应

选择一个文件夹创建新项目,打开项目;
新项目中会有一个默认的Package,也就是包,相当于一个容器,我们将其修改为自己想要的名字。
对于新创建的包,只能进行新建文件夹/重命名/包设置/发布等操作,无法编辑UI;
我们可以在文件-新建包中创建一个新的包;

组件

组件有舞台属性,所以也是一个容器,可以容纳复数的UI原件,实现一个UI功能。

如果希望获得代码方面的参考建议看官方文档或者ET小游戏集合


关注成长,注重因果。