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

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

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594

在用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弹出对话框的实现与封装

    使用方法:

  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

  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

  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. }  

使用例子:

  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);  

测试截图:

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

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

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台