Unity3D学习之UI系统——UGUI

文章目录

  • 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.mzph.cn/news/676449.shtml

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

相关文章

考研数据结构笔记（5）

考研数据结构笔记（5）

单链表的查找 按位查找(O(n))按值查找(O(n))单链表长度(O(n))小结 基于带头结点的代码 按位查找(O(n)) 按值查找(O(n)) 单链表长度(O(n)) 小结
阅读更多...
五官行为检测（表情基）解决方案提供商

五官行为检测（表情基）解决方案提供商

随着人工智能技术的日益成熟，情感识别与行为分析在企业界的应用逐渐广泛。美摄科技作为业内领先的五官行为检测（表情基）解决方案提供商，致力于为企业提供高效、精准的情感识别与行为分析服务。 美摄科技的五官行为检测&#xff0…
阅读更多...
【lesson47】进程通信之system V（共享内存）补充知识

【lesson47】进程通信之system V（共享内存）补充知识

文章目录 补充知识 补充知识 进行通信的key值问题，进程要通信的对方进程怎么能保证对方能看到，并且看到的就是该进程创建的共享内存的。 所以就通过key值来标识共享内存，key值是几不重要，只要在系统里是唯一的即可。 这样server和…
阅读更多...
【C语言】变量与常量

【C语言】变量与常量

一、变量的定义与名称 变量定义的一般形式&#xff1a;<数据类型名称><变量名称>; int price0&#xff1b; •这一行&#xff0c;定义了一个变量。变量的名字是price&#xff0c;类型是int&#xff0c;初始值是0。 •变量是一个保存数据的地方&#xff0c;当我们需…
阅读更多...
CentOS7集群配置免密登录

CentOS7集群配置免密登录

准备工作 提前开启三台虚拟机hadoop102、hadoop103,hadoop104,关于三台虚拟机的安装可以参考&#xff1a;https://mp.csdn.net/mp_blog/creation/editor/136010108 配置免密登录 一、分别修改三台机器的hosts,配置主机映射关系 vim /etc/hosts 文件中输入以下内容&#xf…
阅读更多...
利用Pybind11封装Python版的WiringPi！

利用Pybind11封装Python版的WiringPi！

原版的WiringPi是一个用于树莓派的GPIO库&#xff0c;用C语言开发&#xff0c;仓库地址&#xff1a;https://github.com/WiringPi/WiringPi。该库允许用户以编程方式访问和控制树莓派的GPIO引脚。而随着Python在嵌入式设备上的快速发展&#xff0c;其对底层引脚的操作也变得越来…
阅读更多...
【人工智能】聊聊Transformer，深度学习的一股清流(13)

【人工智能】聊聊Transformer，深度学习的一股清流(13)

嘿&#xff0c;大家好&#xff01;今天我们来聊一聊深度学习领域的一位“大明星”——Transformer模型。这个模型的提出可不得了&#xff0c;让自然语言处理领域焕发了新生。 在深度学习领域&#xff0c;Transformer模型架构的引入标志着一场革命&#xff0c;它改变了自然语言处…
阅读更多...
linux系统定时任务管理

linux系统定时任务管理

crontab使用 一、crontab简介 crontab 这个指令所设置的工作将会循环的一直进行下去&#xff01;可循环的时间为分钟、小时、每周、每月或每年等。crontab 除了可以使用指令执行外&#xff0c;亦可编辑 /etc/crontab 来支持。 至于让 crontab 可以生效的服务则是 crond 这个服…
阅读更多...
【开源】基于JAVA+Vue+SpringBoot的假日旅社管理系统

【开源】基于JAVA+Vue+SpringBoot的假日旅社管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统介绍2.2 QA 问答 三、系统展示四、核心代码4.1 查询民宿4.2 新增民宿评论4.3 查询民宿新闻4.4 新建民宿预订单4.5 查询我的民宿预订单 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的假日旅社…
阅读更多...
《小狗钱钱》读书笔记——如何看待金钱

《小狗钱钱》读书笔记——如何看待金钱

目录 前言 作者 经典摘录 1、 了解致富的规律&#xff0c;一开始&#xff0c;必须明确金钱对你的意义 2、 梦想储蓄罐和梦想相册 3、认真去找机会 4、主人公吉娅的财富路径 5、注意财富积累本质 写在最后 前言 尽管[ 智慧是无法传授的], 但读书可以启发思路&#xff0…
阅读更多...
30岁还一事无成，怎么办？

