Cocos2d-x的学习之旅(五)菜单按钮

前端之家收集整理的这篇文章主要介绍了Cocos2d-x的学习之旅(五)菜单按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

声明

本教程仅用于初学cocos2dx同学使用,内容由本人(Code-Man)编写,此教程使用cocos2dx版本为3.4。本教程内容可以自由转载,但必须同时附带本声明,或注明出处。QQ群:Cocos2d-CodeMonkey,461679592

这个星期很忙,但为了承诺为了Monkey们。还是必须保持每周2~3的更新啊!! ╮(╯▽╰)╭我都快佩服我自己了。这周遇到很糟心的事 X宝的X猫,感觉在也不爱了,JD才事真爱啊!! 回归主题,今天就是要吃通Cocos2dx 里面的菜单按钮。


先来看MenuItem官方的继承关系图:

1.MenuItemLabel文字按钮,在上两节我们已经使用过了它的子类MenuItemFont。


2.MenuItemSprite精灵按钮,在HelloWorld的介绍中已见过了它的子类MenuItemImage。使用图片作为按钮也是游戏中最为常见的按钮。


3.MenuItemToggle开关按钮,用得比较少,一般在游戏设置页面中的音乐、音效作为开关按钮存在。

既然使用过了为什么还要讲呢?理由很简单,就是它设计出来却又不能很好的满足我们在开发中的需求,图二为通用按钮图片,可以应用在游戏的很多地方

这样我们就可以省下很多的资源,不用每一个按钮都配上一个按钮底部图片。如果是在按钮直接使用文字,则为更省资源。

学会下面方法,我们将能面对美工对按钮的各种切图方法

1.文字图片底部图片配合生成按钮。如上面就是如此。

有点懒,所有下面仍然还在LessonOneScene 这个场景中写我们代码~~~~,不要在意啦


.h文件

①.imgA 顶部的图片显示底部按钮之上的图片,也就是图一

②.imgB 底部图片,图二

  1. MenuItemSprite* createMenuItem2Img(const std::string imgA,const std::string imgB);


.cpp文件

  1. MenuItemSprite* LessonOneScene::createMenuItem2Img(const std::string imgA,const std::string imgB){
  2. /** normalSprite */
  3. //分别创建两张图片的精灵
  4. auto imgASprite_1=Sprite::create(imgA);
  5. auto imgBSprite_1=Sprite::create(imgB);
  6. //把图片A加到图片B上
  7. imgASprite_1->setPosition(imgBSprite_1->getContentSize()/2);
  8. imgBSprite_1->addChild(imgASprite_1);
  9. /** selectedSprite */
  10. //分别用两个精灵的精灵帧创建出一模一样的精灵,只是内存地址不一样
  11. auto imgASprite_2=Sprite::createWithSpriteFrame(imgASprite_1->getSpriteFrame());
  12. auto imgBSprite_2=Sprite::createWithSpriteFrame(imgBSprite_1->getSpriteFrame());
  13. //把A精灵加到B精灵身上
  14. imgASprite_2->setPosition(imgBSprite_2->getContentSize()/2);
  15. imgBSprite_2->addChild(imgASprite_2);
  16. //把选择的精灵缩小0.9
  17. imgBSprite_2->setScale(0.9);
  18. //为什么要把精灵的位置设置为它自身大小的0.05倍呢?提示:MenItem会把我们传进去的精灵的锚点都设置为(0,0)因为在此不深究,有兴趣的可以看源码。
  19. //如果缩小到0.8那,它自身的位置又要设置多少呢?Monkey可以自行试试
  20. imgBSprite_2->setPosition(imgBSprite_2->getContentSize()*0.05);
  21. return MenuItemSprite::create(imgBSprite_1,imgBSprite_2);
  22. }

使用方式:

  1. //按钮1
  2. auto testMen=this->createMenuItem2Img("task_again_context.png","task_again_button.png");
  3. //这里的写法与之前的有所不同,这也是3.0之后加入C++的新特性才有的写法,Lambda表达式,在此不深究。
  4. //只要按照这种格式就能满足我们大部分的需求,之后会详解。Lamdba表达式存在的坑。
  5. testMen->setCallback([&](Ref*obj){
  6. log("点击。。。testMen");
  7. });
  8. testMen->setPosition(WinSize/2);



效果:O(∩_∩)O~太棒了

2.文字底部图片配合生成按钮。

.h文件

①.ttfConfig,创建一个文字所需用的结构体。创建一个文字精灵的另一种方式

②.text 显示文字

③.img 底部图片

④.textColor显示文字的颜色。有默认值为White白色。

⑤.outLineColor描边的颜色

  1. MenuItemSprite* createMenuItemForFonts(TTFConfig ttfConfig,const std::string text,const std::string img,const Color3B textColor=Color3B::WHITE,const Color4B outLineColor=Color4B::BLACK);

