了解Unity编辑器之组件篇UI(一)

UI组件:提供了用户交互,信息展示,用户导航等功能

一、Button:用于响应用户的点击事件

1.Interactable(可交互):该属性控制按钮是否可以与用户交互,如果禁用则按钮无法被点击。可以通过脚本动态修改该属性。

2.Transition(过渡效果):该属性定义了按钮状态切换时的过渡效果。常见的过渡效果包括

(1)Color Tint(颜色着色):

Target Graphic(目标图形):该属性指定了按钮的渲染图形,通常为一个Image组件,可以设置按钮的背景图或其他显示效果。

Normal Color:按钮默认显示的颜色

Highlighted Color:鼠标覆盖时的颜色

Pressed Color:鼠标按下后的颜色

Selected Color:鼠标点击过后的颜色

Disabled Color:按钮不可交互时的颜色,即取消勾选Interactable

Color Multiplier:颜色倍数,增大数值可以突出颜色效果

Fade Duration:增大数值可以实现按钮不同状态颜色的淡入淡出,表示颜色切换的时间间隔

(2)Sprite Swap(图片替换):所有图片都需要是精灵图(图片Texture Type属性是:Sprite(2D and UI))

Target Graphic(目标图形):该属性指定了按钮的渲染图形,通常为一个Image组件,可以设置按钮的背景图或其他显示效果。按钮默认以该图形显示

Highlighted Sprite:鼠标覆盖时的图片

Pressed Sprite:鼠标按下后的图片

Selected Sprite:鼠标点击过后的图片

Disabled Sprite:按钮不可交互时的图片,即取消勾选Interactable

(3)Animation(动画):需要点击Auto Generate Animation创建动画控制器Animator,然后在Animator窗口中看到Normal,Highlighted,Pressed,Selected,Disabled等动画状态,只需为不同状态制作动画即可(选中按钮按Ctrl+6可以弹出动画窗口)

Normal Color:按钮默认显示的动画

Highlighted Color:鼠标覆盖时的动画

Pressed Color:鼠标按下后的动画

Selected Color:鼠标点击过后的动画

Disabled Color:按钮不可交互时的动画,即取消勾选Interactable

3.Navigation(导航):该属性用于定义按钮通过键盘或游戏手柄进行导航时的行为。可以设置按钮在不同方向上的导航目标,实现键盘/游戏手柄导航时的焦点转移。

4.Visualize:打开后会在Scene中显示出每个UI控件之间的焦点顺序

5.On Click(点击事件):通过这个属性,可以将需要执行的函数或方法绑定到按钮的点击事件上。当按钮被点击时,绑定的函数将被调用。

参考

Unity技术手册之Button按钮使用实例详解_C#教程_脚本之家

 二、Image:用于显示2D图像或Sprite(显示的图片必须是精灵图)

1.Source Image(精灵):用于指定要显示在Image上的Sprite。你可以从项目资源中选择一个Sprite,或者将Texture2D转换为Sprite并赋值给Sprite属性。

2.Color(颜色):通过设置Color属性,你可以更改Image的颜色。这可以用于改变图像的外观,例如调整透明度、修改颜色饱和度等(设置了Material后失效)。

3.Material(材质):这是一个可选的属性,允许你为Image指定一个自定义的材质。材质可以实现一些特殊的效果,例如添加着色器效果、变换外观等。

4.Raycast Target(射线检测目标):通过启用Raycast Target属性,你可以控制图像是否接收鼠标或触摸射线的检测。如果禁用此属性,图像将不会成为交互的目标,鼠标或触摸事件将会穿透该图像。(对LineRenderer和摄像机射线没有)

5.RayCast Padding:为了防止射线在Image边缘附近的空白区域(透明区域)击中Image组件,而进行的一个边距设置

6.Maskable:当Maskable属性设置为true时,Image组件将被遮罩(Mask)所影响,遮罩将限制图像的显示范围,使其仅在遮罩区域内可见。这通常用于实现裁剪或遮罩效果(注:仅对使用了Mask(遮罩)组件的情况有效)

7.Image Type(类型):用于确定如何渲染图像。常见的类型包括:Simple(简单)、Sliced(九宫格)、Tiled(平铺)、Filled(填充)等。每个类型都有不同的渲染方式和功能。(设置Source Image才会出现该属性)