30岁还一事无成，怎么办？

前些日子&#xff0c;知乎有一个话题&#xff0c;特别火。 原话是&#xff1a;30岁&#xff0c;如果你还没当上管理层&#xff0c;或者在某个领域取得成就&#xff0c;那你一辈子基本也就这样了。 这句话一出&#xff0c;戳中了许多人的软肋&#xff0c;一时间群情哗然。 理由是…
阅读更多...
Electron基本介绍

Electron基本介绍

Electron基本介绍 Electron 官方网站&#xff1a;https://www.electronjs.org/zh/ Electron安装方法&#xff1a;npm install electron -g 全局安装 Electron简介&#xff1a;Electron提供了丰富的本地&#xff08;操作系统&#xff09;API&#xff0c;使你能够使用纯JavaScr…
阅读更多...
golang设置

golang设置

golangci-lint 代码检查工具的集合&#xff0c;聚集了多种 Go 代码检查工具&#xff0c;如 golint 会自动查找项目中的 .golangci.yml 配置文件 会检查代码中潜在常见问题以及代码风格问题 # 文档&#xff1a;https://golangci-lint.run/ # https://github.com/golangci/golang…
阅读更多...
leetcode——滑动窗口题目汇总

leetcode——滑动窗口题目汇总

本章总结一下滑动窗口的解题思路&#xff1a; 在字符串中使用双指针 left 和 right 围成的一个左闭右开的区域作为一个窗口。不断将 right 向右滑动&#xff0c;直到窗口中的字符串符合条件。此时将 left 向右滑动&#xff0c;直到窗口中的字符串不符合条件&#xff0c;期间需…
阅读更多...
Django中的SQL注入攻击防御策略

Django中的SQL注入攻击防御策略

Django中的SQL注入攻击防御策略 SQL注入是一种常见的网络安全威胁&#xff0c;可以导致数据库被非法访问和数据泄露。本文将介绍在Django框架中防止SQL注入攻击的关键方法&#xff0c;包括使用参数化查询、使用ORM、进行输入验证和使用安全的编码实践。 SQL注入是一种利用应用程…
阅读更多...
SpringBoot：多环境配置

SpringBoot：多环境配置

多环境配置demo代码&#xff1a;点击查看LearnSpringBoot02 点击查看更多的SpringBoot教程 方式一、多个properties文件配置 注意&#xff1a;创建properties文件,命名规则&#xff1a;application-&#xff08;环境名称&#xff09; 示例&#xff1a;application-dev.proper…
阅读更多...
循环神经网络（RNN）简介与应用

循环神经网络（RNN）简介与应用

循环神经网络&#xff08;RNN&#xff09;简介与应用 一、RNN基本概念二、RNN原理解析2.1 RNN网络结构RNN网络主要组件输入层(Input)&#xff0c;隐藏层(Hidden State)&#xff0c;输出层(Output)循环单元(Recurrent Unit)权重参数(Weights)和偏置项(Bias) RNN的数据流向时间步…
阅读更多...
算法刷题day10

算法刷题day10

目录 引言一、最长上升子序列二、地宫取宝三、波动数列 引言 今天是大年三十&#xff0c;提前祝大家新的一年天天开心&#xff0c;事事如意&#xff0c;过年把身体精神修养好后&#xff0c;年后继续朝着目标奋斗&#xff0c;然后加油吧&#xff01; 一、最长上升子序列 标签&…
阅读更多...
Android截屏方法

Android截屏方法

// 截屏方法private void getSnapshot() {wView.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));wView.layout(0, 0, wView.getMeasuredWidth(), wView.getMeasuredHeight(…
阅读更多...
U3D记录之FBX纹理丢失问题

U3D记录之FBX纹理丢失问题

今天费老大劲从blender建了个模型&#xff0c;然后导出进去unity 发现贴图丢失 上网查了一下 首先blender导出要改设置 这个path mode要copy 然后unity加载纹理也要改设置 这里这个模型的纹理load要改成external那个模式 然后就有了&#xff0c;另外这个导出还有好多选项可…
阅读更多...
最新文章

Copyright @ 2022~2023