Unity3D学习之UI系统——UGUI

news2024/11/19 19:21:51

文章目录

  • 1. 前言
  • 2 六大基础组件概述
  • 3 Canvas——渲染模式的控制
    • 3.1 Canvas作用
    • 3.2 Canvas的渲染模式
      • 3.2.1 Screen Space -Overlay 覆盖模式
      • 3.2.2 Screen Space - Camera 摄像机模式
      • 3.2.3 World Space
  • 4 CanvasScaler ——画布缩放控制器
    • 4.1 Constant Pixel Size 恒定像素模式
    • 4.2 Scale With Screen Size 缩放模式
    • 4.3 Constant Physical Size 恒定物理模式
    • 4.4 3D模式
  • 5 Graphic Raycaster图形射线投射器
  • 6 EventSystem和Standalone Input Module
  • 7 RectTransform
  • 8 三大基础控件
    • 8.1 Image 图像控件
    • 8.2 Text 文本控件
    • 8.3 RawImage 原始图像控件
  • 9 组合控件
    • 9.1 Button 按钮
      • 9.1.1 代码控制
      • 9.1.2 监听点击事件的两种方式
    • 9.2 Toggle 开关控件
      • 9.2.1 代码控制
      • 9.2.2 监听事件
    • 9.3 InputField 文本输入控件
      • 9.3.1 代码控制
      • 9.3.2 事件监听
    • 9.4 Slider 滑动条控件
      • 9.4.1 代码控制
      • 9.4.2 事件监听
    • 9.5 ScrollBar 滚动条
    • 9.6 ScrollView 滚动视图
      • 9.6.1 代码控制
    • 9.7 Dropdown 下拉列表控件
  • 10 图集制作
  • 11 UI事件监听接口
    • 11.1 继承接口和函数
    • 11.2 事件监听父类
    • 11.3 练习题
  • 12 EventTrigger 事件触发器
    • 12.1 练习题
  • 13 屏幕坐标转UI相对坐标
    • 13.1 练习题
  • 14 Mask遮罩
  • 15 模型和粒子显示在UI之前
    • 15.1 3D模型在UI之前
    • 15.2 粒子特效在UI之前
  • 16 异形按钮
  • 17 自动布局组件
    • 17.1 布局属性
    • 17.2 水平垂直布局组件
    • 17.3 水平布局组件
    • 17.4 网格布局组件
    • 17.5 内容大小适配器
    • 17.6 宽高比适配器
  • 18 画布组Canvas Group
  • 19 UGUI源代码


1. 前言

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

2 六大基础组件概述

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

在这里插入图片描述

3 Canvas——渲染模式的控制

3.1 Canvas作用

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

3.2 Canvas的渲染模式

在这里插入图片描述

3.2.1 Screen Space -Overlay 覆盖模式

在这里插入图片描述

3.2.2 Screen Space - Camera 摄像机模式

在这里插入图片描述
创建专门的摄像机渲染UI
并让主摄像机不渲染UI层

3.2.3 World Space

在这里插入图片描述

4 CanvasScaler ——画布缩放控制器

在这里插入图片描述

在这里插入图片描述
宽高 * 缩放系数 = UI界面大小

在这里插入图片描述
参考分辨率

在这里插入图片描述

4.1 Constant Pixel Size 恒定像素模式

在这里插入图片描述
图片格式要改为Sprite
在这里插入图片描述

恒定像素模式计算公式
在这里插入图片描述

在这里插入图片描述

4.2 Scale With Screen Size 缩放模式

在这里插入图片描述
在这里插入图片描述
会根据当前分辨率 和 参考分辨率的比率自动计算UI的缩放量
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.3 Constant Physical Size 恒定物理模式

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

4.4 3D模式

在这里插入图片描述

5 Graphic Raycaster图形射线投射器

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

6 EventSystem和Standalone Input Module

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

7 RectTransform

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
获得参数
在这里插入图片描述

8 三大基础控件

8.1 Image 图像控件

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

8.2 Text 文本控件

在这里插入图片描述
在这里插入图片描述
富文本
在这里插入图片描述
在这里插入图片描述

8.3 RawImage 原始图像控件

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

9 组合控件

在这里插入图片描述

9.1 Button 按钮

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

9.1.1 代码控制

在这里插入图片描述

9.1.2 监听点击事件的两种方式

1) 托脚本
在这里插入图片描述
2) 代码监控
在这里插入图片描述

9.2 Toggle 开关控件

在这里插入图片描述
在这里插入图片描述
只要三个的toggle group属于同一个Group,就变成了单选框

9.2.1 代码控制

在这里插入图片描述

9.2.2 监听事件

在这里插入图片描述

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

9.3 InputField 文本输入控件

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

9.3.1 代码控制

在这里插入图片描述

9.3.2 事件监听

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

9.4 Slider 滑动条控件

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

9.4.1 代码控制

在这里插入图片描述

9.4.2 事件监听

在这里插入图片描述

在这里插入图片描述

9.5 ScrollBar 滚动条

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

在这里插入图片描述

9.6 ScrollView 滚动视图

在这里插入图片描述

