Cocos2d-x之Menu

|   版权声明：本文为博主原创文章，未经博主允许不得转载。

cocos2d-x菜单简介：
　　菜单也是游戏开发中的重要环节，一般游戏开始的第一个画面都是游戏主菜单，这些菜单包括，开始游戏，游戏设置，关卡设置等等；Menu是菜单项的容器，用来装载各种菜单项，cocos2d-x游戏引擎中的菜单是由菜单类Menu和菜单项MenuItem来实现的。首先定义菜单项，然后用它们定义初始化菜单Menu实例，最后将Menu实例加入Layer中显示出来，菜单类还提供了alignItemsVertically和align-ItemsHorizontally等函数。tests项目中MenuTest.cpp的MenuLayer2的构造函数alignMenusH就是alignItems-Horizontally水平对齐两种方法对比 一 种是alignItemsHorizontally水平对齐，底下是alignItemsHorizontallyWithPadding 留空间水平对齐，Menu是MenuItem的一个容器，里面可以添加若干个菜单项MenuItem，MenuItem又有若干个子类，来实现不同样式的菜单，例如，文本菜单，字体菜单，图片菜单等。菜单Menu，菜单项MenuItem及其子类的UML图.

                                                        

1. MenuItemFont
　　MenuItemFont构成的菜单，这种菜单是最简单的一种菜单，只需要指定菜单项要显示的内容，字体和字号即可实现。
实例：

.h files

#ifndef _MENUITEMFONTTEST_SCENE_H_
#define _MENUITEMFONTTEST_SCENE_H_
#include "cocos2d.h"
class menuItem : public cocos2d::Layer
{
private:
	cocos2d::Size visible;
	cocos2d::Vec2 origin;
public:
	static cocos2d::Scene* createScene();
	virtual bool init();
	void Test();
	void CallBack1(Ref* sendef);
	void CallBack2(Ref* sendef);
	void CallBack3(Ref* sendef);
	CREATE_FUNC(menuItem);
};
#endif // _MENUITEMFONTTEST_SCENE_H_



.cpp files

#include "MenuItemFontTest.h"
USING_NS_CC;
Scene* menuItem::createScene()
{
	auto scene = Scene::create();
	auto layer = menuItem::create();
	scene->addChild(layer);
	return scene;
}
bool menuItem::init()
{
	if (!Layer::init())
	{
		return false;
	}
	visible = Director::getInstance()->getVisibleSize();
	origin = Director::getInstance()->getVisibleOrigin();
	this->Test();
	return true;
}
void menuItem::Test()
{
	//设置字体和大小
	MenuItemFont::setFontName("Marker Felt.ttf");
	MenuItemFont::setFontSize(24);
	auto item1 = MenuItemFont::create("Start", CC_CALLBACK_1(menuItem::CallBack1, this));
	auto item2 = MenuItemFont::create("Help", CC_CALLBACK_1(menuItem::CallBack2, this));
	auto item3 = MenuItemFont::create("Exit", CC_CALLBACK_1(menuItem::CallBack3, this));
	auto menu = Menu::create(item1, item2, item3, NULL);
	menu->setPosition(Vec2(origin.x + visible.width / 2,
		origin.y + visible.height - visible.height / 3));
	menu->alignItemsVerticallyWithPadding(5);
	this->addChild(menu);
}
void menuItem::CallBack1(Ref* sendef)
{
	CCLOG("Start...");
}
void menuItem::CallBack2(Ref* sendef)
{
	CCLOG("Help...");
}
void menuItem::CallBack3(Ref* sendef)
{
	CCLOG("Exit...");
}

MenuItemFont的一些重要函数和功能

2. MenuItemImage
　　MenuItemImage顾名思义就是图片菜单项，图片菜单项在游戏中很常用，首先准备设计好的图片，图片样式可以分为默认图片、选中图片样式等。程序员将设计好的图片加载到项目中，并实现代码：
MenuItemImage的实例化方法如下：
static MenuItemImage* MenuItemImage::create(const std::string& normalImage, const std::string& selectedImage, const ccMenuCallback& callback);
第一个参数是默认图片
第二个参数是选中图片
第三个参数是时间方法的目标对象
第四个参数是调用选择器
   
实例：

 .h files

