Unity UGUI(二)核心组件

Unity Canvas相关知识学习


文章目录

  • Unity Canvas相关知识学习
    • 1. Canvas:
      • 1.1 Render Mode
      • 1.2 多个Canvas的显示顺序
    • 2.Canvas Scaler:屏幕分辨率自适应
      • 2.1 UI Scale Mode
    • 3. EventSystem
    • 4. Standalone Input Module
    • 5. Graphic Raycaster:图形射线投射器


1. Canvas:

UI元素的容器,合批最小单位,2D模式,3D模式。

1.1 Render Mode

UI 在屏幕上或作为 3D 空间对象进行渲染的方式。

1)Screen Space - Overlay:在此模式下,画布会进行缩放来适应屏幕,然后直接渲染而不参考场景或摄像机(即使场景中根本没有摄像机,也会渲染 UI)。如果更改屏幕的大小或分辨率,则 UI 将自动重新缩放进行适应。UI 将绘制在所有其他图形(例如摄像机视图)上。
在这里插入图片描述

  • Canvas总是在绘制完其它物体后,最后进行绘制,所以Canvas会覆盖在所有物体之上。
  • Canvas的大小和位置无法通过手动设置, 大小只能和屏幕大小一致, 位置总是处于屏幕正中间。
  • 根据CanvasScaler组件的设置, 最终确定Canvas的大小,如果没有CanvasScaler,此时Canvas的一个像素等于一个Units。
  • 此模式的Canvas节点下的3D物体不会显示。

2)Screen Space - Camera:在此模式下,UI画布会固定在渲染相机前方。通过调整 Plane Distance 来改变画布与相机的距离。此时画布始终会重新缩放来准确适应摄像机视锥体。如果更改屏幕的大小或分辨率或更改摄像机视锥体,则 UI 将自动重新缩放进行适应。场景中比 UI 平面更靠近摄像机的所有 3D 对象都将在 UI 前面渲染,而平面后的对象将被遮挡。
在这里插入图片描述
3)World Space:此模式将 UI 视为场景中的平面对象进行渲染。但是,与 Screen Space - Camera 模式不同,该平面不需要面对摄像机,可以任意定向。画布的大小可以使用矩形变换来设置,但画布在屏幕上的大小将取决于摄像机的视角和距离。其他场景对象可以位于画布后面、穿透画布或位于画布前面。

1.2 多个Canvas的显示顺序

  • 渲染模式为 Screen Space - Overlay 的始终在最前面。
  • SortingLayer越大的显示越靠前。
  • SortingLayer相同,SortOrder越大的显示越靠前。
  • SortingLayer和SortOrder都相同,Z坐标越小的(距离相机越近)的越靠前。
  • Z坐标,SortingLayer和SortOrder都相同,受在Hierarchy窗口中的层级关系影响,层级越靠下显示越靠前。

2.Canvas Scaler:屏幕分辨率自适应

用于控制 Canvas 画布中 UI 元素的整体缩放和像素密度。此缩放会影响画布下的所有内容。

2.1 UI Scale Mode

确定画布中的 UI 元素的缩放方式。

1) Screen Space 模式下
在这里插入图片描述
Constant Pixel Size:无论屏幕大小如何,UI 元素都保持相同像素大小。
Scale Factor:按此系数缩放画布中的所有 UI 元素。
Reference Pixels Per Unit:canvas中每一个单位对应的像素数,通常100像素对应Unity中的一个单位。
在这里插入图片描述
Scale With Screen Size:根据某个缩放因子,等比缩放画布,Canvas下的UI元素也会受到影响。
Reference Resolution:UI 布局的设计分辨率。如果屏幕分辨率(实际设备分辨率)较大,则 UI 会放大,如果较小,则 UI 会缩小。
Screen Match Mode:屏幕适配模式

  1. Match Width or Height:以宽度、高度或二者的线性插值作为参考来缩放画布区域。
  2. Expand:扩展模式,选择宽高比中较小的缩放因子进行缩放。可以显示全部UI,画布中多出来的空白像素用固定颜色填充。
  3. Shrink:裁剪模式,选择宽高比中较大的缩放因子进行缩放。会有一部分UI被裁剪。

