![](https://img-blog.csdnimg.cn/ad830edf33b244159bfd2e5fb5f5ee64.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Unity UGUI
文章平均质量分 81
主要讲述Unity中的UGUI组件以及相关应用实例
ProMer_Wang
一名热衷于电脑游戏、编程的程序猿
展开
-
Unity3d中UGUI组件精简复盘之总结篇
Hello吖,博客博友们,好久不见啦我又回来啦(手动滑稽)说明:前段时间由于在工作的原因,日常主要忙于在工作上的业务学习和工作,没有特别多的空闲时间来整理和复盘。因此也没有作出多少在博客上的内容出来。就博主而言,相比发布一些无关精要的内容我更愿意每一篇博文的质量。这段时间由于要处理学校毕业事宜相关内容,因此回到了母校,趁此机会呢,自己也重新复盘和总结了近些时间的对于UGUI组件的学习总结与笔记。...原创 2021-06-06 03:55:44 · 579 阅读 · 13 评论 -
Unity3d中UGUI组件精简复盘(一)RectTransform组件
RectTransform组件Center模式下,UI部分的轴心点置灰,导致我们无法选中轴心点进行拖动Pivot模式下,UI部分的轴心点恢复原亮,我们可选中轴心点进行拖动自定义锚点,子物体可以设置成根据父物体的变化相对变化的效果[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zM5eHmso-1622714732204)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-202原创 2021-06-06 04:05:08 · 888 阅读 · 4 评论 -
Unity3d中UGUI组件精简复盘(二)Canvas及其相关组件
Canvas组件canvas的三种渲染模式所有的UI元素只有在Canvas下才能够正常显示[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eYp0n4he-1622920236081)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210529205615721.png)]Screen Space - Overlay:UI元素始终在3D物体之上的[外链图片转存失败,源站原创 2021-06-09 02:35:10 · 3098 阅读 · 9 评论 -
Unity3d中UGUI组件精简复盘(三)渲染层级
渲染层级渲染层级的基本概念Order in Layer :层级数越大,越后渲染,越在上面。先被渲染的东西会被后渲染的物体遮盖。一个场景中,如果有多个Canvas的情况下,想要两个Canvas都渲染到Game模式中,将Cmaera的Clear Flags 设置为Depth only设置前[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IS26Zrx7-1622920492159)(C:\Users\Administrator\AppData\Roaming\Typora原创 2021-06-13 00:51:24 · 731 阅读 · 1 评论 -
Unity3d中UGUI组件精简复盘(四)Image组件
Image组件Color属性:代码控制Color两个类,分别为Color 与Color32类Color类里面要传递的是3个float 参数Color32 类里面要产地的是一个int参数Raycast Target:是否响应图片射线**切图:**注意图片资源格式的类型即 Sprite Mode 里的几种模式,single模式下,是将该图片作为一张图片进行九宫格切图,点击Spirite Editor切图multiple模式下是将该图片作为一张图集进行九宫格切图,点击Sprite Editor切原创 2021-06-13 01:10:58 · 547 阅读 · 2 评论 -
Unity3d中UGUI组件精简复盘(五)RawImage组件
RawImage组件Texture:图片资源为Default模式下就可直接拖入,Image组件则不同,需要将图片资源设置为sprite才可进行拖入UV Rect:UV坐标(x,y)(范围0~1),贴图纹理都是有UV坐标的,对应的是贴图映射到贴图表面的效果,应用:可以做成帧动画三维模型除了顶点XYZ坐标就是UV坐标了,先上图:它的坐标是这样的,定义纹理坐标的顺序为:(0,0)-》(1.0,0.0)-》(0.0,1.0)-》(1.0,1.0)【不要搞错哦】RawImageAni.csusing S原创 2021-06-13 01:39:24 · 679 阅读 · 3 评论 -
Unity3d中UGUI组件精简复盘(六)Text组件
Text组件Font Style:字体的风格Normal:普通Bold:加粗ltalic:斜体Bold And ltalic:加粗与斜体Font Size:字体的大小,超出文本框的话,不显示Line Spacing:行间距RichText:富文本,一般用于设置文本框中部分的字体的颜色,用到以下格式:加粗:斜体<size=50>:设置字体大小<color=#ff0000>:设置字体颜色Horizontal Overflow:水平方向上显示内容是否包裹在框内,w原创 2021-07-26 00:28:25 · 636 阅读 · 2 评论 -
Unity3d中UGUI组件精简复盘(七)Mask组件
Mask组件Mask:遮罩,可以作用于3D物体Rect Mask:只能作用于同平面的2D物体区别:Mask遮罩,可以作用于3D物体,Rect Mask只能作用于同平面的2D物体Unity遮罩已经为什么我们要避免使用Mask??因为添加Mask会增加Drawcall,会影响性能,同时Mask不利于层级的合并。当没有使用Mask的时候,可能只需要一个Drawcall既可以绘制出UI的渲染效果,但是当我们添加了Mask以后,Mask会作为单独的一个层级来渲染绘制,其他的UI也会作为单独的一个层级来绘制原创 2021-07-26 00:43:10 · 1203 阅读 · 1 评论 -
Unity3d中UGUI组件精简复盘(八)Selectable基类
Selectable基类交互组件的基类,只是用于设计UI的效果,并不涉及到事件interactable:是否能够交互,勾选可交互,不勾选置灰不可交互Transition: Color Tint属性如下**Target Graphic:**作用于某image元素[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-44ujEiTi-1622920744302)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-原创 2021-07-28 14:00:27 · 2158 阅读 · 0 评论 -
Unity3d中UGUI组件精简复盘(九)Button组件
Button组件继承于Selectable,与Selectable不同的是Button中用到了事件可以直接在Unity界面中手动添加所写的方法,当然所写的方法需要挂载在对应的组件上[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BBeWobKl-1622920788091)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210601193704507.png)]chang原创 2021-07-28 14:49:57 · 341 阅读 · 0 评论 -
Unity3d中UGUI组件精简复盘(十)Toggle组件
Toggle组件Toggle继承于Selectable属性:Is On:代表复选框的勾选状态Toggle Transition: None状态改变时没有其他效果,Fade渐隐渐现效果**Graphic:**对应Toggle状态改变的图片**Group:**用于被ToggleGroup组件进行管理**OnValueChanged(Boolean):**类似于Button里面的一个Onclick事件绑定。我们可以通过手动设置来进行绑定,当然我们也一样可以通过手写代码控制:例如:TestTogg原创 2021-07-28 16:52:38 · 409 阅读 · 1 评论 -
Unity3d中UGUI组件精简复盘(十一)Slider组件
Slider组件Slider继承于Selectable子物体:**Background:**背景框**FillArea:**填充范围**Fill:**填充图片**Handle Slide Area:**滑动范围**Handle:**滑动块图片属性:**File Rect:**Fill 的TransformHandle Rect:Handle的Transform**Direction:**Left To Right从左到右,Right To Left从右到左,Bottom To Top原创 2021-08-03 20:13:12 · 485 阅读 · 1 评论 -
Unity3d中UGUI组件精简复盘(十二)Scrollbar组件
Scrollbar组件滚动条组件,Scrollbar继承于Selectable属性:**Handle Rect:**Hander的Transform**Direction:**Left To Right从左到右,Right To Left从右到左,Bottom To Top 从下到上,Top To Bottom 从上到下**Value:**滑动块移动的位置**Size:**滑块的大小**Number Of Step:**滑动几次能滑完全,0、1时可以任意滑动,大于1后就将滑动条分为几个部分,设原创 2021-08-03 20:25:19 · 585 阅读 · 1 评论 -
Unity3d中UGUI组件精简复盘(十三)ScrollView组件
上一节,我们简单概括了Unity3D编辑器中Slider组件的简要介绍。具体详情链接为:Unity3d中UGUI组件精简复盘(十二)Slider组件话不多说,我们直接进入正题~ 今天我们简要概括复盘的组件便是Scrollbar组件啦~属性:Content: 显示内容的TransformHorizontl: 框是否能够纵向拖动Vertical: 框是否能够纵向拖动Movement Type: Content运动的模式,Unresticted没有限制,拖出去不会自动回来,Elastic有滚动的弹性,原创 2021-08-04 18:39:14 · 509 阅读 · 0 评论 -
Unity3d中UGUI组件精简复盘(十四)Dropdown组件
上一节,我们简单概括了Unity3D编辑器中Slider组件的简要介绍。具体详情链接为:Unity3d中UGUI组件精简复盘(十三)ScrollView组件话不多说,我们直接进入正题~ 今天我们简要概括复盘的组件便是Dropdown组件啦~Dropdown组件下拉列表继承于SelectableTemplate: 模板Transform,生成的下拉框的模板,类似于把模板作为一个预制体Caption Text: 选中文本内容的Transform,表示选中内容的文本信息显示Caption Imag原创 2021-08-04 18:50:45 · 320 阅读 · 0 评论 -
Unity3d中UGUI组件精简复盘(十五)InputField组件
上一节,我们简单概括了Unity3D编辑器中Slider组件的简要介绍。具体详情链接为:Unity3d中UGUI组件精简复盘(十四)Dropdown组件话不多说,我们直接进入正题~ 今天我们简要概括复盘的组件便是Dropdown组件啦~InputField组件输入框,继承于Selectable基类属性:应用于登陆,用户名输入Text Component: Text的TransformText: Text输入的文本内容Character Limit: 字符的数量限制,最多能输入多少个,数值为0则原创 2021-08-04 18:59:53 · 648 阅读 · 1 评论 -
Unity3d中UGUI组件精简复盘(十六)三大 Layout Group组件
上一节,我们简单概括了Unity3D编辑器中Slider组件的简要介绍。具体详情链接为:Unity3d中UGUI组件精简复盘(十五)InputField组件话不多说,我们直接进入正题~ 今天我们简要概括复盘的组件便是自动排列的三大组件,分别是Horizontal Layout Group组件 、Vertical Layout Group组件、Grid Layout Group组件一、Horizontal Layout Group组件自动排列组件(网格自动布局)**Padding:**内边距的距离,原创 2021-08-20 21:13:57 · 1041 阅读 · 0 评论 -
Unity3d中UGUI组件精简复盘(十七)LayoutElement组件
LayoutElement组件意义:只能作用在被排列组件管理的子物体item上才能起来相应的作用,搭配LayoutGroup组件。可能需要另外添加一些东西,区别于排列元素之外的东西。Ignore Layout:忽略Group的管理即忽略自动排列Min Width:最小宽度Min Height:最小高度Preferred Width:首选宽度,不能违背Min WidthPreferred Height:首选高度,不能违背Min HeightFlexible Width:灵活宽度,会将所有item原创 2021-08-28 17:25:29 · 1297 阅读 · 0 评论 -
Unity3d中UGUI组件精简复盘(十八)Aspect Ratio Fitter组件
上一节,我们简单概括了Unity3D编辑器中三大 Layout Group组件的简要介绍。具体详情链接为:Unity3d中UGUI组件精简复盘(十七)LayoutElement话不多说,我们直接进入正题~ 今天我们简要概括复盘的组件便是Aspect Ratio Fitter组件啦~Aspect Ratio Fitter组件横竖比例工具(纵横比例工具),用于限制图片横竖的比值Aspect Mode:None无,不进行适配;Width Controls Height,由宽度根据宽高比设置高度,此时高度无原创 2021-09-07 22:23:31 · 907 阅读 · 0 评论 -
Unity3d中UGUI组件精简复盘(十九)ContentSizeFitter组件
上一节,我们简单概括了Unity3D编辑器中三大 Layout Group组件的简要介绍。具体详情链接为:Unity3d中UGUI组件精简复盘(十八)Aspect Ratio Fitter话不多说,我们直接进入正题~ 今天我们简要概括复盘的组件便是Aspect Ratio Fitter组件啦~ContentSizeFitter组件自适应大小的一个组件或者自适应内容大小的一个组件添加方式是与Laout Group在同一个transform,也会搭配Item中添加Layout Element使用属性原创 2021-09-07 22:28:29 · 930 阅读 · 1 评论 -
Unity3d中UGUI组件精简复盘(二十)EventSystem组件与Standalone Input Moudle组件
上一节,我们简单概括了Unity3D编辑器中三大 Layout Group组件的简要介绍。具体详情链接为:Unity3d中UGUI组件精简复盘(十九)ContentSizeFitter组件话不多说,我们直接进入正题~ 今天我们简要概括复盘的组件便是EventSystem组件与Standalone Input Moudle组件啦~EventSystem组件与Standalone Input Moudle组件简述事件系统及图形射线和其他射线的区别UI部分的事件系统,用于管理事件响应通常我们第一次创建U原创 2021-09-07 22:58:10 · 1153 阅读 · 1 评论 -
Unity3D中Grid Layout Group组件一键实现自动排版Image
Unity:Grid Layout Group组件一键实现自动排版Image一、首先创建一个Image,用作与我们要设置的背景。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dSmszaWF-1598433252381)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200826170248055.png)]二、其次我们在背景Image里添加多个格子image[外链图片原创 2020-08-26 17:19:04 · 1835 阅读 · 0 评论