Unity学习日记2 #UI基础篇

努力学习游戏开发

于 2024-07-24 20:30:22 发布

阅读量571

点赞数 14

分类专栏： Unity 文章标签： unity 学习 ui

本文链接：https://blog.csdn.net/a1612910045/article/details/140672541

版权

Unity 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Unity基础之UI

已经被淘汰的GUI

//要在生命周期GUI中调用，由于在生命周期调用频率过高，被淘汰
void OnGUI()
{
	GUI.DrawTesture();
}

UGUI

EventSystem

负责处理输入，射线检测以及事件发送的，是作为整个UI的事件系统，并且一个场景只能有一个eventsystem

Rect Transform

ugui为屏幕自适应所提供的锚点机制，方便在不同的分辨率下的ui元素保持相同的布局格式
锚点Anchors
- 聚点型锚点：保持子物体在不同分辨率下在父物体下的位置都一致，即位置自适应，适用于需要考虑拉伸并且位置需要固定的元素
- 锚框型锚点：保证子物体的尺寸根据锚点设置可以在不同的分辨率下跟随父物体的尺寸变化，即尺寸自适应，适用于不需要考虑拉伸的UI元素
轴心点Pivot
- 自身描点所在

Canvas组件

Canvas:ui画布，负责将ui组件显示在屏幕上，canvas的尺寸就是在屏幕上显示的尺寸
RenderMode:渲染模式
- Screen Space-overlay:在场景中使用2D画布渲染，始终显示在屏幕的最前方
  - Pixel Perfec:UI是否在没有反锯齿的情况下进行精确渲染，勾选后使得图形边缘更平滑
  - Sort Order:画布在排序层中的顺序，当存在多个画布时，值大的会覆盖值小的
  - Target Display:显示目标
- **Screen Space-Camera:**使用画布上所配置的摄像机进行渲染，UI与相机有一定的距离，可以在两者之间放一些游戏物体，或动画效果，一般是用来制作特效
  - Render Camera:指定用来渲染画布的摄像机
  - Plane Distance:UI放置在相机前面的距离
  - Sorting Layer:画布在排序层中的顺序
  - Order In Layer:在当前层级下的排序，数值越大，画布越靠前
- World Space使用场景中任何一个可以渲染图层的摄像机进行渲染，UI与场景中其他游戏物体一样，可以再其他物体前面，也可以在其他物体后面
  - Event Camera:用于处理UI事件的摄像机
- Additional Shader Channel:附加着色通道

Canvas Scaler组件

调整画布UI元素的缩放比例，达到UI自适应的效果

UI Scale Mode:UI的缩放模式
- ConstantPixelSize:固定像素大小，无论屏幕分辨率尺寸大小怎么改变，像素保持不变，只能通过Scale Factor调节
  - Scale Factor:画布中的UI元素的缩放比例
  - ScaleWithScreenSize:与屏幕尺寸大小保持缩放
- ScreenMatchMode:如果当前设备分辨率的宽高比不符合参考分辨率时，则采用xxx模式来进行适配
  - ReferenceResolution:参考分辨率，即设置当前窗口的分辨率，一般设置游戏最佳分辨率
  - MatchWidthOrHeight:如果当前设备分辨率比例和参考分辨率比例相同时，无论match值是0还是1，画布的宽高比都不变，如果设备的分辨率不符合参考分辨率时，如果此时match为1，则画布高度不变，宽度自动缩小，如果match为0，则画布的宽度不变，高度自动缩小
    
    Expand:水平或垂直展开画布区域，即宽高比不变，画布永远在屏幕的中间，以屏幕的高度或宽度的最小值为准进行调整
    
    Shrink:水平或垂直剪裁画布区域，即宽高比不变，画布等于或小于参考值，以屏幕的高度或宽度的最大值为准进行调整
- ConstantPhysicalSize:使用常量物理尺寸模式，UI元素的位置和大小以物理单位指定，保持物理不变，只看分辨率

Graphic Raycaster组件

射线检测组件，用于获取用于选中的UI组件，当禁用该组件时，用户则无法获取到UI组件

Ignore Reverseed Graphics:是否忽略UI组件的正面和反面方向都接收射线检测
Blocking Objects:屏蔽指定类型的物理对象，使他们不参与射线检测，只有在渲染模式不为screenSpaceOverlay时生效
BlockingMask:使屏蔽对象中的指定层不参与射线检测只有在渲染模式不为screenSpaceOverlay且Blocking objects不为none时生效

Text

Text窗口
- 输入需要显示的文本
Font:字体
Font Size 字体大小
- size必须和字体大小相匹配或者大于字体大小，不然字体不会显示
Line Spacing 行间距
Rich Test 是否是富文本，富文本使用不同格式实现不同的效果
- 富文本即可以读取标记语法的语义
Alignment对齐设置
Horizontal Overflow 文本水平是否可以超出
Vertical Overflow 文本垂直是否可以超出
best Fit 最佳自适应，当文本超出范畴时可以自动调整文字的大小
min size:最小的字体大小
max size:最大的字体大小
color:颜色
material:渲染文本材质
raycast target:是否作为射线检测目标，关闭后将忽略射线检测
可附加的Component
- Outline组件描边
- Shadow组件阴影
- 不建议混用

Image