Match:以宽度比、高度比或二者的线性插值作为参考进行缩放。
Reference Pixels Per Unit:每单位像素数。

Constant Physical Size:无论屏幕大小和分辨率如何,UI 元素都保持相同的物理大小。
用于解决不同设备上(DPI不同)同一个UI大小不同的问题。
在这里插入图片描述

Physical Unit: 用于指定位置和大小的物理单位。
在这里插入图片描述

Fallback Screen DPI:在屏幕 DPI 未知时采用的 DPI。
Default Sprite DPI:用于精灵的每英寸像素,使其“Pixels Per Unit”设置与“Reference Pixels Per Unit”设置匹配。
Reference Pixels Per Unit:如果精灵具有此“Pixels Per Unit”设置,则其 DPI 将与“Default Sprite DPI”设置匹配。

2) World Space 模式下
Dynamic Pixels Per Unit: 用于 UI 中动态创建的位图(如文本)的每单位像素量。
Reference Pixels Per Unit: 每单位像素数。

3. EventSystem

  • 负责Tick整个事件系统。
  • 负责管理所有的输入事件,并将其分派给正确的GameObject。
  • 一个场景中只能有一个EventSystem组件,创建UI时如果没有EventSystem则自动创建一个。

在 Editor 中 EventSystem 对象的 Inspector 窗口可以查看:当前选中对象(Selected),以及鼠标左右键的输入信息(Pointer -1 和 Pointer -2)等信息。

4. Standalone Input Module

  • 继承 BaseInputModule。
  • 由EventSystem 管理和驱动 。
  • 处理不同类型的输入(例如鼠标、触摸屏等)并生成对应的事件 。

InputModule 主要在 Process() 函数中处理用户输入事件。
以 touch 为例:Process主要的工作就是维护 PointerEventData 的数据(点击位置,当前位置,点击时间、上一帧的 delta值等),同时根据 PointerEventData 发出事件(Click、Drag)。
在这里插入图片描述

5. Graphic Raycaster:图形射线投射器

  • 如果UI需要接受点击事件,需要在UI所在的 Canvas 上添加 GraphicRaycaster 组件。
  • 所有可交互UI元素都继承自 UIBehaviour 并勾选 Raycast Target,才能够接收和处理相应类型的输入事件。
  • 检测时获取当前射线击中的所有物体,统一进行排序,选择排序后的第一个对象作为射线检测的结果。
  • 依赖 RectTranform 的矩形框来进行射线检测, 不需要摄像机。
  • 根据Canvas的层级和UI的深度depth进行排序。
// EventSystem.cs
public void RaycastAll(PointerEventData eventData, List<RaycastResult> raycastResults)// s_RaycastComparer 排序方法
private static int RaycastComparer(RaycastResult lhs, RaycastResult rhs)// GraphicRaycaster.cs  
public override void Raycast(PointerEventData eventData, List<RaycastResult> resultAppendList)

UGUI事件系统原理:

流程:事件输入–>射线投射–>事件分发
在这里插入图片描述
InputModule 获取用户的操作数据,Raycaster 则找到目标对象并通知 EventSystem,最后由EventSystem 发送事件让目标对象进行响应,处理对应的事件。

Unity提供了一系列事件处理接口,它们继承自 IEventSystemHandler 。每次分发事件时查询目标对象上实现了
IEventSystemHandler 接口的所有组件, 然后向这些组件进行消息分发。

UGUI支持的事件:https://docs.unity.cn/cn/current/Manual/SupportedEvents.html

核心源码:ExecuteEvents.cs

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

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

相关文章

dantax参数调优

dantax参数调优 1.speed调优 可能会导致数据倾斜 处理的速度不同&#xff0c;可能会导致job非常慢 举例子&#xff0c;比如总限速是每秒100条record&#xff0c;其中第一个channel速度是每秒99条record&#xff0c;第二个channel是每秒1条record&#xff0c;加起来是每条100条…

初学Python记

