美文网首页
【FGUI】003-认识编辑器的基本窗口

【FGUI】003-认识编辑器的基本窗口

作者: lijianfex | 来源:发表于2018-11-26 10:36 被阅读22次

库面板:

库面板包括资源库和收藏夹两个子面板:


上方图标依次: 资源库收藏夹刷新资源搜索与编辑器相连过滤显示包全部折叠
资源库:

可以直接将图片、声音、动画、文字等素材从文件管理器(或Finder)中拖动到资源库中。素材可以随意移动,也可以使用复制和粘贴功能。如果要更新素材,可以点击资源,在右键菜单中选择“更新资源”,也可以在文件管理器(或Finder)中直接替换文件,后者适合批量操作。

  • 资源URL地址:
    在FairyGUI中,每一个资源都有一个URL地址。选中一个资源,右键菜单,选择“复制URL”,就可以得到资源的URL地址。无论在编辑器中还是在代码里,都可以通过这个URL引用资源。例如设置一个按钮的图标,你可以直接从库中拖入,也可以手工粘贴这个URL地址。这个URL是一串编码,并不可读,在开发中使用会造成阅读困难,所以我们通常使用另外一种格式:ui://包名/资源名。两种URL格式是通用的,一种不可读,但不受包或资源重命名的影响;另一种则可读性较高
  • 资源导出:
    包内的每个资源都有一个是否导出的属性,已导出的资源的图标右下角有一个小红点。使用右键菜单提供的功能可以方便的切换一个或多个资源的导出属性。

收藏夹:

收藏夹提供了一个快速访问常用组件的功能。可以将一些常用的组件或素材放置在收藏夹里,便于快速访问。也可以实现一个类似控件面板的功能。在资源库里右键单击一个或多个资源,然后在右键菜单中选择“加入收藏夹”,就可以将资源加入收藏夹


刷新资源:

在增删改后,可以点击刷新资源显示


搜索:

快速查找资源


与编辑器链接:

激活这个功能后,当活动文档发生切换时,会同时在资源库中选中活动文档对应的组件


过滤显示包:

当库面板里的包比较多时,查找东西比较麻烦。可以把一些不常用的包隐藏起来


全部折叠:

将包中打开的子文件快速折叠

复制、粘贴和粘贴全部:

库里面的资源可以复制粘贴。使用右键菜单中的“复制” “粘贴” “粘贴全部”或者“Ctrl+C” “Ctrl+V”都可以完成。

“粘贴”和“粘贴全部”在跨包复制时体现区别。

粘贴全部 把选定的资源以及它(们)所有引用到的资源一并粘贴过来。
粘贴 只会粘贴选定的资源以及它(们)引用到但没有设置为导出的资源。快捷键为Ctrl+V。

提示:复制、粘贴功能支持跨项目,同时打开两个项目后,就可以互相复制粘贴。

主面板:


着重了解最后4个:

  • 屏蔽显示控制器: 屏蔽后所有被显示控制器隐藏的内容都会显示出来
  • 屏蔽关联系统: 屏蔽后手动修改元件坐标和大小关联系统不会动作。
  • 提醒信息 :如果当前文档内有同名对象,会显示黄色叹号。
  • 在库中显示 : 点击可在库中定位这个组件

侧工具栏:


具体使用后续学习到了介绍。


控制器工具栏


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


动效工具栏:


点击加号可以增加新的动效。点击动效名称可以进入动效编辑界面

显示列表:

这里显示的当前正在编辑的组件的显示列表。按显示顺序排列,列表中越往下的元件显示在越前面
显示列表面板的操作有:

  • 点击每行行头“眼睛”对应的位置可以隐藏元件,仅用于辅助编辑,不影响运行时。
  • 点击每行行头“锁”对应的位置可以锁定元件,锁定后元件无法选中,仅用于辅助编辑,不影响运行时。
  • 点击锁图标可以解锁所有元件。
  • 点击眼睛图标可以解除所有元件的隐藏状态。
  • 在显示列表中拖拽可以改变元件在显示列表中的位置。

