999合1超级简易文字菜单组件

news2025/2/25 13:41:25

贪吃蛇掌机经典小游戏录屏

引言

超级简易文字菜单组件

大家好，相信大家都玩过那个999合1的游戏，特别是那个菜单。

在游戏开发中，往往会有形式各异的游戏菜单，游戏菜单和菜单一样主要是给玩家选择开始游戏、设置、排行榜等功能的。

本文将分享一下笔者在游戏开发中用到的超级简易文字菜单组件。

本文源工程可在文末阅读原文获取，小伙伴们自行前往。

1.需求分析

一般游戏菜单组件会包含以下的一些功能：

菜单的展示效果。
菜单的选择效果。
菜单的跳转效果。
菜单的自定义。

下面一起来实现超级简易文字菜单组件

2.超级简易文字菜单组件

1.环境

引擎版本：Cocos Creator 3.8.1

编程语言：TypeScript

2.资源准备

由于是非常简易的文字菜单，本次节目只需要简单的摆一下盘即可，不需要额外的资源。

UI布局。

添加Layout组件以及挂载我们的SuperEasyMenuImpl组件。

设置Label左对齐。

下面一起来写代码。

3.编写代码

首先我们创建一个SuperEasyMenu组件。它的组成如下：

初始化，在start方法中监听键盘事件，控制菜单的选择。

@ccclass('SuperEasyMenu')
export class SuperEasyMenu extends Component {

    private curMenu: MenuItem[] = [];
    private lastMenu: MenuItem[] = [];
    private menuLabels: Label[] = [];
    private curSelect: number;

    start() {
        this.menuLabels.push(...this.node.getComponentsInChildren(Label));

        input.on(Input.EventType.KEY_DOWN, event => {
            if (event.keyCode == KeyCode.ENTER || event.keyCode == KeyCode.SPACE) {
                this.selectMenu();
            }
            else if (event.keyCode == KeyCode.ARROW_UP || event.keyCode == KeyCode.KEY_W) {
                this.CurSelect = this.CurSelect - 1;
            }
            else if (event.keyCode == KeyCode.ARROW_DOWN || event.keyCode == KeyCode.KEY_S) {
                this.CurSelect = this.CurSelect + 1;
            }
        })
    }
}

设置当前菜单，更新菜单显示，默认选择第一个菜单项，lastMenu保存上一个菜单用于返回。

public setCurMenu(menu) {
    this.lastMenu = this.curMenu;
    this.curMenu = menu;
    for (var i = 0; i < this.curMenu.length; i++) {
        this.menuLabels[i].string = this.curMenu[i].name;
    }
    for (var i = this.curMenu.length; i < this.menuLabels.length; i++) {
        this.menuLabels[i].string = "";
    }
    this.CurSelect = 0;
}

public toLastMenu() {
    this.setCurMenu(this.lastMenu);
}

菜单的选择，菜单的选择主要用属性curSelect驱动，并实现一下选择效果。

public set CurSelect(select: number) {
    if (select >= 0 && select < this.curMenu.length) {
        this.curSelect = select;
        for (let i = 0; i < this.curMenu.length; i++) {
            this.menuLabels[i].string = (select == i ? "★ " : "    ") + this.curMenu[i].name;
        }
    }
}

public get CurSelect(): number {
    return this.curSelect;
}

确认选择，具体生效的我们的选择。

public selectMenu() {
    if (this.curMenu.length > 0 && this.curMenu[this.CurSelect].func) {
        this.curMenu[this.CurSelect].func.call(this);
    }
}

自定义菜单，创建SuperEasyMenuImpl组件继承SuperEasyMenu组件，用于定制菜单以及跳转。

import { _decorator } from 'cc';
import { MenuItem, SuperEasyMenu } from './SuperEasyMenu';
const { ccclass } = _decorator;

@ccclass('SuperEasyMenuImpl')
export class SuperEasyMenuImpl extends SuperEasyMenu {

    private toGameMenu: MenuItem[] = [
        new MenuItem("填色之旅", () => { }),
        new MenuItem("重力迷宫球", () => { }),
        new MenuItem("贪吃蛇掌机", () => { }),
        new MenuItem("返回", () => { this.toLastMenu() })
    ];

    private mainMenu: MenuItem[] = [
        new MenuItem("开始游戏", () => { this.setCurMenu(this.gameMenu) }),
        new MenuItem("排行榜", () => { this.setCurMenu(this.rankMenu) }),
        new MenuItem("分享快乐", () => { }),
        new MenuItem("更多游戏", () => { this.setCurMenu(this.toGameMenu) })
    ];

    private gameMenu: MenuItem[] = [
        new MenuItem("游戏暂停", () => { this.setCurMenu(this.pauseMenu) }),
        new MenuItem("游戏结束", () => { this.setCurMenu(this.gameoverMenu) }),
        new MenuItem("返回", () => { this.toLastMenu() })
    ];

    private pauseMenu: MenuItem[] = [
        new MenuItem("继续游戏", () => { this.toLastMenu() }),
        new MenuItem("重新开始", () => { this.setCurMenu(this.gameMenu) }),
        new MenuItem("返回主页", () => { this.setCurMenu(this.mainMenu) }),
    ];

    private gameoverMenu: MenuItem[] = [
        new MenuItem("视频复活", () => { }),
        new MenuItem("重新开始", () => { this.setCurMenu(this.gameMenu) }),
        new MenuItem("排行榜", () => { this.setCurMenu(this.rankMenu) }),
        new MenuItem("晒一晒", () => { }),
        new MenuItem("返回主页", () => { this.setCurMenu(this.mainMenu) }),
    ];

    private rankMenu: MenuItem[] = [
        new MenuItem("好友排行", () => { }),
        new MenuItem("世界排行", () => { }),
        new MenuItem("返回", () => { this.toLastMenu() })
    ];

    start() {
        super.start();
        this.setCurMenu(this.mainMenu);
    }
}