Unity学习笔记之UI

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

三种UI系统:

  •                    OnGUI:最早的UI系统,纯代码实现,写法类似Update
  •                             优点:出现很早,纯代码可控制
  •                             缺点:只能程序开发
  •                    NGUI:Unity著名插件,可实现2D和3D的界面,出现在老项目
  •                             优点:功能完整,集成了动态效果
  •                             缺点:性能较弱,交互使用物理引擎实现,需要付费
  •                    UGUI:官方制作的UI系统,NGUI作者开发
  •                             优点:性能优秀,功能较完整
  •                             缺点:功能需要再完善,动画需要配合DOTween

常见设备的分辨率比例:

  •         4:3:iPad,安卓Pad
    •         16:9:非全面屏的手机,PC的显示器
      •         18:9:全面屏
        •         异形屏:向标准分辨率靠近

Canvas组件

简单理解:UI绘制在Canvas上,可以理解为画画的纸;

Canvas在两个模式下(Overlay和Camera)会覆盖整个屏幕,所做屏幕UI显示时,只需要处理好Canvas中的显示即可;

所有UI元素必须建立在Canvas下,否则会出现不显示的问题;

三种渲染模式:

        Overlay:Canvas贴在相机镜头上,所有UI元素在场景物体前方显示

                Pixel Perpect:高像素清晰度渲染

                Sort Order:多Canvas时,控制Canvas显示顺序,越大越在前方显示

        Camera:使用相机显示Canvas

                unity ui,Unity学习笔记,unity,学习,笔记

                修改Canvas下Canvas组件Render Mode属性:Camera

                将相机拖给Canvas下Canvas组件Render Camera属性

                将Cube位置调整到Canvas前

                调整Canvas中Plane Distance,控制Canvas到渲染相机的距离

                 unity ui,Unity学习笔记,unity,学习,笔记

                Plane Distance:Canvas到相机的距离,当SortingLayer和Order In Layer相同时,距离相机越近,显示越靠前(满足相机渲染关系)

                Sorting Layer:排序层(多层Canvas中间加粒子)

                Order in Layer:同层顺序

                建立排序层和建立顺序:

        unity ui,Unity学习笔记,unity,学习,笔记unity ui,Unity学习笔记,unity,学习,笔记

                先通过Sorting Layer排序,若一样再根据层内顺序,排序关系:配置的排序层顺序,越靠下,显示越靠前;排序层一致时,Order in layer越大越靠前;

                有时会用到双相机叠加,一个渲染场景,一个渲染UI:

  1.                         建立Camera;
  2.                         将UI相机拖给Canvas;
  3.                         将UI的相机设置为使用深度值填充,UI相机的深度要高于主相机;
  4.                         将主相机不渲染UI元素,将UI相机只渲染UI元素(Culling Mask);
        World Space:Canvas以3D物体的形式显示在场景中

                将Canvas模式调整为,World Space

                再将Canvas放入相机可视范围内

Canvas缩放

      

        该组件会拉伸所有Canvas下的子元素

        UI Scale Mode:拉伸类型

                1、Constant Pixel Size 静态模式

                2、cale With Screen Size 像素计算模式

                unity ui,Unity学习笔记,unity,学习,笔记

                        参考分辨率:根据UI设计师提供的参考图像素尺寸

                        适配方式:

  1.                                 宽度或高度自适应
    1.                                 完全自适应(自动计算宽高变化量作为缩放倍率)
      1.                                 世界模式中一米对应UI多少像素

                3、Constant Physical Size 物理计算模式

                        根据英寸进行拉伸计算。

        项目中,会根据屏幕尺寸进行拉伸:

                设计分辨率,填写美术的效果图像素值(覆盖满整个屏幕)

                选择Expand:自动计算高度自适应拉伸还是高度自适应拉伸

                覆盖满整个屏幕的背景图计算

                例如拿到1280x720的背景图

                计算方法:

  •                         18:9下:缺失两边,(设计分辨率高度 / 9)* 18
    •                         16:9下:美术一般都会按照16:9出图
      •                         4:3下:缺失上下,(设计分辨率宽度 / 4)* 3

