> 文档中心 > Unity3d——UGUI学习笔记

Unity3d——UGUI学习笔记

文章目录

  • 控件
    • 一、Text控件
        • Character:
        • Paragraph:
        • Paycast Target:
        • 脚本:文本内容交互
    • 二、Image控件
        • 属性:
    • 三、RawImage控件
        • 属性:
        • 脚本:图片轮播
    • 四、Button控件
        • 属性:
          • 按钮交互动画效果:
          • 导航:
        • 点击事件:
          • 方法一:
          • 方法二:
          • 脚本:点击事件
    • 五、Toggle控件
        • 属性:
        • 分组:
        • 值改变事件:
          • 脚本:值改变事件
    • 六、Slider控件
        • 属性:
        • 值改变事件:
          • 脚本:实现拖动滑竿控制音频音量的功能
          • 脚本:实现血条
    • 七、Scrollbar控件
        • 属性:
        • 值改变事件:
    • 八、Scroll View控件
        • 说明:
        • Content中可以挂载三种Layout Group组件:
          • 1、Guid Layout Group,自动排列子物体对象。
        • 属性:
          • 2、Horizontal Layout Group
          • 3、Vertical Layout Group
        • 属性:
    • 九、Dropdown控件
    • 十、InputField控件
        • 属性:
  • 其他
    • 一、Rect Transfrom组件
        • 属性
    • 二、RaycastTarget属性、Graphic Paycaster组件
        • 脚本:通过射线检测被点击的UI
    • 三、画布
        • Canvas组件
        • Canvas Scaler组件
        • Graphic Paycaster组件

控件

一、Text控件

文本控件

在这里插入图片描述

Character:

Font:字体Font Style:字体类型Font Size:字体尺寸Line Spacing:行间距Rich Text:选中后,可以识别Text中的标签属性,可以直接使用标签控制文本样式TextTextText

Paragraph:

Alignment:对齐方式Align By Geometry:几何对齐Horizontal Overflow:水平溢出Vertical OverFlow:垂直溢出Best Fit:自适应大小,但需要在Min Size和Max Size范围内。Color:字体颜色Material:材质

Paycast Target:

射线投射目标,是否能响应图形射线

脚本:文本内容交互

