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

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

👉即将学会

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

👉背景

Unity 2019.x系列

FairyGUI 2021.2系列

👉实践过程

文本和富文本和输入文本

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

普通文本的鼠标/触摸感应是没有的,只是个单纯的文本,当然文本的字体样式设置,字体大小颜色行距字距,对齐方式,粗体斜体下划线,以及UBB语法支持

富文本可就厉害了,除了普通文本的功能,还支持点击事件,超链接和图文混排,更支持HTML语法,这能玩的花样就多了去了。你见过的游戏文本效果,基本都能搞出来。

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

还有一个实际应用可能用到的就是文本模板,就像C语言中的log输出参数一样,可以将整个文本的某个内容设置为变量,这样修改的时候不用修改全部文本,只修改对应的即可。

例如:需要显示“我的钱:100金200银”,当金额发生变化的时候使用模板功能不需要将无关汉字重新赋值,只需要修改文字即可。下面的图示就可以用aTextField.SetVar("jin", "500").SetVar("yin", "500").FlushVars(); 修改为500金500银

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

再比如玩单机游戏的时候刚开始需要你输入角色名字,游戏角色内容就会改成你输入的角色名称,增强了游戏真实性。而且只需要改这么一个变量。

字体

除了上面讲解的项目设置那一块系统字体个普通的后缀为ttf/ttc/otf的字体文件外,FairyGUI还支持位图字体和TextMeshPro支持

啥是位图字体?

请看小空下面的截图:

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

GUI编辑器支持位图字体。首先,我们创建一种字体。点击主工具栏

网络异常,图片无法展示
|
,然后,弹出了字体编辑窗口,我们从资源库里把制作好的数字图片拖入到窗口,并设置每个图片对应的字符,点击保存,这样我们的字体就设置好了。如果要修改每个字符对应的图片,将图片重新拖入即可。

使用图片代替字符的办法,对于少量文本,这是非常方便的,但如果需要嵌入成百上千字,为每个字制作为图片,然后再每个设置对应字符,这工作量就有点大了。FairyGUI编辑器支持外部的位图字体制作工具BMFont、ShoeBox等,这些工具的使用方法请自行参考网络资料。使用外部工具最后会导出一个fnt文件(注意1:文件格式应该选择fnt格式,不支持xml或者json),在编辑器点击导入素材,然后选择这个fnt文件,就可以把字体导入到编辑器里了。

TextMeshPro

Unity里有一个TextMeshPro插件,它利用SDF(Signed-distance-field)技术渲染文字。相比常规的渲染方式,基于SDF渲染文字可无限放大并保持清晰,几乎没有开销就可实现描边,发光,抗锯齿等效果.且它只需要很小的纹理缓存SDF信息即可。FairyGUI内置支持使用TextMeshPro插件。

在FairyGUI编辑器里使用TextMeshPro的步骤如下:

  1. 导入一个ttf/ttc/otf文件。
  2. 双击字体,设置渲染方式为SDFAA,采样字体大小的选择可根据项目需求指定,这影响到一张贴图能容纳多少文字。这个值越大,渲染效果越好,但一张贴图能容纳的文字越少。一般建议值可以在30~90。
  3. 对文本元件使用这个字体(或设置为全局字体)即可。

从以上步骤可以看出,在FairyGUI中可以轻松切换文本是否使用TextMeshPro。

当文本使用了TextMeshPro字体后,文本的属性会增加额外的选项,见下图:

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

自行调整一下各个属性,通过实际效果感受其作用。通常建议当描边增大时,扩张值也应该同时调大。

在Unity引擎里还需要做些特别的处理:

  1. 确认安装了TextMeshPro插件。
  2. 将ttf文件拖入Unity编辑器,一般放置Resources目录或者Resources/Fonts目录最简单。
  3. 为ttf文件创建一个TextMeshPro FontAsset。通常,创建出来后的Asset的名字是’XXX SDF’,我们需要把名字改成’XXX‘,以便和FairyGUI编辑器里的资源名字一致。
  4. 配置这个FontAsset的Sampling Point Size与FairyGUI编辑器里的采样字体大小一致。

组(普通组和高级组)

把分散的物品结合成一个整体,移动复制缩放隐藏等操作都是共同的。后续动作都将针对整体进行。后续动作也分为在FairyGUI编译器中的动作和Unity中代码操作。这俩操作又引申出普通组和高级组。

普通组是在FairyGUI编译器中你在开发编辑的时候生效,帮你快速布局,铺设UI,在发布后和运行都不存在了,你就没办法把她当成一个整体操作了。

高级组就不一样,光听名字就知道这功能高级,她的优点在于除了在FairyGUI编译器中生效帮助你快速铺设UI,她在发布后仍然保留组关系,比如你用代码修改了高级组的位置,组内的所有元件都会移动。比Android的相对布局,当修改整体组时,组内元件大小对应变化;当组内某个元件变化,其他元件也适应变化。


👉其他

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

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

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