(1)Simple(简单模式)

Use Sprite Mesh(使用精灵网格):控制是否在渲染图像时使用精灵网格,精灵网格允许图像进行扭曲变形或九宫格(9-slice)缩放,以适应不同大小的区域

Preserve Aspect(保持纵横比):用于控制图像是否保持其原始纵横比。当启用此属性时,图像将根据宽高比自动调整大小,以确保图像不会被拉伸或压缩变形

Set Native Size(设置原始尺寸):用于将Image组件的大小设置为与其关联的图像素材的原始尺寸相匹配。点击Set Native Size按钮后,Image将自动调整大小以适应图像的实际尺寸,忽略任何布局组件或父级容器的约束

(2)Sliced(切片模式)

Pixels Per Unit Multiplier(像素密度倍数):可以突出图像的像素密度,从而影响图像的绘制和显示效果

(3)Tiled(平铺模式)

Pixels Per Unit Multiplier:同Sliced

(4)Filled(填充模式)

Fill Method(填充方式):可以选择不同的填充方式,例如水平、垂直、径向等。填充方式决定了图像在Image区域内的填充方式。

Fill Origin(填充起点):用于指定填充效果的起始点,可以决定填充效果是从底部、顶部、左侧、右侧还是中心开始

Fill Amount(填充量):控制填充的数量,填充量的范围是0到1之间

Clockwise(径向填充才有的属性):控制径向填充的顺逆方向,勾选,以顺时针方式填充,不勾选,以逆时针方式填充

三、RawImage:直接显示原始图片的像素数据。可以将2D纹理(Texture2D)或RenderTexture显示在UI界面上。直接显示从资源导入的图片,也可以显示在运行时生成的动态纹理

注:其他属性可参考Image组件

1.Texture(纹理):可以直接使用原始图片(png,jpg等),也可以使用在Project中右键创建的RenderTexture,并将该RenderTexture赋值给Camera的Target Texture属性,实现将Camera所观察和渲染的场景信息在RawImage上进行单独显示

2.UV Rect:用于指定图片在纹理中的位置和大小(下面是修改UV Rect参数后实现的效果)

                             

参考

Unity UGUI的RawImage(原始图片)组件的介绍及使用_AlianBlank的博客-CSDN博客

四、Text:可以在UI界面中显示静态或动态的文本内容

1.Text:用于显示的文本内容。可以直接在Inspector面板中输入文本,也可以通过脚本动态修改。

2.Character

(1)Font:用于改变文本的字体。可以选择Unity内置的字体,也可以导入自定义的字体,通过选择不同的字体,可以改变文本的样式。

(2)Font Style:用于改变文本的风格,如Bold(字体加粗),ltalic(字体倾斜),Bold And ltalic(字体加粗并且倾斜)

(3)Font Size:文本的字体大小。可以通过调整该属性来改变文本的大小。

(4)Line Spacing:增加或减小文本行之间的间距。通过调整该属性,可以改变行间距以适应不同的布局需求。

(5)Rich Text:指示是否启用富文本标记。如果勾选了该属性,可以在文本中使用富文本标记(如颜色、字体样式、链接等)来实现高级的文本渲染效果。

参考:https://blog.csdn.net/falsedewuxin/article/details/129904042?spm=1001.2014.3001.5501

3.Paragraph

(1)Alignment:文本对齐方式。可以设置文本的水平对齐(左、中、右)和垂直对齐(顶部、中间、底部)

(2)Align By Geometry:使文本在文本框内对齐方式更加精确和准确(即在数学几何的形式更加精确的对齐)

(3)Horizontal Overflow:水平溢出处理方式。可以选择适应不同的需求,如自动换行、截断等。(Wrap表示水平方向溢出后自动换行,Overflow表示水平方向直接溢出,也会显示文本)

(4)Vertical Overflow:垂直溢出处理方式。可以选择适应不同的需求,如自动换行、截断等。(Truncate表示垂直方向溢出后截断,Overflow表示垂直方向直接溢出,也会显示文本)

(5)Best Fit:指示是否启用最佳适应。如果勾选了该属性,文本内容会根据Text组件的大小自动调整字体的大小,以适应给定的容器大小。

