编辑器使用基础

打开项目

启动FairyGUI编辑器后,首先显示的是欢迎窗口:

编辑器支持同时打开多个项目。Windows平台下,可以通过重复双击桌面上的图标启动多个FairyGUI编辑器。Mac平台下,你可以在打开一个项目后,再点击主菜单“文件”->“新建窗口”,然后再打开其他项目。

创建新项目

在指定位置创建一个新的UI项目。

FairyGUI的项目在文件系统的结构为:

主界面

编辑器主界面由以下几个部分组成:

  1. 主菜单。在Mac系统里,主菜单和Mac应用程序菜单集成;在Windows系统里,主菜单显示在主界面最上方。
  2. 主工具栏。常用的功能按钮。
  3. 文档视图,包括已打开的文档的列表,侧工具栏和舞台区域。
  4. 状态栏,显示控制台输出的最后一条信息。点击可以打开控制台。
  5. 各个功能视图,用户可以按使用习惯将它们拖动到不同位置,也可以关闭。右键点击面板的标题栏,在右键菜单中选择“关闭”即可。如果要重新打开,在“主菜单->视图”里操作。

主工具栏

资源库

资源库视图里采用树状结构显示。顶层节点是包,每个包下面可以创建文件夹。

一般操作

工具栏

右键菜单

包分组

当库面板里的包比较多时,查找东西比较麻烦。编辑器提供了将包分组的功能。

点击编辑分组,显示对话框:

左边列表可以对分组进行增删改和调整显示顺序;右侧列表选择在该分组中的包。
特别的,我的工作区(本地)是一个特别的分组,这个分组不可删除不可改名,它的设置保存在用户本机中,不会保存到项目的settings里,因此不会与团队共享。它专用于记录个人工作任务。

收藏夹

收藏夹提供了一个快速访问常用组件的功能。可以将一些常用的组件或资源放置在收藏夹里,便于快速访问。

在资源库里右键单击一个或多个资源,然后在右键菜单中选择“加入收藏夹”,就可以将资源加入收藏夹。

显示列表

这里显示的是组件的显示列表。按显示顺序排列,列表中越往下的元件显示在越前面。可以在列表中直接拖拽改变元件改变它们在显示列表中的位置。

动效

这里显示的是组件的动效列表。

创建新的动效。创建后将组件立刻进入动效编辑模式

重命名动效。

复制动效。复制后动效列表会增加一个内容完全相同的新动效。

删除动效。

时间轴

  1. 时间轴和播放头位置。时间显示的单位是秒。
  2. 参与动效的各个元件和属性。左边显示的是元件名称和类型,右边显示的是属性名称。要在此增加新项目,可以在舞台上点击元件,然后在弹出的右键菜单中选择属性。
  3. 各个属性的时间轴。表示关键帧,表示两个关键帧之间使用插值动画,红色小红旗则表示这个关键帧有Label,可以通过代码按名称访问。
  4. 信息显示区。
    • FPS 动效的帧频。可以在这里修改。
    • frame 当前播放头在第几帧。
    • time 当前播放头的时间,单位是秒。
  5. 时间轴放大/缩小。向右拖动,时间轴可编辑的长度增加。例如滑块在最左边时,时间轴最大只显示30秒,如果你要制作几分钟的内容,那么可以把滑块往右拖。

时间轴操作:

右键菜单:

右键菜单2:

引用

查询一个资源被其他资源引用的情况,或者查询一个资源引用其他资源的情况。并且可以替换查询结果里的引用。

在资源库视图中,选中某个资源后,在右键菜单选择“查询依赖关系”,可以激活引用视图。

  1. 查询依赖我的资源 查询我依赖的资源 后者一般用于组件。
  2. 可以在此拖入需要操作的资源。
  3. 点击下拉箭头可以切换为替换模式。点击后出现如下界面:

    在下方的输入框拖入希望替代的资源,然后点击替换。注意,要先查询后才能替换。
  4. 查询结果列表。

搜索

输入关键字,搜索名称里含有关键字的资源。关键字不区分大小写。

控制台

