UGUI学习笔记——关于从零开始学习游戏制作之旅这件事

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

以下内容为unityGUI个人学习笔记，等GUI学习完后准备开一个放置类的2D游戏的坑
最后更新时间：2020/11/11
2020/11/10更新内容：
一、通过按钮进行场景切换
二、常规血条的制作思路（待完善
三、常规技能冷却的制作思路（待完善）
2020/11/11更新内容：
四、背包用GUI选项卡的简单运用思路（待后续完善）
五、五:关卡切换的简单思路

---

一、通过按钮进行场景切换

1.创建一个场景切换脚本

using UnityEngine.SceneManagement;
SceneManager.LoadScene("");//可以是场景名字，或者是场景的序号

2.挂载对应脚本

（1.）将挂载GameManager脚本的空游戏物体指定给按钮
（2.）选择对应的方法和需要切换的场景名称（备注：该场景需要添加到生成设置内）

二、常规血条的制作思路（待完善）

1.缺少实际使用例

1.创建相关的UI

（1.）背景图+血量颜色图+掉血颜色图

2.添加Slider组件

（1.）添加Slider组件

（2.）将血量颜色图像类型改为填充型

（3.）将该图像指定到Slider组件中的填充矩形处

三、常规技能冷却的制作思路（待完善）

1.未制作有关技能冷却提示

1.创建相关的UI

(1.)背景边框+技能图标+黑色遮罩

（2.）将黑色遮罩的图像类型切换为填充型

（3.）添加按钮组件和挂载有关脚本

2.制作有关脚本

public float coldTime = 2;//冷却时间
    private Image filledImage;//声明一个图片
    private float timer = 0;//定义一个计时器
    private bool isStartTime = false;//是否开始计时
    public KeyCode keycode;//声明个一个快捷键

    private void Start()
    {
        filledImage = transform.Find("FilledImage").GetComponent<Image>();//在开始方法中得到黑色遮罩的图片的Image组件
    }
    void Update()
    {
        if (Input.GetKeyDown(keycode))//当按下指定的快捷键
        {
            isStartTime = true;
        }
        if (isStartTime==true)
        {
            timer += Time.deltaTime;//计时器每秒+1秒
            filledImage.fillAmount = (coldTime - timer) / coldTime;//图片中的填充总数百分比（0%~100%）=（冷却时间-计时器）/冷却时间
            if (timer>=coldTime)//当冷却时间结束重置技能可以使用
            {
                filledImage.fillAmount = 0;
                timer = 0;
                isStartTime = false;
            }
        }
    }
    public void OnClick ()
    {
         isStartTime = true;//当按下按键时开始冷却计时
    }

四、背包用GUI选项卡的简单运用思路（待后续完善）

1.创建相关的UI

（1.）三个选项卡+背包内容

2.选项卡的制作

（1.）添加Toggle组件并将目标切换图形替换为选中选框

（2.）给背包添加Toggle Group组件

（3.）将三个选项卡指定到开关组中

3.背包的制作

（1.）创建一个空对象命名为Panel，将大小变换为背包的大小，并添加一个示意物品
（2.）将需要切换的Panel对象指定给对应的开关
（3.）用GameObject.SetActive方法实现选中对应标签时显示有关内容

五、关卡切换的简单思路

1.创建相关的UI

1.）创建一个名为ScrollPanel图片对象，将该对象的大小改为每页的大小，并添加Scroll Rect组件和Mask组件，由于关卡切换为水平方向的，因此只勾选水平滚动

（2.）创建一个空对象为GridContent，长度为上面图片对象的4倍左右，要能放下32个按钮，每页8个按钮（每一个按钮下也需要创建空对象）
（3.）GridConteng添加Grid Layout Group组件，用于对按钮进行排序

2.代码实现相关滚动功能

（1.）添加两个接口

public class LevelButtonScrollRect : MonoBehaviour,IBeginDragHandler,IEndDragHandler//拖拽开始和拖拽结束的两个接口
{}
 public void OnBeginDrag(PointerEventData eventData)
    {
    }
  public void OnEndDrag(PointerEventData eventData)//结束拖拽接口，每当拖拽结束时会调用以下代码
    {}

（2.） 获取有关组件

private ScrollRect scrollRect;
 void Start()
    {
        scrollRect = GetComponent<ScrollRect>();//得到挂载脚本组件上的ScrollRect组件
    }

（3.）获取每页的页首时水平posX的值 通过Print观察有关的值

private float targetHorizontalPosition = 0;//默认第一页的值
public void OnEndDrag(PointerEventData eventData)//结束拖拽接口，每当拖拽结束时会调用以下代码
    {
 float posX = scrollRect.horizontalNormalizedPosition;//滑动条结束时滑动条的水平坐标的值posX
 print(posX);//向控制台输出当前posX的位置用于判断页数的分割值
}

（4.）通过判断当前拖拽位置的值与预设好的4页的值进行比较来确定停留在哪一页

private float[] pageArray = new float[] { 0, 0.333333f, 0.66666f, 1 };//声明一个数组用于存放滚动条需要停留的位置，分别代表1~4页
private bool isDraging = false;//用于判断是否在拖拽状态
public void OnBeginDrag(PointerEventData eventData)//拖动开始时处于拖动状态，这样就不会出现拖动时自动滚动的情况
    {
        isDraging = true;
    }
