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

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

👉即将学会

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

👉背景

Unity 2019.x系列

FairyGUI 2021.2系列

👉实践过程

FairyGUI简介导读

她提供了超强的UI编辑器,界面操作与PS类似,友善且简单。主打的是摒弃了脚本和配置文件这些需要代码思维的操作,设计或者美术都可以轻轻松松学会并生产界面。

能实现功能非常之多:最基本的按钮,图片,富文本,进度条,滑动条,列表,树

进阶的有动画,控制器,关联系统,装载器,窗口,动效

支持的引擎也非常之多:Unity,Unreal,Cocos,ThreeJS,Egret,LayaAir等十多款游戏引擎

通过简单的操作来实现复杂的功能,提高开发效率,UI 制作效率提升昂昂的,有效减少了工作耦合性。

更关键的是她是开源的github.com/fairygui

遇到问题也可以去官方社区寻找答案ask.fairygui.com/

官方也有学习教程www.fairygui.com/docs/guide/

FairyGUI效果演示

视频

FairyGUI和UGUI类比

从基础角度

UGUI是基于Unity编辑器的,相比于以前的UI技术方案有了很大的提升,虽然扩展性强一些,但想要实现的更炫,更优雅,还是需要从程序角度下功夫,延长了开发周期和人员占用

FariyGUI是一个独立的编辑器,可视化的操作,各种动效点点鼠标即可实现,虽然扩展性差了点,但想要的效果基本都能实现,再高深的效果深入学习下FairyGUI也能再自己扩展。

从技术角度

Unity的锚点系统可以说很优秀了,快捷默认的十几个锚点工具帮助开发人员快速定位,但也存在缺点,因为锚点是针对父物体的,所以要考虑好各种父子关系,搞不好就懵了。

FairyGUI除了支持官方的锚点系统,还有自己的关联系统,任意俩组件关联,不用考虑任何的父子关系,这就像Android里面的相对布局。

从提供的基本组件数量上来看,FairyGUI明显多很多,从动画效果上看,FairyGUI实现起来更迅速

从整体角度

UGUI仍然在Unity编译器中操作,和项目不分开,需要有些动效的话,就需要写代码,多人开发的话很可能代码耦合

FariyGUI是真的将UI分出单独的工作,她都在自己的UI编辑器中完成,不需要代码

更关键的是利用FairyGUI可以妥善划分工作模块,比如将UI这块分给前端开发或者UI设计人员(我们公司前端和UI空闲时间较多),这样既可以减轻Unity开发的压力,还能让其他员工行动起来,从项目角度缩短开发周期。

当然了刚开始的时候沟通成本可能有些花费,节点命名层次结构需要相互约定好,员工之间多磨合熟练增进下友谊也挺好

所以在项目中大胆的尝试吧,本系列作者小空已经实际项目中应用了。

友情提示:本内容是在官方文档的基础上学习做的笔记,有官方内容也有自己的理解

FairyGUI编辑器使用

FairyGUI的项目文件结构

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

.objs 内部数据目录。注意:不要加入版本管理,因为这里的内容是不需要共享的。

assets 包内容放置目录,资源内容都在这里面,里面还可以分不同的包,便于区分管理(看下图)

settings 配置文件放置目录。

****.fairy 项目识别文件,也就是项目名称

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

在编辑器中对应显示如下:

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

编译器主界面

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

注意左方功能区的显示列表,按显示顺序排列,列表中越往下的元件显示在越前面。可以在列表中直接拖拽改变元件改变它们在显示列表中的位置。

动效时间轴

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

