【Unity之FGUI】Fairy GUI面板的创建相关

在这里插入图片描述


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

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

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

🅰️推荐专栏

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



文章目录

    • 前言
    • 🪶(==1==)加载UIPanel
      • 😶‍🌫️1.手动创建UIPanel
      • 😶‍🌫️2.代码自动创建UIPanel
    • 🪶(==2==)认识UIPanel
      • 😶‍🌫️1.UIPanel脚本的属性
      • 😶‍🌫️2.认识StageCamera
    • 🪶(==3==)代码动态加载UI资源
      • 😶‍🌫️1. GRoot
      • 😶‍🌫️2.主要步骤
      • 😶‍🌫️3.GComponent(组件)常用API
      • 😶‍🌫️4.选择动态创建UI还是手动创建UIPanel?
    • 🪶(==4==)脚本组件
      • 😶‍🌫️1.UIContentScaler脚本组件
      • 😶‍🌫️2.认识UIConfig
    • 🅰️


前言


🪶(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);//创建UIpanel.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下的包

🅰️


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

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

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

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

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

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

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


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


在这里插入图片描述


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue组件的基本使用方法

组件 【1】组件是什么&#xff1f; 组件就是&#xff1a;扩展 HTML 元素&#xff0c;封装可重用的代码&#xff0c;目的是复用例如&#xff1a;有一个轮播图&#xff0c;可以在很多页面中使用&#xff0c;一个轮播有js&#xff0c;css&#xff0c;html组件把js&#xff0c;cs…

【移动云】5G时代——你我的智慧云

文章目录 0.引言1.移动云简介2.移动云学习资源3.移动云产品介绍3.1 大数据—数据可视化&#xff08;DataInsight&#xff09;3.1.1 应用场景3.1.2 产品基本架构3.1.3 优势 3.2 云主机ECS3.2.1 云主机ECS优势3.2.2 云主机主要功能3.2.3 应用场景 4.移动云解决方案4.1 热门案例1&…

男士内裤哪个品牌好穿舒服?适合夏季的五款男士内裤推荐

很多男性对内裤的不重视&#xff0c;似乎是与生俱来的&#xff0c;错把“糙汉”当“硬汉”。特别是一直以来都由女性包办内裤的男士&#xff0c;经常是不合适也勉强穿着。即使是生活条件不断提升的今天&#xff0c;还是有不少男士表面光鲜亮丽&#xff0c;对内裤反而不太讲究。…

解读:Mint Blockchain 最新路线图,释放 NFT 生态重磅发展计划

作者&#xff1a;Mint Ecosystem 关于 Mint Blockchain&#xff1a;Mint Blockchain 是一个以太坊原生 L2 网络&#xff0c;核心是发展 NFT 生态和产业&#xff0c;促进 NFT 领域的 Mass Adoption 产生。MintCore 团队致力于将 Mint Blockchain 打造成一个围绕服务 NFT 资产的…

SqlServer 2016 2017 2019安装失败-无法找到数据库引擎启动句柄

SqlServer 2016 2017 2019安装失败-无法找到数据库引擎启动句柄 出现以上问题的原因是因为系统账户无法操作数据库引擎服务。需要调整权限。 按照以下步骤解决&#xff0c;成功完成安装&#xff0c;已亲测&#xff1a; 1、如果您已经安装了相同版本的SQL Server&#xff0c;…

数据结构算法题day03

数据结构算法题day03 题目 题目 2.设计一个高效算法&#xff0c;将顺序表L的所有元素逆置&#xff0c;要求算法的空间复杂度为O(1)算法思想&#xff1a; 1、常规的解法&#xff1a; Void reverse (sqlist &L){Elemtype temp; //辅助变量for(i 0,i < L.length; i){temp…

基于NAMUR开放式架构(NOA)的工业设备数据采集方案

一 NAMUR开放式架构 传统自动化金字塔结构的优越性在过去许多年里已被证明。然而&#xff0c;传统的自动化金字塔在获取和利用对物联网和工业4.0有价值的数据方面却存在一定挑战。这是因为传统系统通常是封闭的&#xff0c;数据访问受到限制&#xff0c;难以集成到新的数字化解…

剖析【C++】——类与对象(中)——小白篇—超详解

目录 1.类的6个默认成员函数&#xff1a; 1. 默认构造函数&#xff08;Default Constructor&#xff09; 2. 析构函数&#xff08;Destructor&#xff09; 3. 拷贝构造函数&#xff08;Copy Constructor&#xff09; 4. 拷贝赋值运算符&#xff08;Copy Assignment Operato…

Docker部署后的中文乱码问题

