【Unity之FGUI】黑神章Fairy GUI控件详解

news2024/11/16 5:53:55

在这里插入图片描述

👨‍💻个人主页：@元宇宙-秩沅

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 秩沅 原创
👨‍💻 收录于专栏：就业宝典

⭐🅰️推荐专栏⭐

⭐-软件设计师高频考点大全⭐

文章目录

    • ⭐前言⭐
    • 🪶 FGUI控件 详解【一】
      • 😶‍🌫️字体控件注意事项
      • 😶‍🌫️1.普通文本控件
      • 😶‍🌫️2.富文本控件
      • 😶‍🌫️3.输入文本控件
      • 😶‍🌫️4.组控件
      • 😶‍🌫️5.控制器（组件的一个功能）
      • 😶‍🌫️6.关联系统（组件的一个功能）
      • 😶‍🌫️7.标签（组件的一个功能）
    • ⭐🅰️⭐

⭐前言⭐

FGUI是一种用于游戏开发的GUI系统。它是一种轻量级的UI系统，具有高性能和可扩展性。FGUI使用自定义的UI编辑器来创建和管理UI界面，开发者可以使用编辑器中提供的各种组件和布局来设计和排版UI界面。FGUI还支持多分辨率适配和多语言本地化，使开发者能够轻松地创建适应不同设备和语言环境的UI界面。FGUI可以与各种游戏引擎和开发工具集成，如Unity和Cocos2d-x，使其可以在不同平台上使用。

🪶 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.富文本控件

HTML语法点击进入

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语法在这里插入图片描述
        在这里插入图片描述
    //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;//文本大小

⭐🅰️⭐

⭐【Unityc#专题篇】之c#进阶篇】

⭐【Unityc#专题篇】之c#核心篇】

⭐【Unityc#专题篇】之c#基础篇】

⭐【Unity-c#专题篇】之c#入门篇】

⭐【Unityc#专题篇】—进阶章题单实践练习

⭐【Unityc#专题篇】—基础章题单实践练习

⭐【Unityc#专题篇】—核心章题单实践练习

你们的点赞👍 收藏⭐ 留言📝 关注✅是我持续创作，输出优质内容的最大动力！、

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1702122.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【MATLAB】基于VMD-SSA-GRU的回归预测模型

【MATLAB】基于VMD-SSA-GRU的回归预测模型

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 1 基本定义 基于VMD-SSA-GRU的回归预测模型是一种集成了变分模态分解&#xff08;VMD&#xff09;、同步滑动平均&#xff08;SSA&#xff09;和门控循环单元&#xff08;GRU&#xff09;的复杂时间序列预测方法。下面将…
阅读更多...
SaaS产品如何借助分销裂变实现爆发式增长？

SaaS产品如何借助分销裂变实现爆发式增长？

在SaaS市场中&#xff0c;如何通过有效的推广方式实现产品的快速增长是每个企业都在思考的问题。分销裂变作为一种新兴的推广方式&#xff0c;以其低成本、高效率的特点&#xff0c;为SaaS产品的增长提供了新的可能。 一、分销裂变的基本原理 分销裂变是通过设置一定的奖励机…
阅读更多...
一招搞定！家里灰尘多？教你如何轻松清理，推荐必备神器

一招搞定！家里灰尘多？教你如何轻松清理，推荐必备神器

在现代生活中&#xff0c;灰尘无处不在&#xff0c;特别是在大城市&#xff0c;空气中的污染物更多&#xff0c;导致家里的灰尘积聚速度加快。保持家居环境的干净和整洁不仅能提升生活质量&#xff0c;还能保护我们的健康。作为一名家电博主将为你提供详细的家里灰尘清理方法&a…
阅读更多...
抖音里卖什么最赚钱？4个冷门的高利润商品，还有谁不知道！

抖音里卖什么最赚钱？4个冷门的高利润商品，还有谁不知道！

哈喽~我的电商月月 做抖音小店的新手朋友&#xff0c;一定很想知道&#xff0c;在抖音里卖什么最赚钱&#xff1f; 很多人都会推荐&#xff0c;日常百货&#xff0c;小风扇&#xff0c;女装&#xff0c;宠物用品等等&#xff0c;这些商品确实很好做&#xff0c;你们可以试试 …
阅读更多...
【跟着例子学MySQL】SQL进阶 -- 子查询和时间

【跟着例子学MySQL】SQL进阶 -- 子查询和时间

文章目录 前言回顾子查询日期和时间未完待续 前言 举例子&#xff0c;是最简单有效的学习方法。本系列文章以一个贯穿始终的场景&#xff0c;结合多个实例讲解MySQL的基本用法。 ❔ 为什么要写这个系列&#xff1f; 模仿是最好的老师&#xff0c;实践是检验成果的方法。本系列…
阅读更多...
c语言从入门到函数速成（完结篇）

c语言从入门到函数速成（完结篇）

哈喽&#xff0c;小伙伴们大家好呀&#xff0c;本篇文章是这个系列的完结篇&#xff0c;希望大家看完后能有所收获哦 首先能看到这里的同学&#xff0c;一定也是自觉性比较强的了&#xff0c;我会在文章末尾给大家发点小福利 那么&#xff0c;我们先来通过数学中的函数来引入一…
阅读更多...
neo4j docker安装使用，py2neo python包使用

neo4j docker安装使用，py2neo python包使用

参考&#xff1a;https://neo4j.com/docs/operations-manual/current/docker/introduction/ 运行&#xff1a; docker run --publish7474:7474 --publish7687:7687 neo4j查看&#xff1a; http://192***ip:7474 username/password 都是 neo4j/neo4j 简单案例 创建例子&am…
阅读更多...
融资融券操作指南（附最低费率开户渠道）