RectTransform组件

出现位置:出现在所有Canvas子元素中,所有UI元素都应该有RectTransform组件

         unity ui,Unity学习笔记,unity,学习,笔记

Pos(XYZ):位置(X,Y,Z),单位(像素),位置是由轴点到锚点的距离

Width,Height:宽和高,单位(像素)

Anchors:锚点(四叶草),以父物体参考

                   三种情况:

  •                             单锚点:距离计算是锚点到轴点的XYZ偏移
  •                             双锚点:元素边界到锚线的距离,轴点到锚线的距离
  •                             四锚点:元素的四个边界到锚框的距离

                   锚点快速选择工具(十字符号):

  •                             默认:移动锚点
  •                             Alt:移动锚点+快速停靠位置
  •                             Shift:移动锚点+移动轴点+快速停靠位置

Pivot:轴点(蓝圈),以当前物体参考

        调整轴点后,位置计算,旋转,缩放都会受到影响,一般轴点都保留在中心点

        unity ui,Unity学习笔记,unity,学习,笔记

        周围四个点表示UI元素的边界点。

元素渲染顺序

         以下图为参考

        unity ui,Unity学习笔记,unity,学习,笔记

  • 下方物体在上方物体前显示
    • 子物体在父物体前显示
      • 下方物体永远在前显示,无论上方的层次结构

 UGUI的基础组件

unity ui,Unity学习笔记,unity,学习,笔记

其中不带 TextMeshPro 的为原有组件,TMP为加强版插件,这里先只说原有组件

Panel组件

        一个完整界面,一个Panel

        Panel一般位于Canvas子物体,四锚点在四角,边距为零,所以Panel和Canvas一样大,Canvas和屏幕一样大,所以Panel和屏幕一样大,元素显示处理在Panel中正常,则屏幕中也正常

Text组件

        unity ui,Unity学习笔记,unity,学习,笔记

  •         文本内容
  •         字库选择
  •         字体样式(标准,粗体,斜体,粗斜体)
  •         字号
  •         行间距
  •         是否开启富文本
  •         加粗:<b>文字</b>
  •         斜体:<i>文字</i>
  •         大小:<size=字号>文字</size>
  •         修改颜色:<color=颜色名>文字</color>
  •                      <color=#颜色数(十六进制)>文字</color>
  •         对齐方式(上下对齐,左右对齐)
  •         几何对齐(参考字占用的几何空间)
  •         水平溢出(折行,溢出[出右边框])
  •         垂直溢出(截断不显示,溢出[出下边框])
  •         字号自适应:关闭则使用原始字号,开启则字号会在最小值和最大值之间自动调整

阴影

        unity ui,Unity学习笔记,unity,学习,笔记

轮廓

        unity ui,Unity学习笔记,unity,学习,笔记

Image组件

        unity ui,Unity学习笔记,unity,学习,笔记 

        Color:用于混色,美术有时提供白图和色号,程序员对图处理,染成想要的颜色,可以减少包体大小

        四种类型

                1、普通模式(图标)

                        Preserve Aspect:保持图片的宽高比,高度或宽度自适应

                        Set Native Size:可以快速恢复美术提供的图片原始像素尺寸

               2、 裁剪模式(九宫格,三宫格)

                        将图片切分九宫格或三宫格

                                1)找到图片资源

                                2)选择精灵编辑器

                                unity ui,Unity学习笔记,unity,学习,笔记

                                3)九宫格切图

                                unity ui,Unity学习笔记,unity,学习,笔记

                                1,3,7,9区域不拉伸,2,8横向拉伸,4,6纵向拉伸

                                4)Image选择裁剪模式

                3、瓦片模式(无缝贴图)

        ​unity ui,Unity学习笔记,unity,学习,笔记

                4、填充模式(进度条)

  •                         Fill Method:填充方式(360度,水平和垂直)
  •                         Fill Origin:填充起始点
  •                         Fill Amount:填充百分比
  •                         Clockwise:顺时针或逆时针
  •                         Preserve Aspect:保持图片的宽高比,高度或宽度自适应
  •                         Set Native Size:可以快速恢复美术提供的图片原始像素尺寸