9.6.1 代码控制

在这里插入图片描述

9.7 Dropdown 下拉列表控件

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

10 图集制作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
UGUI查看DrawCall
在这里插入图片描述
在这里插入图片描述

11 UI事件监听接口

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

11.1 继承接口和函数

在这里插入图片描述

在这里插入图片描述
拖入相关的
在这里插入图片描述

11.2 事件监听父类

在这里插入图片描述

11.3 练习题

在这里插入图片描述
长按按钮脚本,提供两个事件给外部,让外部进行处理
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

12 EventTrigger 事件触发器

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

12.1 练习题

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

在这里插入图片描述
关联函数

设置向量长度为遥感能移动的长度

在这里插入图片描述

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

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

13 屏幕坐标转UI相对坐标

在这里插入图片描述

在这里插入图片描述

13.1 练习题

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

14 Mask遮罩

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
maskable要钩勾上
在这里插入图片描述
是否显示遮罩的图
在这里插入图片描述

15 模型和粒子显示在UI之前

15.1 3D模型在UI之前

在这里插入图片描述
这部分在Camere前面有
还有另一个方法
通过图片显示
使用一个单独的摄像机渲染该层,然后转化成照片
在这里插入图片描述
在这里插入图片描述
拖入到taget camera
在这里插入图片描述
在UI里创建RawImage
在这里插入图片描述

15.2 粒子特效在UI之前

在这里插入图片描述
粒子特效和3D物体基本一致

16 异形按钮

点击图片按钮的空白区域也会响应,所以要设置异性按钮
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
改变点击后影响的控件 target Graphic
在这里插入图片描述
在这里插入图片描述

通过代码改变图片的透明度
在这里插入图片描述
在这里插入图片描述

17 自动布局组件

在这里插入图片描述

17.1 布局属性

在这里插入图片描述

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

17.2 水平垂直布局组件

在这里插入图片描述
给父对象添加
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
设置之后会自动调节子对象的大小
在这里插入图片描述
在这里插入图片描述
会是否强制扩展子对象

添加 Layout Element 组件,规则会按布局元素进行设置,
在这里插入图片描述
父对象最小后,会按子对象的大小显示
在这里插入图片描述
父对象变大后,会出现上图情景

17.3 水平布局组件

和垂直布局差不多
在这里插入图片描述

17.4 网格布局组件

在这里插入图片描述在这里插入图片描述
添加后
在这里插入图片描述
在这里插入图片描述

17.5 内容大小适配器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
和ScrollView配合使用
在这里插入图片描述

在这里插入图片描述

17.6 宽高比适配器

在这里插入图片描述

在这里插入图片描述

18 画布组Canvas Group

在panel 组件 添加,管理画布中所有的组件
在这里插入图片描述
在这里插入图片描述

19 UGUI源代码

在这里插入图片描述

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

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

相关文章

【微机原理与单片机接口技术】MCS-51单片机的引脚功能介绍

前言 MCS-51是指由美国Intel公司生产的一系列单片机的总称。MCS-51系列单片机型号有很多,按功能分位基本型和增强型两大类,分别称为8051系列单片机和8052系列单片机,两者以芯片型号中的末位数字区分,1为基本型,2为增强…

高仿原神官网UI 纯html源码

高仿原神官网UI源码介绍 如果您希望打造一个与原神官方网站相似的外观和用户体验,但又不想使用复杂的框架或模板,那么我们的高仿原神官网UI源码将是一个完美的选择。它采用纯HTML5构建,无需任何额外的CSS或JavaScript库支持,即可…

【C语言】深入理解指针

目录 1.字符指针 2.指针数组 3.数组指针 4.数组传参与指针传参 一维数组传参 二维数组传参 一级指针传参 二级指针传参 5.函数指针 6.函数指针数组 7.指向函数指针数组的指针(了解即可) 8.回调函数 回调函数的应用:库函数qsort …

C语言函数栈帧的创建和销毁(逐步分析)

什么是函数栈帧 我们在写C语言代码的时候,经常会把一个独立的功能抽象为函数,所以C程序是以函数为基本单位的。 那函数是如何调用的?函数的返回值又是如何返回的?函数参数是如何传递的?这些问题都和函数栈帧有关系。 …

Linux操作系统基础(六):Linux常见命令(一)

文章目录 Linux常见命令 一、命令结构 二、ls命令 三、cd命令 四、mkdir命令 五、touch命令 六、rm命令 七、cp命令 八、mv命令 九、cat命令 十、more命令 Linux常见命令 一、命令结构 command [-options] [parameter]说明: command : 命令名, 相应功能的英文单词…

vue3 的setup和生命周期