融资融券操作指南（附最低费率开户渠道）

部分朋友在开通融资融券后&#xff0c;对于融资融券的操作不是很熟练&#xff0c;并且存在很多问题。其实&#xff0c;融资融券核心就是一个“借”&#xff0c;你借券商的资金或者股票&#xff0c;看多时借入资金买入&#xff0c;看空时借入券源卖出。你不可能空口白牙的去借&a…
阅读更多...
使用Github Action发布python包到pypi.org

使用Github Action发布python包到pypi.org

一、pypi中创建token 1. 浏览器中打开这个网址Log in PyPI 输入Token name&#xff0c;选择一个Scope&#xff0c;然后点击Create token 创建成功后&#xff0c;进入到如下页面&#xff1a; 点进Copy token&#xff0c;然后在新的标签页打开github 二、配置token到GitHub …
阅读更多...
修改uniapp内置组件checkbox的样式

修改uniapp内置组件checkbox的样式

默认情况下 <view style"margin-bottom: 20rpx;"><label style"display: flex;align-items: center;width: fit-content;" click"handleCheck(cxm4s)"><checkbox /><text>车信盟出险4S维保</text></label>…
阅读更多...
学习Uni-app开发小程序Day27

学习Uni-app开发小程序Day27

这一章学习了几个功能点&#xff0c;例如&#xff1a;try{}catch处理同步请求下载记录异常处理、onShareAppMessage分享好友和分享微信朋友圈、对分享页面传参进行特殊处理、共用分类列表页面实现我的下载和评分页面、使用mp-html富文本插件渲染公告详情页面 try{}catch处理同…
阅读更多...
Java代码——@Mock注入失效，注入对象始终为null

Java代码——@Mock注入失效，注入对象始终为null

现象&#xff1a; 最近在使用Mock对象做单元测试&#xff0c;但是发现mock的对象始终为null. 代码如下&#xff1a; package com.****.cache;import org.junit.jupiter.api.Test; import org.junit.runner.RunWith; import org.mockito.Mock; import org.mockito.junit.Mock…
阅读更多...
基本Java语法和语义 （Reading 2）

基本Java语法和语义 （Reading 2）

&#xff08;1&#xff09;Java和C在变量类型命名和使用 基本数据类型 对象类型与引用类型 特殊类型 关键字和修饰符 &#xff08;2&#xff09;快照图&#xff1a; IDE调试工具: 许多IDE&#xff08;如Eclipse、IntelliJ IDEA&#xff09;提供了调试功能&#xff0c;可以…
阅读更多...
新风向？——2DGS（2D高斯泼溅）横空出世

新风向？——2DGS（2D高斯泼溅）横空出世

之前读完了3D高斯泼溅&#xff0c;收获颇丰&#xff0c;可没想到的是2D高斯泼溅也在三月份接踵而至。让我们一起解读一下&#xff01; 论文地址: 2D Gaussian Splatting for Geometrically Accurate Radiance Fields 代码地址: 2d-gaussian-splatting 一. 论文解读 Abstract …
阅读更多...
Redis 可视化工具 RedisInsight 的保姆级安装以及使用（最新）

Redis 可视化工具 RedisInsight 的保姆级安装以及使用（最新）

Redis 可视化工具 RedisInsight 的保姆级安装以及使用 一、下载 RedisInsight二、安装 RedisInsight三、使用 RedisInsight四、新建 Redis 连接 一、下载 RedisInsight 官网 https://redis.io/insight/填写基本信息之后点击 DOWNLOAD 二、安装 RedisInsight 双击安装包 点击下一…
阅读更多...
Kubeadm Online Install Kubernetes v1.30.1

Kubeadm Online Install Kubernetes v1.30.1

文章目录 简介架构预备条件资源规划 基础配置配置网卡配置 hosts安装常用软件配置互信安装 ansible配置 hosts关闭 swapselinux防火墙文件句柄数配置内核参数日志主机配置代理 安装 containerd方法1. 适用于rocky-8.9-x86_64-dvd1.iso方法2 适用于 rocky-8.9-x86_64-minimal.is…
阅读更多...
ARM IHI0069F GIC architecture specification (8)

ARM IHI0069F GIC architecture specification (8)

3.2中断旁路支持 CPU interface可以支持中断信号旁路&#xff0c;使得当接口发出的中断信号被禁用时&#xff0c;传统中断信号被传递到PE上的中断请求输入&#xff0c;从而绕过GIC功能。 是否支持旁路由实际设计决定。 用于确定是否使用GICv3 FIQ和IRQ输出或旁路信号的控制取决…
阅读更多...
DOS学习-目录与文件应用操作经典案例-del

DOS学习-目录与文件应用操作经典案例-del

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一.前言 二.使用 三.案例 一.前言 DOS系统的del命令是一个用于删除文件的命令行工具。以下…
阅读更多...
Android Service应用详解

Android Service应用详解

1、Service概括 由于手机屏幕的限制&#xff0c;通常情况下在同一时刻仅有一个应用程序处于激活状态&#xff0c;并能够显示在手机屏幕上&#xff0c;因此&#xff0c;应用程序需要一种机制&#xff0c;在没有用户界面的情况下&#xff0c;能够长时间在后台运行&#xff0c;实…
阅读更多...
SQLI-labs-第二十五关和第二十五a关

SQLI-labs-第二十五关和第二十五a关

目录 第二十五关 1、判断注入点 2、判断数据库 3、判断表名 4、判断字段名 5、获取数据库的数据 第二十五a关 1、判断注入点 2、判断数据库 第二十五关 知识点&#xff1a;绕过and、or过滤 思路&#xff1a; 通过分析源码和页面&#xff0c;我们可以知道对and和or 进…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023