UGUI 实战一（下篇）：UI全方位开发教程（含原素材以及源码）

一·前言

二·最终效果

三·详细实现步骤

1.开发物品面板的切换

8.通过按钮切换页面（本质是一组单选按钮）

9.开发任务列表背景和任务项

四·结语

一·前言

本文将深入且全面地介绍如何运用 UGUI 开发一个功能完备的游戏界面，内容涵盖开始界面、设置按钮、开发者头像面板、血条、技能冷却效果、各类面板以及背包选项卡等丰富功能。通过逐步讲解，希望能帮助大家熟练掌握 UGUI 的使用技巧，为打造优质的游戏界面奠定坚实基础。

二·最终效果

ui案例下

三·详细实现步骤

接着上篇文章：素材在下面链接

UGUI 实战一（上篇）：UI全方位开发教程（含原素材以及源码

1.开发物品面板的切换

（1）创建空物体Panel1，Panel2，Panel3，分别再创建一个子物体image，并拖入物品素材

（2）分别把对应的物品拖入到响应的物品栏里面

（3）将image1和image2的启动全部关闭，image3打开（因为默认任务栏是打开的）

（4）效果如下

2.使用网格布局设计物品格子

（1）在Panel3下删除image，创建一个空物体（Grid），挂载一个Gird Layout Group组件

（2）创建image 添加素材，修改名字为Items

（3）在items下创建image，命名为ico，拖入物品素材

（4）创建一个空物体Distance（后面我修改为Grid-item），然后作为Items的父物体，扩大范围（作为物品间距）

（5）然后把Grid-item放到Grid的子物体，然后复制，可以通过参数进行调节网格布局大小情况

（6）如图

（7）创建分页显示，创建一个image，然后创建Text作为页数显示，上下左右居中

（8）再添加image组件，然后利用scale x=-1，修改图片指向

（9）删除Panel1和panel2 下的image，然后把panel3下的所有子物体打包复制到其中下面

（10）修改Panel2图标

（11）修改Panel1图标

3.设计关卡选择界面

（1）创建新的场景，然后复制2中的部分素材，修改标题名称

4.设计关卡按钮和锁关按钮

（1）创建一个关卡素材和三个星星素材以及一个文本显示素材作为已经通关的关卡

（2）复制（1）删除星星素材和文字素材，导入一个素材调成黑色作为mask遮罩，然后添加一个锁的素材

（3）各自创建一个空物体作为父物体，作为后期网格处理的边界控制

5.设计关卡的网格列表

（1）创建一个空物体，拖动范围关卡，然后添加一个Grid Layout Group

（2）然后把创建的关卡全部作为其子物体，然后复制，调节网格参数，如图

（3）扩大关卡长度，然后选择垂直排列Vertical

(4)复制多数关卡

6.让关卡列表滚动起来

（1）创建一个空物体，ScrollRect。整个Grid放到其中为子物体，添加一个scrollrect组件

（2）只能水平移动

（3）添加image组件，调整大小（作为触碰区域）

（4）修改透明度为0（全透明）

（5）透明度调回255，增加一个mask组件，调整如下参数

（6）完成如下

7.控制滑动列表到最近的页面

（1）在ScrollRect下创建一个脚本LevelScrollRect

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

public class LevelScrollRect : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{
    private ScrollRect scroll;

    private float[] pagePosition = new float[3] { 0, 0.5f, 1 };

    public Toggle[] toggleArray;

    private float targetPosition = 0;
    private bool isMoving = false;
    private float speed = 7;

    // Start is called before the first frame update
    void Start()
    {
        scroll = GetComponent<ScrollRect>();
    }

    // Update is called once per frame
    void Update()
    {
        if (isMoving)
        {
            scroll.horizontalNormalizedPosition = Mathf.Lerp(scroll.horizontalNormalizedPosition, targetPosition, Time.deltaTime * speed);
            if (Mathf.Abs(scroll.horizontalNormalizedPosition - targetPosition) < 0.001f)
            {
                isMoving = false;
                scroll.horizontalNormalizedPosition = targetPosition;
            }
        }
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        float currentPosition = scroll.horizontalNormalizedPosition;
        int index = 0;
        float offset = currentPosition - pagePosition[0];
        // 修改循环条件，避免数组越界
        for (int i = 1; i < pagePosition.Length; i++)
        {
            if (Mathf.Abs(currentPosition - pagePosition[i]) < offset)
            {
                index = i;
                offset = Mathf.Abs(currentPosition - pagePosition[i]);
            }
        }

        targetPosition = pagePosition[index];
        isMoving = true;

        // 检查 index 是否在 toggleArray 数组的有效范围内
        if (index < toggleArray.Length)
        {
            toggleArray[index].isOn = true;
        }
    }

    public void MoveToPage1(bool isOn)
    {
        if (isOn)
        {
            isMoving = true;
            targetPosition = pagePosition[0];
        }
    }
    public void MoveToPage2(bool isOn)
    {
        if (isOn)
        {
            isMoving = true;
            targetPosition = pagePosition[1];
        }
    }
    public void MoveToPage3(bool isOn)
    {
        if (isOn)
        {
            isMoving = true;
            targetPosition = pagePosition[2];
        }
    }
    // 移除多余的 MoveToPage4 方法
}