在左侧功能区动效里面增加动效后双击动效即可进去时间轴

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

  1. 时间显示单位是秒
  2. 参与动效的各个元件和属性,左边元件名称可以起名规范些,以后若是想在Unity中用代码控制也方便(因为代码中控制是需要用名字来查找的),右侧显示的是属性(XY-改变位置,Size-改变大小,Rotation-改变旋转,还有改变透明度,颜色,缩放,倾斜,可见性,声音,震动,滤镜等等)。想要添加新属性的话,在舞台(中央操作区)右键元件即可出现
  3. 各个属性的时间轴。
    网络异常,图片无法展示
    |
    表示关键帧,
    网络异常,图片无法展示
    |
    表示两个关键帧之间使用插值动画(右键创建Tween,支持自定义:选中关键帧后在右侧功能区有缓动函数)
    网络异常,图片无法展示
    |
    网络异常,图片无法展示
    |
    红色小红旗则表示这个关键帧有Label(标签),可以通过代码按标签名称访问进而实现帧监听(比如走到某一帧执行其他逻辑)。
  4. 信息显示区 ,FPS是帧率,在右侧功能区检查器最上方修改;frame便是当前从第几帧开始播放;time表示播放头的时间是多少,单位是秒
  5. 时间轴放大/缩小,当编辑的动效很长时,将她拉大即可
  6. 时间轴上和Unity时间轴一样都可以在上面操作,左键包含单选/多选/拖动,右键包含转换为关键帧/清除关键帧/插入帧/创建或删除Tween等

今天小空就学到这了,我们下期见!!!

👉其他

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

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


相关文章
|
1月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
114 0
|
2月前
|
Linux C# Android开发
一个开源、跨平台的.NET UI框架 - Avalonia UI
一个开源、跨平台的.NET UI框架 - Avalonia UI
104 3
|
2月前
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
59 1
|
2月前
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
137 3
|
3月前
|
图形学 开发者 存储
超越基础教程:深度拆解Unity地形编辑器的每一个隐藏角落,让你的游戏世界既浩瀚无垠又细节满满——从新手到高手的全面技巧升级秘籍
【8月更文挑战第31天】Unity地形编辑器是游戏开发中的重要工具,可快速创建复杂多变的游戏环境。本文通过比较不同地形编辑技术,详细介绍如何利用其功能构建广阔且精细的游戏世界,并提供具体示例代码,展示从基础地形绘制到植被与纹理添加的全过程。通过学习这些技巧,开发者能显著提升游戏画面质量和玩家体验。
153 3
|
3月前
|
图形学 数据可视化 开发者
超实用Unity Shader Graph教程:从零开始打造令人惊叹的游戏视觉特效,让你的作品瞬间高大上,附带示例代码与详细步骤解析!
【8月更文挑战第31天】Unity Shader Graph 是 Unity 引擎中的强大工具,通过可视化编程帮助开发者轻松创建复杂且炫酷的视觉效果。本文将指导你使用 Shader Graph 实现三种效果:彩虹色渐变着色器、动态光效和水波纹效果。首先确保安装最新版 Unity 并启用 Shader Graph。创建新材质和着色器图谱后,利用节点库中的预定义节点,在编辑区连接节点定义着色器行为。
254 0
|
3月前
|
API 图形学
Unity精华☀️Audio Mixer终极教程:用《双人成行》讲解它的用途
Unity精华☀️Audio Mixer终极教程:用《双人成行》讲解它的用途
|
2月前
|
图形学 iOS开发 Android开发
从Unity开发到移动平台制胜攻略:全面解析iOS与Android应用发布流程,助你轻松掌握跨平台发布技巧,打造爆款手游不是梦——性能优化、广告集成与内购设置全包含
【8月更文挑战第31天】本书详细介绍了如何在Unity中设置项目以适应移动设备,涵盖性能优化、集成广告及内购功能等关键步骤。通过具体示例和代码片段,指导读者完成iOS和Android应用的打包与发布,确保应用顺利上线并获得成功。无论是性能调整还是平台特定的操作,本书均提供了全面的解决方案。
152 0
|
3月前
|
开发者 图形学 iOS开发
掌握Unity的跨平台部署与发布秘籍,让你的游戏作品在多个平台上大放异彩——从基础设置到高级优化,深入解析一站式游戏开发解决方案的每一个细节,带你领略高效发布流程的魅力所在
【8月更文挑战第31天】跨平台游戏开发是当今游戏产业的热点,尤其在移动设备普及的背景下更为重要。作为领先的游戏开发引擎,Unity以其卓越的跨平台支持能力脱颖而出,能够将游戏轻松部署至iOS、Android、PC、Mac、Web及游戏主机等多个平台。本文通过杂文形式探讨Unity在各平台的部署与发布策略,并提供具体实例,涵盖项目设置、性能优化、打包流程及发布前准备等关键环节,助力开发者充分利用Unity的强大功能,实现多平台游戏开发。
102 0
|
3月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
100 0