[——待审专栏,请联系管理员] UI工作流再进化,FairyGUI 5.0 介绍
FairyGUI是一个专业的UI解决方案,它包含一个面向设计师的独立的UI编辑器和数十个图形引擎的SDK,无需程序介入即可一站式完成整套UI制作。在过去几年里,越来越多的企业在他们的产品中引入FairyGUI,无论在重度游戏还是小游戏,在手游、端游或是页游,在混合开发领域,在AR/VR领域,还是在仿真应用领域等,都能找到FairyGUI的身影。

在成功发行了广受好评的3.x版本后,FairyGUI的开发团队为大家带来了全新的5.0版本。版本号的跳跃说明了这次更新必定是带来了许多令人振奋人心的新功能,下面我们来一探究竟。

一、深度优化的编辑器

新版本对编辑器界面进行了深度优化,使用了流行的IDE布局,并且针对视网膜屏进行了优化,界面更加清晰。

各个功能视图都可以随意按照自己喜好调整位置。库视图除了可以使用传统的树视图外,也可以使用目录+列表视图两栏显示。动效列表和时间轴现在是独立的视图,这会使动效制作和测试更加便利。


二、项目分支和多语言

游戏UI如何支撑多国语言,这个是游戏出海大背景下开发人员经常探讨的一个问题。网络上可以搜索到不少这方面的方案,总的来说可以分成两类,一类是各种语言版本建立完全独立的工程,另一类是通过代码或者配置文件进行运行时调整。前者会给迭代带来很高的代价,后者则完全依赖程序员,无法在设计期所见即所得。

FairyGUI推崇的是可视化工作流,所以在新版本里为大家带来了全可视化,无配置,设计师也可以理解和执行的多国语言解决方案。另外,这种方案不但可以支持多语言,针对游戏经常面对的多渠道发布而UI有差别这种需求也能很好的支持。

这种方案的核心就是UI分支。我们都是首先在主干上开发,然后在项目的任何阶段,都可以建立任意多个分支。分支的用途是对主干进行部分修改。注意,它和代码仓库中的分支概念不一样。UI分支不包含主干的资源,它只放置与主干有差别的内容。


这种机制不但可以作用于图片,也同样作用于组件和字体等所有类型资源。例如,如果有一个需求,某个UI界面,在不同分支下,整个界面的布局完全不同。那么我们同样可以在分支下放置相同路径和名称的组件。又例如,我们常用的位图字体在国际化时,也要面临不同语言使用不同素材的问题,而分支机制同样能够支持位图字体。

在实际应用中,我们还会遇到在不同版本下,界面上的某些元件需要微调的情况。如果我们按上述方案建立一个分支,那么每次界面需要修改时,同步修改所有分支也会成为一个负担。对于这种微小的差异,我们引入了控制器与分支名称匹配的机制。如下,当界面创建时,控制器会自动切换到和分支名称相同的页面。通过控制器则可以控制界面元素的位置、大小、文本、图片等等的变化。


在之前的版本里,FairyGUI已经支持了导出和导入语言文件的功能,即把界面上的所有文字导出到一个文件,运行时动态载入这个文件,底层完成界面文字的替换。但这种方案有一个缺点,是必须到运行时才能看到翻译的结果。FairyGUI 5对此进行了优化。现在可以在编辑器里指定多个语言文件,切换到一种语言文件后,设计师就可以在编辑器看到翻译后的结果,并且修改语言文件后也能即时生效。


总的来说,FairyGUI 5提出的这种分支和多语言的机制,有以下几个优点:

  • 全部所见即所得,设计师、策划、美术、程序员各个岗位可以随时切换不同分支看到最终效果。
  • 发布时,可以选择所有分支发布到一个包,也可以每个分支单独发包。 策略相当灵活,可以根据项目需求选用。
  • 运行时完全是自动化,程序员可以做到无感知。代码不需要写维护困难的条件分支。


三、高清资源机制

做过APP开发的小伙伴对这一个机制都应该比较熟悉。例如我们为IPhone8设计的一套界面,分辨率是1334x750,用到一个图片a.png,这套UI到IPhone XS Max显示时,a.png就需要被放大两倍显示,放大的结果通常是比原图模糊。因此我们会准备一个a@2x.png,用作这种情况显示,使界面显示效果呈现高清的效果。

现在我们把这种机制也内置到了FairyGUI。在发布设置对话框里,我们提供了@2x,@3x,@4x的选项,勾选后,如果存在与资源同名且带@2x、@3x、@4x后缀的资源,则发布时会一并打包。运行时则根据当然界面放大系数自动选用适合的资源。这套机制同样是全自动的,程序员无感知。


