FairyGUI概叙

FairyGUI介绍

FairyGUI是跨引擎的开源UI解决方案，它包含一个UI编辑器以及多个流行游戏引擎的运行库(SDK)，支持包括Unity,Unreal,Cocos2dx,Egret,Laya,Flash等等游戏引擎。

FairyGUI的工作流程

1.在FairyGUI编辑器中编辑UI；
2.将编辑好的UI导出对应资源（图集和配置文件）；
3.将资源导入对应引擎后，结合FairyGUI提供的运行库（SDK）进行UI功能的制作；

FairyGUI的优缺点

优点：

可以让美术同学使用编辑器进行UI面板的拼凑，降低美术同学的学习成本，美术不用学习如何使用游戏引擎；
方便项目UI部分的移植；
FairyGUI提供了比UGUI、NGUI更多的功能，方便我们的使用；

缺点：

由于它是跨引擎的工具，对部分引擎支持不到位，使用时会遇到一些bug，但Untiy作为主流引擎，相对来说问题较少；

FairyGUI基础

编辑器基础使用

1.项目文件夹结构：

assets：包内容放置目录，例如package1：每个包一个目录。目录名就是包名；
assets_xx：分支内容放置目录，xx就是分支名称，多个分支存在多个类似名称的目录；
settings:配置文件放置目录；
.objs：内部数据目录。不需要进行版本管理，这里的内容不需要共享；
.fairy：项目标识文件。文件名就是项目名，可以随便修改；

2.主界面说明：

菜单栏；
主工具栏：常用功能按钮；
工具栏和舞台区域；
状态栏，显示控制台输出的最后一条信息，点击可打开控制台；
其它功能视图：可以随意拖动位置，也可以关闭，在主菜单->视图中可以打开关闭后的窗口；

3.支持的格式：可以将资源直接拖入资源库中

图片（PNG、JPG、TGA、SVG等）
声音（MP3、wav等）
动画（spine、龙骨、gif、Flash等）
文字（TTF、位图文字）

包

1.包的定义：包是FairyGUI中用于组织资源的，它在文件系统中体现为一个目录，assets文件夹下的每个子目录都表示一个包，最终我们打包时也是以包为单位进行打包的，每个包中都有一个package.xml文件，它是用于记录这个包中的资源对应信息的，是非常重要的文件，包发布后可以得到一个描述文件和一张或多张纹理集（图集），我们在引擎中使用时，就是根据这个描述文件使用纹理中的图片来创建UI的，菜单栏——>资源——>新建包（或者点击快捷按钮）；

2.包的依赖：

说明：FairyGUI不处理包之间的依赖，假设有两个包A和B，A用到了包B中的元件，那么在使用A中内容时需要先手动加载包B相关内容；
建议：
- 不要建立交叉引用；
- 公共资源放在公共包中；
- 避免A用B，B用C这种复杂的关系；

3.资源URL地址：在FairyGUI中每个资源都对应了一个资源URL地址，选中一个资源，右键，会出现复制URL，就可以得到它的资源地址，无论在编辑器还是代码中我们都可以通过资源地址来得到资源，也可以通过ui://包名//资源名（注意：该格式地址是不包含文件夹的，只需要用包名和资源名）；

组件

1.组件的定义：

说明：组件，也可以理解为组合控件，所有的UI相关内容都在其中编辑显示，是我们的最基础容器，它可以包含一个或多个基础显示对象，也可以包含组件，我们之后编辑的所有UI内容都是以组件为容器，比如面板，按钮，输入框等等UI内容都是基于组件制作的，在FairyGUI的舞台编辑区域，编辑的就是组件和组件容器中的各种元件位置属性等等，最终我们发布UI文件后，在Unity中也是以组件为最小单位进行内容加载；
创建方式：菜单栏——>资源——>新建组件（或者点击快捷按钮）
意义：所有面板，复合控件都是以组件为容器进行制作的，之后在Unity加载编辑好的界面时也是以组件为最小单位进行加载的；

2.组件窗口检查器参数说明：

