2020/7/21
今天我学习了UGUI基础，主要是学习了一些基本控件
一、UGUI介绍
1、UI发展史
①Unity4.6版本以前，UI界面的创建都是通过OnGUI回调方法，这样只有在运行游戏后才能看见最终效果，开发UI界面不可视，开发效率很低。
②NGUI插件，拥有可视化界面，极大提高开发效率，但是与Unity引擎的兼容性不太好，运行不稳定。
③Unity UI，简称UGUI，是在4.6版本以后的引擎编辑器内置的UI，特点是UI界面搭建可视化，与引擎编辑器结合紧密，运行稳定，操作方便，开发效率高。（PS：据老师说这就是做NGUI插件的人被挖过去做的）
二、UGUI基础控件
在场景视图，单击右键选择UI，然后选择你需要的控件即可。创建后会生成一个Canvas（帆布），用于显示所有UI游戏对象，还会生成一个EventSystem，用于所有的事件相关内容。
1、Text控件
Text脚本组件
Text控件用于显示文本内容，创建完Text控件后，该控件有一个Text脚本组件，这里介绍一下各个属性
Text：这里填写的内容就是需要显示的内容
Font：表示字体
Font Style：表示字体风格，其中有四个可选项，Normal，表示正常风格，Bold，表示加粗，Italic表示斜体，Bold And Italic表示加粗和斜体
Font Size：表示字体大小
Line Spacing：表示行距
Rich Text：表示富文本，勾选上文本内容会识别标签
Alignment：表示排列方式
Align By Geometr：勾选表示按照几何排列
Horizontal Overflow：表示水平方向的溢出方式
Vertical Overflow：表示竖直方向的溢出方式
Best fit：表示最佳的适应方式，文本会根据文本域大小自动调节
Color：表示字体颜色
Material：表示材质
Raycast Target：勾选表示能用射线检测标签
2、Image控件
Image脚本组件
Image用于显示图片，创建Image控件后，该控件会有一个Image脚本组件，属性如下（相同的属性不再介绍）
Source Image：要显示的图片
ImageType：表示图片类型，这里有四个可选项，Simple表示简易类型，Sliced表示切分类型，Tiled表示平铺类型，Filled表示填充类型。
这里重点讲一下Filed填充类型
Filed填充类型
Fill Method：表示填充的方式，其中Horizontal表示水平填充，Vertical表示竖直填充，Radial 90表示90度的放射型填充，Radial 180表示180度的放射型填充，Radial 360表示360度的放射型填充
Fill Origin：表示填充的起点，Bottom表示底部，Top表示顶部，Left表示左边，Right表示右边
Fill Amount：表示填充的程度，这里表示的是一个0-1的值
通过Fill Amount，我们可以实现类型技能冷却、倒计时、进度条等等效果。
技能冷却
Clockwise：勾选表示按顺时针填充，不勾选表示按逆时针填充
Preserve Aspect：锁定图片比例
3、RawImage控件
类似于Image控件，也是用来显示图片，但是RawImage控件更适用于普通图片，而Image控件只能用于精灵图片
RawImage脚本组件
UV Rect：这里可以设置图片的显示方式，x和y的值在0-1之间，分别表示在水平和竖直左下角的起始位置，比如x：0.5 y：0.5，表示左下角的起点从图片中间部位开始，空余的部分会自动平铺填充（建议自己测试一下）。w和h表示按网格显示图片的行列。RawImage控件更适用于普通图片，就是因为精灵图片设置UV Rect值会产生偏差。
4、Button控件
Button控件用来表示按钮，创建之后会自动生成一个Text控件作为子物体，不需要的话也可以删除这个Text，创建Button控件还会添加一个Image脚本组件，用来存放图片，下面是Button脚本组件
Button脚本组件
Interactable：是否启用
Transition：表示过渡方式，增加游戏中和按钮的交互感。None表示没有过渡方式，Color Tint表示颜色色彩过渡，Sprite swap表示精灵交换过渡，Animation表示动画过渡
以上图精灵交换过渡为例
Target Graphic：表示该按钮使用的Image组件，默认是自己的
Highlighted Sprite：高亮时的精灵，表示鼠标悬停在按钮上显示的精灵
Pressed Sprite：按下时的精灵，表示鼠标点击按钮时显示的精灵
Disabled Sprite：按钮不可用世的精灵，表示按钮被禁用时显示的精灵
On Click（）：表示点击按钮事件调用回调方法的列表，其中Runtime，表示调用的时间，下方挂载了是有鼠标点击事件方法的脚本的对象，右边是该方法。（这里要求的方法是没有返回值和参数的，后面还有很多这种类似的事件）
5、Slider滑动条控件
创建后会有三个子物体，第一个，Background，用来显示滑动条的背景，第二个，Fill Area，用来显示填充域的样式，第三个，Handle Slide Area，用来显示滚动条上滑块的样式
Slider脚本组件
Fade Duration：表示延迟相应的时间
Fill Rect：表示填充的矩形区域
Handle Rect：表示滑块的矩形区域
Direction：表示滑块滑动的方向
Min Value：滑块的最小值
Max Value：滑块的最大值
Whole Numbers：表示滑块以整数单位移动
Value：滑动条控件的值
On Value Changed（Single）：滑动条滑动的响应时间，这里的参数是float类型，参数就是滑动后控件的value值
6、Toggle开关控件
用来制作单选框或者复选框，创建的时候会有两个子物体，第一个，Background，用来表示复选框的背景，即未勾选状态时显示的图片，Background还有一个子物体，Checkmark，意为勾选标记，用来显示勾选状态时显示的图片。第二个，Label，标签，用于描述勾选的内容，可删。
Toggle脚本组件
Is On：表示是否勾选
Graphic：单选框选中或取消要显示或隐藏的文本和图像
Group：所属的组，这里重点介绍一下，如果我们要建立单选框就需要用到这个属性。
Toggle Group脚本组件我们在任意一个游戏物体上添加一个Toggle Group脚本组件，然后所有需要构成组的Toggle控件的Group属性设置为该Toggle Group脚本组件，具体操作可直接拖拽有该组件的游戏对象到Group属性的位置，这样，所有该组的Toggle就能实现单选。
7、InputField控件
InputField控件用于用户输入的地方，比如玩家输入账号和密码。创建InputField控件会自动生成两个子物体，第一个，PlaceHolder，用来显示还没有输入状态下，要显示的提示内容，第二个，Text，用来显示用户输入的内容。创建的同时，InputField控件会有Image组件用来显示输入框的背景图片，以及Input Field脚本组件，如下图所示
InputField脚本组件
Text Component：引用的文本组件，默认是自己的子物体的组件
Text：输入框中真正的内容
Character Limit:字符数量的限制
Content Type：内容类型，这里可以限制输入的内容，比如整数或者小数，邮箱地址，密码类型等等
PlayerHolder：引用的提示信息的文本组件，默认也是自己子物体的组件
Caret Blink Rate：光标闪烁的频率
Caret Width：光标的宽度
Custom Caret Color：定制光标的颜色
Selection Color:选中输入框文本内容时的颜色
Hide Mobile Input:隐藏移动端的输入
Read only：设置输入框内容只读
On Value Changed（String）：输入框内容改变时的回调方法，string类型的参数表示的就是改变后的输入框中的字符串
On End Edit（String）：结束编辑时调用的回调方法，参数同上，结束编辑的方式有①点击输入框外②按回车键③手机端按回车或者下一项按钮
今天学习了7个基本控件，明天继续UI后续内容的学习。
网友评论