一、六大基础组件介绍1、组件创建在UI中创建一个imageunity就会自动创建一个Canvas和一个EventSystem这是必不可少的重要UGI内容。下面是他们的组件类别及作用概述。2、了解组件内容1.Canvas组件1.1Canvas组件的作用Canvas是画布它是UGUI中所有元素能够被显示的根本它主要负责渲染自己的所有UI子对象。注意如果UI控件对象不是Canvas的子对象那么控件将不能被渲染这时需要修改Canvas组件上的参数修改渲染方式。1.2Canvas使用数量场景中允许有多个Canvas对象可以分别管理不同画布的渲染方式分辨率适应方式等参数。注意如果没有特殊需求一般情况场景上一个Canvas即可 。1.3Canvas组件的3种渲染方式1.Screen Space-Overlay中文名覆盖模式UI始终显示在场景内容前方创建的3D物体始终在UI后面。参数说明Pixel Perfect像素完美是否开启无锯齿精确渲染性能换效果SortOrder排序次序排序层编号用于控制多个Canvas时的渲染先后顺序数字越小越先渲染越在后面TargetDisplay:目标设备在哪个显示设备上显示Additional Shader Channels附加着色器通道决定着色器可以读取哪些数据。图 -设备选择以《塞尔达传说旷野之息》举例展示血量、温度、噪音、天气、英杰技能等的 HUD适合使用「屏幕空间 - 覆盖模式」。这些3D物体始终显示在UI后面。「屏幕空间 - 覆盖模式」2.Screen Space - Camera摄像机模式3D物体可以显示在UI之前。Unity中的摄像机模式RenderCamera渲染摄像机用于渲染UI的摄像机如果不设置将类似于覆盖模式Plane Distance平面距离UI平面在摄像机前方的距离类似整体Z轴的感觉Sorting Layer排序图层所在排序层数字越小越先渲染越在后面Order in Layer图层顺序排序层的序号同一层中值越小越先渲染越在后面。通常需要新建一个摄像机仅渲染UI挂载到图像层上主摄像机仅不渲染UI。一个案例背包界面中游戏对象在背景前方又在食物详细信息面板后方这部分画布则适合使用「屏幕空间 - 摄像机」模式。猜测可能需要两层画布一层作为背景在游戏人物后方一层作为信息面板在游戏人物前方「屏幕空间 - 摄像机」3.World Space3D模式可以把UI对象像3D物体一样处理通常用于VR或AR。Event Camera用于处理UI事件的摄像机如果不设置不能正常注册UI事件。Unity中的世界空间渲染案例《激战2》中可以看到鹰的上方有个黑色的屏幕屏幕上有一些文字。这种场景则适合使用「世界模式」。世界渲染模式4.summarizeCanvas组件作用画布组件用于渲染显示UI控件Ui控件必须作为子对象场景中可以有多个Canvas 对象Canvas组件的3种渲染方式覆盖模式UI始终显示在最前面摄像机模式3D物体可以显示在UI之前3D模式用于制作3DUI在VR和AR中常用游戏中的3DUI效果使用2.Canvas Scaler组件1.1Canvas Scaler组件介绍Canvas Scaler的意思是画布缩放控制器用于分辨率自适应组件。它主要负责在不同分辨率下UI控件大小自适应它并不负责位置位置由之后的RectTransform组件负责。它提供了三种用于分辨率自适应的模式。Unity中的Canvas Scaler1.2基础知识屏幕分辨率Game窗口中的Stats统计数据窗口看到的当前“屏幕”分辨率会参与分辨率自适应计算。画布大小和缩放系数选择Canvas对象后再RectTransform组件中看到的宽高和缩放宽高*缩放系数屏幕分辨率屏幕分辨率计算参考分辨率在缩放模式的宽高模式中出现的参数参与分辨率自适应的计算。参考分辨率计算总结屏幕分辨率当前设备的分辨率编辑器下Game窗口中可以查看到参考分辨率在其中一种适配模式中出现的关键参数参与分辨率自适应计算画布宽高和缩放系数分辨率自适应会改变的参数通过屏幕分辨率和参考分辨率计算得到分辨率大小自适应通过一定的算法以屏幕分辨率和参考分辨率参与计算得出缩放系数结果会影响所有UI控件的缩放大小。简单地说就是屏幕 大的时候按钮大 屏幕小的时候按钮小。1.3CanvasScaler的三种适配模式Constant Pixel Size(恒定像素模式无论屏幕大小如何UI始终保持相同像素大小Scale With Screen Size缩放模式根据屏幕尺寸 进行缩放随着屏幕尺寸放大缩小Constant Physical Size恒定物理模式无论屏幕大小和分辨率如何UI元素始终保持相同物理大小Canvas Scaler下的三种适配模式1.4恒定像素模式Unity中的恒定像素模式Scale Factor缩放系数按此系数缩放画布中的所有UI元素Reference Pixels Per Unit每单位参考像素多少像素对应unity中的一个单位默认一个单位为100像素图片设置中的Pixels Per Unit设置会和该参数一起参与计算。知识补充导入的图片在image组件中显示的操作需要将其纹理类型转为精灵恒定像素模式计算公式UI原始尺寸图片大小像素/Pixels Per Unit/Reference Pixels Per Unit一般游戏开发不会使用。1.5缩放模式重要Reference Resolution参考分辨率缩放模式下的所有匹配模式都会基于参考分辨率进行自适应计算Screen Match Mode:屏幕匹配模式当前屏幕分辨率宽高比不适应参考分辨率时用于分辨率大小自适应的匹配模式1.三种匹配方式标题Expand水平或垂直扩展画布区域会根据宽高比的变化来放大缩小画布可能有黑边Shrink水平或垂直裁剪画布区域会根据宽高比的变化来放大缩小画布可能会裁剪Match Width Or Height以宽高或者二者的平均值作为参考来缩放画布区域2.Expand将Canvas Size进行宽或高扩大让他高于参考分辨率表现效果最大程度的缩小UI元素保留UI控件所有细节可能会留黑边3.Shrink将Canvas Size进行宽或高收缩让他低于参考分辨率表现效果最大程度的放大UI元素让UI元素能够填满画面可能会出现裁剪4.Match Width Or Height宽高匹配以宽高或者二者的某种平均值作为参考来缩放画布Unity中的宽高匹配总结游戏开发一般是使用Scale With Screen Size模式存在横竖屏切换选择时Expand扩展匹配有黑边和Shrink收缩匹配有裁剪不存在横竖屏切换定死的横屏或者竖屏游戏Match Width Or Height宽高匹配横屏游戏 Match1竖屏游戏 Match01.6恒定物理大小DPI(Dots Per Inch每英寸点数) 图像每英寸长度内的像素点数Physical Unit:物理单位使用的物理单位种类Fallback Screen DPI备用DPI当找不到设备DPI时使用此值Default Sprite DPI默认图片DPI在游戏开发中基本不用。1.7世界模式3D模式只有在世界空间模式下才出现并且默认为World模式无法改变。每单位动态像素数值越大创建的UI文字越清晰。该模式了解就行。3.Graphic Raycaster组件1.1组件介绍Graphic Ray caster名为图形射线投射器它用于检测UI输入事件的射线发射器。它主要负责通过射线检测玩家和UI的交换判断是否点击到了UI元素。Ignore Reversed Graphics是否忽略反转图形Blocking Objects:射线被哪些类型的碰撞器阻挡在覆盖渲染模式下无效Blocking Mask:射线被哪些层级的碰撞器阻挡在覆盖渲染模式下无效4.Event System组件1.1组件介绍Event System名为事件系统它是用来管理玩家的输入事件并分发给各UI控件他是事件逻辑处理模块。所有的UI事件都通过Event System组件中轮询检测并做出相应的执行它类似一个中转站和许多模块一起共同协作。如果没有它所有点击、拖拽等行为都不会被响应Fisrt Selected首先选择的游戏对象可以设置游戏一开始的默认选择不知为啥我这里选择了也没用。hhh其实有用要把按钮的select color颜色进行修改Send Navigation Events是否允许导航事件移动/按下/取消这也没有用Drag Threshold拖拽操作的阈值移动多少像素算拖拽5.Stand alone Input Module组件1.1组件介绍Stand alone Input Module名为独立输入模块主要针对处理鼠标/键盘/控制器/触屏的输入输入的事件通过EventSystem进行分发。它依赖于EventSystem组件二者缺一不可。了解即可一般不会修改这个组件。6.RectTransform组件1.1组件介绍RectTransform意思是矩形变换继承于Transform是专门用于处理UI元素位置大小相关的组件。Transform组件只处理位置、角度、缩放而RectTransform在此基础上加入了矩形相关将UI元素当作了一个矩形来处理加入了中心点、锚点、长宽等属性。目的是未来更加方便控制其大小以及分辨率自适应中的位置适应。Pivot轴心取值范围0~1Anchors相对父矩形锚点Min是矩形锚点范围x和Y的最小值Max是矩形锚点范围X和Y的最大值取值范围0~1Pos(x,y,z)轴心点中心点相对锚点的位置Width/Height:矩形的宽高Left/Top/Right/Bottom矩形边缘相对于锚点的位置当锚点分离时会场这些内容Blueprint Mode(蓝图模式启用后编辑旋转和缩放不会影响矩形只会影响显示内容Raw Edit Mode原始编辑模式启用后改变轴心和锚点值不会改变矩形位置。蓝图模式和原始编辑模式点击左上角方框将出现的锚点中心点快捷设置面板按住Shift点击鼠标左键可以同时设置轴心点相对自身矩形按照Alt点击鼠标左键可以同时设置位置