【UnityGUI】UGUI的六大组件和三大基础控件详解

news2024/11/16 7:29:36

在这里插入图片描述


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

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

👨‍💻 本文由 秩沅 原创

👨‍💻 收录于专栏UI_Unity专栏

在这里插入图片描述


习题总结专题篇


文章目录

    • 习题总结专题篇
    • 🎶前言
    • UGUI专题篇
    • 🎶前言
  • 🎶UGUI的六大组件图示
    • 🎶(==1==)1.Canvas-画布组件
      • 👽 ScreenSpace —overlay(覆盖模式)
      • 👽 ScreenSpace—Camera 摄像机模式
      • 👽 World Space —AR VR
    • 🎶(==2==)2.CanvasScaler—画布缩放控制器
      • 👽 前言——了解参数
      • 👽 三种适配模式
      • 👽 Constant Pixel Size(恒定像素模式)
      • <font color=red>👽Scale with screen Size(缩放模式)
      • 👽 Constant Physical Size(恒定物理模式)
      • 👽 3D特殊模式
    • 🎶(==3==)3.Graphic Raycaster—图形射线投射器
    • 🎶(==4==)4.EventSystem组件—UI事件的检查官
    • 🎶(==5==)5.Standalone Input Module—独立输出模块
    • 🎶(==6==)6.RectTransform—矩阵变换
  • 🎶 UGUI基础控件
    • 🎶(==1==)UGUI_image参数
      • 普通模式
      • 切片模式——节约资源
      • 填充模式——适合血条和CD缓冲的制作
      • 平铺模式——适合纹理的制作大面积的纹理。
    • 🪶Image代码相关
    • 🎶(==2==)UGUI_Text参数
      • 字体的自动裁剪和自动换行
      • BestFit_字体的自动适应
      • Rich Text富文本
      • 边缘线和阴影的效果添加
      • 代码控制
    • 🎶(==3==)UGUI_RawImage参数
    • 脑图
    • 代码相关


🎶前言


素材来自唐老狮


🅰️


在这里插入图片描述


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

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

👨‍💻 本文由 秩沅 原创

👨‍💻 收录于专栏unity常用API
在这里插入图片描述


UGUI专题篇


文章目录

    • 习题总结专题篇
    • 🎶前言
    • UGUI专题篇
    • 🎶前言
  • 🎶UGUI的六大组件图示
    • 🎶(==1==)1.Canvas-画布组件
      • 👽 ScreenSpace —overlay(覆盖模式)
      • 👽 ScreenSpace—Camera 摄像机模式
      • 👽 World Space —AR VR
    • 🎶(==2==)2.CanvasScaler—画布缩放控制器
      • 👽 前言——了解参数
      • 👽 三种适配模式
      • 👽 Constant Pixel Size(恒定像素模式)
      • <font color=red>👽Scale with screen Size(缩放模式)
      • 👽 Constant Physical Size(恒定物理模式)
      • 👽 3D特殊模式
    • 🎶(==3==)3.Graphic Raycaster—图形射线投射器
    • 🎶(==4==)4.EventSystem组件—UI事件的检查官
    • 🎶(==5==)5.Standalone Input Module—独立输出模块
    • 🎶(==6==)6.RectTransform—矩阵变换
  • 🎶 UGUI基础控件
    • 🎶(==1==)UGUI_image参数
      • 普通模式
      • 切片模式——节约资源
      • 填充模式——适合血条和CD缓冲的制作
      • 平铺模式——适合纹理的制作大面积的纹理。
    • 🪶Image代码相关
    • 🎶(==2==)UGUI_Text参数
      • 字体的自动裁剪和自动换行
      • BestFit_字体的自动适应
      • Rich Text富文本
      • 边缘线和阴影的效果添加
      • 代码控制
    • 🎶(==3==)UGUI_RawImage参数
    • 脑图
    • 代码相关


🎶前言



🎶UGUI的六大组件图示


在这里插入图片描述
在这里插入图片描述