Raw Image组件

        原始图片组件:可以显示精灵或纹理

        功能相对于Image少,所以性能更好

        可以控制UV的偏移,来显示精灵的一部分

DrawCall

         屏幕显示过程

                  CPU->加载数据->内存->显存->显卡->显示器

         unity ui,Unity学习笔记,unity,学习,笔记

         Batchs,就是当前渲染屏幕所有内容所需要的绘制调用数

         每一张独立的UI图,会产生一个DrawCall

         优化DrawCall(UI切片):

                将多个UI切片,合并成一张UI图,UI界面只加载一张UI图片显示

                在Edit-Project Setting-Editor/SpritePacker打开设置,设置为Always Enabled

                 在project中右键创建Sprite Atla

                unity ui,Unity学习笔记,unity,学习,笔记

UI的事件交互

先在Canvas中添加Graphic Raycaster组件,是用于检测UI输入的射线发射器

unity ui,Unity学习笔记,unity,学习,笔记​​​​​​​

  •         是否忽略Canvas反向的事件操作
  •         遮挡事件的物体(2D物体[精灵片],3D物体)
  •         遮挡事件的物体所在的渲染层

添加交互组件,比如图片:

unity ui,Unity学习笔记,unity,学习,笔记

        Raycast Target:是否接收Canvas的射线

还需要有 EventSystem 物体存在,一般创建Canvas时自动创建。

UI的射线检测会依次检测对象树下的所有元素,有任何射线检测成功,则会反馈到带有事件响应的组件(Button)中,如果想实现射线穿透,可以将前面显示的UI元素的射线检测关闭。

Button组件

 unity ui,Unity学习笔记,unity,学习,笔记

按钮是否可交互

按钮状切换效果:

  •         动画效果影响的UI元素(Image和Text派生自Graphic)
  •         效果使用的图片
  •         普通状态下的颜色
  •         高亮状态下的颜色(鼠标移入)
  •         按下状态下的颜色(按钮按下)
  •         失活状态下的颜色(不可交互)
  •         颜色倍数(RGBA分量乘以倍数)
  •         切换动画持续时间

键盘导航,可以通过按键切换选中可交互UI,Visualize开启后,能够看到导航线,Navigation可以选择横向移动、纵向移动、自动匹配移动、指定上下左右移动,手机游戏可以关闭导航。

