本文链接： https://blog.csdn.net/wangjiangrong/article/details/90448284

最近新项目要使用FairyGUI，好处是方便美术那边拼UI界面给程序这边用。所以对FairyGUI进行了一些简单的了解和试手，官网上也有详细的示例和文档：http://www.fairygui.com/guide/

本文主要纪录了一个简单的FairyGUI导出到Unity并在Unity上显示UI界面的过程。本demo简单的绘制了一个登陆界面的UI，如图（丑是丑了点！）：

准备工作

首先下载好编辑器FairyGUI Editor以及对应的unity SDK。下载链接

然后在unity工程中导入下载好的package包，同时创建一个Resources目录用于存放FairyGUI导出的文件（当然后期需要使用AB包的方式来读取导出文件，这边就不做拓展了）。

绘制UI

分析

如图所示，可以分解为两个输入框，两个按钮和若干个文本框。考虑到后期维护，我们可以把例如按钮输入框这种常用的组件放置在一个公共包中（FairyGUI是以包为单位组织资源），供外部的其他包使用（除了公共包，其他包相互之间尽量不发生引用关系）。

然后再一个新包里面放置我们要绘制的UI界面（研究的还不够深入，目前的想法是一个系统一个包，例如背包系统，商城系统，个人信息系统等。每个包里包含若干个UI界面）

绘制公共组件

我们打开编辑器创建一个新的空工程，然后创建一个新的包CommonPackage

按钮

创建好CommonPackage后，我们可以先从外部拖动一些要使用到的图片资源到这个目录下，用于做按钮的背景图，然后我们在上方工具栏资源->新建按钮，创建一个公用的按钮ConfirmBtn，如图

具体的一些设置这里就不累赘了，官方文档里面讲解的很详细。同时再制作一个CancelBtn，做取消按钮。

输入框

接着我们要制作一个输入框，根据文档我们知道，当文本组件的属性设置为输入文本的时候，该文本可以变成一个输入框。

但是只是一个简单的文本组件，是没有边框背景色等属性。因此我们需要对其优化一下下。

首先我们新建一个组件Input，大小为200*40。为其添加一个同等大小的 "图形"，用于做输入框的底图和边框。然后再添加一个"文本"，设置为输入文本，作为输入框，如图

此时还存在一个问题，就是当组件缩放的时候，组件和文本的大小并不会跟着缩放，因此我们要为其添加关联。

容器组件即为父控件，含义类似于，高度和宽度保持和父控件一致，这样我们就可以随意的缩放Input了。关联有很多的选项，详情请见关联系统

设置导出

最后我们要将新建的三个组件ConfirmBtn，CancelBtn，Input，右键->设置为导出，否则的话，当将其拖到其他包的UI使用时，会提示"无法拖入其他包的未导出资源"的错误。（图片资源不用设置导出，即使发布的时候，也会自动生成导出）

绘制界面

首先新建一个包LoginPackage，添加背景图，然后创建一个组件LoginPanel，大小为960*540。首先将资源目录中的背景图直接拖到组件中，记得要设置关联属性，使背景图可以自适应。然后将CommonPackage包中的按钮输入框直接拖进去，然后添加一些文本等等即可。

发布

UI都做好之后，点击工具栏的文件->发布设置，编辑全局设置中，路径选择我们的Unity工程的Resources目录，点击全部发布即可（不用生成代码）。生成的文件如下：

_fui.byte文件及每个包对应的发布文件，_atlas0为按钮的两张背景图的图集，_atlas_ko9o1为界面的背景图。优化策略为，UI的一些小图，设置到图集当中，背景等大图单独导出。“单独（NPOT）”表示这张图片按原大小直接输出。注意：在Unity中，非2的幂大小的纹理不支持压缩格式，只能为RGBA或RGBA。详情见文档

Unity展示

首先在场景中创建一个GameObject，命名为UIRoot，Layer选UI，Position为(0,0,0)，为其添加组件UIContentScaler用于适配，如图

然后新建一个脚本Launch.cs，挂在UIRoot上

using FairyGUI;
using UnityEngine;

public class Launch : MonoBehaviour
{
    GComponent m_root;
    GTextInput m_inputAccount;
    GTextInput m_inputPwd;
    GButton m_confirmBtn;
    GButton m_cancelBtn;

    void Start()
    {
        //加载包
        UIPackage.AddPackage("CommonPackage");
        UIPackage.AddPackage("LoginPackage");

        //创建UIPanel
        UIPanel panel = gameObject.AddComponent<UIPanel>();
        panel.packageName = "LoginPackage";
        panel.componentName = "LoginPanel";
        //设置renderMode的方式
        panel.container.renderMode = RenderMode.ScreenSpaceOverlay;
        //设置fairyBatching的方式
        panel.container.fairyBatching = true;
        //设置sortingOrder的方式
        panel.SetSortingOrder(1, true);
        //设置hitTestMode的方式
        panel.SetHitTestMode(HitTestMode.Default);
        panel.fitScreen = FitScreen.FitSize;
        //最后，创建出UI
        panel.CreateUI();

        //根据FairyGUI中设置的名称找到对应的组件（注意输入框的查找）
        m_root = panel.ui;
        m_inputAccount = m_root.GetChild("InputAccount").asCom.GetChild("Input").asTextInput;
        m_inputPwd = m_root.GetChild("InputPwd").asCom.GetChild("Input").asTextInput;
        m_confirmBtn = m_root.GetChild("ConfirmBtn").asButton;
        m_cancelBtn = m_root.GetChild("CancelBtn").asButton;

        //密码框显示*号
        m_inputPwd.displayAsPassword = true;

        //添加点击事件
        m_confirmBtn.onClick.Add(OnClickConfirm);
    }

    void OnClickConfirm()
    {
        Debug.Log("account:" + m_inputAccount.text + "     pwd:" + m_inputPwd.text);
    }
}

因为创建UIPanel的时候，FairyGUI会自动创建一个Stage Camera用于渲染UI界面。所以我们将原场景的Main Camera删除，或者剔除UI层的渲染。

大功告成，运行即可！

FairyGUI 与 Unity 简单入门