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

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了Cocos2D-X弹出对话框的实现与封装，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

@H_301_5@

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


@H_301_5@

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

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

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

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

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

2、定制按钮个数@H_301_5@

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

3、窗口的大小可变@H_301_5@

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

  • 如果没有设置 ContentSize ，那么采取的方案是，窗口大小与传入图片一样大。
  • 如果设置了ContentSize，则将窗口设定为指定大小。这时候需要将背景图片进行缩放，如何缩放？ 【答案】是利用9宫格图CCScale9Sprite缩放图片，缩放带圆角的图片。原理如下：
九宫格图是 通过1个CCSpriteBatchNode和9个CCSprite来实现的，原理很简单，通过将原纹理资源切割成9部分（PS: 这也是叫9宫格的原因），保持4个角不变形，根据想要的尺寸来进行拉伸或压缩。

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

background->setContentSize(CCSizeMake(400,200)); //400x200是要生成的尺寸
background->setPosition(Center);
this->addChild(background);
@H_301_218@

4、回调函数的实现方案@H_301_5@

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

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


@H_301_5@

5、onEnter动态创建弹出层@H_301_5@

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

  • 其一，实时设置，实时刷新。比如在 static PopupLayer* create(const char* gackgroundImage) 的实现里面，创建一个精灵，并设置好图片，添加到当前层，如果调用了 setContentSize 我们再在此方法获取精灵后去修改这个精灵的大小
  • 其二，保留属性，动态组建。也就是说前面一些封装的函数比如setTitle()、setContentText()，addButton()、setCallbackFunc()只用于设置属性参数（即给变量赋值）。参数设置好以后，在一个适当的执行时期，根据以上参数，动态创建符合需求的精灵/层，而这个操作在 onEnter 里尤为合适。
在这里我们使用动态组建的方式，即在前面用一些变量来保存对话框所需的信息， 然后在 onEnter 中，读取这些信息，以实时添加至界面之中。


@H_301_5@

封装@H_301_5@

//PopupLayer.h@H_301_5@

#include "cocos2d.h"@H_301_5@

#include "cocos-ext.h"@H_301_5@

USING_NS_CC;@H_301_5@

USING_NS_CC_EXT;@H_301_5@


@H_301_5@

class PopupLayer : public CCLayer{@H_301_5@

public:@H_301_5@

PopupLayer();@H_301_5@

~PopupLayer();@H_301_5@

virtual bool init();@H_301_5@


@H_301_5@

//需要重写触摸注册函数，重新给定触摸级别@H_301_5@

virtual void registerWithTouchDispatcher();@H_301_5@

//重写触摸函数，返回true，屏蔽其它层，达到“模态”效果@H_301_5@

bool ccTouchBegan(CCTouch *pTouch,CCEvent *pEvent);@H_301_5@


@H_301_5@

//静态创建函数，创建一个弹出层，设置背景图片@H_301_5@

static PopupLayer* create(const char* backgroundImage);@H_301_5@


@H_301_5@

//设置标题@H_301_5@

void setTitle(const char* title,int fontsize = 20);@H_301_5@

//设置文本内容，padding 为文字到对话框两边预留的距离，这是可控的，距上方的距离亦是如此@H_301_5@

void setContentText(const char* text,int fontsize=20,int padding=50,int paddingTop=100);@H_301_5@


@H_301_5@

//设置上层对象和上层回调函数，用于回调时传递CCNode参数@H_301_5@

void setCallBackFunc(CCObject* target,SEL_CallFuncN callfun);@H_301_5@


@H_301_5@

//添加menuItem按钮，封装了一个函数，传入些必要的参数@H_301_5@

bool addButton(const char* normalImage,const char* selectedImage,const char* title,int tag=0);@H_301_5@


@H_301_5@

//为了在显示层时的属性生效，选择在onEnter里动态生成@H_301_5@

virtual void onEnter();@H_301_5@

virtual void onExit();@H_301_5@


@H_301_5@

CREATE_FUNC(PopupLayer);@H_301_5@


@H_301_5@

private:@H_301_5@

void buttonCallBack(CCObject* pSender);@H_301_5@


@H_301_5@

//文字内容两边的空白区域@H_301_5@

int m_contentPadding;@H_301_5@

int m_contentPaddingTop;@H_301_5@

CCObject* m_callbackListener;@H_301_5@

SEL_CallFuncN m_callback;@H_301_5@

//定义了CCMenu*类型变量m_pMenu,并且直接定义默认的set/get方法@H_301_5@

CC_SYNTHESIZE_RETAIN(CCMenu*,m_pMenu,MenuButton);@H_301_5@

CC_SYNTHESIZE_RETAIN(CCSprite*,m_sfBackGround,SpriteBackGround);@H_301_5@

CC_SYNTHESIZE_RETAIN(CCScale9Sprite*,m_s9BackGround,Sprite9BackGround);@H_301_5@

CC_SYNTHESIZE_RETAIN(CCLabelTTF*,m_ltTitle,LabelTitle);@H_301_5@

CC_SYNTHESIZE_RETAIN(CCLabelTTF*,m_ltContentText,LabelContentText);@H_301_5@

};@H_301_5@


