[笨木头Cocos2dx043]小玩半透明遮罩第01篇:添加半透明遮罩，屏蔽下层点击事件

[笨木头Cocos2dx043]小玩半透明遮罩第01篇:添加半透明遮罩，屏蔽下层点击事件

 

呼呼，我现在是各种兴奋紧张恨，好久没有写教程了，不知道功力下降没（小若：不会的，不会下降的~已经最低了）。

 

笨木头花心贡献，啥？花心？不呢，是用心~
    转载请注明，原文地址：http://www.benmutou.com/blog/archives/692

正文：

这次我们来玩玩半透明遮罩吧，就是那种比如游戏中点了一个按钮，要等待服务器响应，然后就黑屏等待。O_O!不是黑屏，就是半透明的黑屏，盖在游戏最上层。

 

1. 新建项目

好，先新建一个HelloWorldScene项目，自动生成的HelloWorldScene场景不要删除，然后运行成功，这个过程太复杂了，我就不解释了，效果：

2. 添加透明层

先来实现第一步吧，随便加个透明层，随便取个名字，就叫做ShadeLayer吧，我查了字典的~

头文件：

#ifndef ShadeLayer_H

#define ShadeLayer_H

#include "cocos2d.h"

USING_NS_CC;

class ShadeLayer : public CCLayer {

public:

static ShadeLayer* create(CCLayer* uiLayer);

bool init(CCLayer* uiLayer);

};

#endif

为什么要加个CCLayer参数？因为以后要用到，现在暂时忽略，就是一个普通的Layer类。

好，重点是init函数，如下：

bool ShadeLayer::init(CCLayer* uiLayer) {

bool bRet = false;

do {

CC_BREAK_IF(!CCLayer::init());

CCAssert(uiLayer, "uiLayer == NULL!");

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();

/* 半透明层 */

CCLayerColor* layerColor = CCLayerColor::create();

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

layerColor->setOpacity(150);

layerColor->setContentSize(CCSizeMake(visibleSize.width, visibleSize.height));

this->addChild(layerColor);

bRet = true;

} while (0);

return bRet;

}

简单地添加了一个CCLayerColor作为半透明层，目前为止没有东西需要解释。

最后，在HelloWorldScene的init函数的最后加上一句代码：

bool HelloWorld::init()

{

bool bRet = false;

do {

/* 省略了一堆代码 */

/* 添加半透明层 */

this->addChild(ShadeLayer::create(this), 100);

bRet = true;

} while (0);

return bRet;

}

运行效果：

噗，完美，有半透明的效果了。

就这样，本教程结束…啊才怪啊！（小若：换个吐槽的招数好不好，听腻了）

 

3. 让下层的所有东西都不能点击

现在点击右下角的关闭按钮还是会响应，这不是我们想要的，在半透明遮罩出现的时候，下层的所有内容都不应该响应点击。

这很简单，修改一下ShadeLayer的init函数：

bool ShadeLayer::init(CCLayer* uiLayer) {

bool bRet = false;

do {

CC_BREAK_IF(!CCLayer::init());

CCAssert(uiLayer, "uiLayer == NULL!");

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();

/* 半透明层 */

CCLayerColor* layerColor = CCLayerColor::create();

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

layerColor->setOpacity(150);

layerColor->setContentSize(CCSizeMake(visibleSize.width, visibleSize.height));

this->addChild(layerColor);

/* 全屏菜单，屏蔽下层点击事件 */

CCMenuItemImage* item = CCMenuItemImage::create();

item->setContentSize(CCSizeMake(visibleSize.width, visibleSize.height));

item->initWithTarget(this, menu_selector(ShadeLayer::itemCallback));

CCMenu* menu = CCMenu::create(item, NULL);

menu->setTouchPriority(-1280);

this->addChild(menu);

bRet = true;

} while (0);

return bRet;

}

这是一个投机的做法，在遮罩层里添加一个菜单，大小全屏，并且将触摸优先级设为-1280，尽量设小一点，这样，其他层的按钮就无法获得点击事件了。因为所有的点击事件都会被这个全屏菜单截取。

OK，运行试试，有下角的关闭按钮不能点击了。

好，这些都是最简单的情况，本篇到此结束。

 

下一篇将介绍，在半透明遮罩上面要放UI怎么办？比如对话框弹出的时候，下层需要出现半透明遮罩，而对话框不能被遮罩挡住，并且对话框的按钮必须可以点击。

虽然不知道我啥时候会有空去写…