Fairy下载和使用

写在最前:本系列中将会涉及到 Unity,C#,Lua和FairyGUI(FGUI)。

FairyGUI介绍

官网: FairyGUI

编辑器下载: FairyGUI

截至文档记录最新版: https://res.fairygui.com/FairyGUI-Editor_2022.1.0p1.zip

编辑器使用教程: FairyGUI

Unity版教程配套示例资源下载:

Master:https://github.com/fairygui/FairyGUI-unity/archive/refs/heads/master.zip

Release:https://github.com/fairygui/FairyGUI-unity/archive/refs/tags/4.3.0.zip

FairyGUI是游戏开发领域中制作UI的一个利器。它支持Unity,Cocos2dx,Egret,LayaAir,Cocos Creator等,基本上国内主流的引擎都支持了。而且使用FGUI编辑器制作UI的效率非常高,它有很多独特的功能,比如控制器,关联系统,分包,分支等,全部零代码,方便策划或者美术快速上手搭建UI。

获取FairyGUI Unity SDK

        下载配套的示例资源并解压到合适的位置。使用Unity打开示例demo,工程Unity版本:2018.4.29f1,建议使用对应Unity的版本或更高的版本打开。我手头目前使用的是Unity2021.3.26f1。打开后可以看到如下图所示的目录结构:

        将“Extensions”,“Resources”和“Scripts”拷贝到自己项目Assets下的一个空文件夹下如“FGUI”,即可为自己的项目引入FairyGUI库。或者下载我从源文件中提取的SDK:FairyGUISDK

注意:FairyGUI支持TextMeshPro,所以在“FairyGUI-TMP.shader”文件中要注意“TextMesh Pro Shaders”的引用。

FairyGUI编辑器的概念词

1、包:FairyGUI是以包为单位组织资源的。包在文件系统中体现为一个目录。assets目录下每个子目录都表示一个包。默认情况下包和包之间无法建立依赖关系,需要包下面的资源设置为“导出”,才可以被其他包使用。包的定义

2、舞台:舞台是组件的编辑区域。中间区域就是舞台

 

3、元件:每个舞台中的组成元素我们称之为元件,元件的类型有很多,他们是:

  • 基础元件:图片、图形、动画、装载器、文本、富文本、组、组件。
  • 组合型元件:标签、按钮、下拉框、滚动条、滑动条、进度条。
  • 特殊元件:列表。
  • 在舞台上选中任意一个元件,右边的属性栏(检测器)会出现当前元件的属性数据。元件详情

4、组件:组件是FairyGUI中的一个基础容器。组件可以包含一个或多个基础显示对象(元件),也可以包含组件。组件详情

  • 组件的创建:在资源库中右键“xx包”,即可在当前包下面创建组件。

5、右键导出:资源库中的资源设置为导出后,才能被其他包引用,以及在代码中动态的获取。设置为导出的资源会有红点提示。右键导出

6、发布:发布有三种方式:全部发布,仅发布定义和发布。全部发布和发布就字面意思,发布全部包和发布当前活跃包。而当资源越来愈多的时候,一个包的发布时间会越来越长,这时如果我们只是修改了界面参数,那就可以使用仅发布定义来跳过资源纹理集的重新生成。这样子可以提高发布速度。详情在主工具栏

7、更多的请阅读更加具体的编辑器使用教程

创建Unity工程

1、创建一个Unity,导入FairyGUISDK。

注意:在导入FairyGUISDK后如果出现Shader报错,请检查“Window→TextMeshPro”是否存在,如果不存在尝试导入TextMeshPro支持库。

如果存在,请尝试查找工程中是否存在“TMPro_Properties”文件,找不到的话请执行“Window→TextMeshPro→Import TMP Essential Resources”,之后修改报错的位置,将TMPro_Properties和TMPro的引用指向正确位置。

FairyGUI项目创建、配置和发布

1、下载并解压FairyGUI编辑器,双击“FairyGUI-Editor.exe”打开。

 

2、(可选)点击“文件→切换颜色空间”,将UI编辑器的颜色空间和引擎中的设置一样。Linear 和 Gamma 两种,后面也可以切换。

3、点击“创建新项目”,会弹出创建项目窗口,这里可以设置项目的名字、位置和类型。这里我使用的引擎是Unity,项目位置建议放置到工程的Assets同级目录中,方便后期管理。点击“创建”进入正式的UI编辑窗口中。

 4、编辑窗口中,“资源库”存放所有的资源和UI,毕竟UI也是资源。资源库中默认会有个“Package1”包,“Package1”包下存在一个被导出的组件“Component1”。按照项目的习惯重命名包和组件。比如我习惯在组件名字前使用UI来表示这个组件是UI界面,Comp开头表示这是个UI中的自定义组件需要代码操作,其他命名则为默认,之后的发布代码插件会详细说明。这里使用Test作为测试示例。

改之前的:

改之后的:

 5、点击“文件→发布设置”菜单,可以设置项目资源包的发布路径,发布路径分为包设置和全局设置,包设置中可以为当前选中活跃包设置单独的发布路径,默认“使用全局配置”。

 

6、点击“全局设置”。

        发布路径中支持相对路径,如果你的FGUI工程和Assets同级目录,那你的发布路径可以设置为“../Assets/UI存放路径”,这时候点击发布或全部发布,就可以在你UI存放路径的文件夹下发现一堆FGUI生成出来的二进制文件和相关的纹理集等,UI存放路径根据自己的项目文件结构来。这里我测试在Resources下新建一个UI文件夹来存放所有的UI,发布路径:../Assets/Resources/UI

        发现一堆资源后,想将一堆的资源按包分类可以在发布路径后面加{publish_file_name},这时候再次点击发布后,生成文件就会按钮当前文件所在的包进行划分。发布路径:../Assets/Resources/UI/{publish_file_name}

注意:发布出来的资源只会同名覆盖,而不会删除。也就是说如果文件A被你在FGUI工程中删除了,之前在UI存放路径下的文件A还是存在的。

 7、回到Unity中,在“Hierarchy”面板中右键点击“FairyGUI→UI Panel”,创建UI面板。

 8、选中UIPanel,点击“Inspector”面板中的“Package Name”会出现之前导出的UI资源,依次点选“Test”和“UITest”后点击OK即可在场景中查看UITest。

注意:

1、如果这时候Game窗口出现了双重UI,请检查是否有多个相机同时渲染了UI层级。建议使用默认FairyGUI相机“Stage Camera”渲染UI即可。

2、如果Game窗口没有显示UI,运行后也没有显示,则排查一下UI界面是否有内容显示,以及当前Unity版本中是否需要将UI相机加入到主相机的“Stack”列表中。

这篇文章只是粗略的概括一下FGUI的UI导出和展示流程,详细的UI制作可以查看编辑器使用教程

猜你喜欢

转载自blog.csdn.net/u012433546/article/details/132242127
今日推荐