1.组件栏：
	最小\大尺寸：设置组件的尺寸限制，0表示不限制（注意：修改尺寸限制不会修改当前的宽高，即使宽高超出限制），点击轴心右侧三角形可以快速设置轴心的位置；
	
	初始名字：当组件在编辑器内被创建时，自动设置组件的名称为这里设置的，主要作用是，FairyGUI中要求窗口框架组件命名为frame，那么当我们创建一个窗口组件时，就可以在这里把初始名字设置为frame，以后每次使用更加方便；
	
	溢出处理：当组件中内容超出矩形区域时的处理方式（溢出处理不支持代码中动态修改，一开始就要设置好）
		可见：超出范围仍然可见；
		隐藏：超出范围内容部可见，相当于是一个矩形遮罩；
		垂直、水平、自由滚动：只要设置他们就可以做出类似滚动容器的效果，只不过没有滚动条；
		
	边缘：在溢出处理设置为隐藏或者滚动时，可以通过这个参数设置和边缘的留空 和 边缘虚化处理；
	自定义遮罩：设置组件内容的一个图片或者图形作为遮罩。遮罩只有预览模式才能看到效果（注意：定义了遮罩的组件，内部的元件永远无法和外部的元件合并DC）；
	
	反向遮罩（挖洞）：不勾选时，就是有像素的地方显示，没有的地方不显示。勾选后，相反；
	
	点击测试：在一些特殊需求中，需要用到不规则区域的点击测试；
		图形检测：组件中拖入一个图形，设置为多边形，然后把这个图形设置到点击测试中；
		像素检测：如果不规则图形带孔，图形无法画出来，这时就可以使用一种有透明通道的图片然后将图片拖入舞台，再拖入到点击测试中。透明的地方表示点击穿透的区域（像素检测的图片只能放置在和组件的同一包中，也不能用装载器，只能是图片）；
		
	点击穿透：默认情况下，组件的矩形区域将拦截点击，勾选后，点击事件可以穿透组件中没有内容的区域
	
	拓展：就是你要把该组件设置为哪种组合控件，修改后，都会有对应的属性产生，之后会对每个控件的属性详细讲解，我们可以通过扩展快速的做一些通用内容；
	
	背景颜色：辅助设计用，实际组件背景都是透明的，不会有颜色





2.其它栏（自定义区）：主要在编辑器中使用，运行后我们都通过代码获取任何对象，当组件被拖入到到其他组件后，能通过检查器设置的属性一般是固定的，例如一个按钮，我们可以改变它的标题、图标、是否选中等，这些都是编辑器提供的固定属性。但如果我在按钮中放置了额外的文本或者装载器，而且需要设定他们在实例化后的属性时，就需要用自定义属性，将组件的子元件甚至更深层次的元件的属性暴露出来。
	元件名称：元件的名称，可以用"."引用更深层次的元件，例如n0.n1.n2,表示组件n0的孩子n1的孩子n2。

	属性类型：目前支持两种属性，文本和图标；

	备注：可选填，如果填写了，则在检查器内使用这里的内容作为标题；




3.设计图栏：可以设定一个组件的设计图，设计图将显示在舞台上，可以设置显示在组件内容的底层或者上层，（使用设计图可以使拼接UI更加快速和精准，设计图不会发布到最终的资源中）；

发布说明

1.包发布及全局通用设置：

1.打包栏：发布的文件名以及路径
	包格式：推荐使用二进制，优化加载速度；
	分支处理：
	其他分辨率：打包的图片是否多打包倍数的图集；

2.纹理集栏：
	最大尺寸：一般推荐2048，推荐自动分页；
	尺寸选项：一般为2的n次幂，正方形的话长宽会一致，推荐允许选择，节省空间；
	裁剪图片空白：推荐勾选，图集节省空间
	分离Alpha通道：会生成俩张图集，推荐勾选，内存占用更少；
	
3.发布代码：

4.功能按钮：
	全部发布：发布所有包；
	仅发布定义：发布包列表中当前选中的包，但仅发布定义，不重新生成纹理集。通常发布的内容包括素材（图片、声音等）和定义文件， 如果你没有增删改素材，那么你可以仅发布定义文件，避免了重新生成图集带来的时间消耗；
	发布：发布包列表中选中的包；

2.导出内容说明：

png格式：图集文件（可能多张）；
.bytes的2进制文件：配置文件；

Unity中加载UI包

