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 frameprivate void Update(){PauseMenu();}private void PauseMenu(){// Toggle pause menu if escape is pressedif(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 buttonHighlightButtonForSelectedTab();}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键可以进入菜单界面。