Unity UGUI2——Canvas与EventSystem

这篇具有很好参考价值的文章主要介绍了Unity UGUI2——Canvas与EventSystem。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、Canvas

​ Canvas 的意思是画布,它是 UGUI 中所有 UI 元素能够被显示的根本,它主要负责渲染自己的所有 UI 子对象

​ 如果 UI 控件对象不是 Canvas 的子对象,那么控件将不能被渲染

​ 我们可以通过修改 Canvas 组件上的参数修改渲染方式

​ 场景中允许有多个 Canvas 对象,可以分别管理不同画布的渲染方式,分辨率适应方式等等参数

​ 如果没有特殊需求,一般情况场景上一个 Canvas 即可

​ Canvas 有三种渲染模式:

  • Screen Space - Overlay:屏幕空间,覆盖模式,UI 始终在前

  • Screen Space - Camera:屏幕空间,摄像机模式,3D 物体可以显示在 UI 之前

  • World Space:世界空间,3D 模式

(一)Screen Space - Overlay

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

  1. Pixel Perfect:是否开启无锯齿精确渲染(性能换效果) ,一般不需要勾选

  2. SortOrder:排序层编号(用于控制多个 Canvas 时的渲染先后顺序)

    数字越大,越后渲染,越显示在前面

  3. TargetDisplay:目标设备(在哪个显示设备上显示)

  4. Additional Shader Channels:其他着色器通道,决定着色器可以读取哪些数据

(二)Screen Space - Camera

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

  1. Pixel Perfect:是否开启无锯齿精确渲染(性能换效果) ,一般不需要勾选

  2. RenderCamera:用于渲染 UI 的摄像机(如果不设置将类似于覆盖模式),不建议设置为 Main Camera

  3. Plane Distance:UI 平面在摄像机前方的距离,类似整体 Z 轴的感觉

  4. Sorting Layer:所在排序层,可以自己创建,后添加的层级优先级越低,越后被渲染,越显示在前面

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

5.Order in Layer:排序层的序号

Sorting Layer 相同时,该序号决定了渲染的优先级,值越大,优先级越低,越显示在前面

6.Additional Shader Channels:其他着色器通道,决定着色器可以读取哪些数据

​ 若要使物体显示在 UI 之前,我们通常会将物体创建为 UI 的子物体,调整其与 UI 的 Z 轴距离使得一起被渲染。

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

​ 这里注意物体缩放大小的问题。由于自适应大小,物体创建为 UI 的子物体后将会变得很小,主要手动调节 Scale 将其变大显示。

(三)World Space

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

​ 3D 模式,可以把 UI 对象像 3D 物体一样处理,常用于 VR 或者 AR

  1. Event Camera:用于处理 UI 事件的摄像机(如果不设置,不能正常注册 UI 事件),一般关联 Main Camera
  2. Sorting Layer:所在排序层
  3. Order in Layer:排序层的序号
  4. Additional Shader Channels:其他着色器通道,决定着色器可以读取哪些数据

二、Canvas Scaler

​ CanvasScaler 意思是画布缩放控制器

​ 它是用于分辨率自适应的组件

​ 它主要负责在不同分辨率下 UI 控件大小自适应

​ 它并不负责位置,位置由之后的 RectTransform 组件负责

​ 它主要提供了三种用于分辨率自适应的模式 ,我们可以选择符合我们项目需求的方式进行分辨率自适应

(一)准备知识

  1. 屏幕分辨率:

    在 Game 窗口中的 Stats 统计数据窗口,看到当前“屏幕”分辨率,会参与分辨率自适应的计算

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

1.画布大小和缩放系数:

选中 Canvas 对象后在 RectTransform 组件中看到的宽高和缩放

宽高 * 缩放系数 = 屏幕分辨率

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

2.Reference Resolution: 参考分辨率

在缩放模式的宽高模式中出现的参数,参与分辨率自适应的计算

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

​ 屏幕分辨率——当前设备的分辨率,编辑器下 Game 窗口中可以查看到

​ 参考分辨率——在其中一种适配模式中出现的关键参数,参与分辨率自适应的计算

​ 画布宽高和缩放系数——分辨率自适应会改变的参数,通过屏幕分辨率和参考分辨率计算而来

​ 分辨率大小自适应——通过一定的算法以屏幕分辨率和参考分辨率参与计算得出缩放系数,该结果会影响所有 UI 控件的缩放大小

​ 分辨率大小自适应主要就是通过不同的算法计算出一个缩放系数,用该系数去缩放所有 UI 控件,让其在不同分辨率下达到一个较为理想的显示效果

​ 即:屏幕大的时候,按钮大,屏幕小的时候,按钮小

