Learning Cocos2d-x for XNA（5）——详解Menu菜单

菜单的实现，无非就是文字或者图片。从多个实现的方法详细介绍菜单的实现效果。

就像之前介绍的CCLabel元素一样，CCLabel元素更多的时候是实现说明的作用，用于导航性的菜单，更多时候是用CCMenu。

主要的几个Menu相关的元素的继承关系。

基本上引擎实现菜单功能的几个成员都在图中。

CCMenuItemFont

创建MenuItemLabelScene和MenuItemLabelLayer类文件。

在MenuItemLabelScene中添加构造方法，方法中实现对MenuItemLabelLayer层的添加。

代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cocos2d;

namespace LearningCocos2d_xForXNA.Classes
{
    class MenuItemLabelScene:CCScene
    {
        /// <summary>
        /// 构造方法
        /// </summary>
        public MenuItemLabelScene()
        {
            CCLayer _menuItemLabelLayer = new MenuItemLabelLayer();//Layer对象
            this.addChild(_menuItemLabelLayer);//Scene中添加Layer
        }
    }
}

接着打开MenuItemLabelLayer，创建构造方法MenuItemLabelLayer（），在方法中实现菜单。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cocos2d;

namespace LearningCocos2d_xForXNA.Classes
{
    class MenuItemLabelLayer:CCLayer
    {
        public MenuItemLabelLayer()
        {
            CCMenuItemFont _menuItemFont1 = CCMenuItemFont.itemFromString("START");//添加“START”菜单按钮，未添加事件处理，点击会有错误
            _menuItemFont1.FontNameObj = "Arial";//字体纹理（Content）
            
            //中文显示时，记得添加中文字符到message.txt,上一讲中提及
            CCMenuItemFont.FontName = "Yahei";//注意，中文显示时，此句必须在下句前面，否则编译出错
            CCMenuItemFont _menuItemFont2 = CCMenuItemFont.itemFromString("开始", this, this.menuItemFont2Handle);//参数除文字外，还添加事件处理
            
            CCMenu menu = CCMenu.menuWithItems(_menuItemFont1,_menuItemFont2);//将MenuItem添加到CCMenu
            menu.alignItemsVertically();//菜单垂直排列
            this.addChild(menu);//menu添加到Layer
        }

        /// <summary>
        /// menuItemFont2点击事件处理函数
        /// </summary>
        /// <param name="sender"></param>
        public void menuItemFont2Handle(CCObject sender)
        {

        }
    }
}

在AppDelegate.cs中修改起始页面为MenuItemLabelScene（Learning Cocos2d-x for XNA（2）——深入剖析Hello World有讲解）。

编译运行，显示效果。

CCMenuItemSprite

添加三张图片至内容管道（Content）中img文件夹下

同样的方法，添加俩个类文件MenuItemSpriteScene和MenuItemSpriteLayer，增加构造方法，修改起始页面。

MenuItemSpriteScene代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cocos2d;

namespace LearningCocos2d_xForXNA.Classes
{
    class MenuItemSpriteScene:CCScene
    {
        public MenuItemSpriteScene()
        {
            CCLayer _menuItemSpriteLayer = new MenuItemSpriteLayer();
            this.addChild(_menuItemSpriteLayer);
        }
    }
}

MenuItemSpriteLayer代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cocos2d;

namespace LearningCocos2d_xForXNA.Classes
{
    class MenuItemSpriteLayer:CCLayer
    {
        /// <summary>
        /// 构造方法
        /// </summary>
        public MenuItemSpriteLayer()
        {
            CCSprite _spriteNormal1 = CCSprite.spriteWithFile("img/btn-about-normal");//正常状态下，菜单图片
            CCSprite _spriteSelected1 = CCSprite.spriteWithFile("img/btn-about-selected");//选中状态下
            CCMenuItemSprite _menuItemSprite1 = CCMenuItemSprite.itemFromNormalSprite(_spriteNormal1, _spriteSelected1, this, menuItemSprite1Handle);

            string _imgMenuSprite="img/MenuSpritePlay";
            CCSprite _spriteNormal2 = CCSprite.spriteWithFile(_imgMenuSprite, new CCRect(0, 0, 125, 42));//正常状态下，菜单图片
            CCSprite _spriteSelected2 = CCSprite.spriteWithFile(_imgMenuSprite, new CCRect(0, 42, 125, 42));//选中状态下
            CCMenuItemSprite _menuItemSprite2 = CCMenuItemSprite.itemFromNormalSprite(_spriteNormal2, _spriteSelected2, this, menuItemSprite2Handle);

            CCMenu menu = CCMenu.menuWithItems(_menuItemSprite1, _menuItemSprite2);
            menu.alignItemsHorizontally();//水平排列
            this.addChild(menu);
        }

        public void menuItemSprite1Handle(CCObject sender)
        {}

        public void menuItemSprite2Handle(CCObject sender)
        {}
    }
}

