如何用cocos2d制作游戏菜单：内置Menu系统完全指南（含按键事件处理）-平芜编程栈

如何用cocos2d制作游戏菜单：内置Menu系统完全指南（含按键事件处理）

【免费下载链接】cocosgraphic library for games and multimedia, for python language on PC-like hardware项目地址: https://gitcode.com/gh_mirrors/coco/cocos

cocos2d（Python 版）内置的Menu系统，是制作游戏菜单、设置界面和选项面板的最快方式。它提供 6 种现成菜单项（文本、开关、多选、输入框、图片、颜色），并自动处理上下键切换、Enter 激活、Esc 退出、鼠标悬停与点击等按键事件，还自带缩放、摇晃等动画效果。本文带你从零创建一个可交互的游戏主菜单，并深入讲解事件处理机制与布局定制技巧。

快速开始：10 行代码做出第一个菜单 🚀

cocos2d 的核心思路是：所有可视对象都是CocosNode的后代，菜单本身就是一个Layer，你只需继承Menu→ 在__init__里配置样式 → 调用create_menu()→ 把菜单放进Scene交给director运行。

菜单源码位于 cocos/menu.py，参考示例见 test/test_menu_centered.py：

from cocos.director import director from cocos.scene import Scene from cocos.menu import Menu, MenuItem, zoom_in, zoom_out class MainMenu(Menu): def __init__(self): super(MainMenu, self).__init__('My Game') # 菜单标题 items = [ MenuItem('Start', self.on_start), MenuItem('Options', self.on_options), MenuItem('Quit', self.on_quit), ] # 选中时放大，失焦时缩回 self.create_menu(items, selected_effect=zoom_in(), unselected_effect=zoom_out()) def on_start(self): print('start game!') def on_options(self): print('show options!') def on_quit(self): import pyglet pyglet.app.exit() if __name__ == '__main__': director.init(resizable=True) director.run(Scene(MainMenu()))

运行后按↑/↓ 切换焦点、Enter 激活、Esc 退出，鼠标移动也能切换焦点——这些都不用你写一行代码，Menu已经替你处理好了。

认识 6 种内置菜单项

Menu内部会自动做布局、管理焦点、在焦点变化时播放动画。真正干活的是菜单项，全部在 cocos/menu.py 中定义：

菜单项	作用	适合场景
`MenuItem`	显示文本，激活时触发回调	开始、退出按钮
`ToggleMenuItem`	开关项，在 OFF/ON 间切换	声音、FPS 显示
`MultipleMenuItem`	循环切换一组预设值	音量档位、分辨率选择
`EntryMenuItem`	文本输入框，支持 Backspace 与长度限制	玩家昵称
`ImageMenuItem`	用一张图片作为按钮	美术风格化按钮
`ColorMenuItem`	循环选择颜色并实时预览色块	自定义配色

一个混合使用的例子（摘自 test/test_menu_items.py）：

items = [ ToggleMenuItem('Show FPS: ', self.on_show_fps, True), MultipleMenuItem('Resolution: ', self.on_resolution, ['640x480', '800x600', '1024x768']), EntryMenuItem('Name: ', self.on_name, 'player', max_length=8), ImageMenuItem('imagemenuitem.png', self.on_image), ColorMenuItem('Color: ', self.on_color, [(255,255,255), (129,255,100), (50,50,100)]), ] self.create_menu(items)

按键事件处理机制全解析 ⌨️

这是Menu最值钱的内置能力。看 cocos/menu.py 中on_key_press的实现逻辑：

Esc→ 调用on_quit()退出程序；
Enter / 小键盘 Enter→ 激活当前焦点项：先播放activated_effect，再触发该菜单项的on_key_press，最终执行你传入的回调函数；
↑ / ↓→ 移动焦点，并且首尾循环（第一项再往上会跳到最后一项）；切换焦点时播放select_sound音效（若配置了的话）；
其它按键→ 原样转发给当前焦点的菜单项，例如MultipleMenuItem用 ←/→ 循环取值、EntryMenuItem用 Backspace 删字符。

鼠标事件同样内置：

鼠标移动（on_mouse_motion）→ 检测哪个菜单项被悬停，自动切换焦点；
鼠标松开（on_mouse_release）→ 若点击落在焦点项的包围盒内，就激活该项。

菜单项自身基于CocosNode，所以每个菜单项天然支持position、scale、rotation等变换属性，也能do()动作，为后面的样式定制打下基础。

布局与样式定制：让菜单更好看 🎨

三种布局方式

默认垂直布局：通过menu_halign/menu_valign控制对齐，取值CENTER、LEFT、RIGHT、TOP、BOTTOM，边距用menu_hmargin/menu_vmargin调整。例如左上角菜单（参考 test/test_menu_top_left.py）：

self.menu_valign = TOP self.menu_halign = LEFT

固定坐标布局：用fixedPositionMenuLayout(坐标列表)把每个菜单项放到任意位置，适合做不规则的界面排布，例如把按钮做成旋转/缩放的趣味样式（参考 test/test_menu_fixed_position.py 与 test/test_menu_rotated.py）：

item1.rotation = 45 # 菜单项是 CocosNode，可以自由变换 self.create_menu(items, layout_strategy=fixedPositionMenuLayout( [(450, 300), (130, 200), (200, 100), (400, 50)]))

字体与标题

三个字典控制全部外观（在create_menu前修改即可）：

font_title：标题文字，默认 56 号字；
font_item：普通状态字体，默认 32 号、灰色；
font_item_selected：焦点状态字体，默认 42 号、白色——焦点项会自动放大变白。

内置动画效果

菜单模块还导出 4 个现成动画（cocos/menu.py）：zoom_in()、zoom_out()（0.2 秒缩放）、shake()（轻微抖动）、shake_back()（回正）。把它们传给create_menu的三个效果参数即可：

self.create_menu(items, selected_effect=shake(), unselected_effect=shake_back())

实战：把菜单接入你的游戏 🎮

真实项目里菜单是流程的一部分。典型做法：主菜单是一个Scene，点击「开始」后把场景切换成游戏场景（参考 samples/hello_world.py 的场景创建方式）：

class GameScene(Scene): def __init__(self): Scene.__init__(self) # ... 添加你的游戏层、精灵、标签 ... class MainMenu(Menu): def __init__(self): super(MainMenu, self).__init__('cocos2d Game') items = [MenuItem('Start', self.on_start), MenuItem('Quit', self.on_quit)] self.create_menu(items, zoom_in(), zoom_out()) def on_start(self): director.push(GameScene()) # 切换到游戏场景 def on_quit(self): import pyglet pyglet.app.exit()

两个进阶提示：

多层级菜单：由于Menu本质是Layer，可以像 cocosnodes.txt 中描述的MultiplexLayer那样，在同一个场景里只显示其中一个菜单层，实现「主菜单 / 设置菜单 / 关卡选择」的自由切换；
场景切换时加转场：用cocos.scenes.transitions里的现成转场类（淡入、滑动、翻转等），让菜单和游戏之间的切换更加顺滑。