EN中文
开发者社区 > 程序

Cocos2D-X弹出对话框的实现与封装

发表于2015-09-12
评论0 2.3k浏览

在用Cocos2DX引擎开发游戏的过程中，我们经常需要弹出一个对话框或者提示框，通知玩家一些必要的信息。这时候我们就需要考虑怎样设计和封装一个这样的弹出对话框。首先，这样的弹出框一般都是“模态窗口”，即在没有对当前弹出的对话框进行确认的时候，不能继续往下操作。


一个对话框一般包含几个部分：背景图、两个按钮（个数可定制）、标题、文字内容。我们需要使对话框为模态窗口，并设置弹出效果。下面来说说创建弹出对话框的要点：


1、弹出层的触摸优先级，操作与显示相一致

因为弹出对话框是“模态窗口”，所以我们需要设置触摸优先级来保证对话框是模态的。

在这里我们以CCMenu作为对话框按钮的操作实现，我们知道CCMenu 的默认触摸级别是-128，那么我们的【弹出层】触摸级别该设置为多少？

在我们设定触摸级别时，请记住一句话，操作与显示相一致。此话何意？现在设想这样一种情况，我们为了屏蔽弹出层以外所有的层的操作，而将弹出层级别置为 -129 ，这样便保证了它是模态的了（一般而言，除了CCMenu 的级别，用户自定义也无需这么大），但是如果当前弹出层上方还有其它的层（也可以是弹出层的父节点上方有其它层，如多层的UI 设计），并且其上也有 CCMenu 按钮，那么就出现了显示在 弹出层上放层中的 CCMenu按钮不能点击，这不科学！实际，在弹出层的 CCMenu 也不能点击，只是我们可以通过将弹出层的触摸消息传递给层中的 CCMenu 解决。所以设置为一味的追求最大的触摸优先级，并不可取，它不能很好的做到操作与显示相一致，而优先级小于 CCMenu 并不能屏蔽下方的其它 CCMenu 操作，所以对于弹出层本身，它设置为 -128 是合理的，对于同样级别的这些元素来说（弹出层和CCMenu），能够做到，显示在最上方的优先处理。如果在弹出层上方还有层，是可以点击的，为什么不呢！而我们要做的是，通过逻辑控制，让弹出层节点，最后添加到场景的最上方。

所以，在这里层本身的触摸优先级别设置为 -128 ，而弹出层中的按钮是 CCMenu，都是同级，操作与显示相一致，唯一要注意的是逻辑的控制，什么时候弹出层，由哪个节点弹出层（一般由场景基层来负责），以保证它显示在最上方。


2、定制按钮个数

  我们可以定制按钮的个数。在封装的时候添加addButton方法，用来在当前对话框中动态地添加一个或几个按钮，而添加几个？当然由你来决定。但确定的是，它们的位置会随着按钮个数的不同而不同，如果一个按钮，将居中显示（一分为二），如果两个（三等份距离），如果三个（四等份距离），以此类推。这里addButton()的主要作用是创建一个menuItem添加到Menu中。然后在onEnter中（此时按钮个数已经确定）计算并设置各按钮的位置，并添加至界面之中。


3、窗口的大小可变

  弹出对话框的窗口大小要是可变的，通过 getContentSize 来获取。

如果没有设置 ContentSize ，那么采取的方案是，窗口大小与传入图片一样大。

如果设置了ContentSize，则将窗口设定为指定大小。这时候需要将背景图片进行缩放，如何缩放？ 【答案】是利用9宫格图CCScale9Sprite缩放图片，缩放带圆角的图片。原理如下：     

   九宫格图是通过1个CCSpriteBatchNode和9个CCSprite来实现的，原理很简单，通过将原纹理资源切割成9部分（PS: 这也是叫9宫格的原因），保持4个角不变形，根据想要的尺寸来进行拉伸或压缩。


Cocos2D-X弹出对话框的实现与封装

    使用方法：

[cpp] view plaincopy在CODE上查看代码片派生到我的代码片
  1. CCScale9Sprite* background = CCScale9Sprite::create("back.png");  
  2. background->setContentSize(CCSizeMake(400,200)); //400x200是要生成的尺寸  
  3. background->setPosition(Center);  
  4. this->addChild(background);  



