Unity3D仿星露谷物语开发52之菜单页面

1、目标

创建菜单页面，可通过Esc键开启或关闭。

当把鼠标悬停在上面时它会高亮，然后当点击按钮时标签页会被选择。

2、 创建PauseMenuCanvas

（1）创建Canvas

在Hierarchy -> PersistentScene -> UI下创建新的Cavans命名为PauseMenuCanvas（右击 -> UI -> Canvas）。

配置组件的参数如下：

（2）创建BlackBackground

接下来创建黑色背景：

在PauseMenuCanvas下创建Image对象，重命名为BlackBackground：

Anchor Presets设置为：按住Shift + Alt，选择如下：

其他设置如下：

（3）创建PauseMenuPanel

接下来创建菜单的面板。

在PauseMenuCanvas下创建Image命名为PauseMenuPanel，其组件设置如下：

其中Anchor Presents还是Shift + Alt选择stretch + stretch。

（4）创建功能标签对象

接下来创建功能标签对象，这些对象当我们在不同类型之间切换时它们会被激活，我们会创建7种功能标签。

在PauseMenuPanel下创建新物体命名为Tab0InventoryManagement，仅设置Anchor Presents为Shift + Alt的Stretch + stretch。

复制Tab0InventoryManagement，分别创建Tab1 ~ Tab6。

然后再设置Tab1 ~ Tab6为非激活状态。

（5）创建SelectionTabImagesPanel

接下来创建标签选项按钮。

在PauseMenuPanel下创建新的Panel命名为SelectionTabImagesPanel，删除已有的组件（只保留Transform组件），其他配置如下：

在SelectionTabImagesPanel下创建Image命名为SelectionTabImage，组件配置如下：

然后复制6份如下：

（6）创建SelectionTabButtonsPanel

在PauseMenuPanel下创建新的Panel命名为SelectionTabButtonsPanel，删除已有的组件（只保留Transform组件），其他配置如下：

在SelectionTabButtonsPanel下创建Image命名为SelectionButton，组件配置如下：

给SelectionButton添加UI -> Text(Text Mesh Pro)，其组件设置如下：

SelectionButton复制6份如下：

除了保留第一个的文本内容，删除其他button的文本内容：

3、创建UIManager.cs脚本 

在Assets/Scripts/UI下创建新脚本命名为UIManager.cs。

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

public class UIManager : SingletonMonobehaviour<UIManager>
{
    private bool _pauseMenuOn = false;
    [SerializeField] private GameObject pauseMenu = null;
    [SerializeField] private GameObject[] menuTabs = null;
    [SerializeField] private Button[] menuButtons = null;

    public bool PauseMenuOn { get => _pauseMenuOn; set => _pauseMenuOn = value; }

    private void Awake()
    {
        base.Awake();

        pauseMenu.SetActive(false);
    }

    // Update is called once per frame
    private void Update()
    {
        PauseMenu();
    }

    private void PauseMenu()
    {
        // Toggle pause menu if escape is pressed

        if(Input.GetKeyDown(KeyCode.Escape))
        {
            if (PauseMenuOn)
            {
                DisablePauseMenu();
            }
            else
            {
                EnablePauseMenu();
            }
        }
    }

    private void EnablePauseMenu()
    {
        PauseMenuOn = true;
        Player.Instance.PlayerInputIsDisabled = true;
        Time.timeScale = 0;
        pauseMenu.SetActive(true);

        // Trigger garbage collector
        // 当暂停游戏时，抓住机会触发系统垃圾收集
        System.GC.Collect();

        // Highlight selected button
        HighlightButtonForSelectedTab();
    }

    private void DisablePauseMenu()
    {
        PauseMenuOn = false;
        Player.Instance.PlayerInputIsDisabled = false;
        Time.timeScale = 1;
        pauseMenu.SetActive(false);
    }

    private void HighlightButtonForSelectedTab()
    {
        for(int i = 0; i < menuTabs.Length; i++)
        {
            if (menuTabs[i].activeSelf)
            {
                SetButtonColorToActive(menuButtons[i]);
            }
            else
            {
                SetButtonColorToInactive(menuButtons[i]);
            }
        }
    }

    private void SetButtonColorToActive(Button button)
    {
        ColorBlock colors = button.colors;
        colors.normalColor = colors.pressedColor;
        button.colors = colors;
    }

    private void SetButtonColorToInactive(Button button)
    {
        ColorBlock colors = button.colors;
        colors.normalColor = colors.disabledColor;
        button.colors = colors;
    }

    // 该函数放在SelectionButton的onClick事件中
    private void SwitchPauseMenuTab(int tabNum)
    {
        for(int i = 0; i < menuTabs.Length; i++)
        {
            if(i != tabNum)
            {
                menuTabs[i].SetActive(false);
            }
            else
            {
                menuTabs[i].SetActive(true);
            }
        }

        HighlightButtonForSelectedTab();
    }


}

4、配置UI对象

给UI对象添加UIManger组件，其他配置如下：

配置SelectionButton对象：

第1个SelectionButton的入参刚好是0，对于第2个SelectionButton(1)，其配置如下：

依次配置其他SelectionButton。

5、运行游戏

游戏过程中，按Esc键可以进入菜单界面。