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

在用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缩放图片，缩放带圆角的图片。原理如下：

m_contentPadding = 0;

m_contentPaddingTop = 0;

m_pMenu = NULL;

m_callbackListener = NULL;

m_callback = NULL;

m_sfBackGround = NULL;

m_s9BackGround = NULL;

m_ltContentText = NULL;

m_ltTitle = NULL;

CC_SAFE_RELEASE(m_pMenu);

CC_SAFE_RELEASE(m_sfBackGround);

CC_SAFE_RELEASE(m_s9BackGround);

CC_SAFE_RELEASE(m_ltContentText);

CC_SAFE_RELEASE(m_ltTitle);

if ( !cclayer::init() ){

return false;

}

this->setContentSize(CCSizeZero);

//初始化需要的Menu

Ccmenu* menu = Ccmenu::create();

menu->setPosition(CCPointZero);

setMenuButton(menu); //set()方法

setTouchEnabled(true); //开启触摸响应

return true;

// 这里的触摸优先级设置为-128，与Ccmenu同级，保证了屏蔽下方的触摸

CCDirector::sharedDirector()->getTouchdispatcher()->addTargetedDelegate(this,-128,true);

return true;

PopupLayer* popup = PopupLayer::create();

popup->setSpriteBackGround(CCSprite::create(backgroundImage));

popup->setSprite9BackGround(CCScale9Sprite::create(backgroundImage));

return popup;

cclabelTTF* ltfTitle = cclabelTTF::create(title,"Arial",fontsize);

ltfTitle->setColor(ccc3(0,0));

setLabelTitle(ltfTitle);

cclabelTTF* content = cclabelTTF::create(text,fontsize);

content->setColor(ccc3(0,0));

setLabelContentText(content);

m_contentPadding = padding;

m_contentPaddingTop = paddingTop;

m_callbackListener = target;

m_callback = callfun;

CCSize winSize = CCDirector::sharedDirector()->getWinSize();

CCPoint center = ccp(winSize.width/2,winSize.height/2);

// 创建图片菜单按钮

CcmenuItemImage* menuImage = CcmenuItemImage::create(

normalImage,selectedImage,this,menu_selector(PopupLayer::buttonCallBack));

menuImage->setTag(tag);

menuImage->setPosition(center);

// 添加文字说明并设置位置

CCSize menuSize = menuImage->getContentSize();

cclabelTTF* ttf = cclabelTTF::create(title,15);

ttf->setColor(ccc3(0,0));

ttf->setPosition(ccp(menuSize.width/2,menuSize.height/2));

menuImage->addChild(ttf);

getMenuButton()->addChild(menuImage);

return true;

CCNode* node = dynamic_cast(pSender);

cclog("touch tag: %d",node->getTag());

if (m_callback && m_callbackListener)

{

//执行HelloWorld层的回调函数，传递node参数

(m_callbackListener->*m_callback)(node);

}

this->removeFromParentAndCleanup(true);

cclayer::onEnter();

CCSize winSize = CCDirector::sharedDirector()->getWinSize();

CCPoint center = ccp(winSize.width/2,winSize.height/2);

CCSize contentSize;

// 设定好参数，在运行时加载

if (getContentSize().equals(CCSizeZero)){

getSpriteBackGround()->setPosition(center);

this->addChild(getSpriteBackGround(),0);

contentSize = getSpriteBackGround()->getTexture()->getContentSize();

}

else{

CCScale9Sprite* background = getSprite9BackGround();

background->setContentSize(getContentSize());

background->setPosition(center);

this->addChild(background,0);

contentSize = getContentSize();

}

//添加按钮，并根据Item的个数设置其位置

this->addChild(getMenuButton());

float btnWidth = contentSize.width / (getMenuButton()->getChildrenCount()+1);

CCArray* array = getMenuButton()->getChildren();

CCObject* pObj = NULL;

int i = 0;

CCARRAY_FOREACH(array,pObj){

CCNode* node = dynamic_cast(pObj);

node->setPosition(ccp(winSize.width/2 - contentSize.width/2 + btnWidth*(i+1),

winSize.height/2 - contentSize.height/3));

i++;

}

// 显示对话框标题

if (getLabelTitle()){

getLabelTitle()->setPosition(ccpAdd(center,ccp(0,contentSize.height/2 - 25.0f)));

this->addChild(getLabelTitle());

}

//显示文本内容

if (getLabelContentText()){

cclabelTTF* ltf = getLabelContentText();

ltf->setPosition(center);

ltf->setDimensions(CCSizeMake(contentSize.width - m_contentPadding*2,contentSize.height - m_contentPaddingTop));

ltf->setHorizontalAlignment(kCCTextAlignmentLeft);

this->addChild(ltf);

}

//弹出效果

CCSequence *popupActions = CCSequence::create(

CCScaleto::create(0.0,0.0),

CCScaleto::create(0.06,1.05),

CCScaleto::create(0.08,0.95),1.0),NULL);

this->runAction(popupActions);

cclayer::onExit();