Unity学习笔记_UGUI的介绍

没找到工作,老老实实滚回家做做游戏,年后继续找,心塞。
Unity学习笔记_UGUI的介绍_第1张图片
不扯犊子了,之前对unity只是大概了解一丢丢。打算用它做一个小项目。先学一下UGUI吧。


画布 (Canvas)

每一个GUI控件必须是画布的子对象。当选择菜单栏中GameObject->UI下的命令来创建一个控件时,如果当前不存在画布时将会自动创建一个画布,以下为画布组件。
Unity学习笔记_UGUI的介绍_第2张图片
UI元素的绘制顺序依赖于他们在Hierarchy面板的顺序。如果两个UI元素重叠,后添加的UI元素会出现在之前添加的UI上面。如果要修改UI元素的顺序,应在Hierarchy视图中进行拖拽排序。对UI元素的排序也可以通过在脚本中调用Transform组件的
SetAsFirstSibling,SetAsLastSibling,SetSiblingIndex等方法实现。
1.Rander Mode:渲染模式。

  • Screen Space-Camera:画布以特定的距离放置在制定的摄像机前,UI元素被制定的相机渲染,相机设置会影响到UI的呈现。
    Unity学习笔记_UGUI的介绍_第3张图片
  • Screen Space-Overlay:使画布拉伸以适应全屏大小,并且使GUI控件在场景中渲染于其他物体的前方。如果调整屏幕大小或者改变分辨率,画布将会自动的改变大小以适应屏幕。
    Unity学习笔记_UGUI的介绍_第4张图片
  • World Space:该选项使画布渲染于世界空间。该模式使画布在场景中像其他游戏物体一样,可以通过手动调整它的Rect Transform来改变画布的大小。GUI空间可能会渲染到其他物体的前方或后方。
    Unity学习笔记_UGUI的介绍_第5张图片

2.使用Canvas Group组件可以对UI进行分组,方便管理。

Unity学习笔记_UGUI的介绍_第6张图片

  • Alpha:调节该组UI的透明度。
  • Interactable:该选项可控制该组件是否接受输入控制。
  • Blacks Raycasts:选项控制该组件是否作为碰撞器的RayCasts。注意这不适用于Physics.Ratcast,当要处理Canvas上的UI元素的RayCast时应该调用绑定在Canvas上的Graphic Raycaster组件的RayCast方法。
  • Ingore Parent Groups:用于控制是否忽略父对象上的Canvas Group的设置。

在一个Unity工程中,对于所有的GUI控件,一个花不已足够使用。但场景中也可以有多个画布。用户也可以嵌套使用画布,即可是一个画布作为另一个画布的子对象。一个嵌套的画布试用期父物体的渲染模式,是可以分别控制每个画布的透明度。


Rect Transform(矩形变换)

Rect Transform(矩形变换)是一种新的变换组件,适用于在所有GUI控件上来代替原有的变换组件。
Unity学习笔记_UGUI的介绍_第7张图片
矩形变换区别于原有的变换的地方是在场景中Transform组建表示一个点。而Rect Transform表示一个可容纳UI元素的矩形,而且举行变换还有锚点和轴心点的功能。

Pos(x,y,z):定义矩形相当于锚点的轴心点位置。
Width/Height:定于矩形的宽度和高度。
Left,Top,Right,Bottom:定义矩形边缘相对于锚点的位置,锚点分离时会显示在Pos和Width/Height的位置。
Anchors:定义矩形的左下,右上的锚点。
Min:定义矩形左下角锚点,(0,0)对应父物体的左下角,(1,1)对应父物体的右上角。
Max:定义矩形右上角锚点,(0,0)对应父物体的左下角,(1,1)对应父物体的右上角。
Pivot:定义矩形旋转时围绕的中心点坐标。
Rotation:定义矩形围绕中心点的旋转角度。
Scale:缩放系数。

为了布局的目的一般建议调整UI元素的大小,而不是对其进行缩放(scale)。调整UI元素的大小不会影响字体的大小。切片图片的边界大小等。缩放可用于动画的效果会其他的特殊效果,缩放会作用于整个元素,包括字体和边框。给UI元素的Width或Height一个负值会让该对象透明看不见。而将缩放设为负值则会翻转对象。


锚点(Anchors)

矩形变换有一个锚点的布局概念。如果一个矩形变换的父对象也是一个矩形变换,坐位子物体的矩形边还可以通过多种方式固定在父物体的矩形变换上,例如:子物体可以固定在父物体的中心点或投以拐角处;在固定锚点时也允许基于父对象的宽高按制定的百分比拉伸。
在Scene视图中,锚点以四个三角形手柄的形式表现。每一个手柄都对应固定于相应父物体的矩形的角,用户可以单独拖拽每一个锚点,当他们在一起的时候,也可以单机他们的中心一起移动他们。
Unity学习笔记_UGUI的介绍_第8张图片
在Inspector视图中,锚点预置按钮(Anchor Presets)在矩形变换组件左上角。单击该按钮,如下图。Unity学习笔记_UGUI的介绍_第9张图片
用户可以选择,将控件固定在父物体的某一边或者中心的某位置。


轴心点(Pivot)

旋转和缩放都会围绕轴心点发生变化,所以轴心点的位置影响旋转和缩放的结果。


文本(text)

文本控件显示非交互文本。可以作为其他GUI空间的标题或者标签,也可以用于显示指令或者其他文本。
Unity学习笔记_UGUI的介绍_第10张图片