本地和服务器上面生成图片文字多没有乱码&#xff0c;但是服务部署到docker上面就开始出现乱码。排查了一下发现是docker上缺少相应的中文字体&#xff0c;添加字体即可解决。 1.在网站上找到相关资源并下载字体-字体下载-字体下载大全-字体免费下载|字体下载 2.上传到服务器 …

8D和FMEA的关系是什么?——FMEA软件

免费试用FMEA软件-免费版-SunFMEA 在质量管理领域中&#xff0c;8D和FMEA是两个非常重要的工具。它们各自有着独特的作用&#xff0c;但同时又存在着紧密的联系。本文旨在深入探讨8D和FMEA之间的关系&#xff0c;以及它们如何协同工作以提高产品质量和客户满意度。 8D&#x…

电子商务商城B2B2C:JAVA实现的商家间直播带货商城系统概览

电子商务商城&#xff1a;构建全行业全渠道的一体化SaaS解决方案 在数字化转型的浪潮中&#xff0c;企业对于高效、集成的管理系统的需求日益增长。电子商务商城的SaaS云平台应运而生&#xff0c;它旨在为各行各业提供全面的一体化解决方案&#xff0c;无论是门店经营的区域化…

UE5 Cesium2 最新使用地理配准子关卡构造全球场景

参考官方最新教程&#xff1a;Building Global Scenes with Georeferenced Sublevels – Cesium 创建持久关卡&#xff08;主关卡&#xff09; 这里一般包含DynamicPawn、CesiumSunSky 和 Cesium World Terrain 全球场景通用的对象。子关卡的创立&#xff0c;官方教程分为了两…

低代码与人工智能:革新智能客服系统的高效之道

引言 在当前数字化和智能化浪潮的推动下&#xff0c;企业对智能客服系统的需求呈现显著增长。随着客户期望的不断提升&#xff0c;企业需要更加高效、智能和个性化的客户服务解决方案。传统的人工客服方式不仅成本高昂&#xff0c;且难以满足大规模、多样化的客户需求。而智能客…

如何远程访问Redis?

远程访问Redis是一种常见的需求&#xff0c;特别是在分布式系统或跨地域网络中。通过远程访问&#xff0c;我们可以轻松地对远程的Redis数据库进行操作和管理。 天联保障数据安全 对于远程访问Redis的安全性问题&#xff0c;我们可以借助天联来保障数据的安全。天联是一种基于…

免费无限换脸,火了,图片/视频/直播都行!

最强换脸AI工具Facefusion软件在近期更新到了2.6.0版本&#xff0c;带来了一系列的更新和改进&#xff0c;今天为大家分享一下最新的整合包。 Facefusion2.6.0版本介绍 FaceFusion不仅仅是一款换脸软件&#xff0c;它更是一个多功能的数字人和实时直播助手&#xff0c;真正开启…

python Windows电脑设置定时启动程序,定时运行代码

Windows设置定时 一&#xff0c;新建文件txt, .txt改为.bat 路径填exe的路径D:\test\main.py 如下是启动exe,如果运行python代码则写入如&#xff1a;python D:\test\main.py 二&#xff0c;搜索计算机管理 三&#xff0c;点击创建基本任务 填写任意名称 选择什么时候开始…

Element-Plus中表格及分页功能

导入Element-Plus 具体步骤如下&#xff1a;&#xff08;内容参照官网&#xff1a;安装 | Element Plus&#xff09; # 选择一个你喜欢的包管理器# NPM $ npm install element-plus --save# Yarn $ yarn add element-plus# pnpm $ pnpm install element-plus 安装完成后即可…

实现按块复制元素的进阶技巧

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、按块复制元素的重要性 二、使用LED模块创建数组并复制 三、实现按块复制的具体步骤 四…

群晖NAS使用Docker部署WPS Office结 合内网穿透实现远程编辑本地文档

文章目录 1. 拉取WPS Office镜像2. 运行WPS Office镜像容器3. 本地访问WPS Office4. 群晖安装Cpolar5. 配置WPS Office远程地址6. 远程访问WPS Office小结 7. 固定公网地址 wps-office是一个在Linux服务器上部署WPS Office的镜像。它基于WPS Office的Linux版本&#xff0c;通过…

基于微信小程序+ JAVA后端实现的【微信小程序跑腿平台】设计与实现 (内附设计LW + PPT+ 源码+ 演示视频 下载)

项目名称 项目名称&#xff1a; 《微信小程序跑腿平台的设计与实现》 项目技术栈 该项目采用了以下核心技术栈&#xff1a; 后端框架/库&#xff1a; Java, SSM框架数据库&#xff1a; MySQL前端技术&#xff1a; 微信小程序, HTML…&#xff08;其它相关技术&#xff09; …