#define _MENUITEMIMAGETEST_SCENE_H_
#include "cocos2d.h"
class ItemImage : public cocos2d::Layer
{
private:
	cocos2d::Size visible;
	cocos2d::Vec2 origin;
public:
	static cocos2d::Scene* createScene();
	virtual bool init();
	void Test();
	void CallBack1(cocos2d::Ref* sendef);
	void CallBack2(cocos2d::Ref* sendef);
	CREATE_FUNC(ItemImage);
};
#endif // _MENUITEMIMAGETEST_SCENE_H_



.cpp files

#include "MenuItemImageTest.h"
USING_NS_CC;
Scene* ItemImage::createScene()
{
	auto scene = Scene::create();
	auto layer = ItemImage::create();
	scene->addChild(layer);
	return scene;
}
bool ItemImage::init()
{
	if (!Layer::init())
	{
		return false;
	}
	visible = Director::getInstance()->getVisibleSize();
	origin = Director::getInstance()->getVisibleOrigin();
	this->Test();
	return true;
}
void ItemImage::Test()
{
	auto item1 = MenuItemImage::create("OK1.png",
		"OK2.png",
		CC_CALLBACK_1(ItemImage::CallBack1, this));
	auto item2 = MenuItemImage::create("Buy1.png",
		"Buy2.png",
		CC_CALLBACK_1(ItemImage::CallBack2, this));
	auto menu = Menu::create(item1, item2, NULL);
	menu->setPosition(Vec2(origin.x + visible.width / 2,
		origin.y + visible.height / 3));
	menu->alignItemsVerticallyWithPadding(20);
	this->addChild(menu);
}
void ItemImage::CallBack1(Ref* sendef)
{
	CCLOG("Ok...");
}
void ItemImage::CallBack2(Ref* sendef)
{
	CCLOG("Buy...");
}

MenuItemImage的一些重要函数及功能

3. MenuItemSprite
　　在上面使用MenuItemImage图片菜单项，可以做出漂亮的菜单，但是却不能实现一些特效，例如，让开始菜单闪烁，但是，cocos2d-x提供了MenuItemSprite来实现这样的功能，可以使用MenuItemSprite,该菜单项可以定义为Sprite精灵，这样就可以通过精灵来指定实现的某些特效或者动作了。

实例：

.h files

#ifndef _MENUITEMSPRITETEST_SCENE_H_
#define _MENUITEMSPRITETEST_SCENE_H_
#include "cocos2d.h"
class ItemSprite : public cocos2d::Layer
{
private:
	cocos2d::Size visible;
	cocos2d::Vec2 origin;
public:
	static cocos2d::Scene* createScene();
	virtual bool init();
	void Test();
	void CallBack1(Ref* sendef);
	void CallBack2(Ref* sendef);
	void CallBack3(Ref* sendef);
	CREATE_FUNC(ItemSprite);
};
#endif // _MENUITEMSPRITETEST_SCENE_H_



.cpp files