注:其他属性可以参考Image

五、Slider:用于设置一个范围内的数值,用户可以通过拖动来调整数值。例如,制作进度条

1.其他属性可以参考Button组件
2.Fill Rect:属性定义了滑动条上当前值的填充区域。通过设置 Fill Rect 属性,你可以控制填充区域的样式、位置和大小。你可以指定一个 RectTransform 对象,它用于定义填充区域的位置和尺寸。也可以使用图片或材质来渲染填充区域,通过设置图片的拉伸方式或材质的纹理坐标来控制填充区域的样式。
3.Handle Rect:属性定义了滑块的矩形区域。滑块是用户用于拖动滑动条并改变值的可交互元素。与 Fill Rect 类似,你可以通过设置 Handle Rect 属性来指定滑块的位置和尺寸。也可以使用图片或材质来渲染滑块,通过设置图片的拉伸方式或材质的纹理坐标来控制滑块的样式

 六、Input Field组件:是一个可编辑的文本框,允许用户在游戏中输入和编辑文本

1.Interactable,Transition,Navigation属性可参考Button组件
2.Text Component:需要赋值一个对象的Text组件(这样才能编辑后面的属性)。从输入框输入的内容会出现在该Text组件的Text属性中,也会出现在Input Field组件本身的Text属性中
3.Text:这是Input Field中显示的文本内容。可以通过代码访问和修改这个属性,或者通过Inspector窗口在编辑器中设置初始文本。(在非运行状态下输入内容会提示报错,可以不用管报错的问题,运行Unity后,Input Field仍然会显示非运行状态下输入的内容,而运行状态下输入的内容也会在这里显示)
4.Character Limit:限制用户输入的字符数量。可以将其设置为一个非0正整数来限制用户输入的文本长度。(值为0表示不限字符数量)
5.Content Type:确定Input Field可以接受的文本类型。例如,可以限制它输入的内容只能为整数、小数、密码等形式,不同的类型具有不同的验证和输入规则。
(1)Standard:表示可以输入任意形式的字符
(2)Autocorrected:表示会自动帮你更正输入单词
注:将Content Type属性设置为Autocorrected时,默认情况下自动更正功能是禁用的。这是因为Unity默认情况下不支持在Autocorrected模式下进行自动更正,如果你想要在Autocorrected模式下启用自动更正功能,你需要编写自定义脚本来处理输入的文本,例如通过OnValueChanged事件来监听Input Field的文本变化,从而在事件回调中编写自己的自动更正逻辑
(3)lnteger Number:表示只能输入整数
(4)Decimal Number:表示只能输入整数和小数
(5)Alphanumeric:表示只能输入字母和数字
(6)Name:会自动将每个单词的第一个字母大写,可以输入字母和中文,但是不能输入数字和特殊字符(可以在通过Backspace和Delete建删除大写字母后,在非单词首字母的位置继续输入可以规避大写规则)
(7)Email Address:可以输入数字,字母和特殊字符,不能输入中文
(8)Password:可以输入数字,字母,中文和特殊字符,不过所有输入的内容都以 * 号显示
(9)Pin:只能输入数字,而且都是以 * 号显示
(10)Custom:可以自定义输入规则。它会多提供Input Type(输入类型),Keyboard Type(指定输入内容时移动设备上弹出的虚拟键盘类型),Character Validation(字符验证)三种属性实现你想要定义的输入规则
(10-2)Keyboard Type
    Default:默认键盘,适用于一般的文本输入。
    ASCII Capable:仅接受ASCII字符的键盘,不包括特殊字符和符号。
    Numbers and Punctuation:包括数字和标点符号的键盘。
    URL:适用于在输入URL时,包括.com等常用网址后缀的键盘。
    Number Pad:数字键盘,仅包含数字和基本的算术符号。
    Phone Pad:电话键盘,包含数字键和电话相关的符号。
    Name Phone Pad:适用于输入姓名和电话号码的键盘,包含字母和数字键。
    Email Address:适用于输入电子邮件地址的键盘。