​ 三种适配模式:

  • Constant Pixel Size(恒定像素模式):无论屏幕大小如何,UI 始终保持相同像素大小

  • Scale With Screen Size(缩放模式):根据屏幕尺寸进行缩放,随着屏幕尺寸放大缩小

  • Constant Physical Size(恒定物理模式):无论屏幕大小和分辨率如何,UI 元素始终保持相同物理大小

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

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

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

  1. Scale Factor:缩放系数

    按此系数缩放画布中的所有 UI 元素

  2. Reference Pixels Per Unit: 单位参考像素

    多少像素对应 Unity 中的一个单位(默认一个单位为 100 像素)

    图片设置中的 Pixels Per Unit 设置,会和该参数一起参与计算

    UI 原始尺寸 = 图片大小(像素)/ (Pixels Per Unit / Reference Pixels Per Unit)

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

​ 恒定像素模式

​ 不会让 UI 控件进行分辨率大小自适应,会让 UI 控件始终保持设置的尺寸大小显示

​ 一般在进行游戏开发极少使用这种模式,除非通过代码计算来设置缩放系数

(三)Scale With Screen Size(缩放模式)

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

  1. Reference Resolution:参考分辨率(美术同学出图的标准分辨率)。

    缩放模式下的所有匹配模式都会基于参考分辨率进行自适应计算

  2. Screen Match Mode:屏幕匹配模式,当前屏幕分辨率宽高比不适应参考分辨率时,用于分辨率大小自适应的匹配模式

    • Expand:水平或垂直拓展画布区域,会根据宽高比的变化来放大缩小画布,可能有黑边

      将 Canvas Size 进行宽或高扩大,让他高于参考分辨率

      计算公式: 缩放系数 = Mathf.Min(屏幕宽 / 参考分辨率宽,屏幕高 / 参考分辨率高);

      画布尺寸 = 屏幕尺寸 / 缩放系数

      表现效果:最大程度的缩小 UI 元素,保留 UI 控件所有细节,可能会留黑边

    • Shrink:水平或垂直裁剪画布区域,会根据宽高比的变化来放大缩小画布,可能会裁剪

      将 Canvas Size 进行宽或高收缩,让他低于参考分辨率

      计算公式: 缩放系数 = Mathf.Max(屏幕宽 / 参考分辨率宽,屏幕高 / 参考分辨率高);

      画布尺寸 = 屏幕尺寸 / 缩放系数

      表现效果:最大程度的放大 UI 元素,让 UI 元素能够填满画面,可能会出现裁剪

    • Match Width Or Height:以宽高或者二者的平均值作为参考来缩放画布区域

      以宽高或者二者的某种平均值作为参考来缩放画布

      • Match:确定用于计算的宽高匹配值

      主要用于只有横屏模式或者竖屏模式的游戏

      竖屏游戏:Match = 0

      将画布宽度设置为参考分辨率的宽度,并保持比例不变,屏幕越高可能会有黑边

      横屏游戏:Match = 1

      将画布高度设置为参考分辨率的高度,并保持比例不变,屏幕越长可能会有黑边

​ 游戏开发一般使用 Scale With Screen Size 缩放模式

​ 存在横竖屏切换选择: Expand(拓展匹配,有黑边)和 Shrink(收缩匹配,有裁剪)

​ 不存在横竖屏切换(定死的横屏或者竖屏游戏): Match Width or Height(宽高匹配)

  • 横屏游戏 Match = 1

  • 竖屏游戏 Match = 0

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

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

​ DPI(Dots Per Inch,每英寸点数):图像每英寸长度内的像素点数

  1. Physical Unit:物理单位,使用的物理单位种类

    单位种类 与 1 英寸的关系
    Centimeters(cm) 2.54
    Millimeters(mm) 2.54
    Inches(英寸) 1
    Points(点) 72
    Picas(皮卡) 6
  2. Fallback Screen DPI:备用 DPI,当找不到设备 DPI 时,使用此值

  3. Default Sprite DPI:默认图片 DPI

  4. Reference Pixels Per Unit :单位参考像素

    新单位参考像素 = 单位参考像素 * Physical Unit / Default Sprite DPI

    再使用模式一:恒定像素模式的公式进行计算

    原始尺寸 = 图片大小(像素)/ (Pixels Per Unit / 新单位参考像素)

​ 恒定像素模式和恒定物理模式区别:

  • 相同点:他们都不会进行缩放,图片有多大显示多大,使用他们不会进行分辨率大小自适应

  • 不同点:相同尺寸不同 DPI 设备像素点区别,像素点越多细节越多

​ 同样为 5 像素,DPI 较低的设备上看起来的尺寸可能会大于 DPI 较高的设备

​ 恒定物理模式

​ 它不会让 UI 控件进行分辨率大小自适应,而会让 UI 控件始终保持设置的尺寸大小显示

​ 而且会根据设备 DPI 进行计算,让在不同设备上的显示大小更加准确

