最近新项目要使用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");//创建UIPanelUIPanel 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;//最后，创建出UIpanel.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 简单入门相关推荐

unity开发入门_Unity游戏开发终极入门指南
unity开发入门 Unity is a great tool for prototyping everything from games, to interactive visualisations ...
Unity Shader入门精要学习笔记 - 第6章开始 Unity 中的基础光照
转自冯乐乐的<Unity Shader入门精要> 通常来讲,我们要模拟真实的光照环境来生成一张图像,需要考虑3种物理现象. 首先,光线从光源中被发射出来. 然后,光线和场景中的一些物体相交 ...
Unity 新手入门如何理解协程 IEnumerator yield
Unity 新手入门如何理解协程 IEnumerator 本文包含两个部分,前半部分是通俗解释一下Unity中的协程,后半部分讲讲C#的IEnumerator迭代器协程是什么,能干什么? 为了能通 ...
unity ui框架_[教程汇总+持续更新]Unity从入门到入坟——收藏这一篇就够了
----------------塔防(更新中),作者重写了基础篇(下方目录为:1.1(新) 基础)目前还在持续连载了5篇,因为不多我们更新完就能追到原作者的进度了------------------- ...
Unity快速入门之四 - Unity模型动画相关
最近要给公司的小伙伴做Unity入门,针对几个常用的知识进行快速入门介绍. Unity快速入门之一 3D基础概念.Camera.Canvas RenderMode的几种方式对比_翕翕堂 Unity快速 ...
Unity Shader入门精要第七章基础纹理之遮罩纹理
Unity系列文章目录文章目录 Unity系列文章目录前言一.实践参考前言遮罩纹理(mask texture)是本章要介绍的最后一种纹理,它非常有用,在很多商业游戏中都可以见到它的身影. ...
Unity Shader入门精要第四章：学习Shader 所需的数学基础--坐标空间
Unity系列文章目录文章目录 Unity系列文章目录前言一.4.6.1 为什么要使用这么多不同的坐标空间二.4.6.3 顶点的坐标空间变换过程 4.6.4 模型空间 4.6.6 观察空间 4 ...
《Unity Shader入门精要》笔记02 第1章+第2章
基础篇第1章+第2章 --本系列是基于人民邮电出版社<Unity Shader入门精要>(冯乐乐著 )的自学Unity Shader笔记,如果您发现了本文的纰漏,还望不吝指正. 基础篇 ...
【笨木头Unity】入门之旅010（完结）：Demo之四处找死（五）_UI
UI是游戏里必不可少的元素,在Unity里添加UI是比较轻松的事情,但要玩好它,可就不那么轻松了. 没关系,先入门. 笨木头花心贡献,啥?花心?不,是用心. 转载请注明,原文地址:http://www ...

FairyGUI 与 Unity 简单入门