.cpp文件

  1. MenuItemSprite* LessonOneScene::createMenuItemForFonts(TTFConfig ttfConfig,const Color3B textColor,const Color4B outLineColor){
  2. /** normalSprite */
  3. //创建一个文字设置它的颜色和它的描边
  4. auto labelA=Label::createWithTTF(ttfConfig,text);
  5. labelA->setColor(textColor);
  6. labelA->enableOutline(outLineColor,ttfConfig.outlineSize);
  7. auto imgSprite_1=Sprite::create(img);
  8. //把文字加到底部图片
  9. labelA->setPosition(imgSprite_1->getContentSize()/2);
  10. imgSprite_1->addChild(labelA);
  11. /** selectedSprite */
  12. auto labelB=Label::createWithTTF(ttfConfig,text);
  13. labelB->setColor(textColor);
  14. labelB->enableOutline(outLineColor,ttfConfig.outlineSize);
  15. auto imgSprite_2=Sprite::createWithSpriteFrame(imgSprite_1->getSpriteFrame());
  16. ///把文字加到底部图片
  17. labelB->setPosition(imgSprite_2->getContentSize()/2);
  18. imgSprite_2->addChild(labelB);
  19. //把选择的精灵缩小0.9
  20. imgSprite_2->setScale(0.9);
  21. //为什么要把精灵的位置设置为它自身大小的0.05倍呢?提示:MenItem会把我们传进去的精灵的锚点都设置为(0,0)因为在此不深究,有兴趣的可以看源码。
  22. //如果缩小到0.8那,它自身的位置又要设置多少呢?Monkey可以自行试试
  23. imgSprite_2->setPosition(imgSprite_2->getContentSize()*0.05);
  24. return MenuItemSprite::create(imgSprite_1,imgSprite_2);
  25. }

使用方式

  1. //按钮2
  2. //如果忘记了结构体是,建议回头看看C++的结构体知识
  3. TTFConfig ttfConfig; //新建一个TTFConfig结构体
  4. ttfConfig.fontSize=22; //文字大小
  5. ttfConfig.fontFilePath="fonts/fang.ttf"; //文字的字体文件
  6. ttfConfig.outlineSize=2; //描边大小
  7. auto testMen2=this->createMenuItemForFonts(ttfConfig,"重启任务","task_again_button.png",Color3B(252,254,221),Color4B(207,72,33,255));
  8. testMen2->setCallback([&](Ref*obj){
  9. log("点击。。。testMen2");
  10. });
  11. testMen2->setPosition(Vec2(WinSize.width/2,WinSize.height/2)+Vec2(testMen->getContentSize().width,0));



效果


总结一下:首先我这种做法是错的?错并不是说代码有错。你想一想,如果我在每个场景每个层都用到了这样的按钮,我是不是,要复制、粘贴、复制、粘贴呢?估计那是2B程序员干的事。之后的文章我会单独出一篇关于“工具类”的制作。它能让你再开发工程中如虎添翼,就像上面的代码,如果加入到工具类中,就可以在游戏的任何地方使用,只要把图片名和文字放进去就能得到一个按钮,是不是很方面???例如游戏的N多地方都用到屏幕的Size,我们是不是每次都要写那么长的 “Director::getInstance()->getWinSize()”呢??

3.开关按钮,先试试,按自己想法去做,它需要什么参数就给他什么参数。去尝试,这样才能进步得更快。




不要放下看,先尝试自己解决!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!






下面是开关按钮的实现,其实并不好,因为在项目中很少会用文字作为开关按钮的显示而是用图片。这里就交给大家啦!!!!

有什么不懂的或者讨论的欢迎来群里沟通。。。。

  1. auto item_1=MenuItemFont::create("ON");
  2. auto item_2=MenuItemFont::create("OFF");
  3. auto toggle=MenuItemToggle::createWithCallback([&](Ref*obj){
  4. log("toggle");
  5. },item_1,item_2,NULL);
  6. toggle->setPosition(testMen->getPosition()+Vec2(0,-100));
效果




回过头来看看Menu,从下面的继承图来看,Menu 和MenuItem并没任何的继承关系。他们并不是继承关系,但他们绝对是形影不离的好兄弟。只要有Menuitem存在必定会有Menu的存在。Menu是了统一对MenuItem进行管理。

Menu的继承关系图:

我们把在这个场景中的所有的按钮都添加到Menu层上。

  1. //把按钮都添加到Men层上
  2. MyMenu=Menu::create(AddMenItem,RemoveMenItem,testMen,testMen2,toggle,NULL);
  3. // Vec2::ZERO= Vec2(0,0),3.0后的写法,直接变成静态变量
  4. MyMenu->setPosition(Vec2::ZERO);
  5. this->addChild(MyMenu);

今天到此了~~~下期见。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。


本节课源码http://pan.baidu.com/s/1o63MWEe

猜你在找的Cocos2d-x相关文章