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

时间  2019-11-07
标签 cocos2d cocos 弹出 对话框 实现 封装 栏目 Cocos2d-x 繁體版
原文   原文链接

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

       

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


一、弹出层的触摸优先级，操做与显示相一致函数

      由于弹出对话框是“模态窗口”，因此咱们须要设置触摸优先级来保证对话框是模态的。测试

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

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

       因此，在这里层自己的触摸优先级别设置为 -128 ，而弹出层中的按钮是 CCMenu，都是同级，操做与显示相一致，惟一要注意的是逻辑的控制，何时弹出层，由哪一个节点弹出层（通常由场景基层来负责），以保证它显示在最上方。spa


二、定制按钮个数.net

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


三、窗口的大小可变code

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

  • 若是没有设置 ContentSize ，那么采起的方案是，窗口大小与传入图片同样大。

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

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

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

           使用方法：CCScale9Sprite* background = CCScale9Sprite::create("back.png");

                       background->setContentSize(CCSizeMake(400,200)); //400x200是要生成的尺寸

                       background->setPosition(Center);

                       this->addChild(background);


四、回调函数的实现方案

         对于回调通常有两种方式，一种是 delegate 回调，这须要定义接口，由上层，继承实现接口，并把本身看成参数，传入弹出层，由弹出层调用 delegate 的接口方法实现，在 Cocos2d-x 里面不少地方用到此方式。另外一种则是函数绑定，就像 CCMenu 那样的绑定函数。

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


五、onEnter动态建立弹出层

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

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

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

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

封装
//PopupLayer.h
#include "cocos2d.h"
#include "cocos-ext.h"
USING_NS_CC;
USING_NS_CC_EXT;

class PopupLayer : public CCLayer{
public:
PopupLayer();
~PopupLayer();
virtual bool init();

//须要重写触摸注册函数，从新给定触摸级别
virtual void registerWithTouchDispatcher();
//重写触摸函数，返回true，屏蔽其它层，达到“模态”效果
bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);

//静态建立函数，建立一个弹出层，设置背景图片
static PopupLayer* create(const char* backgroundImage);

//设置标题
void setTitle(const char* title, int fontsize = 20);
    //设置文本内容，padding 为文字到对话框两边预留的距离，这是可控的，距上方的距离亦是如此
void setContentText(const char* text, int fontsize=20, int padding=50, int paddingTop=100);

//设置上层对象和上层回调函数，用于回调时传递CCNode参数
void setCallBackFunc(CCObject* target, SEL_CallFuncN callfun);

//添加menuItem按钮，封装了一个函数，传入些必要的参数
bool addButton(const char* normalImage, const char* selectedImage, const char* title, int tag=0);

//为了在显示层时的属性生效，选择在onEnter里动态生成
virtual void onEnter();
virtual void onExit();

CREATE_FUNC(PopupLayer);

private:
void buttonCallBack(CCObject* pSender);

//文字内容两边的空白区域
int m_contentPadding;
int m_contentPaddingTop;
CCObject* m_callbackListener;
SEL_CallFuncN m_callback;
//定义了CCMenu*类型变量m_pMenu, 而且直接定义默认的set/get方法
CC_SYNTHESIZE_RETAIN(CCMenu*, m_pMenu, MenuButton);
CC_SYNTHESIZE_RETAIN(CCSprite*, m_sfBackGround, SpriteBackGround);
CC_SYNTHESIZE_RETAIN(CCScale9Sprite*, m_s9BackGround, Sprite9BackGround);
CC_SYNTHESIZE_RETAIN(CCLabelTTF*, m_ltTitle, LabelTitle);
CC_SYNTHESIZE_RETAIN(CCLabelTTF*, m_ltContentText, LabelContentText);
};

//PopupLayer.cpp
#include "PopupLayer.h"
USING_NS_CC;

// 构造函数中变量设初值
PopupLayer::PopupLayer()
{
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;
}

//释放
PopupLayer::~PopupLayer()
{
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);
}