1.加载UI包
        //方法一：从Resources加载
        //将导出的UI文件放入Resources目录或者其子目录下
        //使用FairyGUI提供的 API加载对应UI

        //AddPackage会先使用传入的路径作为key进行检测，如果这个包已经添加了 不会重复添加
        //直接填写包名即可 不需要加_fui
        UIPackage teachPackage = UIPackage.AddPackage("UI/Teach");
        //遍历依赖包相关信息
        foreach (var item in teachPackage.dependencies)
        {
            //这样可以获取到 依赖包的名字
            UIPackage.AddPackage(item["name"]);
        }

        //方法二：从两个AssetBundle包加载
        //将定义文件和图集资源分别放入两个AssetBundle文件中
        //自己去加载对应的AB包
        //AddPackage在加载AB包时没有排重检测机制，需要自己判断
        //自己去判断 AB包 是否重复加载
        //AssetBundle resAB = null;
        //AssetBundle bytesAB = null;
        //UIPackage.AddPackage(bytesAB, resAB);

        //方法三：从一个AB包加载
        //将定义文件和图集打入一个AssetBundle文件中
        //AddPackage在加载AB包时没有排重检测机制，需要自己判断
        //AssetBundle AB = null;
        //UIPackage.AddPackage(AB);


2.卸载UI包:
        //当一个包不在使用时，可以卸载
        //包卸载后，所有包里的贴图等资源均会被卸载，创建出来的组件也无法显示
        //一般不建议包进行频繁装载卸载，因为每次装载卸载必然是要消耗CPU时间（意味着耗电）和产生大量GC的。
        //UI系统占用的内存是可以精确估算的，你可以按照包的使用频率设定哪些包是常驻内存的（建议尽量多）。
        UIPackage.RemovePackage("Teach");
        UIPackage.RemoveAllPackages();


3.包内存管理
        //1.AddPackage只有用到才会载入贴图、声音等资源。
        //如果你需要提前全部载入
        teachPackage.LoadAllAssets();

        //2.如果UIPackage是从AssetBundle中载入的，在RemovePackage时AssetBundle才会被Unload(true)。
        //如果你确认所有资源都已经载入了（例如调用了LoadAllAssets），也可以自行卸载AssetBundle。
        //如果你的ab是自行管理，不希望FairyGUI做任何处理的，可以设置UIPackage.unloadBundleByFGUI为false。
        UIPackage.unloadBundleByFGUI = false;

Unity中UIPanel加载界面

	PackageName
包名
	Componetn Name
组件名
	Package Path
引用的组件路径
	Render Mode
渲染模式
		Screen Space Overlay：UI始终显示在最前面
Screen Space Camera：可以自定义使用哪个正交摄像机渲染UI
World Space：在世界控件使用UI，用透视相机渲染，默认是主相机，如果不是，可以自己设置关联相机
		Rebder Camera：当渲染模式是后两种时，可以自己设置渲染UI的摄像机，如果不设置，默认为场景的主摄像机。
如果模式是World Space模式，如果不设置相机也没有主摄像机，UI无法点击
	Sorting order
排序显示顺序，越大的显示在越前面
	Fairy Batching：FairyGUI的批处理开关，切换这个值，可以在编辑模式下实时看到DC的变化。开启它后会开启深度调整，即使我们的UI层级没有刻意设置，底层也能帮助我们进行优化
	Hit Test Mode:
点击测试模式
默认：使用内置机制判断点击和触摸，不使用射线，效率较高
射线：使用射线判断，UIPanel会自动创建碰撞体，适用于UIPanel需要和其它3D物体交互时使用
	Touch Disabled：
勾选后，将关闭点击检测，如果UI没有可以交互的内容，可以勾选它提升性能
	Set Native Children Order：可以在UIPanel下挂其它3D对象，比如模型粒子，层级和UIPanel一样
勾选 该选项，可以上3D对象显示在UIPanel的层次上，相当于把3D物体插入到UI层次中
但是3D物体只能显示在UI上，不能穿插
	UI Transform：
当渲染模式为Screen Space时建议通过UI Transform设置
当渲染模式为World Space时建议通过Transform设置
	FIt Screen：
设置UIPanel适配屏幕

Fit Size：UI将铺满屏幕
Fit Width And Set Middle：UI将横向铺满屏幕，然后上下居中
Fit Height And Set Center：UI将纵向铺满屏幕，然后左右居中

FairyGUI概叙

FairyGUI介绍

FairyGUI的工作流程

FairyGUI的优缺点

FairyGUI基础

编辑器基础使用

包

组件

发布说明

Unity中加载UI包

Unity中UIPanel加载界面

FairyGUI基本元件

FairyGUI控件

普通文本

字体处理

富文本

输入文本

组

控制器

关联系统

标签

按钮

单选和多选框

进度条

滑动条

滚动条

滚动容器

列表

下拉框

Unity中的使用必备

组件拓展类

分辨率自适应

坐标系统

输入处理

事件机制

拖拽相关

插入其他对象

DrawCall优化

FairyGUI进阶

分支

多国语言

树

窗口

弹出功能

曲面UI

动效

其他功能