加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

cocos2d-x学习笔记-CCMenu和CCMenuItem详解

发布时间：2020-12-14 20:03:43 所属栏目：百科 来源：网络整理
导读：http://blog.csdn.net/zhoujianghai/article/details/8145015 学习cocos2d-x中的菜单主要需要了解：菜单(CCMenu)和菜单项(CCMenuItem)以及CCMenuItem的具体子类。 a. 下面来学习一下相关的类。 1. CCMenu 菜单，是CCLayer的子类，是一个层(容器)，可以往里面

http://blog.csdn.net/zhoujianghai/article/details/8145015

学习cocos2d-x中的菜单主要需要了解：菜单(CCMenu)和菜单项(CCMenuItem)以及CCMenuItem的具体子类。
a. 下面来学习一下相关的类。
1. CCMenu

菜单，是CCLayer的子类，是一个层(容器)，可以往里面添加菜单项。下面是它的类结构图：


CCMenu默认接受触屏事件的优先级是-128(优先级很高，因为值越小，响应触屏事件的优先级越高)，可以通过继承它实现自定义的效果，创建CCMenu对象的函数：

[cpp] view plain copy
  1. staticCCMenu*menuWithItems(CCMenuItem*item,...);
  2. staticCCMenu*menuWithItem(CCMenuItem*item);

2. CCMenuItem
菜单项，开发中一般是直接使用它的子类。CCMenuItem有三个直接子类：
CCMenuItemLabel(字符标签菜单)、CCMenuItemSprite(图片菜单)、CCMenuItemToggle(开关菜单)。
下面是CCMenuItem的类结构图：

现在分别来了解一下各个不同的菜单项。
(1) CCMenuItemLabel：使用文字标签创建菜单项
所有支持CCLabelProtocol的节点都可以用来创建CCMenuItemLabel，CCLabelProtocol是标签的共同接口。CCLabelProtocol也有三个直接子类，下面是类结构图：


CCLabelTTF：同时也是CCSprite的子类，用来渲染文字标签的，可以指定字体，每次设置字符串内容时都需要重新创建纹理和渲染，性能不好，可以看它的相关源码：

copy
    voidCCLabelTTF::setString(constchar*label)
  1. {
  2. if(m_pString)
  3. deletem_pString;
  4. m_pString=NULL;
  5. }
  6. m_pString=newstd::string(label);
  8. CCTexture2D*texture;
  9. if(CCSize::CCSizeEqualToSize(m_tDimensions,CCSizeZero))
  10. texture=newCCTexture2D();
  11. texture->initWithString(label,m_pFontName->c_str(),m_fFontSize);
  12. else
  13. {
  14. texture=newCCTexture2D();
  15. texture->initWithString(label,m_tDimensions,m_eAlignment,m_fFontSize);
  16. }
  17. this->setTexture(texture);
  18. texture->release();
  19. CCRectrect=CCRectZero;
  20. rect.size=m_pobTexture->getContentSize();
  21. this->setTextureRect(rect);
  22. }

可以用CCLabelBMFont或者CCLabelAtlas代替它。
CCLabelBMFont ：也是CCSpriteBatchNode的子类，创建CCLabelBMFont对象需要一个字符串和一个fnt格式的文件(字库)，如：
copy
    CCLabelBMFont*label=CCLabelBMFont::labelWithString("BitmapFontAtlas","fonts/bitmapFontTest.fnt");