按钮添加事件(拖拽方式):

  •         添加脚本,内部编写回调函数(挂在场景对象下)
  •         找到Button,OnClick事件,添加(脚本所在对象,并选择回调函数)
  •         运行项目,点击按钮(做一些事情
  •         触发回调函数
  •         OnClick可以添加多次回调函数

按钮添加事件(代码方式):

        unity ui,Unity学习笔记,unity,学习,笔记

 Toggle组件

 unity ui,Unity学习笔记,unity,学习,笔记

Is On:用于判断当前Toggle是否为开启状态

Toggle勾切换的动画效果

Toggle勾的图

如果Toggle构成组,则需要将ToggleGroup拖给Toggle,比如:

unity ui,Unity学习笔记,unity,学习,笔记

 Toggle事件处理

        判定当前的开关是否打开

                            unity ui,Unity学习笔记,unity,学习,笔记

        动态传参和静态传参

 ​​​​​​​        ​​​​​​​unity ui,Unity学习笔记,unity,学习,笔记

        动态传参会根据Toggle的IsOn传递bool数据,静态传参则会根据配置值传递bool数据。

 ToggleGroup中可以获取开启的Toggle:

unity ui,Unity学习笔记,unity,学习,笔记

Slider组件

unity ui,Unity学习笔记,unity,学习,笔记 

  • Fill Rect:填充滑动条选中区域的背景图部分
  • 滑动条的球
  • 滑动条的滑动方向
  • 起始位置的数值(浮点数)
  • 结束位置的数值(浮点数)
  • 开启滑动值必须为整数(布尔型)
  • 滑动条的当前值(浮点数)

InputField组件

 unity ui,Unity学习笔记,unity,学习,笔记

  • Text Component:输入的内容,显示的文本组件
  • 当前输入的内容值
  • 最大输入字符数
  • 输入的文本类型(数字,实数,数字英文,名称,密码)
  • 行类型(单行,回车跳出,回车换行)
  • 输入框原始内容(默认显示)
  • 光标闪动频率
  • 光标宽度
  • 光标自定义颜色
  • 被选中文字的颜色
  • 移动设备下是否隐藏键盘
  • 是否只读(文本框不可编辑)

InputField事件:

        ​​​​​​​unity ui,Unity学习笔记,unity,学习,笔记

         当文本框输入的内容改变或结束输入时,分别执行回调函数。

Mask组件

带有Mask组件的图,会显示子物体图片中,父物体图片Alpha通道不为0的部分

unity ui,Unity学习笔记,unity,学习,笔记

参数:没有子物体能显示时,是否显示父物体本图

Mask组件一般配合Image组件使用,以实现不规则显示,比如圆形头像

unity ui,Unity学习笔记,unity,学习,笔记

ScrollView组件

unity ui,Unity学习笔记,unity,学习,笔记

  • 实际显示区域的UI对象
  • 是否开启横向滚动
  • 是否开启纵向滚动
  • 滚动类型
  •         无边界自由滚动
  •         有边界带回弹效果(回弹系数)
  •         有边界无回弹效果
  • 拖拽惯性
  • 滚轮或触摸板移动系数
  • ScrollView的可视区域
  • 横向滚动条
  •         可见性(可见区域与实际显示区域对比)
  •                 一直显示
  •                   自动隐藏
  •                 自动隐藏,并支持自动扩展区域
  •         空间
  •                 横纵滚动条交叉区域预留空间
  • 纵向滚动条
  •         可见性(可见区域与实际显示区域对比)
  •                 一直显示
  •                 自动隐藏
  •                 自动隐藏,并支持自动扩展区域
  •         空间
  •                 横纵滚动条交叉区域预留空间

 ScrollBar组件

 unity ui,Unity学习笔记,unity,学习,笔记

Handle Rect:拖拽条对象

运行方向:上下,下上,左右,右左

拖拽条对应的值(0起始位置,1结束位置)

拖拽条占滚动条的比例(可视区域/实际区域,自动计算)

按步拖拽(固定步数分步显示所有实际区域)

Layout排列组件 

 unity ui,Unity学习笔记,unity,学习,笔记

  • 纵向自适应排列组件,参数:
  • 外框的内边距(左右上下)
  • 元素间距
  • 子元素对齐方式(外框的九个点位)
  • 排序组件是否控制子元素的宽高(是否控制宽度,是否控制高度)
  • 子元素强制自适应(宽[和外框对齐],高[根据外框等分计算后,设置子元素高])

​​​​​​​unity ui,Unity学习笔记,unity,学习,笔记

横向自适应排列组件,参数上。

unity ui,Unity学习笔记,unity,学习,笔记

  • 网格排列组件,参数:
  • 外框的内边距(左右上下)
  • 内部元素的宽高(宽度,高度),不能自由修改子元素的宽高
  • 子元素间距(横向,纵向)
  • 第一个子元素位于的角(左上,右上,左下,右下)
  • 开始排列的轴方向(横向,纵向)
  • 子元素对齐方式(外框的九个点位)
  • 固定行列数(自适应,设置固定列[列数],设置固定行[行数])

unity ui,Unity学习笔记,unity,学习,笔记

父元素宽高自适应组件

  •          横(不适应,最小值)
  •          纵(不适应,最小值)

 Dropdown组件

 unity ui,Unity学习笔记,unity,学习,笔记

  • Template:下拉菜单的ScrollView;
  • 当前选中的选项对应的文字组件(选中的选项文字内容,显示在这个组件中);
  • 当前选中的图片选项对应的图片组件(选中的选项图片,显示在这个组件中);
  • 下拉菜单中,存储选项的文本组件(来自Template下,每个选项会复制一份);
  • 下拉菜单中,存储选项的图片组件(来自Template下,每个选项会复制一份);
  • 当前下拉菜单选中的选项列表,的选项所在索引值;
  • 一组选项列表(List,选项可以是文字,也可以是图片);
  • 当选项更改时,回调函数会获得对应选项的索引值;

自定义触发事件

触发UI事件的三个要素

  1. Canvas配置射线发射器
  2. 场景中存在EventSystem组件
  3. 交互组件Raycast Target开启(Text组件或Image组件)

自定义点击实现:

        由于Unity是组件化开发思想,所以自定义按钮也是使用组件Script实现

        ​​​​​​​unity ui,Unity学习笔记,unity,学习,笔记

        编写自定义事件步骤:

  1. 引入自定义事件命名空间(UnityEngine.EventSystems)
  2. 实现自定义事件Interface
  3. 用户交互会触发回调函数

        点击事件接口:

  •         IPointerEnterHandler:鼠标光标移入射线检测区域,触发回调函数
  •         IPointerExitHandler:鼠标光标移出射线检测区域,触发回调函数
  •         IPointerDownHandler:鼠标在射线检测区域中按下,触发回调函数
  •         IPointerUpHandler (前提:需要先触发按下事件):
  •                 情况1:鼠标在射线检测区域中按下并抬起(正常点击)
  •                 情况2:鼠标在射线检测区域中按下,移出射线检测区域后抬起(点击后取消)
  •                 情况3:鼠标在射线检测区域外按下,再在区域外抬起(按下回调不执行)
  •                 情况4:鼠标在射线检测区域外按下,再在区域内抬起(按下回调不执行)
  •         IPointerClickHandler:鼠标在射线检测区域中按下并抬起,触发回调函数,Up的情况2是不会触发Click事件的。

        Button点击事件分析:

​​​        ​​​​ unity ui,Unity学习笔记,unity,学习,笔记

 ​​​​​​​        ​​​​​​​unity ui,Unity学习笔记,unity,学习,笔记

 拖拽事件实现:

        半透明渐变贴图在iOS设备下,使用压缩会造成图片质量损失,所以可以将半透明渐变UI切片单独制作真彩色图集。

        拖拽事件组:

  •                 IBeginDragHandler:检测到射线后,当拖拽动作开始时执行一次回调函数
  •                 IDragHandler:拖拽开始后,有拖拽位置变化时,执行回调函数(每个移动)
  •                 IEndDragHandler:拖拽进行中时,当鼠标或手抬起时,执行一次回调函数

        如何获取物体的位置:

  •                 位置:相对量,需要有参照物体
  •                 屏幕坐标:手点击屏幕时生成
  •                 DragArea本地坐标:控制摇杆(DragBar)的位置

        ​​​​​​​        unity ui,Unity学习笔记,unity,学习,笔记

                需求:如何通过屏幕坐标系下的点,转换到DragArea本地坐标系下的点

                unity ui,Unity学习笔记,unity,学习,笔记

 文章来源地址https://www.toymoban.com/news/detail-753292.html

 

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

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

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

相关文章

  • Unity开发笔记:截取指定位置含有UI的场景截图并输出

    学习记录整理,自用,也希望能帮助到有相同需求的人。 如果直接截全图: 截取指定位置含有UI的场景截图: 例如这种情况下只想要中间的: UI所在的Canvas设置为RenderMode.ScreenSpaceCamera并挂载相机,然后设置该相机的渲染RenderTexture并开始render,注意这里渲染是从屏幕中心扩展

    2024年02月13日
    浏览(37)
  • 解决Unity中UI的中心锚点无法拖动修改问题(笔记)

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 记录一下UI中容易忘记的细节。

    2024年02月08日
    浏览(40)
  • 【Unity学习笔记】Unity TestRunner使用

    转载请注明出处:🔗https://blog.csdn.net/weixin_44013533/article/details/135733479 作者:CSDN@|Ringleader| 参考: Input testing Getting started with Unity Test Framework HowToRunUnityUnitTest 如果对Unity的newInputSystem感兴趣可以参看我这篇文章:【Unity学习笔记】第十二 · New Input System 及其系统结构 和 源码浅

    2024年01月22日
    浏览(34)
  • Unity学习笔记(一)Unity的界面和操作

    Unity官方教程 :Unity User Manual 2021.3 (LTS) - Unity 手册 UnityLearn :Learn Game Development Without Coding Experience | Unity 如何导入一个Asset Store的包? 以安装 Playground 为例。 (1)获取:从Asset StoreUnity Playground | 视频教程项目资源 | Unity Asset Store (2)导入:在 Asset Store (unity.com) 商店中选择

    2023年04月08日
    浏览(43)
  • 【Unity学习】完全基于Ultimate Replay 2.0的UI回放系统

    前面两节已经介绍了本人在项目中使用的结合JSON和Ultimate Replay 2.0的UI回放系统,那是在项目结构特殊,代码不好更改的情况下,本人所做的些许调整。但在这几天的开发过程中,我发现通常情况下只使用Ultimate Replay 2.0即可实现大部分情况下的UI回放。 这在基于JSON的UI回放系

    2024年02月12日
    浏览(57)
  • Unity学习笔记-角色移动

    1.使用transform进行移动 强制移动,直接改变物体的位置,例如: 对于某些碰撞不好处理,比如说怼着墙走会发生抖动。 2.使用RigidBody进行移动 借助刚体组件移动,代码要写在FixedUpdate中,如: 3.使用角色控制器控制角色的移动 角色控制器是unity的一个组件,添加了该组件后,

    2024年02月05日
    浏览(31)
  • Unity学习笔记

    本文为作者原创,版权所有,侵权必究。 目录 一、前言 学习Unity的契机 二、学习Unity(项目驱动) 1.环境配置与准备 2.新建项目(默认为My Project) 3.创建游戏对象 三、总结 1.新一线城市纷纷出台有关扶持元宇宙的政策,电子游戏为其中重点之一。 2.后疫情时代大众外出频率

    2024年02月03日
    浏览(30)
  • Unity学习笔记--基础

    Mathf函数库 三角函数 1.角度和弧度转换 2.三角函数和反三角函数 坐标系 物体坐标系 世界坐标系 屏幕坐标系 视口坐标系(左下角 (0,0)右上角(1,1)) 不同坐标系下的相互转换: 向量 向量模长和单位向量 向量的运算的意义 位置+位置 无意义 向量+向量=向量(首尾相连

    2024年02月06日
    浏览(40)
  • 【unity】ShaderGraph学习笔记

    创建ShaderGraph 创建URP的shaderGraph文件 在Project面板里Create→ShaderGraph→URP→这里主要有几个选项 Lit Shader Graph :有光照三维着色器 Unlit Shader Graph :无光照三维着色器 Sprite Custom Lit Shader Graph:自定义光照图片着色器 Sprite Unlit Shader Graph:无光照图片着色器 Sprite Lit Shader Graph:光

    2024年02月06日
    浏览(44)
  • unity学习笔记13

    一、常用物理关节 Unity中的物理关节(Physics Joints)是用于在游戏中模拟和控制物体之间的连接。物理关节允许你在对象之间应用各种约束,例如旋转、移动或固定连接,以模拟真实世界中的物理交互。 物理关节类型: 1.Fixed Joint(固定关节): 固定关节将两个物体连接在一

    2024年02月04日
    浏览(33)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包