Unity ui学习笔记

学习又不会学就打打代码这个样子啊

已于 2023-03-01 11:20:15 修改

阅读量288

点赞数

分类专栏： unity学习文章标签： c# unity ui

于 2023-03-01 11:11:16 首次发布

本文链接：https://blog.csdn.net/weixin_63794834/article/details/129199709

版权

unity学习专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、Canvas

作为unityui界面的基础，所有的ui组价都要显示在这个画布上面，其特点也是比较明显的

1，画布的大小是不可以更改的固定的

2，当我们不创建画布直接创建ui组件的时候系统是会自动创建一个画布的

3，画布是可以同时存在多个的

4，当Canvas生成时会自动生成一个EventSystem的响应事件的游戏物体

我们下面来看看画布上的组件分别有一些什么作用

1，Canvas

Render Mode:里面有三个模式我们首先默认的就是Screen Space-Overlay,这个模式下我们的ui画布是和我们的摄像机在一起贴合的我们的ui组件就直接会显示在我们的game画面上，就算是没有摄像机在game场景里都会显示在game视图里，当场景里有3d物体等其他东西时也会被UI组件遮挡

Screen Space-Camera:这个模式下多了一个相机的选择，当我们将摄像机挂载到改组件后我们可以调整Plane Distance来调整画布和摄像机之间的距离，这样中间的距离就可以显示出其他的游戏物体，ui和3d游戏物体的展示

World Space：这个模式下我们的ui组件基本上就已经变成了3d游戏物体其使用方法和其他的3d游戏物体没有区别，基本用来显示人物血条名字等情况下

Sort order：当我们有多个画布的时候这个数值的大小决定了，那个uicanvas优先显示，数值越大就会优先显示

Ui Scale Mode -Constant Pixel Size:其对应的是当我们的game显示分辨率和屏幕的分辨率产生变化时，其Canvas里的组件是不会发生变化的始终保持其原来的大小

Scale With Or Height:该模式下当我们的分辨率发生变化的时候其里面的ui组件都会发生变化在适用在分辨率变化比较多的情况下

和我们的一个射线响应的组件

二、Text

在画布上显示文字所使用的组件

基本上就是一些文字的设置，在这里我们有以前的老版本是不能输入中文的，这个时候我们需要外部打出我们想要的文字，然后在复制粘贴进来就可以了

Rich text：副文本当我们勾上这个该选项后，我们就可以给文字<>text<>这种方式来个文字加粗，改变颜色等功能，取消后添加的内容失效，并以正常的文本显示出来

Best Fit：：自动适应区域大小来调整文字大小

三、Image

显示图片的组件，我们将导入的图片其格式设置为2d的格式就可以将其托进Image组件将其显示在画布上

这里我们主要介绍一下Image的几种格式

Simple：Image初始的格式最基本的使用格式

Sliced：拉伸模式，这种使用模式是我们在导入图片的时候将其设置成Sprite模式时点击Sprite Editor

打开后我们就可以看到我们的图片上面出现几根绿色的线将我们的图片分割成的九宫格的模式这个时候处于我们绿色线框里面的内容在外面进行使用的过程中大小是不会被拉伸的一半用于在我们的图片当背景图和按钮时的情况下使用

3Tiled；平铺模式这个模式就如同字面上的意思当我们的的图片大小比较小我们的控件比较大时就不会进行拉伸，而是直接平铺填满在控件里

Filled：这种填充模式就是我们平时使用的比较多的地方，图片的多种填充模式可以在不同的地方来使用，比如横向填充就可以用来当我们的血条使用，360度填充就可以用来制作我们的技能冷却下面我们使用360填充来制作一个简单的技能冷却效果

我们先创建一个Image，在其下创建一个子物体Image将其模式换成360填充模式，将其透明度降低，这个时候我们拉动FIll Method就可以看到我们的类似于技能冷却效果的出现，

我们要实现点击技能后自动冷却就要用代码来控制其Fill Method的变化，当然我们使用的是图片这里我们要点击改图片来触发，我们就应该在图片上加上Button组件让其可以有点击触发事件然后我们创建代码来控制其效果

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class CD : MonoBehaviour
{
    public Image image;//声明一个image的游戏物体
    public float Cd=5f;//这里我们可以设置游戏的cd
    private bool game_bool=false;//用来触发效果的条件
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
      
        if (game_bool)
        {
            image.fillAmount += Time.deltaTime / Cd;//用来实现我们技能的几秒cd效果
            if(image.fillAmount>=1)//当我们的技能cd转满说明我们的技能已经转好
            {
                image.fillAmount = 0;//技能图标亮起
                game_bool = false;//技能冷却效果停止
            }
        }
        
    }
    public void CD_Button()
    {
        game_bool = true;//点击后技能冷却效果开始
    }
}

我们将这个代码挂载到我们的image上面，将其按钮点击事件绑定好然后我们运行游戏点击我们的技能就可以看到我们技能cd的实现效果

然后

我们还可以填添加一个text在图标里面来实现看到技能冷却时间的一个效果，和我们的按键技能效果是都可以的

四、Button

Button：作为几乎是unityui里面最重要的一个组件是由一个图片加上text组件构成的，我们来看看主要的button控件

Interactable;控制改按钮是否交互，当我们勾选上这个选项时改按钮就是可以交互的，不勾选就不能交互

Transition;按钮的几种模式是我们用来制作按钮的显示效果的

Color Tion：其底下的内容分别是

1，Target Graphic：可以选择按钮的样式直接引入设置成sprite的图片就可以了

