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

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

👉即将学会

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

👉背景

Unity 2019.x系列

FairyGUI 2021.2系列

👉实践过程

控制器-重点

FairyGUI的核心功能之一,提供了几个需求支持:

  1. 分页 一个组件可以由多个页面组成。
  2. 按钮状态 按钮通常有按下、鼠标悬浮等多个状态,我们可以利用控制器为每个状态安排不同的显示内容。
  3. 属性变化 利用控制器,我们可以使元件具有多个不同的形态,并且可以方便地切换。

每个组件可以创建多个控制器,且互不影响

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

在组件中点击添加控制器会跳出创建框

名称 为控制器名称,同一个组件内的不要同名

备注名 帮助你理解的注释名,会和下方的导出为组件属性联合使用,勾选导出为组件属性,当你将这个组件拖动到其他的组件上时,右侧属性区会显示

页面 你可以理解成状态,既然是控制器,就要控制出效果,比如按钮(滑过/点击/抬起等状态),设置不同的动作效果

你可以单独新建按按钮看看,按钮的上方就有一个默认名为button的控制器,有4个状态(页面)

属性控制 创建好控制器后,想要使用她,你选中一个元件,在右侧属性栏会有“属性控制”面板,隔这选择即可。她有显示/位置/大小/颜色/外观/动画/文本等控制。

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

她还可以实现联动效果:

  1. 与按钮联动,当点击不同按钮后,跳转不同页面
  2. 与列表联动,就像Android的列表一样点击一个item显示出对应索引的页面
  3. 与下拉框联动,效果同上

具体效果我们会在后续的实际案例中学学习

关联系统

不管是前端还是移动端或者PC端,应该都有这种相对布局体系。

比如移动端的相对布局(RelativeLayout)

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

FairyGUI任何元件可以互相关联,在右侧有关联选项,可以实现布局自适应,对话框自适应,动态变化的内容等。

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

比如:玩游戏的时候有全屏或者小屏的时候,界面大小修改后UI布局仍然保持的相当好,想想当年天龙八部窗口化UI布局就是这种机制。

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

按钮和下拉框

常用的基础组件,传统UI框架中的RadioButton、Checkbox、List Item等,在FairyGUI里通通都是按钮。

这里注意下要想改变按钮不同状态的效果,需要先在右侧属性控制中选择控制器

下拉框的创建已经很简单了

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

提前切好图,按照三部曲即可创建出来,创建好后会有三个文件

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

Item是下拉框内容item,双击进去后还可以自定义里面的内容

Popup是列表控件,同样可以双击进去自定义

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

除了在这编辑,列表需求多数都是请求自动变化的,FairyGUI同样支持代码中设置item集合内容,和传统集合一样,要想访问集合中的item通过索引即可从0开始。有一点不同的就是上图的“值”(索引),你不写的话默认从0开始。当你修改后就需要索引值就是你修改的。比如上图,我如果没修改访问叮叮当1 就是getIndex(0),当时我把值修改为1了,访问叮叮当就是getIndex(1)

还有更多按钮详情(状态分析普通按钮selected属性无效,单选按钮组的多个实现普通按钮方式 控制器+单选按钮连接方式)讲解在……,我还没上传,回头小空发布后更新出来链接。

进度条/滑动条/滚动条

进度条

可以改变元件的宽度/高度/填充比例,分为横向和纵向,还有正向和反向;创建也很简单,一个进度条背景,一个伸缩条即可。

如何显示进度条当前进度?

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

双击进入进度条,添加个文本控件,然后名称改为“title”,要想和进度条最右侧实时跟随移动,设置关联即可。

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

如何实现带有跟随动画的进度条?

细心的朋友发现了,还有个小狐狸跟随进度条,平时玩游戏切换场景的时候经常看到进度条不是单调的横线,还有些小动画跟随,增强灵动性。

这个实现和上面的文本添加类似,区别在于你要想拖入动画的话,可以在编辑进度条的时候增加个装载器,装载器放入动画文件,想要和进度条进度试试跟随的话,再设置小狐狸和进度条的伸缩条的关联设置为右右关联

如何监听进度条?

进度条最大的作用就是和程序相结合,用于加载中,流程进度节点等,所以我们要能修改和监听进度条

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

滑动条

她和进度条就像双胞胎一样相似,但是她多出个按钮让用户自己拖动改变进度值。

创建也很简单点击资源->新建滑动条按照提示添加即可

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

想要自定义她的样式也是可以的。


👉其他

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

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

相关文章
|
17天前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
1月前
|
前端开发 数据安全/隐私保护
全新紫色新UI数码盲盒系统源码/全开源无加密/附教程
全新紫色新UI数码盲盒系统源码/全开源无加密/附教程 前端uniapp+H5 后端FastAdmin框架 可打包成APP多端运行 亲测可用
56 13
|
3月前
|
消息中间件 存储 JSON
rabbitmq基础教程(ui,java,springamqp)
本文提供了RabbitMQ的基础教程,包括如何使用UI创建队列和交换机、Java代码操作RabbitMQ、Spring AMQP进行消息发送和接收,以及如何使用不同的交换机类型(fanout、direct、topic)进行消息路由。
38 0
rabbitmq基础教程(ui,java,springamqp)
|
5月前
|
编解码 前端开发 vr&ar
从零开始的PICO教程(4)--- UI界面绘制与响应事件
这篇文章是PICO开发系列教程的第四部分,主要介绍了如何在PICO 4 VR环境中创建UI界面,包括Canvas和Panel的配置、UI元素的绘制、以及Button和Slider的事件响应绑定,并通过示例展示了数字增减和滑块功能的具体实现。
从零开始的PICO教程(4)--- UI界面绘制与响应事件
|
4月前
|
Linux C# Android开发
一个开源、跨平台的.NET UI框架 - Avalonia UI
一个开源、跨平台的.NET UI框架 - Avalonia UI
167 3
|
4月前
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
85 1
|
4月前
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
235 3
|
5月前
|
图形学 开发者 存储
超越基础教程:深度拆解Unity地形编辑器的每一个隐藏角落,让你的游戏世界既浩瀚无垠又细节满满——从新手到高手的全面技巧升级秘籍
【8月更文挑战第31天】Unity地形编辑器是游戏开发中的重要工具,可快速创建复杂多变的游戏环境。本文通过比较不同地形编辑技术,详细介绍如何利用其功能构建广阔且精细的游戏世界,并提供具体示例代码,展示从基础地形绘制到植被与纹理添加的全过程。通过学习这些技巧,开发者能显著提升游戏画面质量和玩家体验。
223 3
|
5月前
|
图形学 数据可视化 开发者
超实用Unity Shader Graph教程:从零开始打造令人惊叹的游戏视觉特效,让你的作品瞬间高大上,附带示例代码与详细步骤解析!
【8月更文挑战第31天】Unity Shader Graph 是 Unity 引擎中的强大工具,通过可视化编程帮助开发者轻松创建复杂且炫酷的视觉效果。本文将指导你使用 Shader Graph 实现三种效果:彩虹色渐变着色器、动态光效和水波纹效果。首先确保安装最新版 Unity 并启用 Shader Graph。创建新材质和着色器图谱后,利用节点库中的预定义节点,在编辑区连接节点定义着色器行为。
374 0
|
5月前
|
前端开发 图形学
Unity精华☀️UI和物体可见性的判断方法
Unity精华☀️UI和物体可见性的判断方法