Text:控制显示的文本。
Font:用于显示的文本的字体。
Font Style:文本样式,粗体斜体粗体&斜体
Font Size:文本的字体大小。
Line Spacing:文本字体之间的垂直间距。
Rich Text:是否为富文本。
Alignment:文本的水平和垂直对齐方式。
Horizontal OverFlow:用于处理文字太宽而无法适应文本框的方法,选项包含自动换行,溢出。
Vertical OverFlow:用于处理文字太宽而无法适应文本框的方法,选项包含自动换行,溢出。
Best Fit:忽略大小属性使文本适应控件大小。
Color:颜色。
Material:渲染文本的材质。


图像(Image)

图像控件用来显示非交互式图像。可用于作为装饰,图标等。在其他控件中也可以通过脚本改变图像。该空间类似于Raw Image(原始图像),但是提供了更多选项的动画控制和准确的填充空间的功能。图像空间需要Sprite类型的纹理,原始图像可以接受任何类型的纹理。
Unity学习笔记_UGUI的介绍_第11张图片

Scurce Image:表示要现实的图像纹理(类型必须为Sprite)
Color:应用与图像的颜色
Material:材质
Image Type:显示图像的类型
Preserve Aspect:图像的原始比例的高度和宽度是否保持相同比例
Fill Center:是否填补图像的中心部分
Fill Method:用于指定动画中图像的填充方式
Fill Origin:填充图像的起始位置
FillAmount:当前填充图像的比例
Clockwise:填充方向是否为顺时针
Set Native Size:设置图像框尺寸为原始图像纹理的大小

图像类型如下
Simple:默认情况下适应控件的矩形大小。如果启用Preserve Aspect选项,图像的原始比例会被保存,剩余的为被填充的矩形部分会被空白填充。
Silced:图片被切成就九宫格模式,图片的中心被缩放以适应矩形控件,边界会任然保持它的尺寸。禁用Fill Center选项后图像的中心会被挖空。
Tiled:图像保持原始大小,如果控件的大小大于原始图大小,图像会重复填充到控件中;如果控件大小小于原始图片,则图片会被在边缘处截断。
Filled:图象被显示为Simple类型,但是可以调节填充模式和参数使图像呈现出从空白到完整的填充的过程。

原始图像(Raw Image)

原始图像控件用来显示非交互图像控件,可以用于装饰或图标等。在其他控件中也可以通过脚本来改变原始图像。原始图像控件与图像控件类似,但是他不具有图像空间提供的动画控制和准确填充控件矩形的功能。同时,原始图像空间支持显示任何类型的纹理,而图像控件仅支持sprite类型的纹理。
Unity学习笔记_UGUI的介绍_第12张图片

Texture:表示要显示的纹理
Color:应用到图像的颜色
Material:为图像着色所使用的材质
UV Rect:在空间举行中图像的偏移和尺寸以归一化坐标的形式表示,范围0-1,图像的边缘被拉伸以填充UV矩形周围控件

由于原始图像不要求必须使用Sprite格式纹理,所以可以在Unity中显示任何类型的纹理,比如在游戏中显示一个用WWW类从URL下载的纹理。
UV属性允许显示一个较大图片的一小部分。X,Y坐标指定图像的哪部份与控件的左下角对齐。

遮罩(Mask)

遮罩是一种不可见的UI组件,他可以用来修饰控件子元素的外观。遮罩将子元素限制为父物体的形状。如果子物体大于父物体将直线式与父物体大小相同的那一部分。
这里写图片描述
Show Mask Graphic表示是否绘制父物体图形。Mask通常与Image控件组合使用。
Unity学习笔记_UGUI的介绍_第13张图片

过渡选项(Transition Options)

过渡选项及其功能(Selectable组件):

Color Tint:状态决定颜色,可以为每一个单独的状态选择颜色。也可以设置不同状态之间的淡入淡出持续时间,数值越高,颜色之间的淡入淡出会越慢
Sprite Swap:允许不同状态下显示不同的Sprite,Sprite可以定制
Animation:在不同状态播放动画,使用Animation过渡必须要有动画组件,并确保root motion为禁用状态
None:此选项仅适用于按钮控件,表示没有任何状态效果

1.Color Tint过渡选项面板
Unity学习笔记_UGUI的介绍_第14张图片

Target Graphic:用于交互的组件图片
Normal Color:控件的正常颜色
Highlighted Color:控件高亮的颜色
Pressed Color:控件被按下的颜色
Disabled Color:控件被禁用的颜色
Color MultiPlier:该选项数值会让每个状态的颜色数值相称。通过该方法可以创建大于1的颜色,让颜色图形元素的基本颜色不到白色
Fade Duration:从一种状态到另一种状态过渡时间

2.Sprite Swap过渡选项面板
Unity学习笔记_UGUI的介绍_第15张图片

Target Graphic:正常状态显示的Sprite类型图片
Highlighted Color:鼠标滑过时显示的图片
Pressed Color:控件被按下时显示的图片
Disabled Color:控件被禁用时显示的图片

3.Animation过渡选项面板
Unity学习笔记_UGUI的介绍_第16张图片

Target Graphic:正常状态使用的动画触发器
Highlighted Color:高亮状态使用的动画触发器
Pressed Color:按下状态使用的动画触发器
Disabled Color:禁用状态使用的动画触发器

按钮(Button)

按钮空间响应来自用户的单击事件,用于启动或确认某操作。
Unity学习笔记_UGUI的介绍_第17张图片

Interactable:控制该组件是否接受输入。如果该选项没有被选中时按钮则不能接受输入且动画过渡不可用。
Transition:参考 过渡选项(Transition Options)
On Click:响应按钮的单击事件,当用户单机并释放按钮时触发

你可能感兴趣的:(Unity笔记)