[关闭]
@TangWill 2019-06-15T18:38:15.000000Z 字数 19673 阅读 753

cocos2d-x 模态对话框的实现

DataStruct

在游戏中，我们常常需要实现弹出一个模态对话框，比如说游戏暂停，退出提示对话框等

对话框特点如下：

1.可定制的，比如说背景图，标题，文本，按钮等，根据需要添加和设置

2.需要屏蔽对话框下层的触摸

3.为了友好的效果显示，把不可触摸的部分变为灰色

模板一

Dialog.h

  1. #ifndef __DIALOG_H__
  2. #define __DIALOG_H__
  4. #include "cocos2d.h"
  5. #include "ui/CocosGUI.h"
  6. #include "Theme.h"
  7. #include "Network.h"
  8. #include "User.h"
  10. #define SCREEN_WIDTH 1200
  11. #define SCREEN_HEIGHT 900
  13. USING_NS_CC;
  14. using namespace cocos2d::ui;
  16. using std::string;
  18. class Dialog final :
  19.     public LayerColor
  20. {
  21. public:
  22.     Dialog() : menu(nullptr), labelMenu(nullptr), backGround(nullptr), title(nullptr), contentText(nullptr) {}
  23.     ~Dialog();
  25.     bool init() override;
  26.     CREATE_FUNC(Dialog);
  27.     static Dialog* create(const string& background, const Size& size);
  29.     // touch事件监听
  30.     bool onTouchBegan(Touch* touch, Event* event) override { return true; }
  31.     void onTouchMoved(Touch* touch, Event* event) override {}
  32.     void onTouchEnded(Touch* touch, Event* event) override {}
  34.     void onEnter() override;
  35.     void onExit() override;
  37.     // 添加标题
  38.     void setTitle(const string& title, int fontSize = 20);
  39.     // 添加文本内容
  40.     void setContentText(const string& text, const int fontSize, const int padding, const int paddingTop);
  41.     // 添加button、label或listView
  42.     bool addButton(MenuItem* menuItem) const;
  43.     bool addLabel(MenuItem* menuItem) const;
  44.     void addListView(bool dialogType, bool inMenu, bool classical, bool noLeadingIn = true);
  46. private:
  47.     Theme* theme = Theme::getInstance();
  49.     // 文字内容两边和顶部的空白区
  50.     int contentPadding = 0;
  51.     int contentPaddingTop = 0;
  53.     Size dialogContentSize;
  55.     // 初始化scene中心位置，方便使用
  56.     const Point center = Point(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
  58.     int position = 11; // 滚动条位置
  59.     bool rank = false; // 对话框类型
  60.     bool rankType = false; // 排行榜类型
  61.     bool isInMenu = true; // 排行榜是否在menuScene
  62.     bool isClassical = true; // 游戏模式
  63.     bool changed = false; // 判断排行榜是否改变
  65.     ListView* listView = nullptr;
  66.     Label* nameLabel = nullptr;
  67.     Label* rankLabel = nullptr;
  68.     Label* scoreLabel = nullptr;
  69.     Label* content = nullptr;
  70.     Layout* layout = nullptr;
  71.     EventListenerMouse* listenerMouse = nullptr;
  73.     // 排行榜
  74.     vector<pair<string, int>> classicalRank;
  75.     vector<pair<string, int>> plusRank;
  77.     void backgroundFinish(); // 初始化对话框内容及布局
  78.     void initRankDialog(); // 初始化排行榜对话框
  79.     void initNormalDialog(); // 初始化普通对话框
  80.     void getRankByType(bool type); // 获取排行榜内容
  83.     // set and get
  84. CC_SYNTHESIZE_RETAIN(Menu*, menu, MenuButton);
  85. CC_SYNTHESIZE_RETAIN(Menu*, labelMenu, MenuLabel);
  86. CC_SYNTHESIZE_RETAIN(ui::Scale9Sprite*, backGround, BackGround);
  87. CC_SYNTHESIZE_RETAIN(Label*, title, LabelTitle);
  88. CC_SYNTHESIZE_RETAIN(Label*, contentText, LabelContentText);
  89. };
  91. #endif

Dialog.cpp

  1. #include "Dialog.h"
  3. Dialog::~Dialog()
  4. {
  5.     CC_SAFE_RELEASE(menu);
  6.     CC_SAFE_RELEASE(labelMenu);
  7.     CC_SAFE_RELEASE(contentText);
  8.     CC_SAFE_RELEASE(title);
  9. }
  11. bool Dialog::init()
  12. {
  13.     if (!LayerColor::init()) return false;
  15.     // 初始化需要的 Menu button菜单
  16.     auto menu = Menu::create();
  17.     menu->setPosition(Size::ZERO);
  18.     setMenuButton(menu);
  20.     // label菜单
  21.     auto labelMenu = Menu::create();
  22.     labelMenu->setPosition(Size::ZERO);
  23.     setMenuLabel(labelMenu);
  25.     // 添加layer的事件监听事件
  26.     auto listener = EventListenerTouchOneByOne::create();
  27.     listener->onTouchBegan = CC_CALLBACK_2(Dialog::onTouchBegan, this);
  28.     listener->onTouchMoved = CC_CALLBACK_2(Dialog::onTouchMoved, this);
  29.     listener->onTouchEnded = CC_CALLBACK_2(Dialog::onTouchEnded, this);
  30.     auto dispatcher = Director::getInstance()->getEventDispatcher();
  31.     dispatcher->addEventListenerWithSceneGraphPriority(listener, this);
  33.     // 设置背景版透明，达到对话框下层变灰暗效果
  34.     setColor(Color3B(0, 0, 0));
  35.     setOpacity(128);
  37.     return true;
  38. }
  40. Dialog* Dialog::create(const string& background, const Size& size)
  41. {
  42.     auto layer = Dialog::create();
  43.     layer->setBackGround(Scale9Sprite::create(background));
  44.     layer->dialogContentSize = size;
  45.     return layer;
  46. }
  48. #pragma region Override
  49. void Dialog::onEnter()
  50. {
  51.     LayerColor::onEnter();
  52.     Layer::onEnter();
  54.     _eventDispatcher->pauseEventListenersForTarget(this->getParent(), true); // 阻止事件向下传递
  56.     //添加背景图片
  57.     auto background = getBackGround();
  58.     background->setContentSize(dialogContentSize);
  59.     background->setPosition(Point(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2));
  60.     this->addChild(background, 0, 0);
  62.     // 弹出效果
  63.     Action* dialog = Sequence::create(
  64.         ScaleTo::create(0.0f, 0.0f),
  65.         ScaleTo::create(0.3f, 1.0f),
  66.         CallFunc::create(CC_CALLBACK_0(Dialog::backgroundFinish, this)),
  67.         nullptr
  68.     );
  70.     background->runAction(dialog);
  71. }
  73. void Dialog::onExit()
  74. {
  75.     Layer::onExit();
  76.     LayerColor::onExit();
  77.     _eventDispatcher->resumeEventListenersForTarget(this->getParent(), true); // 还原事件监听
  78. }
  80. #pragma endregion
  82. #pragma region Add Component
  83. void Dialog::setTitle(const string& title, const int fontSize/*=20*/)
  84. {
  85.     const auto label = Label::createWithTTF(title, theme->semiBoldFont, fontSize);
  86.     setLabelTitle(label);
  87. }
  89. void Dialog::setContentText(const string& text, const int fontSize, const int padding, const int paddingTop)
  90. {
  91.     const auto label = Label::createWithTTF(text, theme->semiBoldFont, fontSize);
  92.     setLabelContentText(label);
  93.     contentPadding = padding;
  94.     contentPaddingTop = paddingTop;
  95. }
  97. bool Dialog::addButton(MenuItem* menuItem) const
  98. {
  99.     // 添加精灵菜单项
  100.     const auto center = Point(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
  101.     menuItem->setPosition(center);
  102.     getMenuButton()->addChild(menuItem);
  103.     return true;
  104. }
  106. bool Dialog::addLabel(MenuItem* menuItem) const
  107. {
  108.     // 添加标签菜单项
  109.     const auto center = Point(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
  110.     menuItem->setPosition(center);
  111.     getMenuLabel()->addChild(menuItem);
  112.     return true;
  113. }
  115. void Dialog::addListView(bool dialogType, bool inMenu, bool classical, bool noLeadingIn)
  116. {
  117.     // 预加载排行榜，解决卡顿
  119.     if (noLeadingIn && User::getInstance()->isConnected())
  120.     {
  121.         classicalRank = Network::getInstance()->getRank(true);
  122.         plusRank = Network::getInstance()->getRank(false);
  123.     }
  126.     // 设置窗口类型为排行榜窗口，并判断排行榜显示游戏模式
  127.     rank = dialogType;
  128.     isInMenu = inMenu;
  129.     isClassical = classical;
  130. }
  132. #pragma endregion
  134. void Dialog::backgroundFinish()
  135. {
  136.     // 判断窗口类型为排行榜窗口或普通窗口，true为排行榜窗口
  137.     if (rank)
  138.     {
  139.         initRankDialog();
  140.     }
  141.     else
  142.     {
  143.         initNormalDialog();
  144.     }
  145.     rank = false; // 默认为普通对话框
  146. }
  148. void Dialog::initNormalDialog()
  149. {
  150.     // 显示对话框标题
  151.     if (getLabelTitle())
  152.     {
  153.         getLabelTitle()->setPosition(
  154.             center + Vec2(0, dialogContentSize.height / 2 - title->getContentSize().height / 2 - 15));
  155.         this->addChild(getLabelTitle());
  156.     }
  158.     // 显示文本内容
  159.     if (getLabelContentText())
  160.     {
  161.         auto content = getLabelContentText();
  162.         content->setLineBreakWithoutSpace(true);
  163.         content->setMaxLineWidth(dialogContentSize.width - 2 * contentPadding);
  164.         content->setPosition(Vec2(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2));
  165.         content->setHorizontalAlignment(TextHAlignment::LEFT);
  166.         this->addChild(content);
  167.     }
  169.     // 添加label或button，并设置其位置
  170.     //label
  171.     this->addChild(getMenuLabel());
  172.     auto adaptHeight = 0;
  173.     if (title) adaptHeight = title->getContentSize().height;
  174.     const auto labelHeight = (dialogContentSize.height - adaptHeight -40) / (getMenuLabel()
  175.         ->getChildrenCount() + 2);
  177.     // 布局labelMenuItem
  178.     auto labels = getMenuLabel()->getChildren();
  179.     auto i = 0;
  180.     for (auto menuItem : labels)
  181.     {
  182.         auto node = dynamic_cast<Node*>(menuItem);
  183.         node->setPosition(Point(SCREEN_WIDTH / 2,
  184.                                 (SCREEN_HEIGHT + dialogContentSize.height / -adaptHeight + 50) /
  185.                                 2 - dialogContentSize.height / 2.5 + labelHeight * (getMenuLabel()->
  186.                                     getChildrenCount() - i)));
  187.         i++;
  188.     }
  190.     // button
  191.     this->addChild(getMenuButton());
  193.     const auto buttonWidth = dialogContentSize.width / (getMenuButton()->getChildrenCount() + 1);
  194.     auto nodes = getMenuButton()->getChildren();
  195.     i = 0;
  196.     for (auto menuItem : nodes)
  197.     {
  198.         auto node = dynamic_cast<Node*>(menuItem);
  200.         node->setPosition(Point(SCREEN_WIDTH / 2 - dialogContentSize.width / 2 + buttonWidth * (i + 1),
  201.                                 SCREEN_HEIGHT / 2 - dialogContentSize.height / 2.5));
  202.         i++;
  203.     }
  204. }
  206. void Dialog::initRankDialog()
  207. {
  208.     // 显示对话框标题
  209.     if (getLabelTitle())
  210.     {
  211.         getLabelTitle()->setPosition(center + Vec2(0, dialogContentSize.height / 2 - 75.0f));
  212.         this->addChild(getLabelTitle());
  213.     }
  215.     this->addChild(getMenuButton());
  217.     // 添加button，设置布局
  218.     const auto buttonWidth = dialogContentSize.width / (getMenuButton()->getChildrenCount() + 1);
  219.     auto nodes = getMenuButton()->getChildren();
  221.     auto i = 0;
  222.     for (auto menuItem : nodes)
  223.     {
  224.         auto node = dynamic_cast<Node*>(menuItem);
  225.         node->setPosition(Point(SCREEN_WIDTH / 2 - dialogContentSize.width / 2 + buttonWidth * (i + 1),
  226.                                 SCREEN_HEIGHT / 2 - dialogContentSize.height / 2.5));
  227.         i++;
  228.     }
  231.     listView = ListView::create();
  232.     listView->setDirection(ScrollView::Direction::VERTICAL);
  233.     listView->setTouchEnabled(true);
  234.     listView->setBounceEnabled(true);
  235.     listView->setBackGroundImageScale9Enabled(true);
  236.     listView->setAnchorPoint(Point(0.5f, 0.5f));
  237.     listView->setContentSize(Size(500, 400));
  238.     listView->setPosition(Point(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2));
  239.     listView->setScrollBarAutoHideTime(0);
  240.     listView->setScrollBarColor(Color3B::WHITE);
  241.     this->addChild(listView);
  243.     //添加鼠标事件侦听
  244.     listenerMouse = EventListenerMouse::create();
  245.     listenerMouse->setEnabled(true);
  246.     listenerMouse->onMouseScroll = [&](EventMouse* event)
  247.     {
  248.         const auto y = event->getScrollY(); //滚轮上滑y值大于0，下滑y值小于0
  250.         if (y > 0)
  251.         {
  252.             if (position % 11 < 10)
  253.                 position++;
  254.             listView->scrollToPercentVertical(10 * (position % 11), 0.5, true);
  255.         }
  256.         else
  257.         {
  258.             if (position % 11 > 0)
  259.                 position--;
  260.             listView->scrollToPercentVertical(10 * (position % 11), 0.5, true);
  261.         }
  262.     };
  264.     _eventDispatcher->addEventListenerWithSceneGraphPriority(listenerMouse, this);
  267.     // 不同游戏模式的排行榜切换按钮         
  268.     auto changeTypeButton = Button::create(theme->menuChangeTypeButtonNormalBackground,
  269.                                            theme->menuChangeTypeButtonSelectedBackground,
  270.                                            theme->menuChangeTypeButtonDisabledBackground); // 切换到进阶
  272.     auto backTypeButton = Button::create(theme->menuBackTypeButtonNormalBackground,
  273.                                          theme->menuBackTypeButtonSelectedBackground,
  274.                                          theme->menuBackTypeButtonDisabledBackground); // 切换到经典
  277.     changeTypeButton->setPosition(Point(SCREEN_WIDTH / 2 + listView->getContentSize().width / 2 + 50,
  278.                                         SCREEN_HEIGHT / 2));
  280.     backTypeButton->setPosition(Point(SCREEN_WIDTH / 2 - listView->getContentSize().width / 2 - 50,
  281.                                       SCREEN_HEIGHT / 2));
  282.     backTypeButton->setOpacity(0); // 切换经典初始不可见
  284.     backTypeButton->addTouchEventListener(
  285.         [&, changeTypeButton, backTypeButton](Ref* sender, ui::Widget::TouchEventType type)
  286.         {
  287.             if (type == Widget::TouchEventType::ENDED)
  288.             {
  289.                 title->setString("经典挑战排行");
  290.                 backTypeButton->setOpacity(0);
  291.                 changeTypeButton->runAction(FadeIn::create(0.25));
  292.                 if (changed)
  293.                     getRankByType(true);
  294.                 changed = false;
  295.             }
  296.         });
  298.     changeTypeButton->addTouchEventListener(
  299.         [&, changeTypeButton, backTypeButton](Ref* sender, ui::Widget::TouchEventType type)
  300.         {
  301.             if (type == Widget::TouchEventType::ENDED)
  302.             {
  303.                 title->setString("进阶挑战排行");
  304.                 changeTypeButton->setOpacity(0);
  305.                 backTypeButton->runAction(FadeIn::create(0.25));
  306.                 if (!changed)
  307.                     getRankByType(false);
  308.                 changed = true;
  309.             }
  310.         });
  312.     // 如果在menuScene中，排行榜可切换，gameScene中排行榜不可切换
  313.     if (isInMenu)
  314.     {
  315.         this->addChild(changeTypeButton);
  316.         this->addChild(backTypeButton);
  317.     }
  319.     // 根据游戏模式初始化排行榜
  320.     this->getRankByType(isClassical);
  321. }
  323. void Dialog::getRankByType(bool type)
  324. {
  325.     rankType = type;
  326.     if (content)
  327.     {
  328.         this->removeChild(content);
  329.         listView->setScrollBarEnabled(true);
  330.         listView->setScrollBarAutoHideTime(0);
  331.     }
  333.     if (!(rankType ? classicalRank.empty() : plusRank.empty()))
  334.     {
  335.         if (listView->getChildrenCount() > 0)listView->removeAllChildren();
  336.         for (auto i = 0; i < 10; i++)
  337.         {
  338.             auto icon = ImageView::create(theme->iconSet + std::to_string(i) + ".png");
  339.             layout = Layout::create();
  340.             layout->setLayoutType(Layout::Type::ABSOLUTE);
  341.             layout->setContentSize(Size(500, icon->getContentSize().height + 30));
  343.             icon->setPosition(Vec2(icon->getContentSize().width / 2 + 60, 30));
  344.             layout->addChild(icon);
  345.             layout->setBackGroundColorType(Layout::BackGroundColorType::NONE);
  347.             rankLabel = Label::createWithTTF(std::to_string(i + 1), theme->semiBoldFont, 30);
  348.             rankLabel->setPosition(Vec2(icon->getContentSize().width / 2 + 10, 30));
  349.             layout->addChild(rankLabel);
  352.             if (i > (rankType ? classicalRank.size() : plusRank.size()) - 1)
  353.             {
  354.                 nameLabel = Label::createWithTTF("------------------", theme->markerFeltFont, 30);
  355.                 nameLabel->setPosition(Vec2(
  356.                     icon->getContentSize().width + nameLabel->getContentSize().width / 2 + 75,
  357.                     30));
  358.                 layout->addChild(nameLabel);
  360.                 scoreLabel = Label::createWithTTF("---------", theme->markerFeltFont, 30);
  361.                 scoreLabel->setPosition(Vec2(465 - scoreLabel->getContentSize().width / 2, 30));
  362.                 layout->addChild(scoreLabel);
  363.             }
  364.             else
  365.             {
  366.                 nameLabel = Label::createWithTTF(rankType ? classicalRank.at(i).first : plusRank.at(i).first,
  367.                                                  theme->semiBoldFont, 30);
  368.                 nameLabel->setPosition(Vec2(
  369.                     icon->getContentSize().width + nameLabel->getContentSize().width / 2 + 75,
  370.                     30));
  371.                 layout->addChild(nameLabel);
  373.                 scoreLabel = Label::createWithTTF(
  374.                     std::to_string(rankType ? classicalRank.at(i).second : plusRank.at(i).second),
  375.                     theme->semiBoldFont, 30);
  376.                 scoreLabel->setPosition(Vec2(465 - scoreLabel->getContentSize().width / 2, 30));
  377.                 layout->addChild(scoreLabel);
  378.             }
  379.             listView->pushBackCustomItem(layout);
  380.             listView->setBottomPadding(icon->getContentSize().height);
  381.         }
  382.     }
  383.     else
  384.     {
  385.         if (listView->getChildrenCount() > 0)listView->removeAllChildren();
  386.         listView->setScrollBarEnabled(false);
  387.         setContentText("抱歉! 网络连接失败!", 36, 60, 20);
  388.         content = getLabelContentText();
  389.         content->setLineBreakWithoutSpace(true);
  390.         content->setMaxLineWidth(dialogContentSize.width - 2 * contentPadding);
  391.         content->setPosition(Vec2(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2));
  392.         content->setHorizontalAlignment(TextHAlignment::LEFT);
  393.         this->addChild(content);
  394.     }
  395. }

模板二

　　最近在做个小的示例项目，确定后打算用cocos2dx框架来做UI部分，毕竟它易于使用还跨平台，像我这样几乎完全没有cocos2dx基础的童鞋，也能快速上手。在开发过程中，我想像在桌面应用中那样，弹出一个窗口并给出一些文本提示。无奈好像cocos2dx并没有给出现成可用的东西，只能自己琢磨实现了。考虑过后，打算通过Layer类来构建一个子类，然后在Scene中去显示该Layer，从而模拟出“窗口”的效果。我查阅了一些资料发现，网上有很多类似的实现代码，但他们大多已经过时，因这两年cocos2dx的版本变化好像挺大。

　　按照上述的思路构建子类测试后发现，监听的事件不会被“阻隔”，例如：我们在Scene中监听了鼠标和键盘，然后在Scene中去添加了该Layer，并在该Layer中也监听了鼠标点击事件，当我们在该Layer中点击鼠标时，Scene中也会触发该事件。这就导致了一些奇怪的现象，和预期不符合。本文将试着简介如何用一种足够简单的方法，构建这样一个“模态对话框类”并解决包含事件不“阻隔”在内的几乎所有问题。

　　在开始前，先简要说明一下环境。本次实验编写于Linux平台。因实验于PC平台，我在示例所监听的都是鼠标和键盘事件，对于移动平台的触摸事件未做任何测试，但理论上也是可行的，具体请读者自测和变更，以适应特定的场景。

  1. #ifndef MYGAME_POPUPLAYER_H
  2. #define MYGAME_POPUPLAYER_H
  4. #include "cocos2d.h"
  6. USING_NS_CC;
  8. class PopupLayer:public cocos2d::Layer
  9. {
  10. public:
  11.     PopupLayer();
  12.     virtual ~PopupLayer();
  14. private:
  15.     std::string backgroundImage;
  17.     EventListenerMouse *listenerMouse;
  19. public:
  21.     virtual bool init() override;
  23.     CREATE_FUNC(PopupLayer);
  25.     static PopupLayer* create(const std::string backgroundImage);
  27.     bool setBackgroundImage(const std::string &backgroundImage);
  29.     void okMenuItemCallback(Ref *pSender);
  31.     void cancelMenuItemCallback(Ref *pSender);
  33.     /**
  34.      * Event callback that is invoked every time when Node enters the 'stage'.
  35.      * If the Node enters the 'stage' with a transition, this event is called when the transition starts.
  36.      * During onEnter you can't access a "sister/brother" node.
  37.      * If you override onEnter, you shall call its parent's one, e.g., Node::onEnter().
  38.      * @lua NA
  39.      */
  40.     virtual void onEnter() override;
  42.     /**
  43.      * Event callback that is invoked every time the Node leaves the 'stage'.
  44.      * If the Node leaves the 'stage' with a transition, this event is called when the transition finishes.
  45.      * During onExit you can't access a sibling node.
  46.      * If you override onExit, you shall call its parent's one, e.g., Node::onExit().
  47.      * @lua NA
  48.      */
  49.     virtual void onExit() override;
  50. };
  52. #endif //MYGAME_POPUPLAYER_H

　首先 PopupLayer继承自Layer类，你也可以继承自其他Layer类，如LayerColor，这样你可以获得不同的特性。这里仅仅定义了两个数据成员，一个std::string用于存储整个“窗口”的背景图文件名，一个EventListenerMouse指针存储鼠标监听器，稍后可以看到是如何使用它们的。最后，来看看添加了哪些成员方法。首先，我重写了基类的init()方法，如果你对cocos2dx不陌生，那么你应该知道在该方法中要做哪些事情。其次，我使用 CREATE_FUNC 宏来构建了一个默认的静态create()方法，这基本上也是cocos2dx的传统。为了进一步满足需求，我还提供了静态create()方法的一个重载，它将包含一个参数用于指定背景资源名。setBackgroundImage()方法可以用来设置和更改背景资源。okMenuItemCallback()和cancelMenuItemCallback()是“模态对话框”上两个按钮的回调方法。最后我还重写了基类的onEnter()和onExit()方法，这两个方法至关重要，稍后你将看到它们是如何相互配合完成整个功能的。

　　cocos2dx使用一个类对象前，总是先调用它的静态create()方法来创建该类的一个实例，所以我们先从它开始介绍。

  1. PopupLayer* PopupLayer::create(const std::string backgroundImage)
  2. {
  3.     PopupLayer *pl = new(std::nothrow) PopupLayer();
  4.     if (pl && pl->setBackgroundImage(backgroundImage) && pl->init())
  5.     {
  6.         pl->autorelease();
  7.         return pl;
  8.     }
  9.     else
  10.     {
  11.         delete pl;
  12.         pl = nullptr;
  13.         return nullptr;
  14.     }
  15. }

可以看到，我们只增加了setBackgroundImage()方法的调用。接着就是init()方法了。

  1. bool PopupLayer::init()
  2. {
  3.     // 1. super init first
  4.     if ( !Layer::init() )
  5.     {
  6.         return false;
  7.     }
  9.     auto visibleSize = Director::getInstance()->getVisibleSize();
  10.     Vec2 origin = Director::getInstance()->getVisibleOrigin();
  11.     this->setAnchorPoint(Vec2::ZERO);
  13.     // add "HelloWorld" splash screen"
  14.     auto sprite = Sprite::create(backgroundImage);
  16.     // position the sprite on the center of the screen
  17.     sprite->setPosition(Vec2(visibleSize.width/2, visibleSize.height/2));
  19.     // add the sprite as a child to this layer
  20.     this->addChild(sprite, 1);
  22.     auto label = Label::createWithTTF("Are u sure exit?", "fonts/Marker Felt.ttf", 24);
  23.     label->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2 + 50));
  24.     label->setColor(Color3B(255,0,0));
  25.     this->addChild(label, 1);
  27.     auto okMenuItem = MenuItemFont::create("OK", CC_CALLBACK_1(PopupLayer::okMenuItemCallback, this));
  28.     okMenuItem->setPosition(Vec2(visibleSize.width / 2 - 100, visibleSize.height / 2 - 50));
  29.     okMenuItem->setColor(Color3B(255,0,0));
  31.     auto cancelMenuItem = MenuItemFont::create("Cancel", CC_CALLBACK_1(PopupLayer::cancelMenuItemCallback, this));
  32.     cancelMenuItem->setPosition(Vec2(visibleSize.width / 2 + 100, visibleSize.height / 2 - 50));
  33.     cancelMenuItem->setColor(Color3B(255,0,0));
  35.     auto pMenu = Menu::create(okMenuItem, cancelMenuItem, NULL);
  36.     pMenu->setPosition(Vec2::ZERO);
  37.     this->addChild(pMenu, 1);
  39.     return true;
  40. }

init()方法也足够简单，创建了一个sprite来作为背景，一个label来显示一些文本信息和两个菜单按钮，并设置了这两个菜单按钮的回调方法。

　　最后是onEnter()方法和onExit()方法，这是两个重点。onEnter()方法是在该“模态对话框”Layer显示时会被调用。相反，onExit()方法会在它消失时被调用。这两个机制可以用来做一些事情。

  1. void PopupLayer::onEnter()
  2. {
  3.     Layer::onEnter();
  4.     if (listenerMouse == nullptr)
  5.     {
  6.         listenerMouse = EventListenerMouse::create();
  7.         listenerMouse->onMouseDown = [](EventMouse* event) {
  8.         };
  9.     }
  10.     if (listenerMouse)
  11.     {
  12.         _eventDispatcher->pauseEventListenersForTarget(this->getParent(), true);
  13.         _eventDispatcher->addEventListenerWithSceneGraphPriority(listenerMouse, this);
  14.     }
  16. }
  18. void PopupLayer::onExit()
  19. {
  20.     Layer::onExit();
  21.     if (listenerMouse)
  22.     {
  23.         _eventDispatcher->removeEventListener(listenerMouse);
  24.         _eventDispatcher->resumeEventListenersForTarget(this->getParent(), true);
  25.     }
  27. }

在onEnter()方法中，我们先创建一个鼠标监听对象，并设置了它的回调函数，只不过回调函数为空，什么也不做。然后通过eventDispatcher对象的pauseEventListenersForTarget()方法来暂停“模态对话框”父级窗口的事件监听器，并把自己的监听器添加到事件分发器中。所谓的父级窗口指的是“模态对话框”的下层Layer。这里是“模态对话框”下层Layer屏蔽事件监听的关键所在，如果不屏蔽它，则在“模态对话框”上发生的监听事件也会传递给它的下层Layer。也有的文章说可以设置监听器的优先级来解决该问题，但我没能找到解决方法。

　　在onExit()方法中，我们来做一些清理还原工作，因为onExit()方法被调用，意味着“模态对话框”Layer即将消失，所以我们从事件分发器中删除它的鼠标监听器，并重新启用它下层Layer的事件监听器。这样便可以还原。

　　最后，来看看如何使用它。我通过cocos2dx创建了一个新工程，并对HelloWorld场景做了一些小的改动，以方便测试。下面是它的init()方法。

  1. bool HelloWorld::init()
  2. {
  3.     //////////////////////////////
  4.     // 1. super init first
  5.     if ( !Layer::init() )
  6.     {
  7.         return false;
  8.     }
  10.     auto visibleSize = Director::getInstance()->getVisibleSize();
  11.     Vec2 origin = Director::getInstance()->getVisibleOrigin();
  13.     /////////////////////////////
  14.     // 2. add a menu item with "X" image, which is clicked to quit the program
  15.     //    you may modify it.
  17.     // add a "close" icon to exit the progress. it's an autorelease object
  18.     auto closeItem = MenuItemImage::create(
  19.                                            "CloseNormal.png",
  20.                                            "CloseSelected.png",
  21.                                            CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
  23.     closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
  24.                                 origin.y + closeItem->getContentSize().height/2));
  26.     // create menu, it's an autorelease object
  27.     auto menu = Menu::create(closeItem, NULL);
  28.     menu->setPosition(Vec2::ZERO);
  29.     this->addChild(menu, 1);
  31.     /////////////////////////////
  32.     // 3. add your codes below...
  33.     // add a label shows "Hello World"
  34.     // create and initialize a label
  36.     auto label = Label::createWithTTF("Hello World", "fonts/Marker Felt.ttf", 24);
  38.     // position the label on the center of the screen
  39.     label->setPosition(Vec2(origin.x + visibleSize.width/2,
  40.                             origin.y + visibleSize.height - label->getContentSize().height));
  42.     // add the label as a child to this layer
  43.     this->addChild(label, 1);
  45.     auto label1 = Label::createWithTTF("Press the Enter key or click the left mouse button.", "fonts/Marker Felt.ttf", 12);
  47.     // position the label on the center of the screen
  48.     label1->setPosition(Vec2(origin.x + visibleSize.width/2, 100));
  50.     // add the label as a child to this layer
  51.     this->addChild(label1, 1);
  53.     // add "HelloWorld" splash screen"
  54.     auto sprite = Sprite::create("HelloWorld.png");
  56.     // position the sprite on the center of the screen
  57.     sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
  59.     // add the sprite as a child to this layer
  60.     this->addChild(sprite, 0);
  62.     //添加鼠标事件侦听
  63.     auto listenerMouse = EventListenerMouse::create();
  64.     listenerMouse->setEnabled(true);
  65.     listenerMouse->onMouseDown = [&](EventMouse* event) {
  67.         int mouseBtn = event->getMouseButton();
  68.         if (0 == mouseBtn) {
  69.             auto sprite = Sprite::create("HelloWorld.png");
  70.             sprite->setPosition(event->getLocationInView().x, event->getLocationInView().y);
  71.             sprite->setScale(0.5f,0.5f);
  72.             this->addChild(sprite, 1);
  73.         }
  74.     };
  75.     _eventDispatcher->addEventListenerWithSceneGraphPriority(listenerMouse, this);
  77.     //添加键盘事件监听
  78.     auto listenerKeyboard = EventListenerKeyboard::create();
  79.     listenerKeyboard->setEnabled(true);
  80.     listenerKeyboard->onKeyPressed = [&](EventKeyboard::KeyCode keycode, Event* event){
  81.        if(EventKeyboard::KeyCode::KEY_ENTER == keycode){
  82.             auto pl = PopupLayer::create("background.png");
  83.             pl->setScale(0.5f,0.5f);
  84.             pl->setParent(this);
  85.             pl->setPosition(Vec2(visibleSize.width/2, visibleSize.height/2));
  86.             pl->setAnchorPoint(Vec2(0.5f,0.5f));
  87.             this->addChild(pl, 2);
  88.         }
  89.     };
  90.     _eventDispatcher->addEventListenerWithSceneGraphPriority(listenerKeyboard, this);
  92.     return true;
  93. }

我在里面增加了一个label，用于显示一些提示信息。增加了鼠标左键的事件监听，并在点击的位置绘制一张图片。这样做可以很好的演示当“模态对话框”Layer打开后，是否有效的屏蔽了下层Layer的事件监听。最后，添加了键盘监听，当我们敲击Enter键后，“模态对话框”Layer就会显示出来。值得特别注意的是，我调用了这样一个方法 pl->setParent(this); 用于设置了“模态对话框”Layer的父级Node，这是基类给提供的一个方法，千万别忘了设置它，其他的都足够简单了。
　　好了，你可以试着获取完整的代码，并编译运行一下，希望能解决你的问题或者给你一些新的思路。最后，我不太了解cocos2dx框架，如果本文或者示例中有什么错误或者不规范的地方，请指正，谢谢。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注