//初始化
bool PopupLayer::init()
{
if ( !CCLayer::init() ){
return false;
}

this->setContentSize(CCSizeZero);
//初始化须要的Menu
CCMenu* menu = CCMenu::create();
menu->setPosition(CCPointZero);
setMenuButton(menu);  //set()方法

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

//重写触摸注册函数，从新给定触摸级别
void PopupLayer::registerWithTouchDispatcher(){
// 这里的触摸优先级设置为-128，与CCMenu同级，保证了屏蔽下方的触摸
CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, -128, true);
}

//触摸函数ccTouchBegan，返回true
bool PopupLayer::ccTouchBegan( CCTouch *pTouch, CCEvent *pEvent ){
return true;
}

//建立一个弹出层，给背景精灵变量赋值
PopupLayer* PopupLayer::create( const char* backgroundImage ){
PopupLayer* popup = PopupLayer::create();
popup->setSpriteBackGround(CCSprite::create(backgroundImage));
popup->setSprite9BackGround(CCScale9Sprite::create(backgroundImage));
return popup;
}

//给标题变量赋值
void PopupLayer::setTitle( const char* title, int fontsize ){
CCLabelTTF* ltfTitle = CCLabelTTF::create(title, "Arial", fontsize);
ltfTitle->setColor(ccc3(0, 0, 0));
setLabelTitle(ltfTitle);
}

//给文本变量赋值
void PopupLayer::setContentText( const char* text, int fontsize, int padding, int paddingTop ){
CCLabelTTF* content = CCLabelTTF::create(text, "Arial", fontsize);
content->setColor(ccc3(0, 0, 0));
setLabelContentText(content);
m_contentPadding = padding;
m_contentPaddingTop = paddingTop;
}

//给下层层变量和回调函数变量赋值
void PopupLayer::setCallBackFunc( CCObject* target, SEL_CallFuncN callfun ){
m_callbackListener = target;
m_callback = callfun;
}

//给menu菜单变量添加Item
bool PopupLayer::addButton( const char* normalImage, const char* selectedImage, const char* title, int tag ){
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, "Arial", 15);
ttf->setColor(ccc3(0, 0, 0));
ttf->setPosition(ccp(menuSize.width/2, menuSize.height/2));
menuImage->addChild(ttf);

getMenuButton()->addChild(menuImage);
return true;
}

//销毁弹出框，传递参数node给下层
void PopupLayer::buttonCallBack( CCObject* pSender ){
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);
}

//所有参数都设定好后，在运行时动态加载
void PopupLayer::onEnter(){
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,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),
CCScaleTo::create(0.08, 1.0), NULL);
this->runAction(popupActions);
}

//退出
void PopupLayer::onExit(){
CCLayer::onExit();
}
弹出层调用：
// 定义一个弹出层，传入一张背景图片
PopupLayer* popup = PopupLayer::create("popupBackGround.png");
// ContentSize是可选的设置，能够不设置，若是设置则把它当作9图缩放
//popup->setContentSize(CCSizeMake(400, 360));
popup->setTitle("Message");
popup->setContentText("Most people... blunder round this city.", 20, 50, 150);
// 设置回调函数，回调传回一个CCNode以获取tag判断点击的按钮
// 这只是做为一种封装实现，若是使用delegate那就可以更灵活的控制参数了
popup->setCallBackFunc(this, callfuncN_selector(HelloWorld::buttonCallBack));
//添加按钮，设置图片、文字，tag信息
popup->addButton("button.png", "button.png", "Ok", 0);
popup->addButton("button.png", "button.png", "Cancel", 1);
this->addChild(popup);

测试截图：

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




这样，对话框的基本模型就完成了，它实现了如下功能：

  • 一个能够弹出的对话框实现

  • 模态窗口的实现（须要逻辑的控制）

  • 多按钮的支持，位置自适应，提供回调函数

  • 提供标题和内容设置

  • 支持 九图，控制适应弹出框大小


参考文：http://blog.csdn.net/u012421525/article/details/14231205

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程