4、回调函数的实现方案

  对于回调一般有两种方式，一种是 delegate 回调，这需要定义接口，由上层，继承实现接口，并把自己当作参数，传入弹出层，由弹出层调用 delegate 的接口方法实现，在 Cocos2d-x 里面很多地方用到此方式。另一种则是函数绑定，就像 CCMenu 那样的绑定函数。

 在这里设计的是按钮个数可变，功能也不尽相同，所以我们选择绑定函数！进一步封装，将弹出层的按钮回调函数设置为内部实现，然后在 回调给它的上层，之后关闭对话框（关闭的操作由对话框层来完成）。回调给它的上层的时候传递CCNode参数，以其 tag 标示，点击的是哪个按钮。【用void setCallbackFunc(CCObject* target, SEL_CallFuncN callfun); 作为外部接口，设置上层对象和上层的回调函数。】


5、onEnter动态创建弹出层

根据设置的属性去创建层 有两种方式：

其一，实时设置，实时刷新。比如在 static PopupLayer* create(constchar* gackgroundImage) 的实现里面，创建一个精灵，并设置好图片，添加到当前层，如果调用了 setContentSize 我们再在此方法获取精灵后去修改这个精灵的大小

其二，保留属性，动态组建。也就是说前面一些封装的函数比如setTitle()、setContentText()，addButton()、setCallbackFunc()只用于设置属性参数（即给变量赋值）。参数设置好以后，在一个适当的执行时期，根据以上参数，动态创建符合需求的精灵/层，而这个操作在 onEnter 里尤为合适。

在这里我们使用动态组建的方式，即在前面用一些变量来保存对话框所需的信息，然后在 onEnter 中，读取这些信息，以实时添加至界面之中。


封装：

// PopupLayer.h

[cpp] view plaincopy在CODE上查看代码片派生到我的代码片
  1. #include "cocos2d.h"  
  2. #include "cocos-ext.h"  
  3. USING_NS_CC;  
  4. USING_NS_CC_EXT;  
  5.   
  6. class PopupLayer : public CCLayer{  
  7. public:  
  8. PopupLayer();  
  9. ~PopupLayer();  
  10. virtual bool init();  
  11.   
  12. //需要重写触摸注册函数，重新给定触摸级别  
  13. virtual void registerWithTouchDispatcher();  
  14. //重写触摸函数，返回true，屏蔽其它层，达到“模态”效果  
  15. bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);  
  16.   
  17. //静态创建函数，创建一个弹出层，设置背景图片  
  18. static PopupLayer* create(const char* backgroundImage);  
  19.   
  20. //设置标题  
  21. void setTitle(const char* title, int fontsize = 20);  
  22.     //设置文本内容，padding 为文字到对话框两边预留的距离，这是可控的，距上方的距离亦是如此  
  23. void setContentText(const char* text, int fontsize=20, int padding=50, int paddingTop=100);  
  24.   
  25. //设置上层对象和上层回调函数，用于回调时传递CCNode参数  
  26. void setCallBackFunc(CCObject* target, SEL_CallFuncN callfun);  
  27.   
  28. //添加menuItem按钮，封装了一个函数，传入些必要的参数  
  29. bool addButton(const char* normalImage, const char* selectedImage, const char* title, int tag=0);  
  30.   
  31. //为了在显示层时的属性生效，选择在onEnter里动态生成  
  32. virtual void onEnter();  
  33. virtual void onExit();  
  34.   
  35. CREATE_FUNC(PopupLayer);  
  36.   
  37. private:  
  38. void buttonCallBack(CCObject* pSender);  
  39.   
  40. //文字内容两边的空白区域  
  41. int m_contentPadding;  
  42. int m_contentPaddingTop;  
  43. CCObject* m_callbackListener;  
  44. SEL_CallFuncN m_callback;  
  45. //定义了CCMenu*类型变量m_pMenu, 并且直接定义默认的set/get方法  
  46. CC_SYNTHESIZE_RETAIN(CCMenu*, m_pMenu, MenuButton);  
  47. CC_SYNTHESIZE_RETAIN(CCSprite*, m_sfBackGround, SpriteBackGround);  
  48. CC_SYNTHESIZE_RETAIN(CCScale9Sprite*, m_s9BackGround, Sprite9BackGround);  
  49. CC_SYNTHESIZE_RETAIN(CCLabelTTF*, m_ltTitle, LabelTitle);  
  50. CC_SYNTHESIZE_RETAIN(CCLabelTTF*, m_ltContentText, LabelContentText);  
  51. };  

// PopupLayer.cpp