这个fnt文件包含了这些信息：对应图片的名字(图片包含了所有你要绘制的字符)、图片中的字符对应的unicode编码、字符在图片中的坐标、宽高等。初始化CCLabelBMFont对象时，会把图片添加到缓存(CCTextureCache)中，解析fnt文件，把fnt文件中对应的信息保存到一个ccBMFontDef类型的数组里面，数组的索引是charId(字符的unicode编码值)，ccBMFontDef是一个结构体：
copy
    typedefstruct_BMFontDef{
  1. //!IDofthecharacter
  2. unsignedintcharID;
  3. //!originandsizeofthefont
  4. CCRectrect;
  5. //!TheXamounttheimageshouldbeoffsetwhendrawingtheimage(inpixels)
  6. intxOffset;
  7. //!TheYamounttheimageshouldbeoffsetwhendrawingtheimage(inpixels)
  8. intyOffset;
  9. //!Theamounttomovethecurrentpositionafterdrawingthecharacter(inpixels)
  10. intxAdvance;
  11. }ccBMFontDef;

绘制字符串时，根据字符对应的unicode码去查找ccBMFontDef信息，从缓存中取出图片，再根据ccBMFontDef中坐标、宽高取出对应区域的字符图片，把字符在字符串中的索引位置作为tag添加到CCLabelBMFont中，因为CCLabelBMFont本身是CCSpriteBatchNode，这样就实现了批处理渲染精灵，提高了性能。下面是创建字符对应的CCSprite的部分代码：
copy
    voidCCLabelBMFont::createFontChars()
  1. /**....*/
  2. //以下代码是遍历字符串时：for循环内的代码
  3. constccBMFontDef&fontDef=(*(m_pConfiguration->m_pBitmapFontArray))[c];
  5. CCRectrect=fontDef.rect;
  6. CCSprite*fontChar;
  7. fontChar=(CCSprite*)(this->getChildByTag(i));
  8. if(!fontChar)
  9. fontChar=newCCSprite();
  10. fontChar->initWithBatchNodeRectInPixels(this,rect);
  11. this->addChild(fontChar,i);
  12. fontChar->release();
  13. else
  14. //reusingfonts
  15. fontChar->setTextureRectInPixels(rect,false,rect.size);
  16. //restoretodefaultincasetheyweremodified
  17. fontChar->setIsVisible(true);
  18. fontChar->setOpacity(255);
  19. }

CCLabelAtlas ：也是CCAtlasNode的子类，创建一个CCLabelAtlas对象的代码如下：
copy
    staticCCLabelAtlas*labelWithString(char*label,char*charMapFile,unsignedintitemWidth,87); background-color:inherit; font-weight:bold">intitemHeight,87); background-color:inherit; font-weight:bold">charstartCharMap);
  1. //示例
  2. CCLabelAtlas*label1=CCLabelAtlas::labelWithString("123Test","fonts/tuffy_bold_italic-charmap.png",48,64,'');

