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月前
|
资源调度 JavaScript
Vue + Element-ui组件上传图片报错问题解决方案
Vue + Element-ui组件上传图片报错问题解决方案
|
2天前
|
图形学
【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例(下)
【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例
10 0
|
2天前
|
数据可视化 图形学 开发者
【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例(上)
【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例
13 0
|
2天前
|
编解码 前端开发 Java
【推荐100个unity插件之12】UGUI的粒子效果(UI粒子)—— Particle Effect For UGUI (UI Particle)
【推荐100个unity插件之12】UGUI的粒子效果(UI粒子)—— Particle Effect For UGUI (UI Particle)
7 0
|
2天前
|
开发工具 图形学
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
5 0
|
2天前
【2023Unity游戏开发教程】零基础带你从小白到超神02——新建第一个项目
【2023Unity游戏开发教程】零基础带你从小白到超神02——新建第一个项目
4 0
|
27天前
|
XML API Android开发
06. 【Android教程】Android 的 UI 根基 View与View
06. 【Android教程】Android 的 UI 根基 View与View
12 1
|
1月前
|
存储 自然语言处理 监控
【Unity 实用工具篇】| 游戏多语言解决方案,官方插件Localization 实现本地化及多种语言切换
Unity的多语言本地化是一个很实用的功能,它可以帮助游戏支持多种语言,让不同语言的玩家都能够更好地体验游戏。 而实现本地化的方案也有很多种,各个方案之间也各有优劣,后面也会对多个方案进行介绍学习。 本文就来介绍一个专门作用于多语言本地化的Unity官方插件:Localization 。 这个插件方便进行游戏的多语言本地化,让游戏支持多种语言,下面就来看看该插件的使用方法吧!
|
1月前
|
编解码 前端开发 人机交互
【Unity 3D】UI系统中UGUI各个组件的详细讲解(附源码 超详细)
【Unity 3D】UI系统中UGUI各个组件的详细讲解(附源码 超详细)
123 0
|
1月前
|
设计模式
二十三种设计模式全面解析-桥接模式的高级应用:构建灵活的跨平台UI框架
二十三种设计模式全面解析-桥接模式的高级应用:构建灵活的跨平台UI框架