[cpp] view plaincopy在CODE上查看代码片派生到我的代码片
  1. #include "PopupLayer.h"  
  2. USING_NS_CC;  
  3.   
  4. // 构造函数中变量设初值  
  5. PopupLayer::PopupLayer()  
  6. {  
  7. m_contentPadding = 0;  
  8. m_contentPaddingTop = 0;  
  9. m_pMenu = NULL;  
  10. m_callbackListener = NULL;  
  11. m_callback = NULL;  
  12. m_sfBackGround = NULL;  
  13. m_s9BackGround = NULL;  
  14. m_ltContentText = NULL;  
  15. m_ltTitle = NULL;  
  16. }  
  17.   
  18. //释放  
  19. PopupLayer::~PopupLayer()  
  20. {  
  21. CC_SAFE_RELEASE(m_pMenu);  
  22. CC_SAFE_RELEASE(m_sfBackGround);  
  23. CC_SAFE_RELEASE(m_s9BackGround);  
  24. CC_SAFE_RELEASE(m_ltContentText);  
  25. CC_SAFE_RELEASE(m_ltTitle);  
  26. }  
  27.   
  28. //初始化  
  29. bool PopupLayer::init()  
  30. {  
  31. if ( !CCLayer::init() ){  
  32. return false;  
  33. }  
  34.   
  35. this->setContentSize(CCSizeZero);  
  36. //初始化需要的Menu  
  37. CCMenu* menu = CCMenu::create();  
  38. menu->setPosition(CCPointZero);  
  39. setMenuButton(menu);  //set()方法  
  40.   
  41. setTouchEnabled(true);  //开启触摸响应  
  42. return true;  
  43. }  
  44.   
  45. //重写触摸注册函数，重新给定触摸级别  
  46. void PopupLayer::registerWithTouchDispatcher(){  
  47. // 这里的触摸优先级设置为-128，与CCMenu同级，保证了屏蔽下方的触摸  
  48. CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, -128, true);  
  49. }  
  50.   
  51. //触摸函数ccTouchBegan，返回true  
  52. bool PopupLayer::ccTouchBegan( CCTouch *pTouch, CCEvent *pEvent ){  
  53. return true;  
  54. }  
  55.   
  56. //创建一个弹出层，给背景精灵变量赋值  
  57. PopupLayer* PopupLayer::create( const char* backgroundImage ){  
  58. PopupLayer* popup = PopupLayer::create();  
  59. popup->setSpriteBackGround(CCSprite::create(backgroundImage));  
  60. popup->setSprite9BackGround(CCScale9Sprite::create(backgroundImage));  
  61. return popup;  
  62. }  
  63.   
  64. //给标题变量赋值  
  65. void PopupLayer::setTitle( const char* title, int fontsize ){  
  66. CCLabelTTF* ltfTitle = CCLabelTTF::create(title, "Arial", fontsize);  
  67. ltfTitle->setColor(ccc3(0, 0, 0));  
  68. setLabelTitle(ltfTitle);  
  69. }  
  70.   
  71. //给文本变量赋值  
  72. void PopupLayer::setContentText( const char* text, int fontsize, int padding, int paddingTop ){  
  73. CCLabelTTF* content = CCLabelTTF::create(text, "Arial", fontsize);  
  74. content->setColor(ccc3(0, 0, 0));  
  75. setLabelContentText(content);  
  76. m_contentPadding = padding;  
  77. m_contentPaddingTop = paddingTop;  
  78. }  
  79.   
  80. //给下层层变量和回调函数变量赋值  
  81. void PopupLayer::setCallBackFunc( CCObject* target, SEL_CallFuncN callfun ){  
  82. m_callbackListener = target;  
  83. m_callback = callfun;  
  84. }  
  85.   
  86. //给menu菜单变量添加Item  
  87. bool PopupLayer::addButton( const char* normalImage, const char* selectedImage, const char* title, int tag ){  
  88. CCSize winSize = CCDirector::sharedDirector()->getWinSize();  
  89. CCPoint center = ccp(winSize.width/2, winSize.height/2);  
  90.   
  91. // 创建图片菜单按钮  
  92. CCMenuItemImage* menuImage = CCMenuItemImage::create(  
  93. normalImage, selectedImage, this, menu_selector(PopupLayer::buttonCallBack));  
  94. menuImage->setTag(tag);  
  95. menuImage->setPosition(center);  
  96.   
  97. // 添加文字说明并设置位置  
  98. CCSize menuSize = menuImage->getContentSize();  
  99. CCLabelTTF* ttf = CCLabelTTF::create(title, "Arial", 15);  
  100. ttf->setColor(ccc3(0, 0, 0));  
  101. ttf->setPosition(ccp(menuSize.width/2, menuSize.height/2));  
  102. menuImage->addChild(ttf);  
  103.   
  104. getMenuButton()->addChild(menuImage);  
  105. return true;  
  106. }  
  107.   
  108. //销毁弹出框，传递参数node给下层  
  109. void PopupLayer::buttonCallBack( CCObject* pSender ){  
  110. CCNode* node = dynamic_cast(pSender);  
  111. CCLog("touch tag: %d", node->getTag());  
  112. if (m_callback && m_callbackListener)  
  113. {  
  114. //执行HelloWorld层的回调函数，传递node参数  
  115. (m_callbackListener->*m_callback)(node);  
  116. }  
  117. this->removeFromParentAndCleanup(true);  
  118. }  
  119.   
  120. //全部参数都设定好后，在运行时动态加载  
  121. void PopupLayer::onEnter(){  
  122. CCLayer::onEnter();  
  123.   
  124. CCSize winSize = CCDirector::sharedDirector()->getWinSize();  
  125. CCPoint center = ccp(winSize.width/2, winSize.height/2);  
  126. CCSize contentSize;  
  127. // 设定好参数，在运行时加载  
  128. if (getContentSize().equals(CCSizeZero)){  
  129. getSpriteBackGround()->setPosition(center);  
  130. this->addChild(getSpriteBackGround(),0,0);  
  131. contentSize = getSpriteBackGround()->getTexture()->getContentSize();  
  132. }  
  133. else{  
  134. CCScale9Sprite* background = getSprite9BackGround();  
  135. background->setContentSize(getContentSize());  
  136. background->setPosition(center);  
  137. this->addChild(background, 0);  
  138. contentSize = getContentSize();  
  139. }  
  140.   
  141. //添加按钮，并根据Item的个数设置其位置  
  142. this->addChild(getMenuButton());  
  143. float btnWidth = contentSize.width / (getMenuButton()->getChildrenCount()+1);  
  144. CCArray* array = getMenuButton()->getChildren();  
  145. CCObject* pObj = NULL;  
  146. int i = 0;  
  147. CCARRAY_FOREACH(array, pObj){  
  148. CCNode* node = dynamic_cast(pObj);  
  149. node->setPosition(ccp(winSize.width/2 - contentSize.width/2 + btnWidth*(i+1),   
  150.                                winSize.height/2 - contentSize.height/3));  
  151. i++;  
  152. }  
  153.   
  154. // 显示对话框标题  
  155. if (getLabelTitle()){  
  156. getLabelTitle()->setPosition(ccpAdd(center, ccp(0, contentSize.height/2 - 25.0f)));  
  157. this->addChild(getLabelTitle());  
  158. }  
  159.   
  160. //显示文本内容  
  161. if (getLabelContentText()){  
  162. CCLabelTTF* ltf = getLabelContentText();  
  163. ltf->setPosition(center);  
  164. ltf->setDimensions(CCSizeMake(contentSize.width - m_contentPadding*2, contentSize.height - m_contentPaddingTop));  
  165. ltf->setHorizontalAlignment(kCCTextAlignmentLeft);  
  166. this->addChild(ltf);  
  167. }  
  168.   
  169. //弹出效果  
  170. CCSequence *popupActions = CCSequence::create(  
  171. CCScaleTo::create(0.0, 0.0),   
  172. CCScaleTo::create(0.06, 1.05),  
  173. CCScaleTo::create(0.08, 0.95),  
  174. CCScaleTo::create(0.08, 1.0), NULL);  
  175. this->runAction(popupActions);  
  176. }  
  177.   
  178. //退出  
  179. void PopupLayer::onExit(){  
  180. CCLayer::onExit();  
  181. }  

使用例子：

[cpp] view plaincopy在CODE上查看代码片派生到我的代码片
  1. // 定义一个弹出层，传入一张背景图片  
  2. PopupLayer* popup = PopupLayer::create("popupBackGround.png");  
  3. // ContentSize是可选的设置，可以不设置，如果设置则把它当做9图缩放  
  4. //popup->setContentSize(CCSizeMake(400, 360));  
  5. popup->setTitle("Message");  
  6. popup->setContentText("Most people... blunder round this city.", 20, 50, 150);  
  7. // 设置回调函数，回调传回一个CCNode以获取tag判断点击的按钮  
  8. // 这只是作为一种封装实现，如果使用delegate那就能够更灵活的控制参数了  
  9. popup->setCallBackFunc(this, callfuncN_selector(HelloWorld::buttonCallBack));  
  10. //添加按钮，设置图片、文字，tag信息  
  11. popup->addButton("button.png", "button.png", "Ok", 0);  
  12. popup->addButton("button.png", "button.png", "Cancel", 1);  
  13. this->addChild(popup);  

测试截图：

如社区发表内容存在侵权行为，您可以点击这里查看侵权投诉指引

标签：

游戏开发Cocos2dxListTPS游戏视觉接口