Unity跨平台UI解决方案:可能是最全的FairyGUI系列教程-第八天

简介: 众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!

👉即将学会

从头到尾了解并学习FairyGUI在Unity平台的应用

👉背景

Unity 2019.x系列

FairyGUI 2021.2系列

👉实践过程

窗口

窗口花样百出,可以设置任意组件作为她的显示内容,且窗口支持拖动。

窗口样式内容你需要在FairyGUI中提前编辑好,制作好后,需要在Unity中用代码进行管理。

Window win = new Window();

GRoot里提供了一些窗口管理的常用API。

  1. BringToFront 把窗口提到所有窗口的最前面。
  2. CloseAllWindows 隐藏所有窗口。注意不是销毁。
  3. CloseAllExceptModals 隐藏所有非模态窗口。
  4. GetTopWindow 返回当前显示在最上面的窗口。
  5. hasModalWindow 当前是否有模态窗口在显示。

动效-重点

又是一个重点,FairyGUi除了静态UI外,动效UI做起来也很轻松

在上面讲编译器主页面的时候就说过了动效。更多图文并茂参考官方文档。

适配

做过Android开发的都知道,适配是个体力活,一分钟开发三分钟适配,即使开始经验充足或者使用了今日头条的适配,后续仍然可能有需要适配的。

FairyGUI为手游提供了自动适应各个设备分辨率的UI策略。选择一个设计分辨率的图片(通常为全屏界面)来进行开发,运行的时候会根据设备将UI界面经过缩放投到屏幕上。

有一个很有意思的机制:假如整体需要放大两倍的话,一个窗口为400*400的,投射到屏幕上是800*800放大后的,但是你用代码读取窗口的宽高时,仍然是400*400且坐标也不变化。

除了等比的缩放,有一点就得需要注意-全屏,现在有的全面屏手机,高度贼拉长,有的高度正常,大部分手机宽度基本一致,这就导致宽高比不一样,就需要有所调整了:

如果你使用的是UIPanel,那么在Inspector上设置Fit Screen为Fit Size就可以了

多国语言

三部曲

  1. 现在FairyGUI中做好你的界面,最后再适配多国语言,点击“工具-字符串导入和导出”,导出来
  2. 复制一份导出来的文件,开始进行翻译,翻译完毕后修改下文件后缀挂上en和上面导出的放在同一地方(Unity里面的文件夹)
  3. 代码动态加载语言文件FairyGUI.Utils.XML xml = new FairyGUI.Utils.XML(fileContent);

UIPackage.SetStringsSource(xml);

注意:语言不能动态实时切换,要想中切英或者英切中,都需要先销毁所有UI卸载所有包

导入和导出

这个功能和Unity的功能类似,Unity是.unitypackage后缀文件,FairyGUI是. Fairypackage后缀文件。

FairyGUI帮助我们从Unity中解脱出来,提高生产力,那么有想法的人又开始“得寸进尺”了,

虽然由原来纯Unity实现转为UI靠拼拼点点无代码开发,但是UI出图后用FairyGUI开发仍然需要人力和事件。

啊,这思想就有点过分了啊,难不成直接从UI图全自动帮你生成FairyGUI?开玩笑,不过确实是有:psd2fgui,但她未必能满足每个人的项目需求,只能作为辅助工具。

psd2fgui开源地址:github.com/fairygui/ps…,看名字就知道她是将PSD转为FGUI。

首先准备PSD文件:

网络异常,图片无法展示
|

如上图所示,使用图层名称或组名称来表达它的类型和用途。以下是约定的细节:

按钮 组的名称以Button开始表示这个组是一个按钮。组内的层如果名称中含有下面定义的特殊字符串(注意是包含即可,不是相同。推荐作为后缀),表示这个图层的特别含义:

@up 这个图层只在按钮的up状态显示

@over 这个图层只在按钮的over状态显示

@down 这个图层只在按钮的down状态显示

@selectedOver 这个图层只在按钮的selectedOver状态显示

@title 文字用作按钮的标题

@icon 图片用作按钮的图标

组件 组的名称以Com开始表示这个组是一个组件。组件可以嵌套。

用命令进行转换提取,之后在FairyGUI中导入资源包。

Unity使用

将编辑好的UI在Unity中使用也很简单

  1. Unity下载FairyGUI插件并导入
  2. 将Fairy GUI中发布的资源放到Unity项目文件夹下,Resources下即可
  3. 如果第一步成功,在你的场景Hierarchy中右键会有FairyGUI选项,创建UIPanel
  4. 在UIPanel中的Package Name选择你在FairyGUI的包名,ComponentName选择你的主场景组件
  5. 显示成功,你还可以添加UIContentScaler脚本设置分辨率相关


👉其他

📢作者:小空和小芝中的小空

📢这位道友请留步☁️,我观你气度不凡,谈吐间隐隐有王者霸气💚,日后定有一番大作为📝!!!旁边有点赞👍收藏🌟今日传你,点了吧,未来你成功☀️,我分文不取,若不成功⚡️,也好回来找我。

相关文章
|
2月前
|
资源调度 JavaScript
Vue + Element-ui组件上传图片报错问题解决方案
Vue + Element-ui组件上传图片报错问题解决方案
|
4月前
|
存储 自然语言处理 监控
【Unity 实用工具篇】| 游戏多语言解决方案,官方插件Localization 实现本地化及多种语言切换
Unity的多语言本地化是一个很实用的功能,它可以帮助游戏支持多种语言,让不同语言的玩家都能够更好地体验游戏。 而实现本地化的方案也有很多种,各个方案之间也各有优劣,后面也会对多个方案进行介绍学习。 本文就来介绍一个专门作用于多语言本地化的Unity官方插件:Localization 。 这个插件方便进行游戏的多语言本地化,让游戏支持多种语言,下面就来看看该插件的使用方法吧!
|
4月前
|
编解码 前端开发 人机交互
【Unity 3D】UI系统中UGUI各个组件的详细讲解(附源码 超详细)
【Unity 3D】UI系统中UGUI各个组件的详细讲解(附源码 超详细)
77 0
|
4月前
|
设计模式
二十三种设计模式全面解析-桥接模式的高级应用:构建灵活的跨平台UI框架
二十三种设计模式全面解析-桥接模式的高级应用:构建灵活的跨平台UI框架
|
4月前
|
编解码 前端开发 图形学
Unity 用脚本操作常用UI控件(上)
Unity 用脚本操作常用UI控件(上)
|
5月前
|
JavaScript 前端开发 开发者
Vue系列教程(18)- 集成UI框架(ElementUI)
Vue系列教程(18)- 集成UI框架(ElementUI)
71 1
|
5月前
|
JavaScript
Vue框架Element UI教程-axios表格分页(九)
Vue框架Element UI教程-axios表格分页(九)
66 0
|
5月前
|
JavaScript 前端开发
Vue框架Element UI教程-页面渲染(八)
Vue框架Element UI教程-页面渲染(八)
40 0
|
5月前
|
JavaScript 前端开发 API
Vue框架Element UI教程-Mock的使用(七)
Vue框架Element UI教程-Mock的使用(七)
45 0
|
5月前
|
JSON JavaScript 数据格式
Vue框架Element UI教程-axios请求数据(六)
Vue框架Element UI教程-axios请求数据(六)
43 0

热门文章

最新文章