#include "MenuItemSpriteTest.h"
USING_NS_CC;
Scene* ItemSprite::createScene()
{
	auto scene = Scene::create();
	auto layer = ItemSprite::create();
	scene->addChild(layer);
	return scene;
}
bool ItemSprite::init()
{
	if (!Layer::init())
	{
		return false;
	}
	visible = Director::getInstance()->getVisibleSize();
	origin = Director::getInstance()->getVisibleOrigin();
	Test();
	return true;
}
void ItemSprite::Test()
{
	//第一步：创建精灵
	auto sprite1 = Sprite::create("Play.png");
	auto sprite2 = Sprite::create("Play1.png");
	auto sprite3 = Sprite::create("Help.png");
	auto sprite4 = Sprite::create("Help1.png");
	auto sprite5 = Sprite::create("About.png");
	auto sprite6 = Sprite::create("About1.png");
	//缩放精灵的大小
	/*sprite1->setScale(0.3, 0.3);
	sprite2->setScale(0.3, 0.3);
	sprite3->setScale(0.3, 0.3);
	sprite4->setScale(0.3, 0.3);
	sprite5->setScale(0.3, 0.3);
	sprite6->setScale(0.3, 0.3);*/
	//第二步：创建精灵执行的动作
	auto blink = Blink::create(1, 20);
	auto repeat1 = RepeatForever::create(blink);
	auto s = RotateBy::create(2, 360);
	auto repeat2 = RepeatForever::create(s);
	sprite1->runAction(repeat1);
	sprite3->runAction(repeat2);
	//第三步： 创建菜单项，并将精灵添加到菜单项中
	auto item1 = MenuItemSprite::create(sprite1, sprite2, CC_CALLBACK_1(ItemSprite::CallBack1, this));
	auto item2 = MenuItemSprite::create(sprite3, sprite4, CC_CALLBACK_1(ItemSprite::CallBack2, this));
	auto item3 = MenuItemSprite::create(sprite5, sprite6, CC_CALLBACK_1(ItemSprite::CallBack3, this));
	//第四步： 创建菜单，并将菜单项添加到菜单中
	auto menu = Menu::create(item1, item2, item3, NULL);
	menu->setPosition(Vec2(origin.x + visible.width / 2,
		origin.y + visible.height/3));
	//和上面的sprite1->setScale(0.3, 0.3);一样的功能；
	menu->setScale(0.3, 0.3);
	menu->setAnchorPoint(Vec2(0.02, 0));
	menu->alignItemsVerticallyWithPadding(3);
	this->addChild(menu);
}
void ItemSprite::CallBack1(Ref* sendef)
{
	CCLOG("Start Game...");
}
void ItemSprite::CallBack2(Ref* sendef)
{
	CCLOG("About Game...");
}
void ItemSprite::CallBack3(Ref* sendef)
{
	CCLOG("Help Game...");
}

一些重要的函数和功能

 4. MenuItemLabe
　　在上面的MenuItemFont来创建菜单项，这种创建方法比较的简单，但是效果也比较差。真正的游戏项目不会这样，因为这样的菜单看上去很low，而使用MenuItemLabel创建菜单项，可以为该菜单项指定一个要显示的标签，该标签可以是LabelBMFont，LabelTTF或者LabelAtlas的任意一种。

实例：

.h files

#ifndef _MENUITEMLABELTEST_SCENE_H_
#define _MENUITEMLABELTEST_SCENE_H_
#include "cocos2d.h"
class ItemLabel : public cocos2d::Layer
{
private:
	cocos2d::Size visible;
	cocos2d::Vec2 origin;
public:
	static cocos2d::Scene* createScene();
	virtual bool init();
	void CallBack1(Ref* sendef);
	void CallBack2(Ref* sendef);
	void CallBack3(Ref* sendef);
	void Test();
	CREATE_FUNC(ItemLabel);
};
#endif // _MENUITEMLABELTEST_SCENE_H_



.cpp files

#include "MenuItemLabelTest.h"
USING_NS_CC;
Scene* ItemLabel::createScene()
{
	auto scene = Scene::create();
	auto layer = ItemLabel::create();
	scene->addChild(layer);
	return scene;
}
bool ItemLabel::init()
{
	if (!Layer::init())
	{
		return false;
	}
	visible = Director::getInstance()->getVisibleSize();
	origin = Director::getInstance()->getVisibleOrigin();
	this->Test();
	return true;
}
void ItemLabel::Test()
{
	auto label1 = LabelBMFont::create("Start", "bitmapFontTest3.fnt");
	auto label2 = LabelBMFont::create("Help", "bitmapFontTest3.fnt");
	auto label3 = LabelBMFont::create("Exit", "bitmapFontTest3.fnt");
	auto item1 = MenuItemLabel::create(label1, CC_CALLBACK_1(ItemLabel::CallBack1, this));
	auto item2 = MenuItemLabel::create(label2, CC_CALLBACK_1(ItemLabel::CallBack2, this));
	auto item3 = MenuItemLabel::create(label3, CC_CALLBACK_1(ItemLabel::CallBack3, this));
	auto menu = Menu::create(item1, item2, item3, NULL);
	menu->setPosition(Vec2(origin.x + visible.width / 2,
		origin.y + visible.height / 2));
	menu->alignItemsHorizontallyWithPadding(20);
	this->addChild(menu);
}
void ItemLabel::CallBack1(Ref* sendef)
{
	CCLOG("Start...");
}
void ItemLabel::CallBack2(Ref* sendef)
{
	CCLOG("Help...");
}
void ItemLabel::CallBack3(Ref* sendef)
{
	CCLOG("Exit...");
}

一些重要的函数及功能：