@H_301_5@

//PopupLayer.cpp@H_301_5@

#include "PopupLayer.h"@H_301_5@

USING_NS_CC;@H_301_5@


@H_301_5@

// 构造函数中变量设初值@H_301_5@

PopupLayer::PopupLayer()@H_301_5@

{@H_301_5@

m_contentPadding = 0;@H_301_5@

m_contentPaddingTop = 0;@H_301_5@

m_pMenu = NULL;@H_301_5@

m_callbackListener = NULL;@H_301_5@

m_callback = NULL;@H_301_5@

m_sfBackGround = NULL;@H_301_5@

m_s9BackGround = NULL;@H_301_5@

m_ltContentText = NULL;@H_301_5@

m_ltTitle = NULL;@H_301_5@

}@H_301_5@


@H_301_5@

//释放@H_301_5@

PopupLayer::~PopupLayer()@H_301_5@

{@H_301_5@

CC_SAFE_RELEASE(m_pMenu);@H_301_5@

CC_SAFE_RELEASE(m_sfBackGround);@H_301_5@

CC_SAFE_RELEASE(m_s9BackGround);@H_301_5@

CC_SAFE_RELEASE(m_ltContentText);@H_301_5@

CC_SAFE_RELEASE(m_ltTitle);@H_301_5@

}@H_301_5@


@H_301_5@

//初始化@H_301_5@

bool PopupLayer::init()@H_301_5@

{@H_301_5@

if ( !CCLayer::init() )@H_301_218@{@H_301_5@

return false;@H_301_5@

}@H_301_5@


@H_301_5@

this->setContentSize(CCSizeZero);@H_301_5@

//初始化需要的Menu@H_301_5@

CCMenu* menu = CCMenu::create();@H_301_5@

menu->setPosition(CCPointZero);@H_301_5@

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


@H_301_5@

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

return true;@H_301_5@

}@H_301_5@


@H_301_5@

//重写触摸注册函数，重新给定触摸级别@H_301_5@

void PopupLayer::registerWithTouchDispatcher()@H_301_218@{@H_301_5@

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

CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this,-128,true);@H_301_5@

}@H_301_5@


@H_301_5@

//触摸函数ccTouchBegan，返回true@H_301_5@

bool PopupLayer::ccTouchBegan( CCTouch *pTouch,CCEvent *pEvent )@H_301_218@{@H_301_5@

return true;@H_301_5@

}@H_301_5@


@H_301_5@

//创建一个弹出层，给背景精灵变量赋值@H_301_5@

PopupLayer* PopupLayer::create( const char* backgroundImage )@H_301_218@{@H_301_5@

PopupLayer* popup = PopupLayer::create();@H_301_5@

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

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

return popup;@H_301_5@

}@H_301_5@


@H_301_5@

//给标题变量赋值@H_301_5@

void PopupLayer::setTitle( const char* title,int fontsize )@H_301_218@{@H_301_5@

CCLabelTTF* ltfTitle = CCLabelTTF::create(title,"Arial",fontsize);@H_301_5@

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

setLabelTitle(ltfTitle);@H_301_5@

}@H_301_5@


@H_301_5@

//给文本变量赋值@H_301_5@

void PopupLayer::setContentText( const char* text,int fontsize,int padding,int paddingTop )@H_301_218@{@H_301_5@

CCLabelTTF* content = CCLabelTTF::create(text,fontsize);@H_301_5@

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

setLabelContentText(content);@H_301_5@

m_contentPadding = padding;@H_301_5@

m_contentPaddingTop = paddingTop;@H_301_5@

}@H_301_5@


@H_301_5@

//给下层层变量和回调函数变量赋值@H_301_5@

void PopupLayer::setCallBackFunc( CCObject* target,SEL_CallFuncN callfun )@H_301_218@{@H_301_5@

m_callbackListener = target;@H_301_5@

m_callback = callfun;@H_301_5@

}@H_301_5@


@H_301_5@

//给menu菜单变量添加Item@H_301_5@