vue3 的setup和生命周期 许多文章认为setup执行时间在beforeCreate 和created 之间,但是通过实际测试发现setup调用在beforecreate之前。 export default {beforeCreate() {console.log(beforeCreate running....);},created() {console.log("created runnin…

前端JavaScript篇之call() 和 apply() 的区别?

目录 call() 和 apply() 的区别? call() 和 apply() 的区别? 在JavaScript中,call()和apply()都是用来改变函数中this指向的方法,它们的作用是一样的,只是传参的方式不同。 call()方法和apply()方法的第一个参数都是…

【北邮鲁鹏老师计算机视觉课程笔记】01 introduction

1 生活中的计算机视觉 生活中的各种计算机视觉识别系统已经广泛地应用起来了。 2 计算机视觉与其他学科的关系 认知科学和神经科学是研究人类视觉系统的,如果能把人类视觉系统学习得更好,可以迁移到计算机视觉。是计算机视觉的理论基础。 算法、系统、框…

curl8.6.0 - CURLE_PEER_FAILED_VERIFICATION

文章目录 curl8.6.0 - CURLE_PEER_FAILED_VERIFICATION概述笔记END curl8.6.0 - CURLE_PEER_FAILED_VERIFICATION 概述 在看一个开源工程, 里面用到了curl和openssl, 但是工程使用vcpkg来管理的包, 用CMake来编译 依赖太多了, win10 编译选项为 vs2019 x64/Win32(或者Ninja)…

kaggle实战语义分割-Car segmentation(附源码)

目录 前言 项目介绍 数据集处理 数据集加载 定义网络 训练网络 验证网络 前言 本篇文章会讲解使用pytorch完成另外一个计算机视觉的基本任务-语义分割。 语义分割是将图片中每个部分根据其语义分割出来,其相比于图像分类的不同点是,图像分类是对…

Windows下搭建Redis Sentinel

下载安装程序 下载Redis关于Windows安装程序,下载地址 下载成功后进行解压,解压如下: 配置redis和sentinel 首先复制三份redis.windows.conf,分别命名为:redis.6379.conf、redis.6380.conf、redis.6381.conf&…

【机器学习笔记】回归算法

回归算法 文章目录 回归算法1 线性回归2 损失函数3 多元线性回归4 线性回归的相关系数 1 线性回归 回归分析(Regression) 回归分析是描述变量间关系的一种统计分析方法 例:在线教育场景 因变量 Y:在线学习课程满意度 自变量 X:平台交互性、教…

《CSS 简易速速上手小册》第1章:CSS 基础入门(2024 最新版)

文章目录 1.1 CSS 语法和选择器:挑选你的画笔1.1.1 基础知识1.1.2 重点案例:创建一个响应式导航菜单1.1.3 拓展案例 1:为特定链接添加图标1.1.4 拓展案例 2:创建一个简单的问答折叠面板 1.2 盒模型的基础:构建你的乐高…

Linux 【docker系列1 - docker 安装与使用】

系列文章目录 文章目录 系列文章目录前言一、docker安装二、常用使用1.镜像相关2.读入数据 总结 前言 一、docker安装 docker的官方文档写的非常的详细,它包含了docker在各种环境下的安装,以及可能遇到的问题和解决方案。这里我们只描述docker在contOS上…

Excel+VBA处理高斯光束

文章目录 1 图片导入与裁剪2 获取图片数据3 数据拟合 1 图片导入与裁剪 插入图片没什么好说的,新建Excel,【插入】->【图片】。 由于图像比较大,所以要对数据进行截取,选中图片之后,点击选项卡右端的【图片格式】…

Qt QML学习(一):Qt Quick 与 QML 简介

参考引用 QML和Qt Quick快速入门全面认识 Qt Widgets、QML、Qt Quick 1. Qt Widgets、QML、Qt Quick 区别 1.1 QML 和 Qt Quick 是什么关系? 1.1.1 从概念上区分 QML 是一种用户界面规范和标记语言,它允许开发人员创建高性能、流畅的动画和具有视觉吸引…

pycharm deployment 灰色 一直无法点击

我的development的配置如下,我看了很多教程一直不知道为什么一直是灰色的, 文件夹配置: 如果你这里 Autodect,那么你Mapping 的文件夹应该是应该省略这个前缀的,例如我下面,我应该将本地文件夹映射到/home…

解析十六进制雷达数据格式:解析雷达FSPEC数据

以Cat62格式雷达数据为例,十六进制雷达数据部分代码: 3e0120bf7da4ffee0085 base_fspec_processor.h // // Created by qiaowei on 2024-02-03. //#ifndef RADARDATACONTROLLER_BASE_FSPEC_PROCESSOR_H #define RADARDATACONTROLLER_BASE_FSPEC_PROCESS…

音视频/流媒体协议和编码汇总

一、流媒体协议 1. RTMP/RTMPT/RTMPS/RTMPE 等多变种 是应用层协议,使用TCP作为底层传输协议,并提供了低延迟、高带宽利用率和实时性的特点。 (1)RTMP协议是Adobe的私有协议,未完全公开 (2)一般传输的是 flv,f4v 格式流 2. RTP/RTCP/SRTP …

【51单片机】LCD1602(可视化液晶屏)调试工具的使用

前言 大家好吖,欢迎来到 YY 滴 单片机系列 ,热烈欢迎! 本章主要内容面向接触过单片机的老铁 主要内容含: 欢迎订阅 YY滴C专栏!更多干货持续更新!以下是传送门! YY的《C》专栏YY的《C11》专栏YY…