​ 一般在进行游戏开发极少使用这种模式

(五)3D 模式

​ 当 Canvas 的渲染模式设置为世界空间 3D 渲染模式时,这时 Canvas Scaler 的缩放模式会强制变为 World 3D 世界模式

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

  1. Dynamic Pixels Per Unit:UI 中动态创建的位图(例如文本)中,单位像素数(类似密度)

  2. Reference Pixels Per Unit:单位参考像素,多少像素对应 Unity 中的一个单位(默认一个单位为 100 像素)

​ 3D 模式

​ 只有在 3D 渲染模式下才会启用的模式,主要用于控制该模式下的像素密度

​ 该模式了解即可,一般不修改

三、Graphic Raycater

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

​ Graphic Raycaster 意思是图形射线投射器,它是用于检测 UI 输入事件的射线发射器

​ 它主要负责通过射线检测玩家和 UI 元素的交互,判断是否点击到了 UI 元素

  1. Ignore Reversed Graphics:是否忽略反转图形

    即图形翻转后,背面是否还接受交互

  2. Blocking Objects:射线被哪些类型的碰撞器阻挡(在覆盖渲染模式 Overlay 下无效)

  3. Blocking Mask:射线被哪些层级的碰撞器阻挡(在覆盖渲染模式 Overlay 下无效)

四、EventSystem

​ Event System 意思是事件系统,它是用于管理玩家的输入事件并分发给各 UI 控件,它是事件逻辑处理模块

​ 所有的 UI 事件都通过 EventSystem 组件中轮询检测并做相应的执行

​ 它类似一个中转站,和许多模块一起共同协作。如果没有它,所有点击、拖曳等等行为都不会被响应

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

  1. First Selected:首先选择的游戏对象,可以设置游戏一开始的默认选择

  2. Send Navigation Events:是否允许导航事件(移动 / 按下 / 取消)

    可以通过键盘 WASD 或上下左右改变当前选中的按钮,Enter 键模拟选中按钮

    该效果依赖 Standalone Input Module

  3. Drag Threshold:拖拽操作的阈值(移动多少像素才算拖拽)

五、Standalone Input Module

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

​ Standalone Input Module 意思是独立输入模块

​ 它主要针对处理鼠标 / 键盘 / 控制器 / 触屏(新版Unity)的输入

​ 输入的事件通过 EventSystem 进行分发

​ 它依赖于 EventSystem 组件,他们两缺一不可

  1. Horizontal Axis:水平轴按钮对应的热键名(该名字对应 Input 管理器)

  2. Vertical Axis:垂直轴按钮对应的热键名(该名字对应 Input 管理器)

  3. Submit Button:提交(确定)按钮对应的热建名(该名字对应 Input 管理器)

  4. Cancel Button:取消按钮对应的热建名(该名字对应 Input 管理器)

  5. Input Actions Per Second:每秒允许键盘 / 控制器输入的数量

  6. Repeat Delay:每秒输入操作重复率生效前的延迟时间

  7. ForceModule Active:是否强制模块处于激活状态

六、RectTransform

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

​ RectTransform 意思是矩形变换,它继承于 Transform,是专门用于处理 UI 元素位置大小相关的组件

​ Transform 组件只处理位置、角度、缩放

​ RectTransform 在此基础上加入了矩形相关,将 UI 元素当做一个矩形来处理

​ 加入了中心点、锚点、长宽等属性,其目的是更加方便的控制其大小以及分辨率自适应中的位置适应

(一)参数介绍

  1. Pivot:轴心(中心)点,取值范围 0 ~ 1

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

  1. Anchors(相对父矩形锚点):

    Min 是矩形锚点范围 X 和 Y 的最小值

    Max 是矩形锚点范围 X 和 Y 的最大值

    取值范围都是 0 ~ 1,相当于对于父物体矩形的百分比

    • 锚点(Min = Max):位置自适应

      物体中心 Pivot 将以 Anchors 为原点进行设置

      Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#
    • 矩形(Min ≠ Max):大小自适应

      此时,Pos 窗口会替换为 Left / Top / Right / Bottom

      Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#
  2. Pos(X, Y, Z):轴心点(中心点)相对锚点的位置

  3. Width / Height:矩形的宽高

  4. Left / Top / Right / Bottom:矩形边缘相对于锚点的位置;当锚点分离时会出现这些内容

  5. Rotation:围绕轴心点旋转的角度

  6. Scale:缩放大小

  7. Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#:Blueprint Mode(蓝图模式)

    启用后,编辑旋转和缩放不会影响矩形,只会影响显示内容

  8. Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#:Raw Edit Mode(原始编辑模式)

    启用后,改变轴心和锚点值不会改变矩形位置

(二)组件参数