bool PopupLayer::addButton( const char* normalImage,int tag )@H_301_218@{@H_301_5@

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

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


@H_301_5@

// 创建图片菜单按钮@H_301_5@

CCMenuItemImage* menuImage = CCMenuItemImage::create(@H_301_5@

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

menuImage->setTag(tag);@H_301_5@

menuImage->setPosition(center);@H_301_5@


@H_301_5@

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

CCSize menuSize = menuImage->getContentSize();@H_301_5@

CCLabelTTF* ttf = CCLabelTTF::create(title,15);@H_301_5@

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

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

menuImage->addChild(ttf);@H_301_5@


@H_301_5@

getMenuButton()->addChild(menuImage);@H_301_5@

return true;@H_301_5@

}@H_301_5@


@H_301_5@

//销毁弹出框，传递参数node给下层@H_301_5@

void PopupLayer::buttonCallBack( CCObject* pSender )@H_301_218@{@H_301_5@

CCNode* node = dynamic_cast(pSender);@H_301_5@

CCLog("touch tag: %d",node->getTag());@H_301_5@

if (m_callback && m_callbackListener)@H_301_5@

{@H_301_5@

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

(m_callbackListener->*m_callback)(node);@H_301_5@

}@H_301_5@

this->removeFromParentAndCleanup(true);@H_301_5@

}@H_301_5@


@H_301_5@

//全部参数都设定好后，在运行时动态加载@H_301_5@

void PopupLayer::onEnter(){@H_301_5@

CCLayer::onEnter();@H_301_5@


@H_301_5@

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

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

CCSize contentSize;@H_301_5@

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

if (getContentSize().equals(CCSizeZero))@H_301_218@{@H_301_5@

getSpriteBackGround()->setPosition(center);@H_301_5@

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

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

}@H_301_5@

else{@H_301_5@

CCScale9Sprite* background = getSprite9BackGround();@H_301_5@

background->setContentSize(getContentSize());@H_301_5@

background->setPosition(center);@H_301_5@

this->addChild(background,0);@H_301_5@

contentSize = getContentSize();@H_301_5@

}@H_301_5@


@H_301_5@

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

this->addChild(getMenuButton());@H_301_5@

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

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

CCObject* pObj = NULL;@H_301_5@

int i = 0;@H_301_5@

CCARRAY_FOREACH(array,pObj){@H_301_5@

CCNode* node = dynamic_cast(pObj);@H_301_5@

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

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

i++;@H_301_5@

}@H_301_5@


@H_301_5@

// 显示对话框标题@H_301_5@

if (getLabelTitle())@H_301_218@{@H_301_5@

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

this->addChild(getLabelTitle());@H_301_5@

}@H_301_5@


@H_301_5@

//显示文本内容@H_301_5@

if (getLabelContentText())@H_301_218@{@H_301_5@

CCLabelTTF* ltf = getLabelContentText();@H_301_5@

ltf->setPosition(center);@H_301_5@

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

ltf->setHorizontalAlignment(kCCTextAlignmentLeft);@H_301_5@

this->addChild(ltf);@H_301_5@

}@H_301_5@


@H_301_5@

//弹出效果@H_301_5@

CCSequence *popupActions = CCSequence::create(@H_301_5@

CCScaleTo::create(0.0,0.0),@H_301_5@

CCScaleTo::create(0.06,1.05),@H_301_5@

CCScaleTo::create(0.08,0.95),1.0),NULL);@H_301_5@

this->runAction(popupActions);@H_301_5@

}@H_301_5@


@H_301_5@

//退出@H_301_5@

void PopupLayer::onExit()@H_301_218@{@H_301_5@

CCLayer::onExit();@H_301_5@

}@H_301_5@

弹出层调用：@H_301_5@

// 定义一个弹出层，传入一张背景图片@H_301_5@

PopupLayer* popup = PopupLayer::create("popupBackGround.png");@H_301_5@

// ContentSize是可选的设置，可以不设置，如果设置则把它当做9图缩放@H_301_5@

//popup->setContentSize(CCSizeMake(400,360));@H_301_5@

popup->setTitle("Message");@H_301_5@

popup->setContentText("Most people... blunder round this city.",20,50,150);@H_301_5@

// 设置回调函数，回调传回一个CCNode以获取tag判断点击的按钮@H_301_5@

// 这只是作为一种封装实现，如果使用delegate那就能够更灵活的控制参数了@H_301_5@

popup->setCallBackFunc(this,callfuncN_selector(HelloWorld::buttonCallBack));@H_301_5@

//添加按钮，设置图片、文字，tag信息@H_301_5@

popup->addButton("button.png","button.png","Ok",0);@H_301_5@

popup->addButton("button.png","Cancel",1);@H_301_5@

this->addChild(popup);@H_301_5@


@H_301_5@

测试截图：@H_301_5@

@L_301_1@

@H_301_5@


@H_301_5@


@H_301_5@


@H_301_5@

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

  • 一个可以弹出的对话框实现
  • 模态窗口的实现（需要逻辑的控制）
  • 多按钮的支持，位置自适应，提供回调函数
  • 提供标题和内容设置
  • 支持 九图，控制适应弹出框大小


@H_301_5@

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

原文链接：https://www.f2er.com/cocos2dx/347025.html

猜你在找的Cocos2d-x相关文章

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签