Python这个编程语言的大名当然听说过了呀&#xff0c;这几年特别火&#xff0c;火的一塌涂地。大家可以回忆一下&#xff1a;朋友圈推荐的广告里经常可以看见python的网课广告。 本学期&#xff0c;学校开设了python课程&#xff0c;这几天学习了一下入了一下门&#xff0c;感…

将PyCharm中的终端运行前面的PS修改成当前环境

最近使用Pycharm中的Terminal来pip安装一些pakage&#xff0c;发现Terminal运行前面的显示的是PS&#xff0c;然后输入安装指令报错。“python无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。” 解决方法&#xff1a; 只需要在pycharm的设置中修改一些termi…

CSS 滚动驱动动画 scroll()

CSS 滚动驱动动画 scroll() animation-timeline 通过 scroll() 指定可滚动元素与滚动轴来为容器动画提供一个匿名的 scroll progress timeline. 通过元素在顶部和底部(或左边和右边)的滚动推进 scroll progress timeline. 并且元素滚动的位置会被转换为百分比, 滚动开始被转化为…

Java进行多线程编程?(lambda表达式~)

本文标题&#xff1a;Java进行多线程编程&#xff1f;那么&#xff0c;Java为啥不学学如何进程多进程编程呢&#xff1f;&#xff1f;原因在于&#xff1a;Java圈子中不提倡多进程编程~~ 接下来&#xff0c;我们来写一个最为基础/入门的HelloWord程序来感受如何进行多线程~~ J…

记录获取蓝鲸智云token的过程

一、使用python脚本获取蓝鲸智云token python版本环境&#xff1a;3.11 # -*- coding: utf-8 -*- import requestsdef get_user_token(domain,user,password):模拟用户登录&#xff0c;并返回 bk_token 和 bk_csrftokenBK_PAAS_HOST domainUSERNAME userPASSWORD password…

YOLOV7改进-轻量级上采样算子CARAFE

CARAFE 可以作为论文中的小创新点 上采用算子参数可以跑一跑&#xff0c;增加实验丰富度&#xff0c;工作量 1、复制代码,到common文件的最底下就可以了 2、yolo.py复制 3、yolov7里就俩上采样&#xff0c;替换名称&#xff0c;后面参数可以调 打印出来便于观看参数

说说MySQL回表查询与覆盖索引

分析&回答 什么是回表查询&#xff1f; 通俗的讲就是&#xff0c;如果索引的列在 select 所需获得的列中&#xff08;因为在 mysql 中索引是根据索引列的值进行排序的&#xff0c;所以索引节点中存在该列中的部分值&#xff09;或者根据一次索引查询就能获得记录就不需要…

mvc 异常处理源码解析(3)

目录 准备源码跟踪ExceptionHandlerExceptionResolver初始化ExceptionHandlerExceptionResolver注入ExceptionHandlerExceptionResolver中exceptionHandlerAdviceCache初始化ExceptionHandlerMethodResolver中mappedMethods初始化 结尾 准备 准备一个controller类, 里面抛出一…

《消息队列》专栏介绍

《消息队列》专栏介绍 目录 《消息队列》专栏介绍专栏导言什么是消息队列呢&#xff1f;应用场景&#xff08;作用&#xff09; 为什么要用消息队列呢&#xff1f;异步处理削峰填谷 举个例子 分布式消息队列的优势 应用解耦优点发布订阅优点 分布式消息队列应用场景不同消息队列…

嵌入式学习笔记(18)代码重定位实战 下篇

adr和ldr伪指令的区别 ldr和adr都是伪指令&#xff0c;区别是ldr是长加载、adr是短加载。 adr指令加载的是运行时地址&#xff1b;ldr指令加载的是链接地址。 &#xff08;通过反汇编文件可以深入分析adr和ldr的区别&#xff09; 重定位&#xff08;代码拷贝&#xff09; …

uni-app 之 uni.request 网络请求API接口

uni-app 之 uni.request 网络请求API接口 image.png <template><!-- vue2的<template>里必须要有一个盒子&#xff0c;不能有两个&#xff0c;这里的盒子就是 view--><view>--- uni.request 网络请求API接口 ---<view><!-- 免费的测试接口 --…