1、引入命名空间
using UnityEngine.UI;
2、设置Text组件中的属性值
public Text thisText;    public Font textFont;    void Start()    { thisText = this.GetComponent<Text>(); //获取文本组件 thisText.text = "蜗牛\n蜗牛"; //设置文本内容 thisText.font = textFont; //设置font属性 thisText.supportRichText = true; //设置Rich Text属性 }

二、Image控件

说明:图片控件

在这里插入图片描述

属性:

Source Image:源图像,Sprite图像资源,需要把图片的Texture Type设置成Sprite(2D and UI)模式。Color:颜色与透明度Material:材质Raycast Target:射线投射目标,开启后可以检测到射线Paycast Padding:Maskable:Image Type:Simple:默认,在拉伸区域内完全显示一张图片Sliced:切片,九宫格应用,需要图片做过九宫格分割,四角在图片拉升时不会拉伸变形Tiled:平铺,填满整个控件Filled:填充,技能冷却主要依靠这个属性Fill Amount:用来实现技能冷却的效果,技能剩余时间除以冷却总时间。Use Sprite Mesh:Preserve Aspect:保持长宽比Set Native Size:点击后,图片回归到自身的原始尺寸

三、RawImage控件

在这里插入图片描述

属性:

Texture:纹理,Image控件中的Source Image只能用Sprite图片,Texture则能绑定所有图片Color:颜色Material:材质Paycast Target:射线检测Paycast Padding:Maskable:UV Rect:UV矩阵,改变UV坐标,可实现一张图片切分,如果这一组图片相互切换变成一个动画,例如动物跑动,就能实现动图效果。

说明:RawImage核心代码比Image少很多,RawImage不支持交互,可用于显示任何图片不仅仅是Sprite,一般用在背景、图标上、支持UVRect(用来设置值显示图片的某一部分),而Image不支持UV Rect。
扩展 :OutLine描边组件,Shadow引用组件。

脚本:图片轮播

说明:将一张从0到9的横排数字,通过UV Rect每次只显示一个数字,轮流显示,实现计时效果。

素材:
Unity3d——UGUI学习笔记

public class RawIamgeTest : MonoBehaviour{    public RawImage thisRawImage;    public float speed = 1f;    public float intervalTime = 1f;    public float timer = 0;    // Start is called before the first frame update    void Start()    { //1、渐入动画效果 /*thisRawImage = this.GetComponent(); thisRawImage.uvRect = new Rect(new Vector2(-1,0),new Vector2(1,1));*/ //2、动画切换效果 thisRawImage = this.GetComponent<RawImage>(); thisRawImage.uvRect = new Rect(new Vector2(0,0),new Vector2(0.1f,1));    }    // Update is called once per frame    void Update()    { //1、渐入动画效果 /*if (thisRawImage.uvRect.x < 0) {     thisRawImage.uvRect = new Rect(new Vector2(thisRawImage.uvRect.x+speed * Time.deltaTime,0),new Vector2(1,1)); } else {     thisRawImage.uvRect = new Rect(new Vector2(0, 0), new Vector2(1, 1)); }*/ //2、动画切换效果 timer += Time.deltaTime; if (timer >= intervalTime) {     if (thisRawImage.uvRect.x>0.9f)     {  thisRawImage.uvRect = new Rect(new Vector2(0, 0), new Vector2(0.1f, 1));     }     thisRawImage.uvRect = new Rect(new Vector2(thisRawImage.uvRect.x + 0.11f,0),new Vector2(thisRawImage.uvRect.width,1));     timer = 0; }    }}

四、Button控件

说明:按钮控件

在这里插入图片描述

属性:

Interactable:是否可交互,禁用按钮。
按钮交互动画效果:
Transition:设置交互的方式。Transition四个属性(None无、Color Tint颜色改变、Sprite Swap图片交换、Animation动画)Normal *:没有点击的时候Highlighted *:鼠标移动到按钮时Pressed *:点击Selected *:Disabled *:禁用Auto Generate Animation:点击后可以为按钮创建一组代表不同响应的动画,选中按钮>Window>Animation>Animation,就可以编辑动画了。
导航:
Navigation:将按钮设为Horizontal水平、Vertical垂直或Explicit指定导航按钮,经过EventSystem的控制,有一个按钮被选中时,就可以通过按上下左右,更改被选中按钮。Visualize:显示控件之间的导航。

点击事件:

方法一:
On Click():点击+号,将带有脚本的控件拖到None(Object),然后就能在No Funtion中找到脚本中的方法并选择,于是当点击这个按钮时就会触发脚本中对应的方法。
方法二:
给按钮绑定脚本后,由脚本通过监听事件方法控制事件响应(委托)。
脚本:点击事件
void Start()    { //获取Button控件,监听到onClick事件后执行ClickButton方法 this.gameObject.GetComponent<Button>().onClick.AddListener(ClickButton); string str = "button have parameter"; //绑定带参数的方法 this.gameObject.GetComponent<Button>().onClick.AddListener(()=> ClickButtonParameter(str));    }    public void ClickButton()    { Debug.Log("button test");    }    public void ClickButtonParameter(string str)    { Debug.Log(str);}

五、Toggle控件

说明:可以用来实现单选效果。

在这里插入图片描述

属性:

avigation及以上内容,参考前面的控件就行。Is On:默认是否选中Toggle Transition:切换是否有过渡效果,Fade代表有,None代表没有。Graphic:设置开关要起作用的图形对象,不一定非要是默认的对等。Grounp:设置分组,把多个Toggle放在同一个对象下,在这个物体上添加Toggle Group组件,并将该物体分别赋值给一组中的Toggle,就可以实现单选。

分组:

Unity3d——UGUI学习笔记

1、新建一个Empty并起个名ToggleGroup,,给ToggleGroup添加Toggle Group组件,将一组Toggle都拖到Toggle Group下面,然后将ToggleGroup分别拖动到每个Toggle下的Group中,这样就实现了单选功能。2、Toggle Group组件下的Allow Switch Off代表可以关闭被选中按钮,达到所有单选按钮的都没有被选中的效果,如果关闭该按钮则无法关闭被选中的单选按钮,一定会有一个被选中。

值改变事件:

On Value Change:当Toggle值改变时所调用的函数,和按钮的Onclick差不多。
脚本:值改变事件
void Start()    { this.gameObject.GetComponent<Toggle>().onValueChanged.AddListener((bool isOn) => OnToogleValueChanged02(isOn));}//无参    public void OnToogleValueChanged()    { Debug.Log("Tooggle Value Change");    }    //有参    public void OnToogleValueChanged02(bool isOn)    { Debug.Log(isOn);    }

六、Slider控件

说明:滑竿控件,可以用于血量的显示

在这里插入图片描述

属性:

Fill Rect:以血条为例,指向填充血条的图片Fill。Handle Rect:以血条为例,指向血条剩余血量最大值的图标。Direction:方向,以血条为例,血条减少的方向,从左至右,从上至下或是其他的Min Value:滑竿最小值。Max Value:滑竿最大值。Whole Numbers:选中后,滑竿每次改变的数值只能是1的倍数value:滑竿的值

值改变事件:

同Toggle的控件
脚本:实现拖动滑竿控制音频音量的功能
(1)添加Audio Source组件,将准备好的音频拖动到AudioClip属性值中。(2)要保证滑竿值的范围和音频组件的音量值的范围一致。
public void SliderValueChanged()    { float value = this.gameObject.GetComponent<Slider>().value; this.gameObject.GetComponent<AudioSource>().volume = value;}
脚本:实现血条

Unity3d——UGUI学习笔记

1、Backgroud:血条背景,可以用一张红色长条图片代替背景。2、 Fill:填充血条的图片,可以用一张绿色长条图片代替填充,需要将Image Type设置为Filled,Fill Method可以设置(Horizontal水平、Radial 360圆周,如果是环形血条就可以使用圆周。)3、然后再Slider中就可以通过控制value的值,控制血条。4、Handle Slide Area:血条最大位置的图标。

七、Scrollbar控件

说明:滚动条,可以用于背包系统右侧的滚动条、游戏设置右侧的滚动条等。

在这里插入图片描述
Unity3d——UGUI学习笔记

属性:

Handle Rect:操作条矩形,指向Handle。Direction:方向,滚动条的方向,从左至右,从上至下或是其他的。Value:当前滚动条对应的值Size:缩放操作条矩形。Number Of Steps:滚动条可以操作的步数,当为2时,操作条的value只能在最开始和最后两个位置跳跃,当为3时,操作条只能在最开始、中间、最后三个位置间跳跃,每次平分滚动背景。

值改变事件:

On Vlue Changed:和Slider控件中的On Vlue Changed一样。

八、Scroll View控件

Unity3d——UGUI学习笔记

说明:

1、滚动视图,是一个能上下或者左右拖动的UI列表,用于展示图像、文本、按钮等,在需要展示比较多的内容的时会用到,例如:背包、长文字、游戏设置等。2、滚动视图需要Scrollbar滚动条,Mask遮罩,Layout Group组成结构Scroll View:挂在Scroll Rect组件。Mask:遮罩,挂载到父物体时,选中后子物体超出父物体显示范围的内容将不再显示。Viewport:视口,挂载Mask组件。Content:内容。

Content中可以挂载三种Layout Group组件:

1、Guid Layout Group,自动排列子物体对象。

在这里插入图片描述

属性:

Padding:内间距。Cell Size:子物体的长宽Spacing:物体水平方向的间距,垂直方向的间距。Start Corner:起始位置。Start Axis:排列方式,水平、垂直。Child Alignment:子物体对齐方式。Constraint:Flexible:无约束Fixed Column Count:约束列,每行显示几列Fixed Row Count:约束行,每列显示几列
2、Horizontal Layout Group
3、Vertical Layout Group

在这里插入图片描述

属性:

Content:滚动的内容,这里指向Viewport下的Content,内容可以指向Text文字内容,也可以是图片内容。Horizontal:允许水平方向滚动;Vertical:允许垂直方向滚动Movement Type:滚动类型1、Unrestricted无限制;2、Elastic弹性,弹性模式指在到达滚动矩形的边缘时会反射内容,Elasticity:弹性/弹跳量;3、Clamped固定;Inertia:惯性,拖动后释放指针,内容将继续移动。Deceleration Rate:惯性减速率,减速率将决定内容停止移动的速度,比率0将立即停止运动。值为1表示运动永远不会减速。Scroll Sensitivity:鼠标滚动灵敏度,鼠标滚轮和触控板滚动事件的敏感性。鼠标滚动的速度。View port:视口,滚动内容的父物体,需要用到Mask遮罩,遮罩部分为滚动内容可视部分。Horizontal Scrollbar:水平滚动Visibility:能见度,永久的、自动隐藏、自动隐藏并扩展视口;Spacing:间距。Vertical Scrollbar:垂直滚动,同Horizontal;On Value Changed:事件,同Slider控件中的On Value Changed

补充:通常不需要滚动条,因为不好看。

九、Dropdown控件

说明:下拉列表。

Unity3d——UGUI学习笔记

十、InputField控件

说明:输入框

在这里插入图片描述

属性:

Text Component:显示文本输入的组件。Text:初始值。Character Limit:字符串中最大字符数量,0为不限制。Content Type:内容类型,限制输入内容类型,包括数字,密码等。常见的类型如下:Standard:标准类型,什么字符都能输入,只要是当前字体支持的。Autocorrected:自动更正Integer Number:整数类型,只能输入整数Decimal Number:十进制数,只能输入整数或小数Alphanumeric:文字和文字和数字,能输入数字和字母Name:姓名,能输入英文及其他文字,当输入英文时自动姓名化(首字母大写)。Password:密码类型,输入的字符隐藏为*Email Address:邮箱类型Pin:Pin类型,字符隐藏为*Custom:自定义。LineType:换行方式,当输入内同超过输入域边界时。Single Line:单行,不换行,继续延伸。Multi Line Submit:多行,超过边界则换行Multi Line NewLine:多行,超过边界则新建换行Placeholder:位置标示,此输入域的输入位控制符,任何带有Text组件的物体。注意:当输入框为空时显示此内容。Caret Bink Rate:光标的闪烁速度Caret Width:光标的宽度Custom Caret Color:启动光标颜色Caret Color:设置光标颜色Selection Color:选中文本的背景颜色。Hide mobile input:手机端隐藏输入Read Only:只读,不允许输入

On Value Changed:点击内容事件
On End Edit:当光标移除事件
Unity3d——UGUI学习笔记
Placeholder:默认
Text:正在输入

其他

一、Rect Transfrom组件

在这里插入图片描述

属性

1、Rect Transform是UGU对象所特有的组件,和Transform最大的区别就是锚的存在。2、Anchors:锚,UI对象所特有的,由四个位于UI对象物体矩形边框范围内的四个点组成(UGUI对象都是矩形边框),用来锚定UI对象1、有三种形态:锚点、锚线、锚框无论父物体的位置尺寸大小如何改变,UI子物体的Rect Transform四个参数的值不变。不同情况,Rect Transform四个参数有不同的含义。2、锚点:在左下角情况,四个点重合的情况,无论如何改变父物体的尺寸,UI子物体Rect Tranform四个参数的值不变,其含义分别为:(1)PosX:锚到带UI子物体左边框的垂直距离(2)PosY:锚点到UI子物体下拉框的垂直距离(3)Width:UI子物体的宽度(4)Height:UI子物体的高度(5)说明:也就标识UI子物体的尺寸大小不变,并且锚点与UI子物体左下角的点的方向距离不变;进而推断出轴点与锚点的方向距离保持不变。3、锚线:在左边框情况,两个点重合的情况。改变父物体的尺寸,UI子物体Rect Transform四个参数值不变,其含义分别为:(1)PosX:锚线与UI子物体左边框的垂直距离(2)Top:锚线上方端点与子物体上边框的垂直距离(3)Width:UI子物体的宽度(4)Bottom:锚线下方端点与UI子物体下边框的垂直距离。(5)垂直锚线:锚线到UI子物体轴心点的垂直距离保持不变,但是UI子物体的高度会随着父物体的高度变化而变化。(6)水平锚线:和垂直锚线相反。4、锚框:四个点分开的情况。改变父物体的尺寸,UI子物体Rect Transform四个参数的值不变,其含义分别为:(1)Left:左方锚线与UI子物体左边框的垂直距离(2)Top:上方锚线与UI子物体上边框的垂直距离(3)Right:右方锚线与UI子物体右边框的垂直距离(4)Bottom:下方锚线与UI子物体下边框的垂直距离(5)也就是表示UI子物体的尺寸大小包括高度宽度都会随着父物体的尺寸改变而改变。(6)注意:UI父物体与UI子物体的尺寸大小变化会受两者Scale大小比例影响,当父物体的比例是1,子物体比例大于1时,放大到一定比例,子物体的大小就会超过父物体。3、Pivot:轴点,UI对象旋转的中心点(Min_x,Min_y);(Min_x,Max_y);(Max_x,Min_y);(Max_x,Max_y);

二、RaycastTarget属性、Graphic Paycaster组件

说明:创建UI的时候Canvas和EventSystem自动创建,这两个是必不可少的。其中射线基检测依赖Canvas身上的Graphic Paycaster组件(图形射线)。射线检测:检测鼠标与UI的交互。

在这里插入图片描述

脚本:通过射线检测被点击的UI

using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.EventSystems;using UnityEngine.UI;public class PaycastTest : MonoBehaviour{    //EventSystem中的EventSystem组件    public EventSystem eventSystemTest;    //Canvas中的Graphic Paycaster图形射线组件    public GraphicRaycaster rayTest;    public List<GameObject> raycastTargetGameobjects;    // Update is called once per frame    void Update()    { if (Input.GetMouseButtonDown(0)) {     raycastTargetGameobjects = GetGameObjectByRaycast(Input.mousePosition); }    }    public List<GameObject> GetGameObjectByRaycast(Vector2 inputPosition)    { List<GameObject> resultList = new List<GameObject>(); PointerEventData ped = new PointerEventData(eventSystemTest); ped.position = inputPosition; List<RaycastResult> rayCastResultsList = new List<RaycastResult>(); rayTest.Raycast(ped, rayCastResultsList); if(rayCastResultsList.Count > 0) {     foreach (var item in rayCastResultsList)     {  resultList.Add(item.gameObject);     } } return resultList;    }}

补充:解决检测输入的时候报错的问题,将设置中Other Settings中的Active Input Handing设置为Both。
在这里插入图片描述

三、画布

说明:1、画布:创建UI物体时,会自动创建,并且,所有UI物体都是Canvas的子物体。和Canvas一同创建的还有一个EventSystem,其是一个基于Imput的事件系统,可以对键盘、触摸、鼠标、自定义输入进行监听处理。2、画布中的UI元素是以它们在层次结构中出现的顺序绘制的。首先绘制第一个孩子,然后绘制出第二个孩子,以此类推。如果两个UI元素重叠,则后一个元素将出现在前一个元素的顶部。3、要更改哪个元素显示在其他元素的顶部,只需拖动层次结构中的元素即可。

Canvas组件

Unity3d——UGUI学习笔记
1、Screen Space -Overlay:屏幕空间-叠加,表示Canvas下所有的UI空间永远位于屏幕的前面,不管有没有相机,UI元素永远在屏幕最前面,主要是2D效果。在这种模式下,在不同的屏幕分辨率下画布会自动适配屏幕的分辨率大小大小。
(1) Pixel Perfect:完美像素,UI元素精确到像素对齐,边缘更清晰。
在这里插入图片描述
2、Screen Space -Camera:屏幕空间-相机模式,Canvas和摄像机之间有一定的距离,可以在摄像机和Canvas之间播放一些粒子特效,主要是3D效果。
(1)Pixel Perfect:完美像素,UI元素精确到像素对齐,边缘更清晰。
(2)Render Camera:指定一个相机,用于渲染Canvas
(3)Order in Layer:层级顺序,同Sorting Layer下,Order越大,显示优先级越高。
Unity3d——UGUI学习笔记
3、World Space
(1)设置成这种模式后可以自定义画布大小

Canvas Scaler组件

Unity3d——UGUI学习笔记
1、Constant Pixel Size:无论屏幕大小如何,都使UI元素保持相同的像素大小
2、Scale Factor:以此比例缩放Canvas中的所有UI元素。
3、Reference Picels Per Unit:设置成100就行不要改变,否则画面会拉伸到看不懂。
Unity3d——UGUI学习笔记
Scale With Screen Size:根据不同屏幕尺寸自动改变UI大小。
Unity3d——UGUI学习笔记
Constant Physical Size:恒定物理尺寸

Graphic Paycaster组件

图形射线组件

在这里插入图片描述
Ignore Reversed Graphics:当被勾选时,Canvas中的UI如果经过翻转,则及时开启射线检测无法被检测到,

多事通报价网