Unity UGUI2——Canvas与EventSystem,Unity,ui,unity,游戏引擎,c#

  1. 点击左上角方框,将出现锚点中心点快捷设置面板

  2. 鼠标左键点击其中的选项, 可以快捷设置锚点(9 宫格布局)

  3. 按住 Shift 点击鼠标左键可以同时设置轴心点(相对自身矩形)

  4. 按住 Alt 点击鼠标左键可以同时设置位置

(三)代码使用

​ 将 Transform 转为 RectTransform 从而获取其参数文章来源地址https://www.toymoban.com/news/detail-526723.html

到了这里,关于Unity UGUI2——Canvas与EventSystem的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity UGUI的Canvas(画布)组件的介绍及使用

    Canvas(画布)是Unity UGUI系统中的一个重要组件,用于在屏幕上绘制UI元素。它是UI元素的容器,可以包含各种UI元素,如按钮、文本、图像等。Canvas组件提供了一种方便的方式来管理和渲染UI元素。 Canvas组件通过渲染器将UI元素绘制到屏幕上。它使用层级结构来管理UI元素的显

    2024年02月08日
    浏览(70)
  • Unity UI——UGUI

    包名: com.unity.ugui Canvas :   容纳所有UI元素的区域。   一种带有画布组件的游戏对象。   使用EventSystem对象来协助消息系统。 绘制顺序: 按照在 Hierarchy 中显示的顺序绘制,由上到下。 如果两个 UI 元素重叠,则后一个元素将显示在前一个元素之上 渲染模式:(Render Mode)

    2024年04月28日
    浏览(38)
  • Unity优化之UI篇(UGUI)

            在Unity中UI优化的核心问题就是重绘和批处理之间的平衡。虽然说可以通过一些简单的技巧单方面地减少批次或者减少重绘,但进行过一波优化之后,最终还是要面临批次和重绘的平衡问题。         Canvas是UGUI的基本组件,它生成表示放置在其上的 UI 元素的网

    2024年02月04日
    浏览(47)
  • Unity--UGUI创建基本的UI

    随着UI系统的引入,已添加了新组件,这些组件将有助于创建特定于GUI的功能。其中一些元素包括文本,图像,按钮等。在本教程中,您将学习创建和使用基本UI。 通过Unity的用户界面(UI)系统,可以控制诸如:文本,图像,按钮和其他用户控件之类的元素,这些元素将为用

    2024年04月12日
    浏览(54)
  • 【UGUI】学会Unity中UGUI中UI元素自适应问题

    彻底学会Unity中UGUI中UI元素自适应问题 官方介绍:设计用于多种分辨率的 UI - Unity 手册 所所谓自适应就是画面元素跟随屏幕分辨率的改变而保持相对位置或者自身像素同步改变! 屏幕分辨率自适应:依靠画布缩放器组件完成 相对位置:依靠锚点位置完成,锚点主要负责保持

    2024年02月04日
    浏览(36)
  • Unity UGUI事件输入,点击UI无反应

    之前被一个特别低级的UI点击问题卡了好久,记录一下,避免之后再犯同样的错误。 UI事件输入未接受到的原因无非就几个,一一排查总能找到原因。 1、若是直接使用的unity组件中的按钮,但是点击按钮没有反应。         1)查找是否被其他UI遮挡         2)查找是否接收

    2024年04月13日
    浏览(48)
  • 【Unity】UGUI中Camera Depth,Canvas Sorting Layer、Order in Layer与Particle System渲染层级分析

    目录   前言 一、项目需求 二、Camera 1.Clear Flags 2.Culling Mask  三、Canvas 1.Sorting Layer 2.Order in Layer 四、Particle System 1.Sorting LayerID 与Order in Layer 总结         最近在做项目的过程中,发现项目中的部分3d模型会被粒子特效所遮挡,这并不是笔者想要的效果,于是经过一番面向

    2024年02月05日
    浏览(46)
  • 【unity插件】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件

    一般的shader无法直接使用在UI上,需要在shader中定义特定的面板参数,今天就来推荐github上大佬做的一套开源的一系列UGUI,Shader实现的特效——UIEffect 为 Unity UI 提供视觉效果组件。 https://github.com/Ankh4396/UIEffect 让我们用效果来装饰你的UI!您可以根据需要从脚本和检查器中控

    2024年02月04日
    浏览(43)
  • Unity3D学习之UI系统——UGUI

    3.2.1 Screen Space -Overlay 覆盖模式 3.2.2 Screen Space - Camera 摄像机模式 创建专门的摄像机渲染UI 并让主摄像机不渲染UI层 3.2.3 World Space 宽高 * 缩放系数 = UI界面大小 参考分辨率 图片格式要改为Sprite 恒定像素模式计算公式 会根据当前分辨率 和 参考分辨率的比率自动计算UI的缩放量

    2024年02月21日
    浏览(258)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包