Source Image
- 要求Source Image中的texture设置为sprite类型
Color
Material
RayCast Target
Image Type
- Simple 普通图片
- Tiled 平铺模式，Ui尺寸大于图片尺寸会复制多份平铺
- Sliced 适用于一张图片被切割为一组图片的情况
- Filled 填充，使用Sprite Edit编辑九宫格图片，被拉伸的部分以中间格内部分填充
  - Fill Mothod 填充方式
  - Fill Origin 填充起点
  - Fill Amount 填充百分比
  - Clockwise 是否顺时针
  - Preserve Aspect

Raw Image

可以使用任意类型的Texture
texture:指定要显示的图片。资源类型是texture
color：图片叠加的颜色
material:图片叠加的材质
raycast target:是否作为射线检测目标，关闭后忽略射线检测
uv rect:用于控制图片按uv值进行整张图片或部分图片的显示，x，y属性控制uv的左右，上下偏移，w,h用于控制uv的重复次数
image组件通常用于交互，图片类型是sprite，图标，
rawimage:用来显示图片非交互的组件，小地图，头像框，视频播放

Button

Interactable 勾选即可用，不勾选则禁用按钮
Transition 点击按钮的时候UI的反应方式
- UI无变化（但是响应）
- Color Tint 颜色变化
  - normal color：默认颜色
  - highlighted color:高亮颜色
  - pressed color:按下时颜色
  - disable color:不可用时颜色
  - color multiplied:颜色乘数 0 -1
  - fade duration:过渡时间
- Sprite Swap 切图片
- Animation 切动画
Navigation 键盘可以控制切换UI组件选择
- None 不启用
- Automatic 自动识别最近组件
- Horizontal 水平控制
- Vertical 垂直控制
- Explicit:指定各个方向键所能导航到的组件

按钮监听事件

不要拖拽，不要拖拽！

示例代码

void Start
{
     btn.onClick.Addlistener(delegate(){
         Test(1);
         //为什么函数调函数，因为Button只能添加无返回值无参委托，
         //如果需要添加有参方法，只能委托里面调方法
     });
}

void Test(int num)
{
    Debug.Log(num);
}

Toggle

isOn:用来控制toggle开关的状态
- 选中的时候组件的IsOn属性为true，反之为false
toggle.onValueChanged.AddListener()
Toggle Group组件制作多选项单选UI
- 将这个Toggle Group组件挂在你想组合在一起的父物体上，全选你想组合的Toggle，将Group成员的引用对象设置父物体的Toggle Group
allow switch off:是否允许toggle组可以全部关闭

DropDown

下拉选项，可以添加多个选项

从上至下选中了哪个选项，组件中的Value就对应选项的顺序（从0开始）
可以添加Value改变的监听

dropdown.onValueChanged.Addlistener()
template:模板
caption text:标题文本
item text:每个子项目的文本

InputField

TextComponent:用来管理输入文本组件
Text 输入的内容,在代码中通过InputField.text获取到输入的内容
CharacterLimit:字符限制，可以限制最大字符数量
ContentType:内容类型
- standard:标准类型，可以输入任意字符
- IntegerNumber:只允许输入整数
- DecimalNumber:仅允许输入数字和小数点
- AlphaNumberic:允许字母和数字的输入
- Name:输入的字符会首字母大写
- EmailAddress:输入的字符串最多只有一个@字符
- Password:密码，用“*”表示输入的字符，从而隐藏输入的内容
- Pin:用“*”表示输入的字符，只允许输入整数
Line Type 行类型单行多行多行回车执行
Placeholder 占位符，未输入默认文本，用来提示输入的内容，当点击输入后会自动隐藏
Caret Blink Rate 光标闪烁速度
Caret Width 光标宽度
Selection Color:选中文本的背景颜色
Custom Caret Color▢ 自定义光标颜色
Hide Mobile Input▢ 隐藏手机端输入
Read only▢ 只读

inputField.onValueChanged.addlistener()当每输入一个字符时就会调用一次
inputField.onEndEdit.addlistener()当点击enter后会调用回调函数

Slider

fill Rect:填充区域的图形
handle rect:滑动条手柄部分
direction:滑块拖动的方向，从左到右，从右到左，从上到下，从下到上
min value:最小值
max value:最大值
whole numers:是否将值约束为整数
value:填充区域的值范围取决于minvalue~maxvalue

ScrollBar

滑动条，一般不单独使用，而是作为SrollView的一部分使用
handle rect:滑动条中间可被拖动的部分，滑动块
direction:拖动的方向，从左到右，从右到左，从上到下，从下到上
value:滑动的拖动范围，取值范围0-1
size:滑块占整个滑动条区域的比例值
number of steps:滑块每一步移动的百分比，当他的值为0或者1时，滑块可以再滑动条的任意位置，当值大于1时，滑块会按照设置的值等距的出现在滑动条上
原理：滑动条区域取100%,设置的值为X，每步移动的距离 X/100

ScrollView

content:需要滚动的内容，其中所有的子物体，都会显示在滚动区域中
horizontal:是否启动水平滚动
vertical:是否启动垂直滚动
movement type:滑动框的运动类型
- 1.unrestricted:不受限
- 2.elastic:弹性
  - elasticity:弹性模式中的反弹量
- 3.clamped:夹紧
inertia:惯性，拖动结束后会根据惯性继续移动，未设置时会在拖动时移动
decelertaion rate:减速率，决定停止移动的速度，当为0时立即停止运动，当为1时永不停止
scroll sensitivity:灵敏度，滚轮时灵敏程度
viewport:视口，是content父节点
horizontal scrollbar:底部的水平滚动条
visibility:能见度，如果显示的内容没有超出viewport的话，就自动隐藏
spacing:滚动条与视口之间的空间
vertical scrollbar:竖直滚动条