四、SVG工作流
FairyGUI 5引入了使用矢量图片即SVG的工作流。SVG缩放是无损的,所以在前端开发中被广泛应用。但众所周知,大部分游戏引擎都没有办法直接使用矢量图片,或者直接渲染矢量图片会带来太多的消耗。FairyGUI的解决方案是,SVG导入后可以指定尺寸,发布时编辑器自动将SVG转换成指定尺寸的PNG。另外,编辑器中还可以一键为SVG图片生成@2x、@3x等尺寸,配合高清资源机制,FairyGUI对SVG的使用实现了便利性和效率的兼顾。

五、动效功能的增强

新版本中,动效可以自定义帧频了,例如24、30、60。虽然编辑期时设定的帧频和最终的运行帧频并不相关,但更大的帧密度对制作更精细的动画有帮助。

位移动效增加了引导线功能,现在你可以轻松地安排你的动画元素做曲线运动。


在旧版本中,小伙伴们反映得比较多的是动效和适配的配合问题。例如让一个图片从屏幕右方向中间飞入,如果用绝对坐标制作动效,当组件尺寸因为适配而改变时,动效的效果就会出现不准确的问题。所以在新版本中,我们增加了用百分比记录坐标值的功能。

六、控制器功能的增强
新版本增加了两种属性控制,显示控制-2和字体大小控制。

显示控制-2用于满足那些需要有两个控制器同时控制显隐的需求,而这种需求我们过往是建议通过包一层高级组解决的,这种方案显然过于繁琐。

显示控制-2与显示控制可以选择“与”关系或者“或”关系。两个显示控制加上逻辑关系,使我们在面对包含复杂逻辑的状态切换时更加得心应手。

字体大小控制也是小伙伴们反映得比较多的一个需求,在5.0版本我们增加了这个功能。


七、支持更多的形状可视编辑
新版本支持在编辑器绘制多边形、正多边形和画线,算上已经支持的矩形和圆形,FairyGUI实际已经提供了实用的矢量绘制功能。特别的,制作游戏中常用的雷达图变得非常直观和方便。


在旧版本中,如果要实现不规则的点击区域,需要提供一个图片作为像素点击测试。现在我们有了一个新的选择,在编辑器绘制多边形,然后将它设置为组件的点击测试。

八、自定义组件属性

在旧版本中,如果我们要在编辑器里改变一个组件实例的属性,通常只能改变他默认暴露出来的属性。例如一个按钮,我们可以改变它的标题、图标、是否选中等。这些属性都是固定的。但如果我在按钮中放置了额外的文本或者装载器,需要设定他们在实例化后的属性时,就显得不那么友好。新版本则弥补了这一缺陷。使用简单的设置就可以将组件的子元件甚至更深层次的元件的某个属性暴露出来。


九、UI包的分组管理

FairyGUI以包为单位组织资源,对于一些重度游戏,功能模块很多,那么包的数量就可能会非常的多,例如上百个。在这种情况下,库视图的操作就变得费力了。FairyGUI 5增加了UI包的分组功能。设定多个分组后,每个分组可选择包含哪些包。特别的,一个特别设置的本地分组相当于个人工作区的功能,它包含哪些包只有自己可见,不写入团队共享的配置文件。


十、其他细节优化

  • 位置控制器支持百分比坐标。
  • 可以设置控制器的主页。
  • 取消包纹理数量限制,并且可以直观查询纹理集包含了哪些图片。
  • 纹理集打包可以设置纹理集尺寸为4的倍数。
  • 支持设置默认锚点。
  • 现在组的展开,对象显示的屏蔽,都不会保存到组件的xml中,提升协作开发体验。




以上是FairyGUI 5.0版本新特性的介绍。如果你是FairyGUI的老用户,已经习惯了FairyGUI的UI工作流,那么这些特性应该可以使你感觉如虎添翼。如果你从未使用过FairyGUI,那么希望新版本能够令你足够动心去尝试下这样一种能大幅降低UI制作门槛,能让设计师、策划等所有角色都参与的一种UI解决方案。

FairyGUI的优势在于:

  • 几乎支持所有主流引擎,一套UI,重复利用。市面上唯一一款能提供这种解决方案的UI中间件。
  • 最大程度的可见即所得。其他UI工具或者插件,只停留在放置控件、设置布局的水平,对于UI最常用的各种状态变换根本无能为力,只能写脚本实现。但在FairyGUI里,这些都是常规操作。
  • 运行效率与原生UI无异,但优化起来更简单,UI制作时自由度更高。
  • 所有引擎的SDK都开源并采用了对商业友好的MIT协议。社区化运作使FairyGUI更健壮更具生命力。


不错的ui插件
666666666666
66666666666666666666666
6666666666
哪里下载呢
6666666666666666
看起来不错
666666666666
  • 10# ydy
  • 6 小时前
6666666666666