舞台

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

  • 侧工具栏上点击基础控件,然后点击舞台。
  • 从资源库或收藏夹中直接拖拽资源到编辑区域。
  • 可直接粘贴剪贴板中的文字或图片。图片会自动导入到资源库,然后再放置到舞台上。
  • 可以从Windows资源管理器或者Finder中直接拖入资源。如果该资源是位于assets目录下的,也就是说已经是包里的资源里,那么对应包里的资源会放置到舞台上,不会发生资源重复导入到资源库的情况。这个设计可以部分解决目前库面板不能显示所有图片缩略图的不便利性,因为在Windows资源管理器或者Finder中你可以方便的查看缩略图,同时,如果你是使用多屏工作,还可以起到类似将库面板放置单独一屏的作用。

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

常用的舞台操作有:
  • 选定 点击一个元件单选,按住SHIFT点击多个元件多选。点击空白处取消所有选择。在空白处按下并拖动进行框选。

  • 移动 按住元件拖动,如果拖动时按住SHIFT,则移动限制在垂直方向或者水平方向。使用键盘上、下、左、右箭头键可以移动选定的元件,每按一次移动1像素,如果同时按下SHIFT键,则移动加速,每次移动10像素。

  • 缩放 拖拽选定框边缘的8个调整点,可以改变元件的宽度和高度。

  • 组合 选定多个元件后,按CTRL+G建立一个组合。

舞台右键菜单

  • 替换元件 可以将当前选中的元件替换成另外一个元件,位置大小等所有属性都会保留。

  • 转换为组件 可以将当前选中的一个或多个元件替换成一个单独的组件,这个组件的内容包括原来选择的内容。

  • 转换为位图 可以将当前选中的一个或多个元件替换成一个单独的图片,这个图片的内容由原来选中的内>容绘制而成。生成的图片自动加入资源库中。

  • 在库中显示 在库中高亮显示当前选中的元件。


预览

点击主工具栏上的

按钮可以进入预览模式。

适配测试

如果当前设计的组件需要进行适配测试,可以勾选“适配测试”选项。勾选后,如果是第一次测试,需要先点击“整体缩放”按钮,设置好UI自适应的参数。然后再调整本组件的自适应参数进行测试。

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

属性面板:

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



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

相关文章

  • 【FGUI】003-认识编辑器的基本窗口

    库面板: 库面板包括资源库和收藏夹两个子面板:上方图标依次: 资源库,收藏夹,刷新资源,搜索,与编辑器相连,过滤显...

  • Laya FairyGui系列一 FairyGui接入

    一,什么是FairyGui FairyGUI(下面简称FGUI)提供了一个强大的UI编辑器,使用习惯与Adobe系...

  • vcode常用快捷键

    Ctrl + Shift + N打开新的编辑器窗口 Ctrl + Shift + W关闭编辑器窗口 Ctrl + ...

  • Vi,Java,Ant和Junit自学报告

    vi自学报告 概述 vi 编辑器是所有 Unix 及 Linux 系统下最基本的编辑器,它直接以命令行窗口作为显示...

  • 第一章|spss统计分析基础1.1spss使用基础

    spss启动后会显示如图所示的数据编辑器窗口。 spss数据编辑器窗口是spss主程序窗口。 spss文件扩展名为...

  • Unity编辑器功能扩展-EditorWindow

    EditorWindow 用于自定义一个编辑器窗口界面 自定义一个编辑器窗口界面Unity 的编辑器的 ui操作都...

  • OD入门

    -0 od入门- OD的窗口的基本认识- OD快捷键的基本使用- OD的基本操作 -1 单步-1.2 步入-1.3...

  • Laya FairyGui系列六 GLoader

    装载器(GLoader) FGUI规定需要切换图片的Texture时就需要使用装载器,所以装载器在FGUI中的使用...

  • vscode配置

    关于编辑器: 1. cmd + shift + n 1. vscode 打开新的编辑器窗口 2. ...

  • 第一天学习web前端

    了解web前端的在互联网中的位置,工作方向,了解基本的一些构成。初步了解编辑器webstrom的简单窗口。 了解g...

网友评论

      本文标题:【FGUI】003-认识编辑器的基本窗口

      本文链接:https://www.haomeiwen.com/subject/azfhqqtx.html