【Cocos2d-x游戏引擎开发笔记(3)】在屏幕上渲染菜单并添加消息响应

本文介绍如何使用 Cocos2d-x 在游戏中创建美观且实用的菜单,包括背景设置、标题添加及不同类型的菜单项实现,如 CCMenuItemImage 和 CCMenuItemToggle 的使用方法。

上一讲介绍了渲染文字,这次介绍在屏幕上渲染菜单,还是先看看我做出的效果吧:

 

这个效果还不错吧。图片都是解压《捕鱼达人》,然后自己ps得到的。

 

 

首先将屏幕大小设置为480x320

 

  1. eglView->setFrameSize(480, 320);//设置界面大小  
eglView->setFrameSize(480, 320);//设置界面大小


 

  1. CCSprite *spritebg=CCSprite::create("bg.jpg");   //通过图片创建精灵   
  2. CCSize size=CCDirector::sharedDirector()->getWinSize();//获取屏幕大小   
  3.   
  4. spritebg->setPosition(ccp(size.width/2,size.height/2));//将精灵的锚点设为屏幕的中间   
  5. addChild(spritebg,0);         //将精灵添加到最底层,作为背景  
		CCSprite *spritebg=CCSprite::create("bg.jpg");   //通过图片创建精灵
		CCSize size=CCDirector::sharedDirector()->getWinSize();//获取屏幕大小

		spritebg->setPosition(ccp(size.width/2,size.height/2));//将精灵的锚点设为屏幕的中间
		addChild(spritebg,0);         //将精灵添加到最底层,作为背景


背景图片通过精灵来实现,效果如下

 

接着添加添加标题,和背景一样,不过要注意,添加在背景的上面

  1. CCSprite *spritetile=CCSprite::create("tile.png");  
  2. CCSize s=spritetile->getContentSize();  
  3. spritetile->setPosition(ccp(size.width/2,size.height-s.height/2));  
  4. addChild(spritetile,1);//添加到第二层  
		CCSprite *spritetile=CCSprite::create("tile.png");
		CCSize s=spritetile->getContentSize();
		spritetile->setPosition(ccp(size.width/2,size.height-s.height/2));
		addChild(spritetile,1);//添加到第二层


效果如下:

 

