找回密码
 注册帐号

扫一扫,访问微社区

——待审专栏,请联系管理员 UI工作流再进化,FairyGUI 5.0 介绍

15
回复
2446
查看
[ 复制链接 ]
排名
1
昨日变化

838

主题

1467

帖子

1万

积分

Rank: 16

UID
1
好友
26
蛮牛币
8829
威望
10
注册时间
2013-5-14
在线时间
3551 小时
最后登录
2020-1-17

一贫如洗游戏蛮牛QQ群会员活力之星

2019-11-5 10:53:06 显示全部楼层 阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

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

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

一、深度优化的编辑器
1.png

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

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

2.png

二、项目分支和多语言

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

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

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

3.png

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

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

4.png

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

6.png

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

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


三、高清资源机制

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

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

7.png

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

五、动效功能的增强

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

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

8.png

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

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

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

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

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

9.png

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

10.png

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

八、自定义组件属性

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

11.png

九、UI包的分组管理

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

12.png

十、其他细节优化

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




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

FairyGUI的优势在于:

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


回复

使用道具 举报

7日久生情
3930/5000
排名
167
昨日变化

7

主题

461

帖子

3930

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
12268
好友
2
蛮牛币
11298
威望
0
注册时间
2014-1-10
在线时间
1094 小时
最后登录
2020-1-20
2019-11-5 16:42:18 显示全部楼层
不错的ui插件
回复

使用道具 举报

7日久生情
1579/5000
排名
1250
昨日变化

0

主题

172

帖子

1579

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
698
好友
0
蛮牛币
16
威望
0
注册时间
2013-7-5
在线时间
453 小时
最后登录
2020-1-18
2019-11-5 23:30:34 显示全部楼层
666666666666
回复

使用道具 举报

7日久生情
2685/5000
排名
4094
昨日变化

0

主题

1884

帖子

2685

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
254705
好友
1
蛮牛币
2412
威望
0
注册时间
2017-11-16
在线时间
439 小时
最后登录
2020-1-20
2019-11-6 08:08:04 显示全部楼层
66666666666666666666666
回复 支持 反对

使用道具 举报

7日久生情
2045/5000
排名
774
昨日变化

0

主题

154

帖子

2045

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
115316
好友
0
蛮牛币
8370
威望
0
注册时间
2015-7-26
在线时间
669 小时
最后登录
2020-1-18
2019-11-6 09:19:52 显示全部楼层
6666666666
回复

使用道具 举报

7日久生情
2435/5000
排名
1380
昨日变化

31

主题

846

帖子

2435

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
195974
好友
9
蛮牛币
4793
威望
0
注册时间
2016-12-24
在线时间
964 小时
最后登录
2020-1-21
2019-11-6 09:22:05 显示全部楼层
哪里下载呢
回复

使用道具 举报

0

主题

22

帖子

31

积分

Rank: 1

UID
331517
好友
0
蛮牛币
4
威望
0
注册时间
2019-9-10
在线时间
9 小时
最后登录
2019-11-12
2019-11-6 09:27:54 显示全部楼层
6666666666666666
回复 支持 反对

使用道具 举报

2初来乍到
111/150
排名
24130
昨日变化

0

主题

54

帖子

111

积分

Rank: 2Rank: 2

UID
235432
好友
0
蛮牛币
118
威望
0
注册时间
2017-8-2
在线时间
39 小时
最后登录
2019-12-25
2019-11-6 10:38:26 显示全部楼层
看起来不错
回复

使用道具 举报

5熟悉之中
643/1000
排名
4664
昨日变化

8

主题

42

帖子

643

积分

Rank: 5Rank: 5

UID
242626
好友
1
蛮牛币
2257
威望
0
注册时间
2017-9-11
在线时间
205 小时
最后登录
2019-11-27
2019-11-6 15:55:22 显示全部楼层
666666666666
回复

使用道具 举报

5熟悉之中
876/1000
排名
3601
昨日变化

0

主题

104

帖子

876

积分

Rank: 5Rank: 5

UID
71644
好友
0
蛮牛币
1836
威望
0
注册时间
2015-1-28
在线时间
356 小时
最后登录
2020-1-21
2019-11-6 17:18:07 显示全部楼层
6666666666666
回复

使用道具 举报

0

主题

6

帖子

12

积分

Rank: 1

UID
299656
好友
0
蛮牛币
19
威望
0
注册时间
2018-10-11
在线时间
6 小时
最后登录
2020-1-10
2019-11-7 16:02:48 显示全部楼层
DAS FJKLDJALKFJKLAJKDSFJKLASJFKLAJSKLJFKLADSJFLA
回复 支持 反对

使用道具 举报

5熟悉之中
635/1000
排名
7021
昨日变化

3

主题

158

帖子

635

积分

Rank: 5Rank: 5

UID
293049
好友
2
蛮牛币
2648
威望
0
注册时间
2018-8-9
在线时间
286 小时
最后登录
2020-1-20
2019-11-8 10:41:10 显示全部楼层
学习学习
回复

使用道具 举报

排名
64939
昨日变化

0

主题

11

帖子

16

积分

Rank: 1

UID
169072
好友
0
蛮牛币
22
威望
0
注册时间
2016-9-18
在线时间
3 小时
最后登录
2019-12-4
2019-11-28 16:33:50 显示全部楼层
谢谢分享!!!!!!!
回复

使用道具 举报

7日久生情
3234/5000
排名
295
昨日变化

0

主题

629

帖子

3234

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
88896
好友
0
蛮牛币
12848
威望
0
注册时间
2015-4-2
在线时间
708 小时
最后登录
2020-1-22
2019-12-16 08:52:29 显示全部楼层
以前使用过,效果很好。好像在Unity编辑器中不能直观实用。现在已经进化很多了吧
回复 支持 反对

使用道具 举报

6蛮牛粉丝
1160/1500
排名
3331
昨日变化

3

主题

216

帖子

1160

积分

Rank: 6Rank: 6Rank: 6

UID
62741
好友
1
蛮牛币
1620
威望
0
注册时间
2014-12-21
在线时间
497 小时
最后登录
2020-1-15
2019-12-26 10:09:15 显示全部楼层
简单点项目用的还好,复杂的放弃
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则