2，Normal Color：按钮的颜色

3，Highlighted Color:当我们的鼠标值到我们的按钮是按钮的颜色

4，Pressed Color：当我们鼠标点击按钮但是没有松下时按钮显示的颜色

5，Selected Color：当我们已经点击了按钮后显示的颜色

6，Disabled Color：当我们的按钮处于不可交互的状态时

这个就是我们的颜色模式按钮里面还有个Sprite模式和我们的颜色模式几乎是一摸一样的只是变化的是图片而不是颜色这里我们要讲一下按钮的第三个模式

Animation

我们点击Auto Generate Animation按钮系统就会让自动的创建其对应的动画文件

我们双击打开这些动画文件再选中我们的button

这个时候我们就能看到和我们前面的颜色模式和图片模式想对应的选项这个时候我们再录制动画就可以实现我们的按钮在被选中等情况下的动画播放，其应用的地方很多

Fade Duration：按钮之间变化的速度

当然我们Button有一个很重要的就是On Click触发事件，当我们点击底下的加号就可以添加一个点击事件

如图所示我们要引入一个游戏物体这里我们可以自己写一个游戏方法将其放在游戏物体上，在将其引用到这里我们就可以在按钮上绑定我们的按钮事件我们新建一个脚本来试试

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class button : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }
    public void button_a()//测试按钮点击事件
    {
        Debug.Log("点击成功");
    }
}

我们将这个脚本挂在一个游戏物体上再将这个游戏物体引用到按钮的触发事件上

我们运行游戏点击按钮就会发现我们成功的Debug.log出来了一串文字

这就是我们按钮的On Click事件

剩下一个NAVigation，我们底下有一个Visualize按钮我们点击一下这个按钮我们会发现我们在画布下的ui组件上面多了很多带有箭头的线条这个是我们用键盘的上下左右键来切换选的ui组件的功能我们点击navigation会发现出现多个选择就是设置其是否能上下左右移动的地方

五、InputField

输入框组件一般在我们的登录界面商城界面会使用到，由三个控件组成一个图片和两个text组件构成

第一个text显示的是我们输入栏上的提示信息，第二个text组件记录的是我们自己输入的内容其控制就是对应的text住组件的特性主要要记录的是input Field 组件下的几个设置

1，character Limit：限制我们输入的文字个数

2，Caret Blink Rate：字符插入标的闪烁频率

3，Caret Width：字符插入标的宽度

4，Custom Care Color：勾选后可以自己选择插入标的颜色

5，Selection Color：设置我们选中已经输入了的文字的背景颜色

6，Read Only：控制输入框是否能进行输入

7，Content Type：限制文字输入的类型

当然我们的输入框也有相对应的触发事件

1，On Value Changed：当我们输入文字时触发

2，On Submit：确认输入框内容时触发

3，On End Edit:当我们的光标离开输入框时触发事件

六、Slider

滑动块组件

首先我们来看Slider上的控件其大致和我们的image组件相同，其特有的

Min Value:显示滑动块的最小值 Max Value滑动块的最大值，

Whole Numbers：勾选后滑动块滑动时一次最小的数值都是从一开始

滑动块的触发事件

On Value Changed（single）这里的触发事件多了一个条件方法里要引入一个数据，我们一般使用滑动块控制声音等效果是就可以直接使用这里的条件

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class slider : MonoBehaviour
{
    public AudioSource source;
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }
    public void slider_a(float a)
    {
        source.volume = a;
        Debug.Log(a);
    }
}

我们声明一个音乐播放器然后新建一个带有float的参数直接将我们的音乐播放器控制大小的声音符给我们的值a，我们出来给我们的slider绑定方法，但是这里和我们前面的button不同的是

我们在选择方法时会看到我们有两个我们的方法这个时候我们选择那一个呢，这个时候我们应该选择上面这一个动态的更改我们的数值这个时候我们运行游戏拉动滑动块就可以发现我们的声音大小跟着我们的滑动块的改变而改变

Background：这个是我们滑动块未滑动的显示条，是个image组件，同时我们也可以设置不同的图片作为滑动块的未滑动区域

Fill：是我们的以滑动区域的显示和我们的未滑动区域一样可以自己设置

Handle:我们的滑动块的上面那显示我们滑到哪里的一个显示球，也是一张图片也是可以我们自己定义的，其性质和image组件一模一样

七、Scroll View

区域显示我们主要看Scroll Rect组件

Content：所有的内容显示区域Horizontal 和Vertical控制我们横向和竖向滑动的选择

Movement Type ，1：Elastic弹性当我们的将显示内容拉到最底下的时候是否会回弹和回弹的数值

2：Unrestricted无限制就是我们不受边框的限制可以一直拖动无视其显示内容

3：Clamped固定模式，就是固定我们的内容显示区域不会被上下拖动

这里我们要提一个我们的其他的ui组件也是可以当做区域显示的效果如我们在一张image上加上我们的组件scroll Ract 添加上后这个ui控件就会变成我们的区域显示的范围，我们添加上后将我们要滑动内容引入到组件对应的地方运行游戏我们发现就可以实现拖动，其设置和我们本来的区域滑动块组件是没有什么区别的，这个时候我们会发现我们要滑动的内容是都会显示出来的，如果我们想要只有在我们设置好的区域显示就可以加上一个mask组件，加到我们的显示区域，这个时候我们会发现我们要滑动的内容就只会在我们设置的显示区域出现，离开显示区域就会自动遮罩