编译运行,显示效果

点击,其中一个按钮时,会切换图片按钮的状态,具有动态的感觉。

注意第二种的实现方法，两个按钮在同一张图片中，显示一个按钮。

    CCSprite _spriteNormal2 = CCSprite.spriteWithFile(_imgMenuSprite, new CCRect(0, 0, 125, 42));//正常状态下，菜单图片
    CCSprite _spriteSelected2 = CCSprite.spriteWithFile(_imgMenuSprite, new CCRect(0, 42, 125, 42));//选中状态下

当中的new CCRect()起到决定性作用，四个参数为x、y、width、high。

x，y为图片从左上角为（0，0）起始坐标点的二维坐标，width为截取的图片的宽度，high为高度。

此获取一张图片下的部分图片，会在游戏中经常用到。

CCMenuItemImage

CCMenuItemImage与CCMenuItemSprite的实现方法差不多。

MenuItemImageScene代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cocos2d;

namespace LearningCocos2d_xForXNA.Classes
{
    class MenuItemImageScene:CCScene
    {
        public MenuItemImageScene()
        {
            CCLayer _menuItemImageLayer = new MenuItemImageLayer();
            this.addChild(_menuItemImageLayer);
        }
    }
}

MenuItemImageLayer代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cocos2d;

namespace LearningCocos2d_xForXNA.Classes
{
    class MenuItemImageLayer:CCLayer
    {
        /// <summary>
        /// 构造方法
        /// </summary>
        public MenuItemImageLayer()
        {
            CCMenuItemImage _menuItemImage1 = CCMenuItemImage.itemFromNormalImage("img/btn-about-normal", "img/btn-about-selected", this, MenuItemImage1Handle);
            CCMenu menu = CCMenu.menuWithItems(_menuItemImage1);
            this.addChild(menu);
        }

        public void MenuItemImage1Handle(CCObject sender)
        { }
    }
}

运行，同样可以达到效果

CCMenuItemToggle

开关按钮，有时候，这种按钮的实现会使用户体验更好

同样创建MenuItemToggleScene和MenuItemToggleLayer两个类

MenuItemToggleScene代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cocos2d;

namespace LearningCocos2d_xForXNA.Classes
{
    class MenuItemToggleScene:CCScene
    {
        public MenuItemToggleScene()
        {
            CCLayer _menuItemToggleLayer = new MenuItemToggleLayer();
            this.addChild(_menuItemToggleLayer);
        }
    }
}

MenuItemToggleLayer

由于CCMenuItemToggle在cocos2d.menu_nodes中，所以得添加

using cocos2d.menu_nodes;

添加两张图片至内容管道（Content）下img文件夹中

常规的Toggle是文字，但也可用图片，点击切换哦。

MenuItemToggleLayer代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cocos2d;
using cocos2d.menu_nodes;

namespace LearningCocos2d_xForXNA.Classes
{
    class MenuItemToggleLayer:CCLayer
    {
        public MenuItemToggleLayer()
        {
            //文字Toggle
            CCMenuItemToggle _menuItemToggle1 = CCMenuItemToggle.itemWithTarget(this, 
                this.MenuItemToggle1Handle, 
                CCMenuItemFont.itemFromString("On"), 
                CCMenuItemFont.itemFromString("Off"));

            CCMenuItemFont.FontName="Yahei";//中文显示
            CCMenuItemToggle _menuItemToggle2 = CCMenuItemToggle.itemWithTarget(this,
                this.MenuItemToggle2Handle,
                CCMenuItemFont.itemFromString("开"),
                CCMenuItemFont.itemFromString("关"));

            //图片Toggle
            CCMenuItemToggle _menuItemToggle3 = CCMenuItemToggle.itemWithTarget(this,
                this.MenuItemToggle3Handle,
                CCMenuItemSprite.itemFromNormalSprite(CCSprite.spriteWithFile("img/bg_Sea1Mini"), CCSprite.spriteWithFile("img/bg_Sea1Mini")),
                CCMenuItemSprite.itemFromNormalSprite(CCSprite.spriteWithFile("img/bg_Sea2Mini"), CCSprite.spriteWithFile("img/bg_Sea2Mini")));

            CCMenu menu = CCMenu.menuWithItems(_menuItemToggle1, _menuItemToggle2, _menuItemToggle3);
            menu.alignItemsVertically();
            this.addChild(menu);

        }

        public void MenuItemToggle1Handle(CCObject sender)
        { }

        public void MenuItemToggle2Handle(CCObject sender)
        { }

        public void MenuItemToggle3Handle(CCObject sender)
        { }
    }
}

编译运行，开始状态

点击其中的一个，都会相应地实现切换，点击后效果

还是挺方便实用的，在其基础上，可以变化很多样式，使用户体验更好。发挥想象，打造属于自己的Menu。

本例代码下载

著作权声明：本文由http://www.cnblogs.com/suguoqiang 原创，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢！