Unity3D完全自学教程(第5章 UI界面)

4,234 阅读8分钟

渲染组件

画布组件

概念:画布组件可以看成一个容器,UI元素必须放在画布组件下才可以渲染。

特性

  • 挂载画布组件的物体无需设置大小,其大小与屏幕分辨率一样
  • 子物体的渲染层级取决于UI元素再层次结构上出现的顺序,下方的会遮挡上方的
  • 渲染属性发生变化,所有子物体都会受到影响

属性

  1. 渲染模式
    • Overlay(覆盖渲染模式):设置UI界面为屏幕空间,UI界面处于最顶层
    • Camera(摄像机渲染模式):设置UI界面为屏幕空间,UI界面并非处于最顶层,高层级摄像机拍摄到的物体会遮挡UI,常用于在UI界面上显示3D模型
    • World Space(世界空间渲染):UI界面成为游戏世界中的一个物体,常用于制作血条和伤害扣血字
  2. 优化像素渲染:开启后UI会进行抗锯齿渲染
  3. 渲染顺序:不同的画布组件会根据这一渲染顺序进行遮挡
  4. 显示目标:和多屏显示相关
  5. 附加着色器通道:设置在创建画布网格时使用的附加着色器通道

画布缩放组件

作用:控制整体界面的缩放,UI元素的像素密度,影响程度包括画布中的所有内容

特性

  • 控制整体界面UI元素的大小
  • 让UI界面维持适应屏幕的比例

属性

  1. UI渲染模型
    • 固定像素尺寸:无论屏幕分辨率如何改变,UI元素像素大小都不变
    • 随屏幕缩放
    • 固定物理空间尺寸:保持物理空间的大小不变
  2. 缩放系数
  3. 每单元参考像素的大小

布局元素

矩形变换组件

游戏物体用的是变换组件,UI物体用的是矩形变换组件(Rect)

更多的功能:设置宽度和高度,设置对齐方式

属性

  1. 设置位置,一般都是渲染到屏幕空间,所以只用Pos X和Pos Y

  2. 设置宽高,对UI物体,建议用宽高属性设置大小,不建议用缩放属性,因为会失真

  3. 设置对齐方式,左上角的十字框,可以设置对齐和吸附功能(通过Alt切换)

  4. 锚点(Anchors),锚点影响父子节点的相对变化,父节点锚点影响子节点相对于该锚点的相对位置和缩放

    调整锚点,可以让物体随着父物体的缩放而相应变化

  5. 中心点(Pivot),设为(0,0)表示中心点在左下角,设为(0.5,0.5)表示中心点在正中间

  6. 旋转

  7. 缩放

布局元素组件

组件名Layout Element

作用:重定义布局元素最小、最合适或最适应的大小

特性

  • 允许重写一个或多个布局元素的值
  • 自动根据其他布局元素计算大小

布局控制器组件

组件名Horizontal/Vertical/Grid Layout Group

作用:控制自身,也可以控制其子物体的元素(类似于前端的Flex布局,可以设置排列的方向和间距,行列个数,填充距离之类的)

显示组件

图片组件

图片组件是UI界面最基础的组成元素,可以这么说,其他组件实质上都是对图片组件的组合。

不可交互,可屏蔽、遮挡单击事件

属性

  • 源图片:只接受Sprite类型的图片(这个在图片导入时可设置)
  • 颜色:有源图片的时候,设置颜色,两者像素相乘,没有源图片的时候,就是设置的颜色
  • 材质:更高级的显示功能才用的
  • 射线目标:表示UI是否接受射线

文本组件

不可交互,可屏蔽、遮挡单击事件

属性: 和英文意思一样,重点解释几个

  • 行间距(Line Spacing):间隔的是当前字号大小的倍数
  • 富文本(Rich Text):是否支持<color=#525252>变色内容</font>的输入
  • 上下对齐和左右对齐方式
  • 是否几何对齐
  • 水平是否换行:默认换行,选择Overflow表示不换行,文本会超出设定的边界
  • 竖直是否换行
  • 完美适配:勾选后会让文字刚好填满这个框
  • 文字颜色:不会影响富文本的颜色

交互组件

按钮组件

注意:

  • 属性Target Graphic设置按钮组件绑定的图片组件,为空则单击事件失效
  • 图片组件里的Raycast Target勾选后才有单击效果
  • 属性Interactable为可交互,不勾选则不会响应单击事件,颜色也会变为预设颜色
  • 按下到鼠标释放才是一次完整的单击

