👨💻个人主页:@元宇宙-秩沅
👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
👨💻 本文由 秩沅 原创
👨💻 收录于专栏:就业宝典
⭐🅰️推荐专栏⭐
👨💻 专栏交流 | 🧧 |
---|---|
🟥Unity100个实战基础✨ | 🎁 |
🟦 Unity100个精华一记✨ | 🎁 |
🟩 Unity50个demo案例教程✨ | 🎁 |
🟨 Unity100个精华细节BUG✨ | 🎁 |
斜体样式
文章目录
⭐前言⭐
FairyGUI是一款用于创建用户界面的UI编辑器和引擎它提供了丰富的UI组件、动画效果、布局管理、事件处理等功能,能够快速构建各种复杂的用户界面。
FairyGUI具有跨平台的特性,支持主流的桌面、移动平台以及网页应用程序。它的编辑器提供了可视化的界面设计工具,用户可以通过拖拽和配置属性来创建和调整UI元素。同时,FairyGUI还提供了强大的动画编辑功能,可以创建丰富的过渡效果和交互动画。
FairyGUI还具备良好的性能表现,它使用了高效的渲染技术和资源压缩算法,能够在低内存和低带宽的情况下高效运行。此外,FairyGUI还提供了丰富的扩展性和定制化选项,开发者可以根据自己的需求进行扩展和定制。
总结来说,FairyGUI是一款功能强大、易于使用、跨平台的UI编辑器和引擎,能够帮助开发者快速创建高质量的用户界面。
🎶(1) FairyGUI SDK
-
点击官网进行下载
-
SDK 下载
-
导入Unity中
- 创建项目
🎶(2) 认识 FairyGUI
- 1.assets:包内容放置目录 ——> package1:每个包一个目录。目录名就是包名
- 2.assets_xx:分支内容放置目录,xx就是分支名称,多个分支存在多个类似名称的目录
- 3.settings:配置文件放置目录
-
- .objs:内部数据目录。不需要进行版本管理,这里的内容不需要共享
-
- .fairy:项目标识文件。文件名就是项目名,可以随便修改
1.菜单栏
2.主工具栏:常用功能按钮
3.工具栏和舞台区域
4.状态栏,显示控制台输出的最后一条信息,点击可打开控制台
5.其它功能视图:可以随意拖动位置,也可以关闭,在主菜单->视图中可以打开关闭后的窗口
可以将资源直接拖入资源库中
支持的格式
1.图片(PNG、JPG、TGA、SVG等)
2.声音(MP3、wav等)
3.动画(spine、龙骨、gif、Flash等)
4.文字(TTF、位图文字)
🎶(3) 项目设置
1.可以修改实际运行的平台
2.可以设置在编辑器内的一些默认值
3.可以设置 方便我们使用的 字体列表 颜色列表 字体大小列表
4.可以进行 分辨率自适应的基础设置
5.可以编辑 项目分支、多国语言、自定义属性
我们一般新建一个FGUI的工程后 最好就把这些项目基础设置 设置好
-
快捷菜单
-
适配测试
🎶(4) 包的定义
包是FairyGUI中用于组织资源的
它在文件系统中体现为一个目录,assets文件夹下的每个子目录都表示一个包
最终我们打包时也是以包为单位进行打包的
每个包中都有一个package.xml文件,它是用于记录这个包中的资源对应信息的,是非常重要的文件
包发布后可以得到一个描述文件和一张或多张纹理集(图集)
我们在引擎中使用时,就是根据这个描述文件使用纹理中的图片来创建UI的
- 包的发布设置
🪶(A) 组件创建
😶🌫️1.尺寸、轴心和锚点
旋转是基于轴心点来进行旋转的
位置计算是基于锚点
😶🌫️2.溢出处理和遮罩
可作为滚动视图时侯使用,将视图进行垂直滚动和水平滚动
遮罩处理(反向和正向的处理的对)
- 遮罩处理的反向
😶🌫️3.点击测试和点击穿透
- 点击测试
用于异性按钮的点击区域的测试
- 点击穿透
若勾选则,例:可同时作用两个重合的按钮
😶🌫️4.自定义属性和自定义数据
- 自定义属性
- 自定义数据
🪶(B)发布设置
发布路径建议直接为Unity Asset资源文件下
- 仅发布定义 发布包列表中当前选中的包,但仅发布定义,不重新生成纹理集。通常发布的内容包括素材(图片、声音等)和定义文件, 如果你没有增删改素材,那么你可以仅发布定义文件,避免了重新生成图集带来的时间消耗。
😶🌫️1.重点参数
- 正方形:生成的图集会变成正方形
- 允许旋转:建议勾选
- 裁剪图片边缘空白:建议勾选
- 纹理集定义:panel里面需要的精灵
😶🌫️2.发布
- 包要设置成导出,随即会标红
发布后是以二进制形式存储精灵,更加节省空间
😶🌫️3.Alpha通道导出模式
勾选后,会生成两张PNG图集,一张有颜色一张黑白,可以节约空间
🪶(C)如何加载FGUI发布的文件
😶🌫️1.加载前准备
1.直接放在Resources或者其子目录下 2.打包进AB包中
- 注意事项
1.Texure Type 保持默认Default
2.关闭Generate Mips Maps ( 开启后,2D图片在3D世界中,离相机不同的距离不同分辨率的图片都会自动生成)
3.若出现模糊的情况。Filter Mode设置为Point
小知识: 会自动设置
😶🌫️2.加载UI包
- 获取依赖包
什么是依赖包:除了这个包,你用到了其他包的元件(当然此时只创建了一个包)
//遍历依赖包相关信息
foreach (var item in teachPackage.dependencies)
{
//这样可以获取到 依赖包的名字
UIPackage.AddPackage(item["name"]);
}
- 卸载UI包
卸载会消耗CPU,产生大量的GC
UIPackage.RemovePackage("Teach");
UIPackage.RemoveAllPackages();
😶🌫️3.包内存管理
- 预先加载资源
//提前加载一些声音或者图片等资源
teachPackage.LoadAllAssets();
-
AB包的卸载
2.若UIPackage是从中AB包中载入的,在RemovePackage时AB包才会被Unload(true)。 需自行卸载AB包 ,如果AB包是自行管理,不希望FairyGUI做任何处理的,可以设置
UIPackage.unloadBundleByFGUI = false;
🪶(1)加载UIPanel
😶🌫️1.手动创建UIPanel
- 在Unity中创建UIPanel
Hierarchy窗口右键一>FairyGUI——>UIPanel
选中创建出的uIPanel 在Inspector窗口中点击PackageName或ComponentName在弹出窗口中选择对应的包和组件点击OK即可
UIPanel只能自动载入放置在Resources目录或其子目录下的UT包
😶🌫️2.代码自动创建UIPanel
//首先加载对应的UI包
UIPackage.AddPackage("UI/Teach");
//为一个对象想 添加UIPanel组件 设置相关参数即可
GameObject obj = new GameObject("UIPanel2");
//将层级改为UI层
obj.layer = LayerMask.NameToLayer("UI");
UIPanel panel = obj.AddComponent<UIPanel>();
//设置关键属性
panel.packageName = "Teach";
panel.componentName = "TeachPanel";
//想要改变别的参数属性
panel.container.renderMode = RenderMode.ScreenSpaceOverlay;
panel.container.fairyBatching = true;
panel.SetSortingOrder(1, true);
panel.SetHitTestMode(HitTestMode.Default);
//创建UI
panel.CreateUI();
🪶(2)认识UIPanel
创建UIPanel之后,会生成Stage Camera 和UIPanel
😶🌫️1.UIPanel脚本的属性
-
获取UIPanel,而后即可获取组件
GComponent view = uiPanel.ui;
-
PackageName——包名
-
Componetn Name——组件名
-
Package Path——引用的组件路径
-
Render Mode ——渲染模式
Screen Space Overlay:UI始终显示在最前面
Screen Space Camera:可以自定义正交摄像机渲染UI
World Space:在世界控件使用UI,用透视相机渲染,默认是主相机
当渲染模式是后两种时,可以自己设置渲染UI的摄像机,默认为场景的主摄像机。
如果是World Space模式,需要设置相机,否则无法点击UI
-
Fairy Batching——FairyGUI的动态批处理开关。
切换这个值,可以在编辑模式下实时看到DrawCall的变化。开启它后会开启深度调整,即使我们的UI层级没有刻意设置,底层也能帮助我们进行优化 -
Hit Test Mode:——点击测试模式
Default:使用内置机制判断点击和触摸,不使用射线,效率较高
Raycast:使用射线判断,UIPanel会自动创建碰撞体,适用于UIPanel需要和其它3D物体交互时时使用
-
Touch Disabled——将关闭点击检测
如果UI没有可以交互的内容,可以勾选它提升性能 -
Set Native Children Order——在UIPanel下挂其它3D对象,比如粒子模型
-
UI Transform:——UI位置
渲染模式为Screen Space时设置UI Transform
渲染模式为World Space时设置Transform -
FIt Screen:——UIPanel屏幕适配模式
Fit Size:UI铺满屏幕
Fit Width And Set Middle:UI横向铺满屏幕,上下居中
Fit Height And Set Center:UI纵向铺满屏幕,左右居中
- SortingOrder:——进行排序
1.当渲染模式为ScreenSpace屏幕空间渲染时
SortingOrder为1000这个值是个特殊值
1000以上UIPanel会显示在2D UI的上面
1000以下都显示在2D UI的下面
2.当渲染模式为WorldSpace世界空间渲染时用世界坐标的Z轴来对UI进行排序
如果想要通过z轴来进行排序 需要将需要通过z轴排序的UIPanel的sortingOrder设置为相同值
然后调用API_ Stage.inst.SortWorldSpacePanelsByZOrder(100);
一般进行UI面板的排序,通过 ScreenSpace进行渲染 然后通过 坐标系转换 来不停的更新UI坐标(降低性能消耗),不用方法二世界坐标的Z轴来对UI进行排序
😶🌫️2.认识StageCamera
本质:UI摄像机
-
Constant Size: 是否使用固定的相机大小,默认true
①为ture时。屏幕放大或缩小,粒子效果也会随着放大和缩小,适用于手机平台
② 为false时。屏幕放大或缩小,粒子效果不会随着放大和缩小,使用与PC平台,根据自己游戏面向的平台决定是否勾选
🪶(3)代码动态加载UI资源
😶🌫️1. GRoot
- 是动态创建UI时会自动创建的跟对象, 它主要负责适配等工作
1.设置适配(分辨率自适应)API
GRoot.inst.SetContentScaleFactor(1365, 768, UIContentScaler.ScreenMatchMode.MatchHeight);
2.创建好的UI对象添加为它的子对象
GRoot.inst.AddChild()
😶🌫️2.主要步骤
- 1.设置适配相关内容
//设置分辨率(设置一次即可)
GRoot.inst.SetContentScaleFactor(1365, 768, UIContentScaler.ScreenMatchMode.MatchHeight);
- 2.加载包
//创建UI之前 必须加载包
UIPackage package = UIPackage.AddPackage("UI/package");
- 3.加载依赖包
//加载依赖包
foreach(var item in package.dependencies)
{
UIPackage.AddPackage("UI/" + item["name"]);
}
- 4.动态创建UI资源
1.同步加载
//GObject obj = UIPackage.CreateObject("Teach", "TeachPanel");
//GComponent view = obj.asCom;
GComponent view = UIPackage.CreateObject("Teach", "TeachPanel").asCom;
//组件加载在GRoot对象下
GRoot.inst.AddChild(view);
//销毁UI
//view.Dispose();
2.异步加载
UIPackage.CreateObjectAsync("Teach", "TeachPanel", (obj) =>
{
GComponent v = obj.asCom;
GRoot.inst.AddChild(v);
});
😶🌫️3.GComponent(组件)常用API
- 1.位置
view.x = 10;
view.y = 10;
view.SetPosition(0, 0, 0); - 2.宽高
view.width = 1000;
view.height = 500;
view.SetSize(1365, 768); - 3.轴心点
view.pivotX = 0;
view.pivotY = 0;
view.SetPivot(0, 0, true);
view.pivotAsAnchor = false; - 4.角度
view.rotation = 0; - 5.可见与否
view.visible = true;
6.置灰
view.grayed = true; - 7.缩放
view.scaleX = 1;
view.scaleY = 1; - 8.排序层
view.sortingOrder = 1; - 9.点击不穿透
view.opaque = true; - 10.子对象数量
print(view.numChildren); - 11.子对象相关
添加子对象 ——view.AddChild()
根据名字获取子对象—— view.GetChild(“n1”);
根据索引获取子对象——view.GetChildAt(0);
设置对象排序位置——view.SetChildIndex(null, 5);
设置子对象排序规则
默认,升序,从小到大依次渲染,序号大的显示在前面
view.childrenRenderOrder = ChildrenRenderOrder.Ascent;
降序反之
view.childrenRenderOrder = ChildrenRenderOrder.Descent;
拱形 设置一个顶峰值显示在最前面,两侧的依次渲染
view.childrenRenderOrder = ChildrenRenderOrder.Arch;
view.apexIndex = 5;
😶🌫️4.选择动态创建UI还是手动创建UIPanel?
-
大多数都是选择动态创建,使用代码创建UI,可以应用到传统的设计模式上
注意:动态创建的UI不要和其它GameObject相关联 -
小项目可以使用_UIPanel一般用来做3DUI,它可以更加方便的挂载到任意GameObject上
优点是可以像物体一样直接摆放在场景中,因为随着UI的增多,项目的变大
管理起来常的麻烦
🪶(4)脚本组件
😶🌫️1.UIContentScaler脚本组件
-
不需要每个场景都挂,随便一个对象挂载即可
-
该组件是用来分辨率自适应的
也可以不使用UIContentScaler
通过使用 GRoot.inst.setContentScaleFactor 代码设置 效果完全一致
-
Scale Mode:缩放模式
Constant Pixel Size:不进行缩放。UI按1:1呈现
Scale With Screen Size:根据屏幕大小缩放
Constant Physical Size:暂不支持
- Scale With Screen Size:根据屏幕大小缩放
Design Resolution X/Y:设计分辨率的宽高
Ignore Orientation:忽略方向,FairyGUI会保证屏幕在旋转时缩放系数保持不变,勾选则该功能失效
PC游戏不需要这个特性
- Screen Match Mode:屏幕匹配模式
Match Width Or Height:宽高匹配(横竖屏切换游戏)
Match Width:根据宽匹配(适合竖屏游戏)
Match Height:根据高匹配(适合横屏游戏)
😶🌫️2.认识UIConfig
UIConfig是FGUI提供设置一些全局参数的组件
(默认字体,按钮音效,按钮音量、预加载的包等等)
- Config Items:全局设置
- Preload Packages:预先加载包放在Resources下的包
**—
🪶(一) FGUI元件
- 1.组件类 继承 元件类
- 2.元件类:GObject —— 组件类:GComponent
- 3.元件是stage舞台上的最小组成单位,舞台中的组成元素我们称之为元件
😶🌫️1.元件基本属性
关键参数:
- ①.原大小:勾选后,将使用素材的原始大小,当资源修改后,尺寸会随之修改
- ②.缩放和尺寸的区别: 缩放会改变子对象大小变化,尺寸不会
- ③.倾斜:伪3D的效果,除(图片、动画、装载器)三个元件外,建议不要使用
- ④.轴心:旋转,尺寸,缩放的参考点
- ⑤.同时作为锚点:锚点用于计算相对位置。默认位置为左上角(0,0)
- ⑥.不可触摸:默认图片、普通文本、动画永远是不可触摸,不会监听事件。
用的比较少:
- ①.BlendMode混合模式和滤镜
除图片、动画、文字之外的其它组件会有一定内存消耗。特别的会增加DC - ②.自定义数据:作为额外数据,可以通过代码来获取
😶🌫️2.元件的调用及API
- 元件类 GObject是所有UI元素的基类,组件类中很多内容都是继承自元件类的
- ①.创建一个组件设置适配相关
GRoot.inst.SetContentScaleFactor(1920, 1080, UIContentScaler.ScreenMatchMode.MatchHeight);
- ②.包和依赖包的加载
UIPackage package = UIPackage.AddPackage("UI/xxx");
foreach (var item in package.dependencies)
{
UIPackage.AddPackage(item["name"]);
}
- ③.得到组件类,并设置位置
GComponent view = UIPackage.CreateObject("Teach", "TeachPanel").asCom;
GRoot.inst.AddChild(view);
- ④ 获取组件中的元件
GObject obj = view.GetChild("btnXXX");
- ⑤元件的相关API
//1.设置坐标
obj.x = 20;
obj.y = 20;
obj.SetPosition(0, 0, 0);
//2.设置大小
obj.SetSize(100, 100);
obj.width = 200;
obj.height = 100;
//3.设置大小限制
obj.maxWidth = 1000;
obj.minWidth = 100;
//4.设置缩放
obj.scaleX = 1;
obj.scaleY = 1;
obj.scale = Vector2.one;
//5.设置轴心
obj.SetPivot(0, 0, true);
obj.pivotAsAnchor = false;
//6.设置可见
obj.visible = true;
//7.设置是否交互(点击)
obj.touchable = false;
//8.设置置灰
obj.grayed = true;
//9.设置激活(变灰+触摸)
obj.enabled = true;
//10设置旋转
obj.rotation = 0;
//11.获取原对象
//obj.displayObject.gameObject
//12.销毁
//obj.Dispose();
//资源地址 动画、 图片、 组件才会有
//13.得到URL资源地址和资源名
obj.resourceURL
obj.packageItem.name
//14.是否在舞台
obj.onStag
//15.自定义数据(用得少)
obj.data
😶🌫️3.图片元件
- 最基础的图片显示元素,为了简介高效,它不支持修改图片源、不支持点击(PNG、JPG、TGA、SVG)
- 如果需要动态改变或者支持点击,使用装载器实现
- ①图片大小:图片的原始大小,SVG格式可以修改,SVG可以无损缩放,但是其它格式不能
- ②数据大小:图片所占字节大小(压缩前—压缩后)
- ③缩放模式同UGUI
- ④平滑:若不是像素游戏都需勾选
- ⑤纹理集:将图片设置道同一纹理集中
单独:图单独成为一张纹理集
单独(NPOT):图按原大小直接输出
- ⑥重复边缘像素:(平铺时使用)避免平铺时产生缝隙
- ⑦禁止裁剪边缘空白:不想去掉多余的空白边缘可勾选
更新:选择外部图片覆盖此图片 - ⑧裁剪边缘空白:永久剪除图片周围的全透明像素,图片可能变小
- 填充:可以用作做进度条等(如UGUI的Slider)
- 图片元件相关API:
//1.获取图片元件
GImage img = view.GetChild("图片元件名").asImage;
//2.动态创建图片元件
GImage img2 = UIPackage.CreateObject("包名", "图片名字").asImage;
view.AddChild(img2);
//3.填充值
img.fillAmount = 0.5f;
img.fillMethod = FillMethod.None;
//4.材质和着色器改变
img.shader = xx
img.material = xx
//5.更换精灵图集___动态赋值Texture2D
img.texture = new NTexture(sprite);
- 高清图片使用:将原图改为—— 原名@2x.png 的格式 ,用作这种情况显示,使界面显示效果呈现高清的效果。
😶🌫️4.图形元件
可用它来实现的功能:遮罩、占位、雷达图等等
//1.获取图形元件
GGraph graph = view.GetChild("图形名").asGraph;
//2.画出图形
graph.DrawRect(100, 100, 4, Color.red, Color.white);//画矩形
graph.DrawEllipse(100, 100, Color.red);//画椭圆
//3.动态创建图形元件
GGraph graph2 = new GGraph();
graph2.SetPosition(50, 50, 0);//设置位置
graph2.DrawRect(200, 200, 5, Color.white, Color.red);
view.AddChild(graph2);
//4.空白图形中添加Unity对象
GGraph graph3 = view.GetChild("图形名").asGraph;
//5.设置激活状态
graph3.SetNativeObject()
😶🌫️5.序列帧动画元件
序列帧动画,就是指由n张图片构成的动画,每张图片按照一定时间进行切换产生动画播放的效果
- 如何用FGUI制作序列帧动画
动画格式为JTA格式
- 1.菜单栏——>资源——>新建动画(或工具栏快捷按钮如下:),然后在动画编辑器界面导入图片序列,制作序列帧动画.
- 2.拖入Gif文件到动画编辑器中,Gif会自动转换为序列帧动画
- 3.美术在外部创建
注意:
- 1.导入序列动画图片到动画编辑里面时,一定要注意图片的顺序是否正确,不然会影响动画播放的效果
- 2.保持序列动画都在同一个纹理集当中
//1.获取序列帧动画元件
GMovieClip movie = view.GetChild("序列动画名字").asMovieClip;
movie.x = 0;
movie.y = 0;
//2.动态创建动画
GMovieClip movie = UIPackage.CreateObject("包名", "动画名").asMovieClip;
movie2.x = 50;
view.AddChild(movie2);
//3.切换播放和停止状态
movie.playing = false;
//4.ruo处于停止状态,设置停止在第几帧
movie.frame = 5;
//5.设置循环播放
movie.SetPlaySettings(0, -1, 10, -1);
movie.playing = true;
//6.返回播放动画头部
movie2.Rewind();
//7.播放结束回调函数
movie2.onPlayEnd.Add(() =>
{
print("动画播放完毕");
});
😶🌫️6.骨骼动画元件
FairyGUI目前只支持
- 1.DragonBones龙骨编辑器 所有版本 导出的骨骼动画(建议使用)
- 2.只支持Spine编辑器 3.8版本 导出的骨骼动画
- ①着色器:
Default:,常规遮罩无法作用于骨骼动画,需要用自定义遮罩(骨骼动画库默认的着色器)
FairyGUI/Image:常规遮罩可以作用于骨骼动画。但是没有预乘处理
预乘:预乘 就是提前把srcRGB*srcAlpha计算出来存在贴图的rgb通道中,这样在渲染时就能少做一次乘法
- ②贴图是否已预乘:要和骨骼动画软件发布时选项一样,否则动画显示不正确
- Unity获取API
首先要将骨骼动画插件的SDK导入
- 然后填写FAIRYGUI_DRAGONBONES
- 若导入了两个就填
FAIRYGUI_DRAGONBONES;FAIRYGUI_SPINE
目的启用导入的SDK的代码
- 选中ske后缀的龙骨动画配置文件,进行下列操作
- 就会生成一个Data结尾的数据文件,才可以正常使用龙骨动画
😶🌫️7.装载器元件
1.内容装载器 :
节约性能提升效率
用途就是动态载入资源,动态得改变图片
装载器可以装载: 图片、动画、组件
- 装载器属性
①URL:资源路径(图片、动画、组件)
②填充处理
无 :内容不会发生任何缩放。
等比缩放(显示全部)
等比缩放(无边框)
等比缩放(适应高度)
等比缩放(适应宽度)
自由缩放
注意:如果设置了自动大小,那么填充不发挥作用
- 创建装载器
①工具栏点击
②元件替换 - 装载器API
//1.获取装载器
GLoader loader = view.GetChild("装载器名称").asLoader;
//2.加载包中的资源
loader.url = "ui://包名/资源名";
//3.路径也可以为Unity中资源路径
loader.url = "UI/bk";
//4.动态创建装载器
GLoader loader = new GLoader();
loader.SetSize(100, 100);
loader.y = 400;
loader.url = "ui://包名/资源名";
view.AddChild(loader);
//5.获取装载器中的内容
loader.movieClip //得到装载器中的动画
loader.component //得到装载器中的组件
//6.装载Unity贴图
public Texture t;
loader.texture = new NTexture(t);
//7.自定义加载方案
UIObjectFactory.SetLoaderExtension(typeof(MyGLoader));//注册方法
public class MyGLoader:GLoader
{
protected override void LoadExternal()
{
//自定义加载方式
Sprite s = null;
//如果加载成功
NTexture t = new NTexture(s);
onExternalLoadSuccess(t);
//如果加载失败
onExternalLoadFailed();
}
protected override void FreeExternal(NTexture texture)
{
//释放外部载入资源的逻辑
}
}
2.3D内容装载器 :
用途是和区别:动态载入比较复杂的资源,例如骨骼动画、模型(暂未支持)、粒子特效(暂未支持)等
- 装载器元件相关API
GRoot.inst.AddChild(view);
//1.获取3D装载器
GLoader3D loader3D = view.GetChild("装载器名称").asLoader3D;
//2.动态创建3D装载器
GLoader3D loader3D2 = new GLoader3D();
loader3D2.SetSize(100, 100);
view.AddChild(loader3D2);
//3.设置骨骼动画
loader3D2.SetDragonBones();
loader3D2.SetSpine();
- 专业版内容
🪶(二) FGUI控件
😶🌫️字体控件注意事项
导入字体资源包后,还需在项目设置中,进行路径填写,才可以选择显示
-
1.系统字体(不建议使用)
-
2.TTF字体(常用)支持ttf/ttc/otf字体文件
发布后,字体文件不会被发布,需要自己手动将字体文件放置到引擎中Unity Resources或者Resources/Fonts目录下
字体设置
①系列:字体名称,只读
②采样字体大小:渲染方式为SDFAA才有意义,其它方式使用默认值16即可
③渲染方式:
Smooth:抗锯齿,建议使用
Hinted Smooth:比Smooth更清晰,速度较慢,较小字体建议使用
SDFAA:使用SDF技术渲染字体,TextMeshPro时可使用
④斜体样式:SDFAA时才有,使用斜体时的倾斜角度15~60
⑤粗体分量:SDFAA时才有,使用粗体时,粗体的重量,-3~3
3.位图字体(特殊需求时使用)
位图字体就是使用图片来表示某个文字
首先需要导入字体图片然后,导入到位图字体编辑器中
而后就形成了一个字体包,可以放入文字中使用
注意:默认字体
//2.默认字体需要自己手动设置
//设置默认字体 要在显示面板之前
//如果是放置在指定文件夹下 那么直接填写字体名即可
UIConfig.defaultFont = "STHUPO";
//如果没有放到指定路径下
UIConfig.defaultFont = "Other/STHUPO";
//3.如果字体文件放置在AB包中或者Resources下其他目录下,需要手动自己注册
//手动从对应位置加载字体文件
Font font = Resources.Load<Font>("Other/STCAIYUN");
//然后申明一个 动态字体类型对象
DynamicFont dFont = new DynamicFont("STCAIYUN", font);
//注册它
FontManager.RegisterFont(dFont);
//设置适配相关
GRoot.inst.SetContentScaleFactor(1365, 768, UIContentScaler.ScreenMatchMode.MatchHeight);
//包和依赖包的加载
UIPackage package = UIPackage.AddPackage("UI/Teach");
foreach (var item in package.dependencies)
{
UIPackage.AddPackage(item["name"]);
}
GComponent view = UIPackage.CreateObject("Teach", "TeachPanel").asCom;
GRoot.inst.AddChild(view);
#endregion
#region 知识点三 字体相关问题解决
//1.字体不带加粗 可以手动设置
//FontManager.GetFont("字体名").customBold = true;
//2.斜体和粗体不能同时使用 如果已经设置了customBold 不用设置customBoldAndItalic
//FontManager.GetFont("字体名").customBoldAndItalic = true;
//3.如果要使用TextMeshPro 需要在Unity编辑器的Scripting Define Symbols里增加 FAIRYGUI_TMPRO
//1.手动设置字体格式
//FontManager.GetFont("字体名").customBold = true;
//2.使用TextMeshPro
//Unity编辑器的Scripting Define Symbols增加 FAIRYGUI_TMPRO
😶🌫️1.普通文本控件
普通文本负责文本的显示功能
不支持交互(鼠标触摸感应)、超链接和图文混排、HTML语法
- 支持UBB语法
显示图片:[img]ui://包名/图片名[/img]_富文本才支持
超链接:[url=网址]超链接[/url]_富文本才支持
字体:[font=字体名]字体[/font]
字体大小:[size=10]text[/size]
粗体:[b]123[/b]
斜体:[i]123[/i]
下划线:[u]123[/u]
颜色:[color=#FFFFFF]123[/color]
[color=#FFFFFF,#000000]文字[/color] 两个颜色上下过渡
[color=#FFFFFF,#CCCCCC,#000000,#FFFF00]文字[/color]四个颜色可以做左右过渡或者双方向过渡
- 支持文字模板
钻石数量:
{H=100}红钻{Y=200}银钻
//1.获取文本
GTextField text = view.GetChild("字体控件名").asTextField;
text.text = "设置文字内容";
//2.对齐方式
text.align = AlignType.Left;
text.verticalAlign = VertAlignType.Middle;
//3.单行显示并设置大小
text.singleLine = true;
text.textFormat.size = 50;
//4.动态创建文本
GTextField txt = new GTextField();
txt.SetSize(100, 100);
txt.text = "哈喽·";
view.AddChild(txt);
//5.修改文本样式
txt.text
txt.textFormat.size
txt.textFormat.color
//6.文本模板设置
GTextField txt = view.GetChild("txtInfo").asTextField;
//方式一:
txt2.SetVar("jin", "500");
txt2.SetVar("yin", "1000");
txt2.FlushVars();
//方式二:
Dictionary<string, string> xxx = new Dictionary<string, string>();
dic.Add("jin", "10000");
dic.Add("yin", "1");
txt2.templateVars = xxx;
//7.关闭模板功能
txt2.templateVars = null;
😶🌫️2.富文本控件
1.图片
<img src='ui://包名/图片名/>
<img src='ui://包名/图片名' width='20' height='20'/>
<img src='ui://包名/图片名' width='50%' height='50%'/>
2.超链接:
<a href='链接地址'>链接名字</a>
HtmlParseOptions.DefaultLinkColor = ...; //设置链接颜色
HtmlParseOptions.DefaultLinkBgColor = ...;
HtmlParseOptions.DefaultLinkHoverBgColor = ...;
- 富文本支持交互(鼠标/触摸)
- 富文本支持超链接和图文混排
- 富文本支持HTML语法
- 富文本支持HTML语法
- 富文本支持超链接和图文混排
//1.获取富文本
GRichTextField richTxt = view.GetChild("控件名").asRichTextField;
richTxt.text = "";
//2.动态创建富文本
GRichTextField richTxt2 = new GRichTextField();
richTxt2.SetSize(100, 100);
richTxt2.SetPosition(20, 20, 0);
richTxt2.text = "<a herf='www.baidu.com'>超链接3</a>";
view.AddChild(richTxt2);
//3.点击相关
richTxt.onClick.Add(Click);
richTxt.onClick.Add(() => {
print("点击2");
});
richTxt.onClick.Remove(Click);
richTxt.onClick.Clear();
//4.超链接点击相关
richTxt.onClickLink.Add((obj) =>
{
print(obj.data.ToString());
});
}
//HTML超链接样式
//1.全局设置
HtmlParseOptions.DefaultLinkUnderline = true;
HtmlParseOptions.DefaultLinkColor = Color.red;
HtmlParseOptions.DefaultLinkBgColor = Color.green;
HtmlParseOptions.DefaultLinkHoverBgColor = Color.yellow;
//2.单个富文本设置
HtmlParseOptions options = richTxt.richTextField.htmlParseOptions;
options.linkUnderline = false;
options.linkColor = Color.green;
options.linkBgColor = Color.red;
😶🌫️3.输入文本控件
- 输入限制:正则表达式规则
- 键盘类型:在手机上输入时是手机键盘类型
//1.获取输入文本控件
GTextInput input = view.GetChild("inputTxt").asTextInput;
//2.控件相关API
input.text = "输入的字符串";
input.maxLength = 20; //最大长度
input.displayAsPassword = false; //密码开关
input.restrict = ""; //输入限制
input.keyboardType = 0; //键盘类型
input.promptText = "请输入密码"; //提示内容
input.SetSelection(0, 4); //设置当前输入框选中的字符串范围
//3.事件监听相关
input.onChanged.Add(() =>
{
print(input.text);
});
//4.焦点事件监听
input.onFocusIn.Add(() =>
{
print("焦点进入");
});
input.onFocusOut.Add(() =>
{
print("焦点离开");
});
//主动设置焦点
input.RequestFocus();
//输入完成事件监听(设置为单行时PC上有用)
input.onSubmit.Add(() =>
{
print("输入完成" + input.text);
});
😶🌫️4.组控件
- 组是组件内用于可以批量管理元件和控件的特殊对象,统一管理多个元件
相当于变成一个对象的子对象的统一管理
在舞台上选定一个或多个元件、控件,然Ctrl+G,建立成组
- 排除隐藏对象:勾选后,隐藏对象不会参与排列
//1.获取高级组对象
GGroup g = view.GetChild("group1").asGroup;
//2.相关API
g.y = 0; //设置位置
g.visible = false; //设置显隐
g.layout = GroupLayoutType.Horizontal; //改变布局
//3.判断归属
GImage img = UIPackage.CreateObject("包名", "组名").asImage;
view.AddChild(img);
//设置该元件属于某一组
img.group = g;
for (int i = 0; i < view.numChildren; i++)
{
//我们只有通过这种遍历的方式 找到 组件中的 元件 是否在某一个组当中
if( view.GetChildAt(i).group == g )
{
print(view.GetChildAt(i).name + "在组当中" + g.name);
}
}
😶🌫️5.控制器(组件的一个功能)
核心功能之一:如按钮就用到了控制器
-
1.分页功能:一个组件可以切换不同的页面
-
2.按钮状态: 按钮通常有按下、鼠标悬浮等多个状态,我们可以利用控制器为每个状态安排不同的显示内容
-
3.属性变化:利用控制器,我们可以使元件具有多个不同的形态,并且可以方便地切换
- 导出为组件属性:可以在组件属性上面显示
- 分页功能的切换:有以下功能
//1.获取控制器
GComponent controller = view.GetChild("controllerTest").asCom;
Controller c = controller.GetController("myController");
//2.控制器重要API
c.selectedIndex = 1; //通过切换控制器页签 会触发事件
c.selectedPage = "page2"; //通过名字去切换页签 会触发事件
c.SetSelectedIndex(1); //通过索引切换不会触发事件
c.SetSelectedPage("page2");//通过名字去切换页签 不会触发事件
GearBase.disableAllTweenEffect = true;关闭所有控制器的缓动播放
//3.控制器事件相关
c.onChanged.Add(() =>//控制器变化时监听
{
print("切换页签");
});
c.SetSelectedIndex(1);
GObject obj = controller.GetChild("bk");
obj.onGearStop.Add(() =>//控制器有缓动效果 缓动结束后事件监听
{
print("结束缓动");
});
😶🌫️6.关联系统(组件的一个功能)
类似于UGUI中的九宫格锚点,但是FGUI操作有点麻烦
- 默认为左边的为控件的方位,右边为容器的就是组件的方位
FairyGUI实现自动布局的核心技术
- 快捷按钮
//1.设置关联
obj.AddRelation(view, RelationType.Left_Left);
obj.AddRelation(view, RelationType.Top_Top);
//2.删除关联
obj.RemoveRelation(view, RelationType.Left_Left);
obj.RemoveRelation(view, RelationType.Top_Top);
obj.relations.ClearAll(); //移除和所有对象的关联
obj.relations.ClearFor(view); //移除和指定对象的所有关联
😶🌫️7.标签(组件的一个功能)
标签主要是由文本和图片组成 ,是一个组合控件(组件)
-
用途: 当我们需要在UI中使用图片+文字的组合显示时
-
规则:组成完整标签的两部分
1.文本:可以是普通文本、富文本、标签、按钮 ——元件名字一定为title(自动)
2.图片:装载器、标签、按钮——元件名字一定为icon
- 将标签拖到组件上之后,即可一键设置
//1.获取标签控件
GLabel label = view.GetChild("标签名").asLabel;
label.text = "";
label.icon = "ui://xx/xxxx";
GObject obj = view.GetChild("标签名");
obj.text = "";
obj.icon = "ui://xx/xxx";
//2.标签控件常用API
label.GetChild("title").asTextField; //获取title使用他的API
label.GetChild("icon").asLoader//获取icon使用他的API
label.titleColor; //文本颜色
label.titleFontSize = 30;//文本大小
😶🌫️8.按钮(一个扩展组件)
+ 文本标题和图形标题勾选后
- 四个状态(未按,按下,进入,退出)
- 元件功能属性
//1.获取按钮控件
GButton btn = view.GetChild("按钮名").asButton;
btn.text = "按钮的内容";
btn.icon = "ui://xx/xxxx";//图标
GObject obj = view.GetChild("按钮名");
obj.text = "";
obj.icon = "ui://xx/xxxx";
- 若面板上未如此设置,则通过以下代码动态创建
//2.音效相关设置
UIConfig.buttonSound = (NAudioClip)UIPackage.GetItemAssetByURL("ui://xx/xxx");
//设置默认音效,放在显示面板之前,不在这里
UIConfig.buttonSoundVolumeScale = 0.5f; //设置音效大小
GRoot.inst.EnableSound(); //开启音效
GRoot.inst.DisableSound(); //关闭音效
GRoot.inst.soundVolume = 0.5f; //调整全局声音大小 ,包括 按钮 和 动效
//3.事件监听相关
btn.onClick.Add(() =>
{
print("按钮被点击");
});
btn.FireClick(true, true); //通过代码控制是否触发按钮
btn.onClick.Call(); //触发按钮中监听的函数 但是没有点击效果
😶🌫️9.单选和复选按钮
- 复选按钮
- 单选按钮
①需要添加一个控制器
②点击连接
③即可形成互斥效果的单选按钮
UIConfig.buttonSound = (NAudioClip)UIPackage.GetItemAssetByURL("ui://Teach/btnMusic");
//设置默认音效
UIConfig.buttonSoundVolumeScale = 0.5f;
GComponent view = UIPackage.CreateObject("包名", "组件名").asCom;
GRoot.inst.AddChild(view);
//1.获取单选和多选框
GButton check = view.GetChild("按钮名").asButton;
GButton radio = view.GetChild("按钮名").asButton;
check.selected = true; //改变选中状态
radio.selected = true; //改变选中状态
Controller c = view.GetController("控制器名字"); //单选按钮来 建议通过获取控制器去切换选择状态
c.selectedIndex = 1;
//2.事件相关
checkBox.onChanged.Add(() =>
{
print("状态现在为" + check.selected);
});
😶🌫️10.进度条(本质:组件)
- 原理:就是按进度改变一个元件的宽度、高度或填充比例
- 自动创建
- 手动创建规则:
在组件中按特定规则添加元件即可制作为进度条
组件中关键元件名内部规则:
- bar:横向进度条改变宽度的元件。处于最大值时的宽度(可以是任意类型元件)
- bar_v: 纵向进度条改变高度的元件。
- title: 用于显示进度的标题,可以是装载器,标签,按钮
- ani:如果进度条是序列帧动画,则0~100对应动画的帧索引
注意:设置bar的宽度为进度条,设置bar_v的高度为进度条处于最大值时的高度(可以是任意类型元件)
- API相关:
//1.设置默认音效
UIConfig.buttonSound = (NAudioClip)UIPackage.GetItemAssetByURL("ui://包名/音效名");
UIConfig.buttonSoundVolumeScale = 0.8f;
GComponent view = UIPackage.CreateObject("包名", "组件名").asCom;
GRoot.inst.AddChild(view);
//2.获取进度条
GProgressBar pb = view.GetChild("进度条名").asProgress;
//3.改变进度
pb.value = 30;
pb.TweenValue(100, 3); //让进度3秒内缓慢的变到100
😶🌫️11.滑动条(本质:组件)
- 滑动条与进度条相似,滑动条只是增加了一个按钮
-
组件中关键元件名规则:
bar:横向滑动条改变宽度的元件。 bar_v: 纵向滑动条改变高度的元件。 title: 用于显示进度的标题,可以是文本、装载器,标签,按钮 grip:用于拖动的按钮
注意:
①设置bar_v的高度为滑动条处于最大值时的高度(可以是任意类型元件)
②grip按钮应该与bar对象建立一个关联,并放置在进度条处于最大值时的位置。这个关联是:
③正向:grip左左关联到bar或者顶顶关联到bar_v;
④反向:grip顶顶关联到bar或者底底关联到bar_v。
//1.获取滑动条
GSlider slider = view.GetChild("滑动条名").asSlider;
//2.改变进度
slider.value = 100;
//3.事件
slider.onChanged.Add(() =>
{
print(slider.value);
});
😶🌫️12.滚动条(本质:组件)
-
需要配合滚动容器使用,是可选控件
-
自动创建
-
手动创建
组件中关键元件名规则 arrow1(可选):垂直滚动条时,代表上侧的按钮 arrow2(可选):垂直滚动条时,代表下侧的按钮 grip:表示滚动条中间的滑块按钮 bar:限制区域,作占位用途
-
需要配合滚动容器使用,现在还不可使用
😶🌫️13.滚动容器(本质:组件)
- 组件的溢出处理设置为“ 滚动”,那么该组件就成为了滚动容器
-
属性相关:
滚动条显示:默认勾选
边缘回弹效果:默认勾选
触摸滚动效果:默认勾选 -
页面模式:
以视口大小为页面大小,每次滚动的距离是一页。一般在移动平台上使用,PC上较少,拖动滚动条进行滚动操作与这个模式冲突。 -
浮动显示:
勾选后,滚动条不占据视口的位置,而是直接覆盖在视口上面。例如一个适用于手机的滚动条,它是细条且半透明的,只在滚动时才显示出来,用于提示滚动位置。那么我们把它设置为“浮动”,这样就不会挤占视口的显示空间。
- 简单效果
- 相关API
//1.获取滚动容器
ScrollPane scrollPanel;
GComponent scroll = view.GetChild("滚动条名").asCom;
scrollPanel = scroll.scrollPane;
//2.滚动位置设置
scrollPanel.posY = 0;
scrollPanel.SetPercY(0.5f, true); //按百分比滚动
print(scrollPanel.viewWidth); //视口宽高
print(scrollPanel.viewHeight);
print(scrollPanel.contentWidth); //内容宽高
print(scrollPanel.contentHeight);
scrollPanel.ScrollToView() //设置指定元件出现在视口内
scrollPanel.touchEffect = true;//触摸功能开关
//3.事件相关
scrollPanel.onScroll.Add(() => //当滚动视图位置改变时
{});
scrollPanel.onScrollEnd.Add(() => //惯性移动停止回调
{ });
scrollPanel.onPullDownRelease.Add(() => //下拉刷新回调
{ });
scrollPanel.onPullUpRelease.Add(() => //上拉刷新回调
{});
😶🌫️14.列表(本质:组件)
组件的一种特殊扩展
在组件的基础上加入排序相关的功能
相关属性
- 渲染顺序拱形:自定义一个索引显示在最前面,两侧的依次渲染
- 选择控制:
可以和控制器联动,这样当列表选中项目发生改变时,控制器也同时跳转到相同索引的页面 - 分页控制:
可以绑定一个控制器。当列表发生翻页滚动时(溢出处理必须为三种滚动之一,滚动必须勾选为页面模式),控制器也同时跳转到相同索引(页码)的页面。反之亦然,如果控制器跳转到某个页面,那么列表也同时滚动到相同索引(页码)的页面。 - 项目资源
- 编辑列表
- 自动调整列表项目大小(默认不勾选,勾选可能会拉伸图像)
//默认竖直滚动条
UIConfig.verticalScrollBar = "ui://包名/列表名";
GComponent view = UIPackage.CreateObject("包名", "组件名").asCom;
GRoot.inst.AddChild(view);
//1.获取列表
GList list = view.GetChild("列表名").asList;
//2.组件的 添加和移除
GObject obj = list.AddChild(UIPackage.CreateObject("包名", "图片名"));
list.RemoveChild(obj);//移除列表
obj.Dispose();//销毁
//从列表缓存池池中取出或新建对象添加到列表中
GObject obj3 = list.AddItemFromPool()//池子里new 个对象
list.RemoveChildToPool(obj3); //删除一个item,并将对象返回池中
list.AddItemFromPool(); //现在池子里面有一个对象 会直接取出来
list.RemoveChildToPoolAt(0);//删除指定位置item,并返回池中
list.RemoveChildrenToPool();//删除一个范围内的item,或者全部删除,返回池子
list.RemoveChildrenToPool(0,50); //移除指定索引位置的对象
list.GetFromPool("url地址")//从池中取出对象,并不会添加到列表中
ReturnToPool//将对象返回池中,并不会从列表中移除
//3.使用回调函数修改列表
list.itemRenderer = RenderListItem;
list.numItems = 20; //自动创建20个对象,在委托函数中进行初始化操作
list.numItems = 10; //每次重新赋值 会留下10个对象 多余的对象 放入池子中
list.numItems = 20;//如果在重新变成20 多出来的10个 是之前放入池子的10个
list.ResizeToFit(); //重置大小
//4.事件相关
list.onClickItem.Add((obj) =>
{
print((obj.data as GObject).text);
});
private void RenderListItem(int index, GObject obj)//作为回调函数
{
//初始化创建的每一个对象
obj.text = index.ToString();
}
}
- 虚拟列表和循环列表
虚拟列表,节约性能,如要创建1000个显示物件,但是列表中只能显示20个,每次滑动时,只更新这20个物件,达到显示1000个的效果
虚拟列表使用的前提条件
1.必须要定义itemRenderer
2.必须要开启滚动相关
3.一开始就要把项目资源设置好 或者 我们可以通过代码设置项目资源
list.defaultItem = "通过url地址去关联项目资源";
- 开启虚拟列表
list.SetVirtual();
- 循环列表只支持 单行或者单列布局,不支持流动布局和分页布局
若列表循环20个,则滚动列表一直是重复这二十个物件
list.SetVirtualAndLoop();
list.numItems = 20;
😶🌫️15.下拉框(本质:组件)
-
自动创建
-
手动创建
1.弹出组件的构成:背景图(与list宽高关联)+垂直滚动列表(命名为list并关联好项目资源)
2.button 下拉框需要一个按钮控制器(下拉框点击展开时,保持在down页,收回时保持在up也或over页)
3.title 可以是普通文本、富文本、标签、按钮
- 相关API
//1.获取下拉框
GComboBox comboBox = view.GetChild("下拉框的而名字").asComboBox;
//2.代码初始化内容
comboBox.items = new string[] { "选1", "选2" , "选3" , "选4" };
comboBox.icons = new string[] { "ui://包名/图片1", "ui://包名/图片2", "ui://包名/图片3", "ui://包名/图片4" };
comboBox.values = new string[] { "11", "22", "33", "44" };
print(comboBox.selectedIndex); //通过索引通过他就可以得到 内容 图标 值
print(comboBox.value); //值 快捷获取值
comboBox.selectedIndex = 2; //通过索引设置
comboBox.value = "44"; //通过值设置
GRoot.inst.HidePopup();//代码关闭弹出项
//3.事件相关
comboBox.onChanged.Add(() =>
{
print("下拉框改变了" + comboBox.selectedIndex + "_" + comboBox.items[comboBox.selectedIndex]);
});
🪶(快捷键)
- 拖动视图:鼠标滚轮
- 重命名组件:F2
- 成组:ctrl + G
⭐🅰️⭐
你们的点赞👍 收藏⭐ 留言📝 关注✅是我持续创作,输出优质内容的最大动力!、