public void OnEndDrag(PointerEventData eventData)//结束拖拽接口，每当拖拽结束时会调用以下代码
    {
 isDraging = false;
        float posX = scrollRect.horizontalNormalizedPosition;//滑动条结束时滑动条的水平坐标的值posX
        int index = 0;//用于记录当前处于哪一页的位置
        float offset = Mathf.Abs(pageArray[index] - posX);//得到当前滚动条位置的绝对值
        for (int i = 1; i < pageArray.Length; i++)
        {
            float offsetTemp = Mathf.Abs(pageArray[i] - posX);//利用for循环让所有可能处于的位置与当前滚动条的位置进行对比
            if (offsetTemp < offset)//如果当前的位置小于预设好的4页位置起始点中的一个
            {
                index = i;//则当前的页数等于i
                offset = offsetTemp;//当前的滚动条的位置等于预设好的位置
            }
        }
        targetHorizontalPosition = pageArray[index];
        toggleArray[index].isOn = true;
    }

3.点击下标签切换页功能实现

（1.）创建一个空对象并添加Toggle Group组件
（2.）创建四个Toggle并关联到一个开关组中
（3.）代码实现切换

public Toggle[] toggleArray;//声明一个Toggle数组用于滑动切换时换页

//定义4个方法用于点击切换页数

    public void OnToggleValueChange1(bool isOn)
    {
        if (isOn == true)
        {
            targetHorizontalPosition = pageArray[0];
        }
    }
    public void OnToggleValueChange2(bool isOn)
    {
        if (isOn == true)
        {
            targetHorizontalPosition = pageArray[1];
        }
    }
    public void OnToggleValueChange3(bool isOn)
    {
        if (isOn == true)
        {
            targetHorizontalPosition = pageArray[2];
        }
    }
    public void OnToggleValueChange4(bool isOn)
    {
        if (isOn == true)
        {
            targetHorizontalPosition = pageArray[3];
        }
    }
    public void OnEndDrag(PointerEventData eventData)//结束拖拽接口，每当拖拽结束时会调用以下代码
    {
toggleArray[index].isOn = true;
    }

4.完整代码

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

public class LevelButtonScrollRect : MonoBehaviour,IBeginDragHandler,IEndDragHandler//拖拽开始和拖拽结束的两个接口
{
    private ScrollRect scrollRect;
    public Toggle[] toggleArray;//声明一个Toggle数组用于滑动切换时换页
    private float[] pageArray = new float[] { 0, 0.333333f, 0.66666f, 1 };//声明一个数组用于存放滚动条需要停留的位置，分别代表1~4页
    private float targetHorizontalPosition = 0;
    private bool isDraging = false;//用于判断是否在拖拽状态
    public void OnBeginDrag(PointerEventData eventData)//拖动开始时处于拖动状态，这样就不会出现拖动时自动滚动的情况
    {
        isDraging = true;
    }

    public void OnEndDrag(PointerEventData eventData)//结束拖拽接口，每当拖拽结束时会调用以下代码
    {
        isDraging = false;
        float posX = scrollRect.horizontalNormalizedPosition;//滑动条结束时滑动条的水平坐标的值posX
        int index = 0;//用于记录当前处于哪一页的位置
        float offset = Mathf.Abs(pageArray[index] - posX);//得到当前滚动条位置的绝对值
        for (int i = 1; i < pageArray.Length; i++)
        {
            float offsetTemp = Mathf.Abs(pageArray[i] - posX);//利用for循环让所有可能处于的位置与当前滚动条的位置进行对比
            if (offsetTemp < offset)//如果当前的位置小于预设好的4页位置起始点中的一个
            {
                index = i;//则当前的页数等于i
                offset = offsetTemp;//当前的滚动条的位置等于预设好的位置
            }
        }
        targetHorizontalPosition = pageArray[index];
        toggleArray[index].isOn = true;
        //scrollRect.horizontalNormalizedPosition = pageArray[index];//滚动条的水平位置调整为当前页
        print(posX);//向控制台输出当前posX的位置用于判断页数的分割值
    }

    void Start()
    {
        scrollRect = GetComponent<ScrollRect>();//得到挂载脚本组件上的ScrollRect组件
    }

    
    void Update()
    {
        if (isDraging == false)
        {
            scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition, targetHorizontalPosition, Time.deltaTime * 3);
            //滚动条缓动的代码,利用mathf.Lerp方法让滚动条的水平位置值按照指定的速度滚动
        }

    }
    //定义4个方法用于点击切换页数
    public void OnToggleValueChange1(bool isOn)
    {
        if (isOn == true)
        {
            targetHorizontalPosition = pageArray[0];
        }
    }
    public void OnToggleValueChange2(bool isOn)
    {
        if (isOn == true)
        {
            targetHorizontalPosition = pageArray[1];
        }
    }
    public void OnToggleValueChange3(bool isOn)
    {
        if (isOn == true)
        {
            targetHorizontalPosition = pageArray[2];
        }
    }
    public void OnToggleValueChange4(bool isOn)
    {
        if (isOn == true)
        {
            targetHorizontalPosition = pageArray[3];
        }
    }
}