6.Line Type:确定文本的排列方式。可以选择单行(Single Line)或多行(Multi Line)。当需要输入框偏大,而字体偏小时可以采用多行来显示输入的内容
7.Placeholder:在Input Field没有获得焦点并且没有输入内容时显示的占位符文本或图片。(可以赋值一个对象的Image组件或Text)
8.Caret Blink Rate:设置光标闪烁的速率
9.Caret Width:设置光标的宽度。
10.Custom Caret Color:勾选之后,可以自定义光标的颜色
11.Selection Color:文本被选中时的底部高亮颜色。
12.Hide Mobile Input:适用于移动设备的属性。设置为true时,在移动设备上点击Input Field时,不会自动弹出虚拟键盘。
13.Read Only:这个属性用来指定输入框是否为只读状态。如果设置为true,用户将无法在该输入框中编辑文本。
14.Should Active On Select:当用户选中(聚焦)输入框时,这个属性指定输入框是否自动变为激活状态。设置为true时,当用户点击输入框时,输入框会自动获得焦点并准备接收文本输入。设置为false时,用户需要额外的动作(例如点击一个按钮)来将输入框置为激活状态
15.OnValueChange(string):这是一个Unity事件,在输入框的文本内容发生改变时触发。可以通过Inspector窗口进行设置,或者在代码中订阅监听该事件,以便在文本改变时执行自定义逻辑。事件回调函数的参数是输入框的新文本
16.OnEndEdit(string):这也是一个Unity事件,在用户结束编辑并提交文本后触发。它可以用来处理用户完成输入后的操作,比如按下回车键或切换焦点。与OnValueChange类似,可以通过Inspector窗口或代码进行设置,并编写回调函数来处理输入结束事件。事件回调函数的参数是输入框的最终文本

 七、Toggle组件:用于创建一个可以切换开关状态的控件,通常用于表示开关选项、勾选框等

1.Interactable,Transition,Navigation属性可参考Button组件
2.Is On(勾选状态):表示显示或隐藏下方Graphic属性中指定的图片组件(Image或RawImage)
3.Toggle Transition(过渡效果):有两个值None和Fade,表示显示和隐藏Graphic属性中指定图片组件(Image或RawImage)的过程中是否有渐变效果
4.Graphic(图像组件):一个 Image 或 RawImage 组件,用于显示 Toggle被勾选后出现的 图片。可以通过拖拽选择或在代码中动态设置。
5.Group:需要赋值一个Toggle Group组件,允许将多个 Toggle 放置在同一个组内,以实现互斥的勾选效果,即同一时间只能选择一个 Toggle。也能实现多选或都不选的效果,关键看Toggle Group的属性设置
6.On Value Changed(勾选状态变化事件):一个 UnityEvent,可以添加回调方法,在 Toggle 的勾选状态发生变化时触发。可以通过脚本控制 Toggle 的行为。
参考
https://juejin.cn/post/7149164569221398536

 八、Toggle Group组件:用于控制多个 Toggle 的单选效果,多选效果,都不选的效果

1.Allow Switch Off:不勾选,实现多个Toggle的单选效果;勾选,实现多选效果或都不选的效果

 九、Mask组件:用于限制子对象的可见区域。可以在 UI 中创建裁剪区域,只保留裁剪区域内的内容可见,而裁剪区域外的内容则被遮蔽。常见的应用场景包括创建圆形头像、边框或其他不规则形状的 UI 元素(使用形式:给一个Image对象加上Mask组件,给这个Image对象添加一个Image子对象)

1.Show Mask Graphic:是否显示遮罩的图形。当该属性勾选时,遮罩的形状将以图形的形式显示出来,方便在编辑模式下调试和可视化。
参考
https://blog.csdn.net/alianhome/article/details/131642327

 十、Scroll Rect组件:用于实现可滚动的 UI 布局的组件。 可以在有限的区域内显示大量内容,并且可以通过滚动条来查看不可见的部分。