接下来

  1. CCMenuItemImage *start=CCMenuItemImage::create("start1.png",//正常状态的图片   
  2.             "start2.png",//按下去时的图片   
  3.             this,  
  4.             menu_selector(HelloWorld::startGame));  
  5.         //当这个菜单项被按下的时候的回调函数,   
  6.         //该函数设置为这个类的成员函数,返回值为void   
  7.         //参数为CCObject*   
  8.         CCSize startSize=start->getContentSize();//获取该菜单项的大小   
  9.   
  10.         CCMenuItemImage *select=CCMenuItemImage::create("select1.png",  
  11.             "select2.png",  
  12.             this,//回调函数所在的类                                                             menu_selector(HelloWorld::selectGame));   
  13.   
  14.         CCSize selectSize=select->getContentSize();  
  15.         start->setPosition(ccp(0,(size.height-s.height)/2));  
  16.         //设置该菜单项在菜单中的位置,   
  17.         //若不设置,则该菜单项的锚点与菜单的锚点相同   
  18.   
  19.         select->setPosition(ccp(0,((size.height-s.height)/2-startSize.height/2)/2));  
  20.   
  21.         CCMenu *menu=CCMenu::create(start,select,NULL);//创建菜单,并将两个菜单项传入   
  22.           
  23.   
  24.         menu->setPosition(ccp(size.width/2,0));//设置菜单的位置,若不设置则为屏幕的正中间   
  25.         addChild(menu,1);  
CCMenuItemImage *start=CCMenuItemImage::create("start1.png",//正常状态的图片
			"start2.png",//按下去时的图片
			this,
			menu_selector(HelloWorld::startGame));
		//当这个菜单项被按下的时候的回调函数,
		//该函数设置为这个类的成员函数,返回值为void
		//参数为CCObject*
		CCSize startSize=start->getContentSize();//获取该菜单项的大小

		CCMenuItemImage *select=CCMenuItemImage::create("select1.png",
			"select2.png",
			this,//回调函数所在的类                                                    			menu_selector(HelloWorld::selectGame));

		CCSize selectSize=select->getContentSize();
		start->setPosition(ccp(0,(size.height-s.height)/2));
		//设置该菜单项在菜单中的位置,
		//若不设置,则该菜单项的锚点与菜单的锚点相同

		select->setPosition(ccp(0,((size.height-s.height)/2-startSize.height/2)/2));

		CCMenu *menu=CCMenu::create(start,select,NULL);//创建菜单,并将两个菜单项传入
		

		menu->setPosition(ccp(size.width/2,0));//设置菜单的位置,若不设置则为屏幕的正中间
		addChild(menu,1);


 


这里创建两个菜单项,并加入到菜单中。回调函数先在头文件中声明,在源文件中实现

  1. void HelloWorld::startGame(CCObject* pSender)  
  2. {  
  3.     CCLog("startGame");  
  4. }  
void HelloWorld::startGame(CCObject* pSender)
{
	CCLog("startGame");
}


CCLog();在输出打印字符串。现在的效果如下:

 

然后左边的两个也一样,这里就不多说了,最后把代码贴上来。

 

下面要说的是CCMenuToggle菜单,这个菜单点一下编成另外一个菜单

  1. CCMenuItemFont *oon=CCMenuItemFont::create("on",this,menu_selector(HelloWorld::oonGame));  
  2. //新建一个文字菜单   
  3. CCMenuItemFont *ooff=CCMenuItemFont::create("off",this,menu_selector(HelloWorld::ooffGame));  
  4. //再来一个   
  5. CCMenuItemToggle *toggle=CCMenuItemToggle::itemWithTarget(this,//回调函数所在的类   
  6.     menu_selector(HelloWorld::toggleGame),//回调函数   
  7.     oon,ooff,NULL    //添加的菜单   
  8.     );  
  9. toggle->setPosition(ccp(50,0));  
  10.   
  11. CCMenuItemFont *Go=CCMenuItemFont::create("GO",this,menu_selector(HelloWorld::LetsGo));//这种菜单就不说了   
  12. Go->setPosition(ccp(70,80));  
  13.   
  14. CCMenu *lastMenu=CCMenu::create(toggle,Go,NULL);  
  15. lastMenu->setPosition(ccp(50,50));  
  16. addChild(lastMenu,2);  
		CCMenuItemFont *oon=CCMenuItemFont::create("on",this,menu_selector(HelloWorld::oonGame));
		//新建一个文字菜单
		CCMenuItemFont *ooff=CCMenuItemFont::create("off",this,menu_selector(HelloWorld::ooffGame));
		//再来一个
		CCMenuItemToggle *toggle=CCMenuItemToggle::itemWithTarget(this,//回调函数所在的类
			menu_selector(HelloWorld::toggleGame),//回调函数
			oon,ooff,NULL    //添加的菜单
			);
		toggle->setPosition(ccp(50,0));

		CCMenuItemFont *Go=CCMenuItemFont::create("GO",this,menu_selector(HelloWorld::LetsGo));//这种菜单就不说了
		Go->setPosition(ccp(70,80));

		CCMenu *lastMenu=CCMenu::create(toggle,Go,NULL);
		lastMenu->setPosition(ccp(50,50));
		addChild(lastMenu,2);

 

这时候显示的是“on”

这时候显示的是“off”

注意:点击CCMenuItemToggle的时候,回调的函数是CCMenuItemToggle的回调函数。

最后当然是贴出代码,下面是init中的全部代码:

  1. bool HelloWorld::init()  
  2. {  
  3.     bool bRet = false;  
  4.     do   
  5.     {  
  6.   
  7.         CC_BREAK_IF(! CCLayer::init());  
  8.   
  9.           
  10.         CCSprite *spritebg=CCSprite::create("bg.jpg");   //通过图片创建精灵   
  11.         CCSize size=CCDirector::sharedDirector()->getWinSize();//获取屏幕大小   
  12.   
  13.         spritebg->setPosition(ccp(size.width/2,size.height/2));//将精灵的锚点设为屏幕的中间   
  14.         addChild(spritebg,0);         //将精灵添加到最底层,作为背景   
  15.   
  16.           
  17.         CCSprite *spritetile=CCSprite::create("tile.png");  
  18.         CCSize s=spritetile->getContentSize();  
  19.         spritetile->setPosition(ccp(size.width/2,size.height-s.height/2));  
  20.         addChild(spritetile,1);  
  21.   
  22.           
  23.   
  24.         CCMenuItemImage *start=CCMenuItemImage::create("start1.png",//正常状态的图片   
  25.             "start2.png",//按下去时的图片   
  26.             this,//回调函数所在的类   
  27.   
  28.             menu_selector(HelloWorld::startGame));  
  29.         //当这个菜单项被按下的时候的回调函数,   
  30.         //该函数设置为这个类的成员函数,返回值为void   
  31.         //参数为CCObject*   
  32.         CCSize startSize=start->getContentSize();//获取该菜单项的大小   
  33.   
  34.         CCMenuItemImage *select=CCMenuItemImage::create("select1.png",  
  35.             "select2.png",  
  36.             this,  
  37.             menu_selector(HelloWorld::selectGame));  
  38.   
  39.         CCSize selectSize=select->getContentSize();  
  40.         start->setPosition(ccp(0,(size.height-s.height)/2));  
  41.         //设置该菜单项在菜单中的位置,   
  42.         //若不设置,则该菜单项的锚点与菜单的锚点相同   
  43.   
  44.         select->setPosition(ccp(0,((size.height-s.height)/2-startSize.height/2)/2));  
  45.   
  46.         CCMenu *menu=CCMenu::create(start,select,NULL);//创建菜单,并将两个菜单项传入   
  47.           
  48.   
  49.         menu->setPosition(ccp(size.width/2,0));//设置菜单的位置,若不设置则为屏幕的正中间   
  50.         addChild(menu,1);  
  51.   
  52.           
  53.           
  54.         CCMenuItemImage *question=CCMenuItemImage::create("wh1.png","wh2.png",  
  55.             this,menu_selector(HelloWorld::questionGame));  
  56.         CCSize qSize=question->getContentSize();  
  57.         question->setPosition(ccp(0,qSize.height+20));  
  58.         CCMenuItemImage *settings=CCMenuItemImage::create("sz1.png","sz2.png",  
  59.             this,menu_selector(HelloWorld::settingGame));  
  60.   
  61.         CCMenu *m=CCMenu::create(question,settings,NULL);  
  62.           
  63.         m->setPosition(ccp(qSize.width,qSize.height));  
  64.         addChild(m,1);  
  65.   
  66.   
  67.   
  68.   
  69.         CCMenuItemFont *oon=CCMenuItemFont::create("on",this,menu_selector(HelloWorld::oonGame));  
  70.         //新建一个文字菜单   
  71.         CCMenuItemFont *ooff=CCMenuItemFont::create("off",this,menu_selector(HelloWorld::ooffGame));  
  72.         //再来一个   
  73.         CCMenuItemToggle *toggle=CCMenuItemToggle::itemWithTarget(this,//回调函数所在的类   
  74.             menu_selector(HelloWorld::toggleGame),//回调函数   
  75.             oon,ooff,NULL    //添加的菜单   
  76.             );  
  77.         toggle->setPosition(ccp(50,0));  
  78.   
  79.         CCMenuItemFont *Go=CCMenuItemFont::create("GO",this,menu_selector(HelloWorld::LetsGo));  
  80.         Go->setPosition(ccp(70,80));  
  81.   
  82.         CCMenu *lastMenu=CCMenu::create(toggle,Go,NULL);  
  83.         lastMenu->setPosition(ccp(50,50));  
  84.         addChild(lastMenu,2);  
  85.   
  86.   
  87.   
  88.         bRet = true;  
  89.     } while (0);  
  90.   
  91.     return bRet;  
  92. }  
bool HelloWorld::init()
{
    bool bRet = false;
    do 
    {

        CC_BREAK_IF(! CCLayer::init());

        
		CCSprite *spritebg=CCSprite::create("bg.jpg");   //通过图片创建精灵
		CCSize size=CCDirector::sharedDirector()->getWinSize();//获取屏幕大小

		spritebg->setPosition(ccp(size.width/2,size.height/2));//将精灵的锚点设为屏幕的中间
		addChild(spritebg,0);         //将精灵添加到最底层,作为背景

		
		CCSprite *spritetile=CCSprite::create("tile.png");
		CCSize s=spritetile->getContentSize();
		spritetile->setPosition(ccp(size.width/2,size.height-s.height/2));
		addChild(spritetile,1);

		

		CCMenuItemImage *start=CCMenuItemImage::create("start1.png",//正常状态的图片
			"start2.png",//按下去时的图片
			this,//回调函数所在的类

			menu_selector(HelloWorld::startGame));
		//当这个菜单项被按下的时候的回调函数,
		//该函数设置为这个类的成员函数,返回值为void
		//参数为CCObject*
		CCSize startSize=start->getContentSize();//获取该菜单项的大小

		CCMenuItemImage *select=CCMenuItemImage::create("select1.png",
			"select2.png",
			this,
			menu_selector(HelloWorld::selectGame));

		CCSize selectSize=select->getContentSize();
		start->setPosition(ccp(0,(size.height-s.height)/2));
		//设置该菜单项在菜单中的位置,
		//若不设置,则该菜单项的锚点与菜单的锚点相同

		select->setPosition(ccp(0,((size.height-s.height)/2-startSize.height/2)/2));

		CCMenu *menu=CCMenu::create(start,select,NULL);//创建菜单,并将两个菜单项传入
		

		menu->setPosition(ccp(size.width/2,0));//设置菜单的位置,若不设置则为屏幕的正中间
		addChild(menu,1);

		
		
		CCMenuItemImage *question=CCMenuItemImage::create("wh1.png","wh2.png",
			this,menu_selector(HelloWorld::questionGame));
		CCSize qSize=question->getContentSize();
		question->setPosition(ccp(0,qSize.height+20));
		CCMenuItemImage *settings=CCMenuItemImage::create("sz1.png","sz2.png",
			this,menu_selector(HelloWorld::settingGame));

		CCMenu *m=CCMenu::create(question,settings,NULL);
		
		m->setPosition(ccp(qSize.width,qSize.height));
		addChild(m,1);




		CCMenuItemFont *oon=CCMenuItemFont::create("on",this,menu_selector(HelloWorld::oonGame));
		//新建一个文字菜单
		CCMenuItemFont *ooff=CCMenuItemFont::create("off",this,menu_selector(HelloWorld::ooffGame));
		//再来一个
		CCMenuItemToggle *toggle=CCMenuItemToggle::itemWithTarget(this,//回调函数所在的类
			menu_selector(HelloWorld::toggleGame),//回调函数
			oon,ooff,NULL    //添加的菜单
			);
		toggle->setPosition(ccp(50,0));

		CCMenuItemFont *Go=CCMenuItemFont::create("GO",this,menu_selector(HelloWorld::LetsGo));
		Go->setPosition(ccp(70,80));

		CCMenu *lastMenu=CCMenu::create(toggle,Go,NULL);
		lastMenu->setPosition(ccp(50,50));
		addChild(lastMenu,2);



        bRet = true;
    } while (0);

    return bRet;
}


 下面是所有的回调函数:

  1. void HelloWorld::startGame(CCObject* pSender)  
  2. {  
  3.     CCLog("startGame");  
  4. }  
  5.   
  6. void HelloWorld::selectGame(CCObject* pSender)  
  7. {  
  8.     CCLog("selectGame");  
  9. }  
  10.   
  11. void HelloWorld::settingGame(CCObject* pSender)  
  12. {  
  13.     CCLog("settingGame");  
  14. }  
  15.   
  16. void HelloWorld::questionGame(CCObject* pSender)  
  17. {  
  18.     CCLog("questionGame");  
  19. }  
  20.   
  21.   
  22. void HelloWorld::oonGame(CCObject* pSender)  
  23. {  
  24.     CCLog("oonGame");  
  25. }  
  26.   
  27. void HelloWorld::ooffGame(CCObject* pSender)  
  28. {  
  29.     CCLog("ooffGame");  
  30.   
  31. }  
  32.   
  33. void HelloWorld::toggleGame(CCObject* pSender)  
  34. {  
  35.     CCLog("toggleGame");  
  36. }  
  37.   
  38. void HelloWorld::LetsGo(CCObject* pSender)  
  39. {  
  40.     CCLog("LetsGo");  
  41. }  
void HelloWorld::startGame(CCObject* pSender)
{
	CCLog("startGame");
}

void HelloWorld::selectGame(CCObject* pSender)
{
	CCLog("selectGame");
}

void HelloWorld::settingGame(CCObject* pSender)
{
	CCLog("settingGame");
}

void HelloWorld::questionGame(CCObject* pSender)
{
	CCLog("questionGame");
}


void HelloWorld::oonGame(CCObject* pSender)
{
	CCLog("oonGame");
}

void HelloWorld::ooffGame(CCObject* pSender)
{
	CCLog("ooffGame");

}

void HelloWorld::toggleGame(CCObject* pSender)
{
	CCLog("toggleGame");
}

void HelloWorld::LetsGo(CCObject* pSender)
{
	CCLog("LetsGo");
}


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值