UGUI学习-实现小游戏关卡选择面板

实现小游戏关卡选择面板

1.创建背景

创建一张画布

在画布上创建一个Image，用作背景图片

2.创建一个ScrollRect

在背景下创建一个ScrollRect并调整好大小，用于拖动关卡 （先创建一个Image，再在其下添加ScrollRect组件）

 

 

3.创建一个Grid

在ScrollRect下创建一个空物体，命名为Grid，并在其下添加Grid Layout Group组件，最后使其和ScrollRect的高一样，宽尽量拖长（为了添加足够多的关卡，后面还会进行调整）

在Grid下创建一个空物体（用于过渡Grid对子物体的拉伸）

在空物体下添加单个关卡按钮的预制体（没有就自己做一个）

复制多个空物体，具体数量根据你想要多少的关卡决定

（由于关卡未来可能增多，这里将Grid下的Start Axis改为Vertical）

我这里创建了32个关卡

感觉排版不好，修改一下Grid的CellSize属性

并将Grid的宽修改为=X*每行的关卡个数，高因为我做的是两行，这里就是300

将Grid拖入ScrollRect下的Content（表示要拖拽的内容为Grid）

因为这里我们不需要垂直的拖动，所以将ScrollRect下的Vertical取消勾选

这里注意一点，要将单个关卡的预制体放到空物体的正中心，不然，每个关卡之间就会产生一定的偏移，于是我们删除其余的空物体，保留第一个，并将其下的预制体移动到空物体的中心位置

然后和之前一样复制空物体

顺便修改一下每个关卡的编号

调整好之后的Grid

然后调整ScrollRect的大小，高和Grid一样，宽为单页关卡的长度之和，我这里为600

4.给ScrollRect添加一个Mask组件（用于遮挡超出边界的关卡）

将Mask的Show Mask Graphic取消勾选，隐藏ScrollRect的图片

目前效果

运行一下试试

5.创建ToggleGroup（用于制作一个翻页组）

创建一个空物体，命名为ToggleGroup

在ToggleGroup下添加ToggleGroup组

在ToggleGroup下创建一个Toggle（先创建一个Image，然后选择对应的toggle背景，并在其下添加Toggle组件）

将Image命名为Toggle

在Toggle下再创建一个Image（用于点击时显示当前页位置的图案）

将Image拖入Toggle下的Graphic中

复制多个Toggle（具体由需要几页决定）

除了第一个，将其余的Toggle的isOn属性都取消勾选

选中这几个Toggle，将ToggleGroup拖入它们的Group中

效果

6.编写代码，控制拖拽和点击时的翻页定位以及缓入效果

代码：

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class LevelButtonScrollRect : MonoBehaviour,IBeginDragHandler,IEndDragHandler//添加两个UI事件的接口
{
    private ScrollRect scrollRect;//获取当前游戏物体上的ScrollRect组件
    GameObject toggleGroup;//获取ToggleGroup游戏组件
    Toggle[] toggles;//声明一个存放Toggle组件的数组
    private float[] levelPages = new float[]{ 0, 0.333f, 0.666f, 1 };//因为有四页，所以每页的位置分别是0，0.333，0.666，1
    private float targethorizontalNormalizedPosition;//获取目标位置
    public float bufferSpeed;//翻页缓入速度
    private bool isDraging;//判断拖拽状态 当处于拖拽时应该取消翻页缓入
    public void OnBeginDrag(PointerEventData eventData)//当开始拖拽时
    {
        isDraging = true;//开始拖拽状态
    }

    public void OnEndDrag(PointerEventData eventData)//当结束拖拽时
    {
        isDraging = false;//结束拖拽状态
        float posX = scrollRect.horizontalNormalizedPosition;//获取当前拖拽到的位置
        int index = 0;//声明一个索引，用于表示每页位置的索引
        float offset = Mathf.Abs(levelPages[index] - posX);//获取拖动结束到每一页位置的偏移量
        for (int i = 0; i < levelPages.Length; i++)//遍历每页位置
        {
            float offsetTemp = Mathf.Abs(levelPages[i] - posX);//获取每页位置与当前拖动到的位置的偏移量
            if (offset > offsetTemp)//判断哪一页的偏移量最小
            {
                index = i;//将该页的索引赋给当前索引
                offset = offsetTemp;//将该页的偏移量赋给当前的偏移量
            }
        }
        targethorizontalNormalizedPosition = levelPages[index];//使目标位置等于偏移量最小的该页位置
        toggles[index].isOn = true;//使索引为index的Toggle的isOn属性为True 显示目标页的图案
    }

    // Start is called before the first frame update
    void Start()
    {
        toggleGroup = GameObject.Find("ToggleGroup");//获取名为ToggleGroup的游戏物体
        bufferSpeed = 4f;//将缓入速度设为4
        scrollRect = GetComponent<ScrollRect>();//获取当前游戏物体下的ScrollRect组件
        toggles = toggleGroup.gameObject.GetComponentsInChildren<Toggle>();//获取ToggleGroup的子物体下的全部Toggle组件
    }

    // Update is called once per frame
    void Update()
    {
        if(!isDraging)//如果不在拖拽状态
        //使当前位置缓慢变化到目标位置，速度为bufferSpeed每秒
        scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition, targethorizontalNormalizedPosition, bufferSpeed * Time.deltaTime);
    }

    public void OnToggleValueChange(bool isOn)//创建Toggle的点击翻页事件
    {
        int index = 0;//声明一个索引
        if (isOn)//如果事件点击传入的变量为True
        {
            for (int i = 0; i < toggles.Length; i++)//遍历数组中所有Toggle组件
            {
                Toggle toggle = toggles[i];
                if (toggle.isOn)//如果当前的Toggle组件的isOn属性也为True
                {
                    index = i;//将目标页的索引设为当前Toggle的在数组中的索引
                    break;//跳出循环
                }
            }
            targethorizontalNormalizedPosition = levelPages[index];//设置目标页位置
            isOn = false;//将isOn变量设置为false
        }
    }
}

将写好的代码添加至ScrollRect下

选中全部的Toggle，点击On Value Changed下方的加号，添加事件

将ScrollRect拖入，选择前面写好的代码底下的OnToggleValueChange方法

7.完成

效果入下：

结语：

第一次写教程类的博客，感觉有点杂乱无章，不过应该写的很详细了，有什么建议和问题都可以提出，我以后也会不断改正，谢谢各位！