参数的含义：要绘制的字符，图片文件，图片文件中每个字符的宽度，图片文件中每个字符的高度，图片的起始字符。
CCAtlasNode封装了一个CCTextureAtlas的变量，CCTextureAtlas初始化图片文件的时候会把图片加载到缓存(CCTextureCache)中：
copy
    boolCCTextureAtlas::initWithFile(char*file,87); background-color:inherit; font-weight:bold">intcapacity)
  1. //retainedinproperty
  2. CCTexture2D*texture=CCTextureCache::sharedTextureCache()->addImage(file);
  3. if(texture)
  4. returninitWithTexture(texture,capacity);
  5. CCLOG("cocos2d:Couldnotopenfile:%s",file);
  6. deletethis;
  7. returnNULL;
  8. 接下来CCTextureAtlas负责管理该大图，可以随意绘制图片的某一矩形区域，渲染方式采用的是OpenGL ES VBO(顶点缓冲对象，保存在显存中)。 CCTextureAtlas有一个m_pQuads属性，它是CCTextureAtlas类的核心，是一个ccV3F_C4B_T2F_Quad类型的数组，ccV3F_C4B_T2F_Quad是一个结构体，有四个成员属性，它们都是ccV3F_C4B_T2F类，分别表示左上，左下，右上，右下。看源码：
    copy
      //!aPointwithavertexpoint,atexcoordpointandacolor4B
    1. struct_ccV3F_C4B_T2F
    2. //!vertices(3F)
    3. ccVertex3Fvertices;//12bytes
    4. //char__padding__[4];
    5. //!colors(4B)
    6. ccColor4Bcolors;//4bytes
    7. //char__padding2__[4];
    8. //texcoords(2F)
    9. ccTex2FtexCoords;//8byts
    10. }ccV3F_C4B_T2F;
    11. //!4ccVertex2FTex2FColor4BQuad
    12. struct_ccV2F_C4B_T2F_Quad
    13. //!bottomleft
    14. ccV2F_C4B_T2Fbl;
    15. //!bottomright
    16. ccV2F_C4B_T2Fbr;
    17. //!topleft
    18. ccV2F_C4B_T2Ftl;
    19. //!topright
    20. ccV2F_C4B_T2Ftr;
    21. }ccV2F_C4B_T2F_Quad;

    ccV3F_C4B_T2F有三个成员，分别表示：顶点、颜色、纹理坐标。
    CCTextureAtlas类就是根据这个数组来绘制矩形的，数组的容量就是要绘制的字符数量。指定字符串的时候：是根据指定字符的ASCII码值跟startCharMap(图片起始字符)ASCII码值的偏移量，得到该字符在图片上的区域的，然后生成绘制矩形所需要的数据，源码：
    copy
      //CCLabelAtlas-CCLabelProtocol
    1. voidCCLabelAtlas::setString(char*label)
    2. /**....*/
    3. this->updateAtlasValues();
    4. //CCLabelAtlas-Atlasgeneration
    5. voidCCLabelAtlas::updateAtlasValues()
    6. intn=m_sString.length();
    7. ccV3F_C4B_T2F_Quadquad;
    8. constunsignedchar*s=(unsignedchar*)m_sString.c_str();
    9. CCTexture2D*texture=m_pTextureAtlas->getTexture();
    10. floattextureWide=(float)texture->getPixelsWide();
    11. floattextureHigh=(float)texture->getPixelsHigh();
    12. for(unsignedinti=0;i<n;i++){
    13. unsignedchara=s[i]-m_cMapStartChar;
    14. floatrow=(float)(a%m_uItemsPerRow);
    15. floatcol=(float)(a/m_uItemsPerRow);
    16. #ifCC_FIX_ARTIFACTS_BY_STRECHING_TEXEL
    17. //Issue#938.Don'tusetexStepX&texStepY
    18. floatleft=(2*row*m_uItemWidth+1)/(2*textureWide);
    19. floatright=left+(m_uItemWidth*2-2)/(2*textureWide);
    20. floattop=(2*col*m_uItemHeight+1)/(2*textureHigh);
    21. floatbottom=top+(m_uItemHeight*2-2)/(2*textureHigh);
    22. #else
    23. floatleft=row*m_uItemWidth/textureWide;
    24. floatright=left+m_uItemWidth/textureWide;
    25. floattop=col*m_uItemHeight/textureHigh;
    26. floatbottom=top+m_uItemHeight/textureHigh;
    27. #endif//!CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL
    28. quad.tl.texCoords.u=left;
    29. quad.tl.texCoords.v=top;
    30. quad.tr.texCoords.u=right;
    31. quad.tr.texCoords.v=top;
    32. quad.bl.texCoords.u=left;
    33. quad.bl.texCoords.v=bottom;
    34. quad.br.texCoords.u=right;
    35. quad.br.texCoords.v=bottom;
    36. quad.bl.vertices.x=(float)(i*m_uItemWidth);
    37. quad.bl.vertices.y=0;
    38. quad.bl.vertices.z=0.0f;
    39. quad.br.vertices.x=(float)(i*m_uItemWidth+m_uItemWidth);
    40. quad.br.vertices.y=0;
    41. quad.br.vertices.z=0.0f;
    42. quad.tl.vertices.x=( quad.tl.vertices.y=(float)(m_uItemHeight);
    43. quad.tl.vertices.z=0.0f;
    44. quad.tr.vertices.x=( quad.tr.vertices.y=(float)(m_uItemHeight);
    45. quad.tr.vertices.z=0.0f;
    46. m_pTextureAtlas->updateQuad(&quad,i);

    47. 所以图片上的字符排列顺序要按照ASCII码表的顺序连续排列。CCLabelAtlas的绘制效率高，但是限制性太多，没有CCLabelBMFont灵活。

      从类结构图可以看到CCMenuItemLabel有两个子类CCMenuItemAtlasFont和CCMenuItemFont，CCMenuItemAtlasFont是使用CCLabelAtlas创建MenuItemLabel的辅助类，CCMenuItemFont是使用CCLabelTTF创建MenuItemLabel的辅助类。如下源码所示：

      copy
        boolCCMenuItemAtlasFont::initFromString(char*value,charstartCharMap,CCObject*target,SEL_MenuHandlerselector)
      1. CCAssert(value!=NULL&&strlen(value)!=0,"valuelengthmustbegreaterthan0");
      2. CCLabelAtlas*label=newCCLabelAtlas();
      3. label->initWithString(value,charMapFile,itemWidth,itemHeight,startCharMap);
      4. label->autorelease();
      5. if(CCMenuItemLabel::initWithLabel(label,target,selector))
      6. //dosomething?
      7. returntrue;
      8. boolCCMenuItemFont::initFromString( CCAssert(value!=NULL&&strlen(value)!=0,"Valuelengthmustbegreaterthan0");
      9. m_strFontName=_fontName;
      10. m_uFontSize=_fontSize;
      11. CCLabelTTF*label=CCLabelTTF::labelWithString(value,m_strFontName.c_str(),(float)m_uFontSize);
      12. //dosomething?
      13. true;
      14. }
      2. CCMenuItemSprite和CCMenuItemImage ：本质上都是使用图片创建菜单项，前者是使用精灵对象创建，后者使用图片名称创建，CCMenuItemImage是CCMenuItemSprite的子类。可以使用三套图片：未选中状态、选中状态、不可用状态，前面两种状态的图片是必需的，不可用状态的图片可选。如下代码所示：
      copy
        staticCCMenuItemSprite*itemFromNormalSprite(CCNode*normalSprite,CCNode*selectedSprite,CCNode*disabledSprite=NULL);
      1. staticCCMenuItemImage*itemFromNormalImage(char*normalImage,87); background-color:inherit; font-weight:bold">char*selectedImage);
      2. char*selectedImage,87); background-color:inherit; font-weight:bold">char*disabledImage);

      3. CCMenuItemToggle : 开关菜单
      它是一个容器，可以切换包含的子项(可以是任何的MenuItem对象)。它封装了一个CCMutableArray<CCMenuItem*>*类型的属性m_pSubItems。代码示例：
      copy
        staticCCMenuItemToggle*itemWithTarget(CCObject*target,SEL_MenuHandlerselector,CCMenuItem*item,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> CCMenuItemToggle*item1=CCMenuItemToggle::itemWithTarget( CCMenuItemFont::itemFromString("On"),
      1. CCMenuItemFont::itemFromString("Off"),NULL);


      b. 分析了菜单的各个相关类的原理和用法后，现在来看看如何使用它们，下面示例代码整合了各种菜单项的创建：
      copy
        voidMenuLayer::onEnter()
      1. CCLayer::onEnter();
      2. CCSizewinSize=CCDirector::sharedDirector()->getWinSize();
      3. /**---CCMenuItemLabel:由指定的字符串标签创建菜单--**/
      4. //CCMenuItemFont:内部使用CCLabelTTF
      5. CCMenuItemFont::setFontName("Arial");
      6. CCMenuItemFont::setFontSize(22);
      7. CCMenuItemFont*pFontMenuItem=CCMenuItemFont::itemFromString("fontitem",menu_selector(MenuLayer::menuCallback));
      8. CCMenu*pFontMenu=CCMenu::menuWithItems(pFontMenuItem,NULL);
      9. pFontMenu->setPosition(ccp(winSize.width/2,winSize.height-30));
      10. this->addChild(pFontMenu);
      11. //CCMenuItemAtlasFont:内部使用CCLabelAtlas
      12. CCMenuItemAtlasFont*pAtlasFontMenuItem=CCMenuItemAtlasFont::itemFromString("123456789",s_imgPathNum,15,19,'0',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> CCMenu*pAtlasFontMenu=CCMenu::menuWithItems(pAtlasFontMenuItem,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> pAtlasFontMenu->setPosition(ccp(winSize.width/2,winSize.height-60));
      13. this->addChild(pAtlasFontMenu);
      14. //CCLabelBMFont
      15. CCLabelBMFont*pBMFontLabel=CCLabelBMFont::labelWithString("configuration",s_imgPathBMFont);
      16. CCMenuItemLabel*pItemBMFontLabel=CCMenuItemLabel::itemWithLabel(pBMFontLabel,menu_selector(MenuLayer::menuCallback));
      17. CCMenu*pBMFontMenu=CCMenu::menuWithItems(pItemBMFontLabel,NULL);
      18. pBMFontMenu->setPosition(ccp(winSize.width/2,winSize.height-90));
      19. this->addChild(pBMFontMenu);
      20. /**--CCMenuItemSprite:由指定的精灵类创建菜单--**/
      21. CCSprite*spriteNormal=CCSprite::spriteWithFile(s_imgPathMenuItem,CCRectMake(0,23*2,115,23));
      22. CCSprite*spriteSelected=CCSprite::spriteWithFile(s_imgPathMenuItem,23*1,23));
      23. CCSprite*spriteDisabled=CCSprite::spriteWithFile(s_imgPathMenuItem,23*0,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> CCMenuItemSprite*pMenuItemSprite=CCMenuItemSprite::itemFromNormalSprite(spriteNormal,spriteSelected,spriteDisabled,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> CCMenu*pSpriteMenu=CCMenu::menuWithItems(pMenuItemSprite,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> pSpriteMenu->setPosition(ccp(winSize.width/2,winSize.height-120));
      24. this->addChild(pSpriteMenu);
      25. //CCMenuItemImage:由指定的图片文件名创建菜单
      26. CCMenuItemImage*pMenuItemImage=CCMenuItemImage::itemFromNormalImage(s_imgPathCloseNormal,s_imgPathCloseSelected,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> CCMenu*pImageMenu=CCMenu::menuWithItem(pMenuItemImage);
      27. pImageMenu->setPosition(ccp(winSize.width/2,winSize.height-150));
      28. this->addChild(pImageMenu);
      29. //CCMenuItemToggle：开关菜单，切换效果
      30. //这里只使用了CCMenuItemFont，还可以使用其他的CCMenuItem
      31. CCMenuItemToggle*pMenuItemToggle=CCMenuItemToggle::itemWithTarget( NULL);
      32. CCMenu*pToggleMenu=CCMenu::menuWithItems(pMenuItemToggle,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> pToggleMenu->setPosition(ccp(winSize.width/2,winSize.height-180));
      33. this->addChild(pToggleMenu);
      34. 运行效果如下：

        程序使用的图片素材：

        CCLabelBMFont代码段使用的素材是：cocos2d-x安装目录/tests/Resources/fonts/bitmapFontTest3.fnt和对应的png文件

        ps:CCMenuItem默认使用的字体是Marker Felt，字体大小是32，在CCMenuItem.h中定义了：

        copy
          #definekCCItemSize32
        1. staticunsignedint_fontSize=kCCItemSize;
        2. staticstd::string_fontName="MarkerFelt";

        转载请注明来自：Alex Zhou，本文链接：http://codingnow.cn/android/832.html

        （编辑：李大同）

        【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同