1.Content:设置 Scroll Rect 中的可滚动或拖动的内容,通常是一个包含 UI 对象或组件的面板元素,例如Image,Text。
2.Horizontal:设置是否允许水平拖动。这里是控制Content属性中的对象能否被左右拖动,不是控制水平滚动条是否能滚动
3.Vertical:设置是否允许垂直拖动。控制Content属性中的对象能否被上下拖动,不是控制垂直滚动条是否能滚动,
4.Movement Type(移动类型):设置对Content属性中对象在Horizontal和Vertical上的拖动类型。
(1)Unrestricted(不受限制):可以自由拖动,没有边界限制。
(2)Elastic(弹性):拖动超过边界后会产生弹性效果。
    Elasticity(弹性):调整 Elasticity 的值,可以使滚动到边界时出现“拉伸弹回”        效果,让内容超出边界一段距离后会自动弹回。值越大弹回的速度越慢。
(3)Clamped(受限):拖动将受到边界的限制,内容不会超出边界。
5.Inertia(惯性):启用后,滚动会具有惯性效果,就像对内容施加了一定的力量,滚动会自动减速到停止。
6.Deceleration Rate:控制惯性滚动的减速率
7.Scroll Sensitivity(滚动灵敏度):控制滚动的灵敏度。较大的值表示滚动速度更快,较小的值表示滚动速度更慢。(效果不大)
8.Viewport:用于定义 Scroll Rect 可见内容的矩形区域,是用于显示和裁剪 Scroll Rect 内容的。通常是一个包含Image组件和Mask组件的对象
9.Horizontal Scrollbar(水平滚动条):需要设置一个Scrollbar组件。如果启用,Unity将自动为Scroll Rect组件创建一个水平滚动条,并将其显示在Scroll Rect的右侧或下方(取决于滚动方向)
(1)Visibility(可见性):该属性确定水平滚动条何时可见。它有三个选项:
    Permanent(永久):水平滚动条始终可见。
    Auto Hide(自动隐藏):水平滚动条在内容不超过Scroll Rect的尺寸(Viewport    )时隐藏。
    Auto Hide And Expand Viewport(自动隐藏并扩展视口):水平滚动条在内容超        出Scroll Rect的尺寸时显示,并自动调整视口的宽度以适应内容。
(2)Spacing(间距):该属性确定水平滚动条与Scroll Rect(Viewport)之间的间距。可以使用正数或负数来调整间距的大小。正数将增加间距,负数将减小间距
10.Vertical Scrollbar(垂直滚动条):设置一个Scrollbar组件作为垂直滚动条
(1)Visibility:同上
(2)Spacing:同上
11.OnValueChanged(Vector2):是一个事件,它在滚动视图的值发生变化时触发。具体来说,当Scroll Rect组件的内容(Viewport)在水平或垂直方向上滚动时,该事件将被调用
参考
https://blog.csdn.net/alianhome/article/details/131637403

 十一、ScrollBar组件:它通常与Scroll Rect组件一起使用,用于控制滚动视图的滚动位置。

1.Interactable,Transition,Navigation属性可参考Button组件
2.Handle Rect(滑块矩形):该属性确定滚动条的滑块矩形,即滑块形状。可以指定一个RectTransform组件来作为滑块的矩形区域,用于用户拖动滑块来改变滚动条的值。滑块矩形的位置和大小决定了滑块在滚动条上的显示方式。
3.Direction(方向):该属性确定滚动条的方向。可以选择垂直(Vertical)或水平(Horizontal)。
4.Value(值):该属性确定滚动条的当前值。它表示滑块的位置相对于滚动条起始点的偏移量。0表示滑块在滚动条的最左端或顶部(最右端端或底部),1表示滑块在滚动条的最右端或底部(最左端或顶部)。这取决与Direction属性的设置
5.Size(尺寸):该属性确定滚动条的滑块大小。它表示滑块在整个滚动条长度中的比例。例如,0.5表示滑块的长度是滚动条长度的一半。
6.Number Of Steps(步数):该属性确定滚动条滑块滑动的步数。当设置了步数时,滚动条的值将被离散化为一系列固定的步长值。例如,如果设置了步数为5,滚动条的值(Value)将只能在0、0.25、0.5、0.75和1这几个值之间进行选择。这对于需要精确控制滚动位置的场景非常有用
7.OnValueChanged(Single):是一个事件,当滚动条的值(Value)发生变化时触发。你可以添加一个响应函数来处理值变化事件。这个事件的参数是一个单精度浮点数,表示滚动条的当前值(Value)。