属性

  • 切换效果(Transition):三种类型,颜色变化、图片切换、动画变化
  • 具体效果:不单击的效果、鼠标移动到其上的效果、单击的效果、未激活的效果
  • 单击事件(On Click):可以绑定到脚本中自己写的函数

单选框组件

用于切换某一选项的选中状态,当选中状态变化时,调用OnValueChanged事件,将现有状态的布尔值传出

单选框组组件

组件名Toggle Group

非可视化组件,由多个单选框组成,有且仅有一个单选框可以被选中

滑动条组件

根据滑动条的拖拽改变值的大小,值变化时调用OnValueChanged事件,闯出float类型的值

滚动条组件

滚动条块的大小会随着填充区域的大小变化

滚动条值的大小与滚动条块的长度、滚动块的位置、滚动区域大小有关

滚动块位置变化时会调用On Value Changed事件

下拉菜单组件

仅可选则提供的选项中的一项,选中后会调用On Value Changed事件

下拉选项既可以是文字,也可以是图片

输入框组件

文本输入组件

自带约束类型,实现输入字符的屏蔽

可以定义显示效果,如颜色变换、图片变换、动画变换

滚动区域组件

事件功能

事件系统组件

创建第一个画布的时候,该组件会自动创建到层级窗口,有且仅有一个。

作用:负责控制所有使用到UI事件的元素,每一帧都会运行。

特性

  • 所有交互组件的响应事件都由该组件处理
  • 该组件在Update中实时运行,因此受机器性能的影响

属性

  • 第一个被选择的对象:当刚进入游戏无任何输入的时候,默认选择元素
  • 发送导航事件:是否允许事件系统发送move/submit/cancel等导航事件
  • 拖拽门槛:响应拖拽事件的最小像素区域

独立输入模块

属性

每秒指令数:处理外设每秒输入的指令的数量

重复响应延迟:单位为秒,重复动作响应的延时

强制该模块激活

水平轴、垂直轴、确定按钮、取消按钮,设置其输入绑定的InputManager中字符串变量的名称

UI射线发射组件

创建画布的时候自动添加的组件

作用:单独作用射线发射到画布上,射线会在击中第一个阻塞它的UI元素时停止

注意

  • 若画布没有该组件,则其下的交互组件无法得到响应输入
  • 父画布有该组件,而子画布没有,那么子画布下的UI响应不被触发

事件触发器组件

作用:可以自定义交互功能,单个事件可以触发多个函数

属性: 鼠标进入、鼠标离开、鼠标按下、鼠标抬起、鼠标按下或抬起、正在拖拽、正在滚动、选中对象每一帧调用、开始选中对象、取消选中对象、对象位移时、提交按钮按下、取消按钮按下时调用

事件处理程序接口(IEventSystemHandler)

不是一个组件,而是用于脚本中调用的接口

其包含许多子类,分别对应上一节“事件触发器”中的事件

要在代码中监听对应的事件,只需在继承MonoBehaviour类外,再继承该接口下对应的子类,就可以在脚本中写对应的监听函数了。

详见书本P199

图集

概念:图集是一张包含了多个小图的大图,并记录了每个小图的ID、位置、尺寸等数据的数据文件

好处:绘制图形的操作是交给GPU处理的,每次绘制图像的过程成为DrawCall,使用图集的话可以减少DrawCall的次数,提高运行效率

使用图集:设置图片的Packing Tag,相同Packing Tag的图片会被打包到同一个图集

注意:图片不能放在Resource文件夹下,其下资源不被打包到图集

是否打包图集:在Edit>Project Settings>Editor下的Sprite Packer,可以选择不打包图集、发布时才打包图集、始终打包图集。

预览图集信息:Window>Sprite Packer里单击Pack

图片格式

详见书本P202

渲染顺序

就是控制游戏物体或者UI物体谁显示在上面

如何控制

  1. 优先设置Camera组件中的Depth属性,Depth越大,渲染顺序越靠后
  2. 设置Canvas或者Renderer中的SortingLayer和SortingOrder属性,控制层的排序
  3. 设置材质中的RenderQueue
  4. 空间深度:在摄像机坐标系下,调整Z轴可以调整深度,即调整覆盖顺序

视频播放

流程

  1. 将视频文件拖入工程窗口
  2. 新建VideoPlayer组件
  3. 创建渲染贴图,设置其像素大小
  4. 创建一个UICanva当作视频播放的界面
  5. 创建一个RawImage组件,挂载VideoPlayer组件和音频组件

详见书本P207