🎶(11.Canvas-画布组件


在这里插入图片描述
在这里插入图片描述


👽 ScreenSpace —overlay(覆盖模式)

  • UI组件一直显示在屏幕前,覆盖所有
    在这里插入图片描述在这里插入图片描述

对应图示:

在这里插入图片描述在这里插入图片描述


👽 ScreenSpace—Camera 摄像机模式

  • 摄像机不为主相机
  • 主摄像机比UI摄像机的层级要低
  • 使得3D物体可出现在面板前的步骤
    在这里插入图片描述

参数对应图示

在这里插入图片描述在这里插入图片描述
在这里插入图片描述


👽 World Space —AR VR

在这里插入图片描述
在这里插入图片描述


🎶(22.CanvasScaler—画布缩放控制器


👽 前言——了解参数


  • 屏幕分辨率计算公式 = 画布尺寸 * 缩放系数

在这里插入图片描述

  • 像素单位转存储单位尺寸 x 16 位 / 8字节 /1024 = ? kb

Cnvasscaler——画布缩放控制器
在这里插入图片描述


👽 三种适配模式


在这里插入图片描述


👽 Constant Pixel Size(恒定像素模式)


在这里插入图片描述


👽Scale with screen Size(缩放模式)


在这里插入图片描述


👽 Constant Physical Size(恒定物理模式)


在这里插入图片描述

单位种类1英寸
centimeter(厘米)2.54cm =1 In
Millimeter(毫米)25.4mm = 1 In
Points(点)72P = 1 In
Picas(皮卡)6 皮卡 = 1In
Inches(英寸)1

👽 3D特殊模式


在这里插入图片描述

🎶(33.Graphic Raycaster—图形射线投射器


在这里插入图片描述


🎶(44.EventSystem组件—UI事件的检查官


在这里插入图片描述


🎶(55.Standalone Input Module—独立输出模块


在这里插入图片描述


🎶(66.RectTransform—矩阵变换


在这里插入图片描述

  • 矩阵九宫格

单点是一键操作锚点的位置,shift+点击是连带操作轴心点的位置
在这里插入图片描述

  • 锚点的重合和成矩阵的区别

重合时,子对象不会随着父对象变化而变化

在这里插入图片描述

变矩阵时会随着父对象的大小变化而变化

在这里插入图片描述

  • 代码调用对应参数

(this.transform as Rectionsform).xx


🎶 UGUI基础控件



🎶(1UGUI_image参数


在这里插入图片描述

普通模式


切片模式——节约资源


需要下载package manager。中的Sprite 2D资源包。
在这里插入图片描述

  • 导入后在图片资源的打开Sprite editor。
    在这里插入图片描述

  • 宫格设置
    在这里插入图片描述

  • 变换的,只有中间的那一部分。

在这里插入图片描述

  • fillCenter 中间挖空
    在这里插入图片描述

填充模式——适合血条和CD缓冲的制作


  • 在这里插入图片描述
  • 血条效果
    在这里插入图片描述
  • CD效果
    在这里插入图片描述
  • 保持宽高比的效果。
  • 在这里插入图片描述

平铺模式——适合纹理的制作大面积的纹理。

在这里插入图片描述
在这里插入图片描述

🪶Image代码相关


在这里插入图片描述


🎶(2UGUI_Text参数


在这里插入图片描述
————在这里插入图片描述


字体的自动裁剪和自动换行


在这里插入图片描述
在这里插入图片描述


BestFit_字体的自动适应


在这里插入图片描述
在这里插入图片描述


Rich Text富文本


在这里插入图片描述

在这里插入图片描述


在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


边缘线和阴影的效果添加


  • 文本边缘线组件的添加
    在这里插入图片描述

在这里插入图片描述

  • 文本阴影组件的添加
    在这里插入图片描述

在这里插入图片描述


代码控制


在这里插入图片描述


🎶(3UGUI_RawImage参数


脑图


在这里插入图片描述

  • 主要的区别在于第一个参数
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
———

代码相关

在这里插入图片描述


⭐相关文章⭐


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

⭐ unity之c#专题篇—系统强基⭐



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

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

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

相关文章

vue中使用deck.gl

deck,gl网址&#xff1a;Home | deck.gl 因为deck.gl是国外的技术&#xff0c;国外最流行的框架是react&#xff0c;所以deck.gl有为react提供的地图组件&#xff0c;没有为vue提供&#xff0c;并且还需要翻墙。所以想用vue使用这个还是有一定难度的。 除了用到deck.gl之外还…

【docker】数据卷:docker run和k8s同步宿主机与容器文件的两种方法

前言 Docker容器卷是一个特殊目录&#xff0c;它存放在宿主机的文件系统中&#xff0c;可供一个或多个容器使用。这种卷绕过了联合文件系统&#xff08;Union File System&#xff09;&#xff0c;可以提供很多有用的特性。例如&#xff0c;对数据卷的修改会立即生效&#xff…

如何用ATECLOUD进行芯片各项性能指标的测试?

功能测试&#xff1a;主要涵盖输入测试向量和响应的一致性。功能测试可以覆盖极高比例的逻辑电路的失效模型。 Parametric测试&#xff1a;有DC和AC测试。DC主要是短路(short)、开路(open)、最大电流(maximmum current)、漏电流(leakage)、输出驱动电流(output drivel current…

MSQL系列(十) Mysql实战-Join驱动表和被驱动表如何区分

Mysql实战-Join驱动表和被驱动表如何区分 前面我们讲解了Mysql的查询连接Join的算法原理, 我发现大家都知道小表驱动大表,要让小表作为驱动表, 现在有2个问题 查询多表, 到底哪个是驱动表?哪个是被驱动表, 如何区分?索引如何优化,到底是加在驱动表上,还是被驱动表上? &…

UDP网络编程的接受与发送信息

/发送端B>可以接受数据 public class UDPSenderB {public static void main(String[] args) throws IOException {//创建一个DatagramSocket 对象&#xff0c;准备发送和接受数据DatagramSocket socket new DatagramSocket(9998);//将需要发送的数据&#xff0c;封装到Data…

在excel中如何打出上标、下标

例如&#xff0c;想把A2的2变为下标。 在单元中输入内容&#xff1a; 选中2&#xff1a; 右键单击&#xff0c;然后点击“设置单元格格式”&#xff1a; 在特殊效果的下面勾选“下标”&#xff0c;然后点击下面的“确定”按钮&#xff1a; 就将2变为下标了&#xff1a;…

HTML标题、段落、文本格式化

HTML标题&#xff1a; 在HTML文档中&#xff0c;标题是很重要的。标题是通过<h1> - <h6标签进行定义的&#xff0c;<h1> 定义最大的标题&#xff1b;<h6>定义最小的标题。 <hr> 标签在HTML页面中用于创建水平线&#xff0c;hr元素可用于分隔内容。…

家政服务系统小程序app开发功能架构;

家政服务小程序系统&#xff0c;轻松搭建上门服务小程序。支持H5与小程序双端&#xff0c;还能DIY页面。根据您的需求&#xff0c;我们可定制开发家政服务小程序系统。想添加多种服务类目、优惠专区以及IM即时沟通功能&#xff1f;没问题&#xff0c;我们支持&#xff01;想要快…

测试用例设计——WEB通用测试用例

现在项目做完了&#xff0c;我觉得还是有必要总结一下&#xff0c;学习到的内容。毕竟有总结才能有提高嘛&#xff01;总结一下通用的东西&#xff0c;不管什么项目基本都可能会遇到&#xff0c;有写地方也有重复的或者有的是按照个人的习惯来总结的不一定都对&#xff0c;有不…

数据结构(超详细讲解!!)第十八节 串(静态存储)

1.串的定义 串&#xff1a;由零个或多个字符组成的有限序列&#xff0c;一般记为&#xff1a;s“a1a2...an” (n≥0)。 ai可以是字母、数字或其他字符。 串中字符的个数n称为串的长度。 空串&#xff1a;零个字符&#xff0c;即长度为零的串称为空串&#xff0c;用或””表…

Python爬虫实战案例——第七例

文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff01;严禁将文中内容用于任何商业与非法用途&#xff0c;由此产生的一切后果与作者无关。若有侵权&#xff0c;请联系删除。 目标&#xff1a;LI视频采集 地址&#xff1a;aHR0cHM6Ly93d3cucGVhcnZpZGVv…

2023最新最全Web自动化测试面试题

1、Selenium 中 hidden 或者是 display none 的元素是否可以定位到&#xff1f; 不可以。可以写 JavaScript 将标签中的 hidden 先改为 0&#xff0c;再进行定位元素。 2、Selenium 中如何保证操作元素的成功率&#xff1f;也就是说如何保证我点击的元素一 定是可以点击的&am…

Redis的特性和应用场景

目录 Redis的特性 内存存储数据 可编程性 可扩展性 持久化 水平扩展性 高可用性 为什么redis是快的 Redis的应用场景 数据库 缓存和会话存储 消息队列 redis是一个客户端服务器结构的程序 Redis是一个在内存中存储数据的中间件,能够用于作为数据库,数据缓存等,能在…

leetcode-字符串

1.反转字符串LeetCode344. 20230911 难度为0&#xff0c;此处就不放代码了 注意reverse和swap等一系列字符串函数什么时候该用&#xff0c;记一记库函数 swap可以有两种实现&#xff0c;涨知识了&#xff0c;除了temp存值还可以通过位运算&#xff1a;s[i] ^ s[j]; s[j] ^ s[i…

使用electron创建桌面应用及常见打包错误解决

一、基本要求 在使用Electron进行开发之前&#xff0c;您需要安装 Node.js。 要检查 Node.js 是否正确安装&#xff0c;请在您的终端输入以下命令&#xff1a; node -v npm -v这两个命令应输出了 Node.js 和 npm 的版本信息。 二、创建应用 1、首先创建一个文件夹 mkdir …

C++项目——云备份-⑨-服务端与客户端功能联调

文章目录 专栏导读1.服务端源代码2.客户端源代码3.浏览器访问测试//listshow 4.上传文件测试5.文件下载测试 专栏导读 &#x1f338;作者简介&#xff1a;花想云 &#xff0c;在读本科生一枚&#xff0c;C/C领域新星创作者&#xff0c;新星计划导师&#xff0c;阿里云专家博主&…

基于黄金正弦算法的无人机航迹规划-附代码

基于黄金正弦算法的无人机航迹规划 文章目录 基于黄金正弦算法的无人机航迹规划1.黄金正弦搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用黄金正弦算法来优化无人机航迹规划。 …

NumPy教程(快速入门版)

NumPy 是基于Python的数学计算库&#xff0c;擅长处理数组/矩阵。 NumPy 是 Numerical Python 的缩写&#xff0c;它是一个由多维数组对象&#xff08;ndarray&#xff09;和处理这些数组的函数&#xff08;function&#xff09;集合组成的库。使用 NumPy 库&#xff0c;可以对…

修仙路上的基石->java内置的占位符

java内的占位符 System.out.println(String.format("牛逼logger记录:%s",message)); 在 Java 中&#xff0c;%s 是一个格式化字符串的占位符&#xff0c;用于表示后续参数中的字符串值。在 String.format() 方法中&#xff0c;%s 会被替换为相应的参数值。在给定的例…

Ubuntu 搭建 DHCP ivp6 server 步骤

Ubuntu 搭建 DHCP ivp6 server 步骤 安装 DHCP server安装 radvd&#xff08;实现局域网路由功能)测试运行 安装 DHCP server apt 安装 isc-dhcp-server sudo apt-get install isc-dhcp-server修改配置文件 /etc/dhcp/dhcpd6.conf 内容如下&#xff1a; lease-time 7200; lo…