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.hqwc.cn/news/454340.html

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

相关文章

pwn学习笔记(2)

pwn学习笔记(2) 1.三种常见的寄存器: ​ ax寄存器:通用寄存器,可用于存放多种数据 ​ bp寄存器:存放的是栈帧的栈底地址 ​ sp寄存器:存放的是栈顶的地址 2.栈帧与栈工作的简介&#xff1a…

【Matplotlib】figure方法 你真的会了吗!?

🎈个人主页:甜美的江 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:matplotlib 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进…

MATLAB如何安装遗传算法工具箱(附方法代码和工具箱链接)

一般MATLAB的工具箱都是需要手动设置安装, 下面我给大家介绍一种用代码安装工具箱的方法, 就以谢菲尔德大学遗传算法工具箱为例 代码和完整的工具箱见:https://download.csdn.net/download/corn1949/88810340 下面直接给出代码: main.m文件代码: clc;close all;c…

【多模态MLLMs+图像编辑】MGIE:苹果开源基于大语言模型的图片编辑神器(24.02.03开源)

项目主页:https://mllm-ie.github.io/ 论文2309.Guiding Instruction-based Image Editing via Multimodal Large Language Models 代码:https://github.com/apple/ml-mgie 媒体:机器之心的解析https://mp.weixin.qq.com/s/c87cUuyz4bUgfW2_m…

如何把大容量10G的文件分享给别人?整理了3个简单的方法~

如果文件过大,比如10G的文件发送起来简直问题重重,不仅费时费流量而且还很可能在发送的中途失败,这时候就需要借助一些压缩软件对文件进行压缩,下面就向大家介绍3个好用的压缩软件~ 方法一:使用嗨格式压缩大师压缩后发…

logback日志配置

springboot默认使用logback 无需额外添加pom依赖 1.指定日志文件路径 当前项目路径 testlog文件夹下 linux会在项目jar包同级目录 <property name"log.path" value"./testlog" /> 如果是下面这样配置的话 window会保存在当前项目所在盘的home文件夹…

list基本使用

list基本使用 构造迭代器容量访问修改 list容器底层是带头双向链表结构&#xff0c;可以在常数范围内在任意位置进行输入和删除&#xff0c;但不支持任意位置的随机访问&#xff08;如不支持[ ]下标访问&#xff09;&#xff0c;下面介绍list容器的基本使用接口。 template <…

数模.matlab画图

一、mesh函数 上图是平常用到的方式 例题&#xff1a; 上图的meshgrid函数相当于上上图的前三个指令&#xff08;temp&#xff0c;x,y&#xff09; mash函数&#xff1a; mashc函数&#xff1a; mashz函数&#xff1a; 上图subplot函数的作用是将下标为index的图片放到对应的x&…

全球5大住宅代理IP服务商测评对比

住宅IP代理为跨境出海用户提供了更加多元、安全和高效的网络访问体验。住宅代理服务使用真实的住宅IP地址&#xff0c;而这些IP地址通常最接近于海外个人家庭用户&#xff0c;从而减少了被封锁或标记为可疑流量的可能性&#xff0c;对于部分跨境电商平台账号&#xff08;如亚马…

RabbitMQ 部署指南

RabbitMQ部署指南 1.单机部署 在Centos7虚拟机中使用Docker来安装。 1.1.下载镜像 方式一&#xff1a;在线拉取 docker pull rabbitmq:3.8-management方式二&#xff1a;从本地加载 加载镜像包&#xff1a; 上传到虚拟机中后&#xff0c;使用命令加载镜像即可&#xff1…

第十二讲_JavaScript浏览器对象模型BOM

JavaScript浏览器对象模型BOM 1. 浏览器对象模型介绍2. location2.1 常用的属性2.2 常用的方法 3. navigator3.1 常用的属性 4. history4.1 常用的方法&#xff1a; 5. 本地存储 1. 浏览器对象模型介绍 BOM(Browser Object Model) 是指浏览器对象模型&#xff0c;浏览器对象模…

ShardingSphere实现openGauss分布式架构

本文档采用openGauss结合ShardingSphere中间件的架构&#xff0c;实现openGauss数据库分布式OLAP场景的环境部署。 术语说明&#xff1a; 开源数据库引擎&#xff1a;openGauss shardingsphere Proxy&#xff1a;定位为透明化的数据库代理端&#xff0c;提供封装了数据库二进…