如何用C#和MonoGame创建W/A键上下选择的垂直菜单界面？

核心逻辑很简单：所有菜单选项始终保持可见，通过上下方向输入切换选中状态，用颜色、字号或背景等视觉差异标识当前选中项。下面针对两款新手常用引擎给出具体实现步骤：

Unity 实现步骤 #

1. 搭建UI结构 #

• 在场景中创建Canvas，右键Canvas添加UI > Vertical Layout Group（命名为MenuContainer），勾选Control Child Size的Width和Height，让选项自动排列
• 给MenuContainer添加几个UI > Text（或TextMeshPro - Text）作为菜单选项，每个选项可搭配Button组件（方便绑定点击事件，也可纯用脚本控制）

2. 编写控制脚本 #

创建C#脚本VerticalMenu，挂载到MenuContainer上，代码如下：

using UnityEngine;
using UnityEngine.UI;

public class VerticalMenu : MonoBehaviour
{
    public Text[] menuOptions;
    private int currentIndex = 0;
    public Color normalColor = Color.white;
    public Color highlightColor = Color.yellow;

    void Start()
    {
        // 初始化高亮第一个选项
        UpdateHighlight();
    }

    void Update()
    {
        // 上下方向键切换选中项
        if (Input.GetKeyDown(KeyCode.DownArrow))
        {
            currentIndex = (currentIndex + 1) % menuOptions.Length;
            UpdateHighlight();
        }
        else if (Input.GetKeyDown(KeyCode.UpArrow))
        {
            currentIndex = (currentIndex - 1 + menuOptions.Length) % menuOptions.Length;
            UpdateHighlight();
        }

        // 回车键确认选中
        if (Input.GetKeyDown(KeyCode.Return))
        {
            OnSelectOption(currentIndex);
        }
    }

    // 更新高亮状态
    void UpdateHighlight()
    {
        for (int i = 0; i < menuOptions.Length; i++)
        {
            menuOptions[i].color = i == currentIndex ? highlightColor : normalColor;
            // 可选：给选中项放大字号
            // menuOptions[i].fontSize = i == currentIndex ? 24 : 20;
        }
    }

    // 选中选项后的逻辑
    void OnSelectOption(int index)
    {
        Debug.Log("选中选项：" + menuOptions[index].text);
        // 这里可以添加自定义逻辑，比如加载场景、打开设置面板等
    }
}

• 把所有菜单Text拖到脚本的menuOptions数组中
• 在Inspector面板设置normalColor和highlightColor，运行后即可用上下键切换高亮，回车键确认

Godot 实现步骤 #

1. 搭建UI结构 #

• 创建CanvasLayer，右键添加VBoxContainer（命名为MenuContainer），调整容器大小确保能放下所有选项
• 给MenuContainer添加多个Button，每个Button的子节点Label用来显示选项文字

2. 编写控制脚本 #

创建GDScriptVerticalMenu，挂载到MenuContainer上，代码如下：

extends VBoxContainer

var menu_buttons: Array[Button] = []
var current_index: int = 0
var normal_color: Color = Color.WHITE
var highlight_color: Color = Color.YELLOW

func _ready():
    // 获取所有子按钮节点
    menu_buttons = get_children() as Array[Button]
    // 初始化高亮第一个选项
    update_highlight()

func _input(event: InputEvent):
    // 用Godot预设的输入动作切换选中项
    if event.is_action_pressed("ui_down"):
        current_index = (current_index + 1) % menu_buttons.size()
        update_highlight()
    elif event.is_action_pressed("ui_up"):
        current_index = (current_index - 1 + menu_buttons.size()) % menu_buttons.size()
        update_highlight()
    // 确认选中
    elif event.is_action_pressed("ui_accept"):
        on_select_option(current_index)

// 更新高亮状态
func update_highlight():
    for i in range(menu_buttons.size()):
        var label = menu_buttons[i].get_child(0) as Label
        label.modulate = highlight_color if i == current_index else normal_color
        // 可选：给选中项添加背景
        // menu_buttons[i].custom_background = i == current_index ? highlight_bg : normal_bg
    // 让选中项自动获得焦点（可选）
    menu_buttons[current_index].grab_focus()

// 选中选项后的逻辑
func on_select_option(index: int):
    print("选中选项：", menu_buttons[index].get_child(0).text)
    // 自定义逻辑写在这里

• 运行前确保Godot的输入映射中ui_down、ui_up、ui_accept已绑定对应按键（默认上下方向键和回车键）

通用优化建议 #

• 高亮方式不止颜色：可以给选中项添加背景图片、边框、字号放大效果，只需要修改UpdateHighlight（Unity）或update_highlight（Godot）中的对应属性
• 输入适配：支持手柄的话，Unity可以在Input Manager中设置轴输入，Godot直接用预设的手柄输入动作即可
• 避免选项溢出：如果选项数量较多，确保MenuContainer的高度足够显示所有选项，不需要滚动

内容的提问来源于stack exchange，提问作者lala popotw