图形(Graph)和图像(Image)都是多媒体系统中的可视元素,虽然它们很难区分,但确实不是一回事。图形是矢量图(Vector Drawn),它是根据几何特性来绘制的。图形的元素是一些点、直线、弧线等。图像是位图(Bitmap),它所包含的信息是用像素来度量的。
FairyGUI是一款超强的UI编辑器,及跨平台开源UI解决方案,制作效率直接提升 50%,支持UUnity, Cocos2dx, CryEngine, MonoGame, Havok Vision, Starling, Egret, LayaAir, CocosCreator, Haxe, PIXI, LibGDX, Corona等引擎
关于FairyGUI:
FairyGUI诞生于2014年,由谷主创立。作者在多年从事游戏UI开发过程中,深知游戏开发人员在UI开发中的痛点,一是缺乏简单易用并可视化的编辑工具,导致程序员和美术耦合过深;二是市面上的框架不够成熟,导致二次开发工作量过大,对程序员能力要求高,且难以标准化;三是无力应对多变的需求。FairyGUI就是在这样的背景下诞生的,历经多年开发和调优,可以说是市面上最好用的专业游戏UI编辑器,而且开源免费!
UI编辑器功能:
- 强大的文本控件。支持动态字体,位图字体,以及外部工具(例如BMFont等)制作的位图字体,同时支持HTML语法和UBB语法,支持复杂的图文混排。输入文本支持IOS原生表情的直接输入。支持字体的描边效果,阴影效果,支持渐变色文字。
- 强大的列表控件,支持多种布局,支持虚拟列表和循环列表,即使列表项目数量巨大也拒绝卡顿。虚拟列表还支持不等高ITEM、多种ITEM资源混合等高级特性。支持表格、树等高级列表控件。
- 支持图片的九宫格和平铺处理,支持九宫格内各个宫格的平铺处理。支持图片变色和灰度。
- 所见即所得。操作简易,使用习惯与Adobe系列软件保持一致,策划和美术设计师都可以轻松上手。
- 在编辑器即可组合各种复杂UI组件,无需编写代码。不需要程序员编码扩展UI组件。
- 支持平移、缩放、旋转、倾斜、翻转等常规的2D变换。
- 支持基础的绘图功能,例如矩形、圆形、多边形等。
- 支持序列帧动画编辑和使用。自带序列帧动画编辑器,同时支持导入由Flash CS、Animate CC等工具制作的动画。
- 内置多种手势支持。
- 编辑器提供时间轴设计UI动效,可以组合透明度、位置、大小、颜色等十几种属性的动画效果。并可实时看到每帧的效果。支持插入声音。支持嵌套动效。
- 支持矩形遮罩和自定义图形遮罩。
- 支持滤镜。
- 支持逐像素检测的点击检测方式。
- 支持将UI组件绑定到任何模型上,例如实现曲面UI。
- 内置文本的打字效果。
- 内置普通窗口管理器,弹出窗口管理器,拖放管理器。
- 支持事件的冒泡机制。
- 封装了所有输入方式的底层细节,无论是鼠标输入、单点触摸输入、多点触摸输入、VR输入,你都只需要使用相同的事件侦听方式处理UI交互。
- 支持在UI层中插入任何3D物体,例如模型、粒子、骨骼动画等。
- 编辑状态下使用分散的素材,发布时自动打包图集。支持定义多个图集,Unity版本自动支持抽出A通道的压缩方式。
UI编辑器特色:
FairyGUI提供了一个强大的UI编辑器,使用习惯与Adobe系列软件保持一致,美术设计师和策划都可以轻松上手。
与市场上其他UI编辑器不同,FairyGUI编辑器重视设计师体验,摒弃了脚本和配置文件这些需要代码思维的操作。借助FairyGUI提供的 组件、关联、控制器 以及 动效,我们可以在不写代码的情况下使用编辑器轻松地制作大量复杂的带有动画效果的自动布局的UI。
FairyGUI提供了多个游戏引擎SDK:Unity、Cocos2d-x、Cry Egine, Havok Vision/Project Anarchy、白鹭、LayaAir、Haxe、Pixi、Flash、Starling,未来还将支持UE4、LibGDX等。借助FairyGUI-SDK,你可以轻松在UI中使用3D对象、粒子等元素,而且FairyGUI还解决了环形进度条、像素点击测试、图文混排、循环列表、虚拟列表、曲面UI、VR输入等UI开发中常见的痛点。
UI编辑器使用方法:
历史记录 曾经打开过的项目可以直接从列表中点击打开。
删除 点击右上的垃圾桶按钮删除选定的打开历史记录。
打开其他 通过选择一个项目描述文件 xxx.fairy 打开一个已有项目。
打开目录 通过选择项目所在的目录打开一个已有项目。适用于打开2.x版本的项目。
资源URL地址
在FairyGUI中,每一个资源都有一个URL地址。选中一个资源,右键菜单,选择“复制URL”,就可以得到资源的URL地址。无论在编辑器中还是在代码里,都可以通过这个URL引用资源。例如设置一个按钮的图标,你可以直接从库中拖入,也可以手工粘贴这个URL地址。这个URL是一串编码,并不可读,在开发中使用会造成阅读困难,所以我们通常使用另外一种格式:ui://包名/资源名。两种URL格式是通用的,一种不可读,但不受包或资源重命名的影响;另一种则可读性较高。
资源导出
包内的每个资源都有一个是否导出的属性,已导出的资源的图标右下角有一个小红点。使用右键菜单提供的功能可以方便的切换一个或多个资源的导出属性。
收藏夹
收藏夹提供了一个快速访问常用组件的功能。可以将一些常用的组件或素材放置在收藏夹里,便于快速访问。也可以实现一个类似控件面板的功能。在资源库里右键单击一个或多个资源,然后在右键菜单中选择“加入收藏夹”,就可以将资源加入收藏夹。
UI编辑器常见问题:
1、运行报错且看不到界面,但编辑模式没问题
例:Create Component1@Package1 failed!
答:这种错误一般是因为使用UIPanel,原因可能有:
你的UI包没有正确放置到Resources目录,或者Resources拼错了!太多新手犯这样的错误。
如果有跨包引用,需要使用AddPackage手动载入依赖包,并且注意,AddPackage必须在UIPanel创建之前,建议放到Awake。
如果包发布后移动过位置,或者修改过名称,重新设置一下UIPanel的包和组件名。
2、显示不出图片/文字,但没有报错
答:项目中没有放置FairyGUI的着色器,即插件里Resources/Shaders里的着色器。请重新安装插件。
3、UI显示有重复,或者UI销毁后依然显示
答:场景里没有放置主相机。
主相机的ClearFl ags错误设置为了Depth。
场景里还有其他相机,且它的Culling Mask设置勾选了UI。
UI编辑器更新日志:
5.0.4
大幅优化了依赖查询的速度。
修正了发布对话框里部分设置没有保存的bug。
修正了纹理集大小设置为4的倍数没有生效的bug。
修正了导出资源包功能失效的bug。
命令行发布增加了-t参数,用于指定哪个分支。
Laya项目的代码发布类型选项增加了“LayaAir(2.0)”,选择这种类型,则发布的代码会使用fairygui命名空间而不是fgui。
矢量图常用于框架结构的图形处理,应用非常广泛。图形是人们根据客观事物制作生成的,它不是客观存在的;图像是可以直接通过照相、扫描、摄像得到,也可以通过绘制得到。