显示软件输出的提示、警告和错误信息。

预览

预览界面显示当前资源库选中资源的缩略图。

点击右上角弹出如下菜单:

检查器

点击舞台中任意一个或多个元件,编辑器右侧将显示对应的属性面板。如果你点击舞台的空白处(不选中任何东西),则显示的是容器组件的属性面板。

后续介绍各个资源类型使用方法时再详细介绍这里的属性含义。

文档视图

侧工具栏

选择模式。

自由滚动模式。特别的,在选择模式下,按住空格就可以临时切换为自由滚动模式,释放空格就可以恢复为选择模式。

文本控件。

富文本控件。

图形控件。

列表控件。

装载器控件。

为当前选中的元件创建一个组合。

取消当前组合。

对齐操作。选定多个元件后,再点击这里的按钮,可以执行对应的对齐功能。例如选定两个元件后,点击左右居中,则两个元件将设置为中线对齐。如果只选择了一个元件,则该元件对容器组件执行对应的对齐功能。例如,选定一个元件后,点击左右对齐,则元件将移到容器组件的中间位置。又例如,选定一个元件后,点击相同宽度,则元件的宽度将设置为与容器组件相同。

可以将选定的元件安排均匀行距、均匀列距或者表格的方式排列。

控制器工具栏

点击加号可以增加新的控制器。点击控制器名称可以进入控制器编辑界面。点击控制器的各个页面按钮切换页面。

舞台

舞台是组件的编辑区域。添加内容到舞台的方法有:

中间不同于周边颜色的是组件的主要显示区域。虽然你并不需要把所有内容都放置到组件区域内,因为默认情况下,超出组件区域的内容依然会被显示,但组件的大小仅由组件区域决定,而不会计算所有孩子的包围。某些特别的功能,例如滤镜,只对组件区域生效,所以建议把内容尽量放置在组件区域内。

常用的舞台操作有:

舞台右键菜单:

测试界面

测试界面由以下几个部分组成:

  1. 点这里退出测试模式。
  2. 设置适配测试参数的地方。
  3. 控制器列表。点击控制器的各个页面按钮切换页面。
  4. 这里显示组件运行时的形态。
  5. 各个功能视图。用户可以按使用习惯将它们拖动到不同位置,也可以关闭。右键点击面板标题栏,在右键菜单中选择关闭即可。如果要重新打开,在“主菜单->视图”里操作。测试模式下默认显示动效视图和控制台视图。

适配测试

  1. 如果当前设计的组件需要进行适配测试,可以勾选“适配测试”选项。
  2. 打开全局适配参数的设置。第一次使用适配测试前应该进行全局适配参数的设置
  3. 适应屏幕设置。注意:这里的设置只用于适配测试,实际运行时顶层组件在尺寸和位置,需要用代码设置。
    • 全屏 指组件铺满屏幕,这时组件尺寸与逻辑屏幕尺寸相等。
    • 适应高度,左右居中 以组件的高度与逻辑屏幕高度的比例为基准,调整组件的宽度。例如,如果组件高度是逻辑屏幕高度的1/2,适配后组件高度与逻辑屏幕高度相等(放大2倍),则组件宽度也设置为逻辑屏幕宽度的2倍。无论水平方向是不足还是溢出,组件的位置都设置在逻辑屏幕的中心。
    • 适应宽度,上下居中 以组件的宽度与逻辑屏幕宽度的比例为基准,调整组件的高度。例如,如果组件宽度是逻辑屏幕宽度的1/2,适配后组件宽度与逻辑屏幕宽度相等(放大2倍),则组件高度也设置为逻辑屏幕高度的2倍。无论垂直方向是不足还是溢出,组件的位置都设置在逻辑屏幕的中心。
  4. 测试的设备。提示:可以在“项目设置-适配测试-设备配置”里增加其他设备。
  5. 横屏和竖屏切换。

适配测试时请注意:如果你在动效播放的过程中改变屏幕大小,而这个动效有涉及到带适配设置的元件,那么动效可能播放异常。所有请不要在动效播放的过程中改变屏幕大小。