十二、Dropdown组件:制作下拉菜单

 

 1.Interactable,Transition,Navigation属性可参考Button组件
2.Template:需要Rect Transform组件,表示下拉列表的模板区域
3.Caption Text:需要Text组件,设置当前所选选项的文本
4.Caption Image(标题图像):该属性确定下拉菜单主按钮的图像显示。你可以将一个Image组件指定为标题图像,用于自定义下拉菜单的按钮外观。通过该属性,你可以为下拉菜单按钮添加背景图、图标、箭头等自定义图像(试了但是没用)
5.Item Text(选项文本):该属性是一个Text组件,用于显示下拉菜单中每个选项的文本。可以使用该属性定制选项的文本样式
6.Item Image(选项图像):该属性是一个Image组件,用于显示下拉菜单中每个选项的图像。你可以将一个Sprite或Texture赋值给该属性,用于为选项添加图像(试了但是没用)
7.Value:该属性确定了当前选中项的索引。索引从0开始,表示第一个选项,依此类推。你可以使用脚本获取或设置该属性,以便动态控制下拉菜单的选中项
8.Alpha Fade Speed(透明度淡入淡出速度):该属性确定下拉菜单的透明度在淡入和淡出时的速度。你可以通过调整该属性的值来控制下拉菜单的渐变效果速度
9.Options(选项):该属性是一个字符串列表,用于定义下拉菜单中的选项。可以在Unity编辑器中添加选项,或通过脚本动态添加选项
10.OnValueChange(Int32):是一个事件,在下拉菜单的选中项发生变化时触发。你可以添加一个以整数为参数的响应函数来处理值变化事件。参数将为选中选项的索引,你可以根据需要编写自定义的逻辑来响应值的变化
Dropdown - TextMeshPro组件:Dropdown组件是使用Unity的UGUI进行渲染的,而Dropdown - TextMeshPro则使用TextMeshPro进行文本渲染。Dropdown - TextMeshPro组件适用于需要更高级文本渲染功能的场景,如富文本、超链接、自动换行等。

十三、Effects:对其他UI组件进行一些修饰
    1.Outline组件:用于在对象的边缘绘制轮廓线,以突出显示对象

(1)Effect Color:设置轮廓线的颜色
(2)Effect Distance:设置左右和上下轮廓线的粗细
(3)Use Graphic Alpha:是否将UI元素的透明度与轮廓线的透明度相关联,即设置UI元素的不透明度为0时,轮廓线的不透明度也会进行相应的变化

2.Position As UV1组件:用于解决UV重叠问题而提供的一个辅助组件。该组件的目的是使用对象的世界坐标来生成UV坐标,并将其存储在UV1通道中,以便在材质中使用。它没有可调整的属性,只需将其添加到对象的渲染器组件中即可。


3.Shadow组件:用于在2D或UI元素上添加阴影效果。它可以添加在Canvas中的任何图形元素上。

(1)Effect Color:设置阴影的颜色
(2)Effect Distance:确定阴影的偏移量,设置阴影的位置
(3)Use Graphic Alpha:是否将UI元素的透明度与阴影的透明度相关联,即设置UI元素的不透明度为0时,阴影的不透明度也会进行相应的变化 

十四、Rect Mask 2D组件:Rect Mask 2D和Mask组件是Unity中用于限制UI元素可见性的两个不同的组件。Rect Mask 2D组件仅支持矩形形状的遮罩。而Mask组件可以用各种形状的遮罩限制UI元素的显示。

1.Padding:可以控制UI元素在可见区域内的显示
2.Softness:用于控制遮罩边缘的柔化程度。它允许在遮罩的边缘创建一种平滑过渡效果,以使遮罩形状不那么生硬

十五、Selectable组件:用于UI元素的交互和选中状态管理的组件。Selectable组件和Button组件是Unity中用于UI元素交互的两个不同的组件。(属性参考Button)

(1)Selectable组件提供了基本的交互控制,而Button组件是Selectable的子类,专注于创建可点击的按钮,并提供了额外的按钮交互功能和事件支持。
(2)Selectable组件可以用于创建各种类型的交互式UI元素,如复选框、滑块和文本输入框等

猜你喜欢

转载自blog.csdn.net/falsedewuxin/article/details/131878618