Cocos2d-x 3.2新手指导框GuideLayer 实现

实现思路：

我们可以用Cocos2d-x提供给我们的LayerColor，在你想要被点击的区域周围添加4块LayerColor

如下图所示：

代码实现：

GuideLayer.h

 1 #ifndef __GUIDELAYER_H__
 2 #define __GUIDELAYER_H__
 3
 4
 5 /******************************************
 6  *
 7  * 在很多的游戏里（特别是RPG游戏），一开始都会有一个关于操作的介绍的。
 8  * 除了系统希望你所点击的区域外，其余区域都会变暗，而且你点暗的区域是不会有任何反应的。
 9  *
10  * 我们可以用Cocos2d-x提供给我们的LayerColor，在你想要被点击的区域周围添加4块LayerColor
11  *
12  *
13  * 如图所示
14  *
15  *        区域1
16  * 区            区
17  * 域            域
18  * 3            4
19  *        区域2
20  *
21  *
22 *******************************************/
23
24 #include "cocos2d.h"
25
26 USING_NS_CC;
27
28 class GuideLayer :public Layer{
29
30 public:
31     // 构造 析构
32     GuideLayer();
33     ~GuideLayer();
34
35     // 用于创建一个指导层，参数：可触控区域
36     static GuideLayer* create(const Rect& rect);
37
38     // 用于创建一个指导层，参数：可触控区域，不可触控区域的颜色
39     static GuideLayer* create(const Rect& rect, const Color4B& color);
40
41     // 初始化
42     bool init(const Rect& rect);
43     bool init(const Rect& rect, const Color4B& color);
44
45     // 触摸函数调用
46     virtual bool onTouchBegan(Touch *touch, Event *unused_event);
47
48 private:
49     // 不可触摸的 4 个区域的颜色
50     LayerColor* _area1;
51     LayerColor* _area2;
52     LayerColor* _area3;
53     LayerColor* _area4;
54
55     // 默认的颜色( 黑色，透明度为 25% )
56     Color4B defaultColor;
57
58     Rect _rect;
59
60     EventListenerTouchOneByOne *_listener;
61
62 };
63
64
65 #endif    // __GUIDELAYER_H__

GuideLayer.cpp

  1 #include "GuideLayer.h"
  2
  3 GuideLayer::GuideLayer() :
  4   defaultColor(0, 0, 0, 0.25 * 255){
  5
  6 }
  7
  8 GuideLayer::~GuideLayer(){
  9
 10 }
 11
 12 GuideLayer* GuideLayer::create(const Rect& rect){
 13
 14     GuideLayer *ret = new GuideLayer();
 15     if (ret && ret->init(rect)){
 16         ret->autorelease();
 17         return ret;
 18     }
 19     CC_SAFE_DELETE(ret);
 20     return nullptr;
 21 }
 22
 23 GuideLayer* GuideLayer::create(const Rect& rect, const Color4B& color){
 24
 25     GuideLayer *ret = new GuideLayer();
 26     if (ret && ret->init(rect, color)){
 27         ret->autorelease();
 28         return ret;
 29     }
 30     CC_SAFE_DELETE(ret);
 31     return nullptr;
 32 }
 33
 34 bool GuideLayer::init(const Rect& rect){
 35
 36     if (!Layer::init())
 37         return false;
 38     _rect = rect;    // 将传进来的 rect 赋值给 _rect 成员变量
 39     // 获取屏幕的可视区域的大小
 40     Size visibleSize = Director::getInstance()->getVisibleSize();
 41     // 为区域 1、2、3、4 设置颜色 参数：颜色，宽度，高度
 42     // 设置锚点，设置位置
 43     _area1 = LayerColor::create(defaultColor, visibleSize.width, visibleSize.height - rect.getMaxY());
 44     _area1->setAnchorPoint(Vec2(0, 0));
 45     _area1->setPosition(Vec2(0, rect.getMaxY()));
 46     this->addChild(_area1);
 47
 48     _area2 = LayerColor::create(defaultColor, visibleSize.width, rect.getMinY());
 49     _area2->setAnchorPoint(Vec2(0, 0));
 50     _area2->setPosition(Vec2(0, 0));
 51     this->addChild(_area2);
 52
 53     _area3 = LayerColor::create(defaultColor, rect.getMinX(), rect.getMaxY() - rect.getMinY());
 54     _area3->setAnchorPoint(Vec2(0, 0));
 55     _area3->setPosition(Vec2(0, rect.getMinY()));
 56     this->addChild(_area3);
 57
 58     _area4 = LayerColor::create(defaultColor, visibleSize.width - rect.getMinX(), rect.getMaxY() - rect.getMinY());
 59     _area4->setAnchorPoint(Vec2(0, 0));
 60     _area4->setPosition(Vec2(rect.getMaxX(), rect.getMinY()));
 61     this->addChild(_area4);
 62
 63     // 设置监听器，截断非 rect 外区域的触摸事件
 64     _listener = EventListenerTouchOneByOne::create();
 65     _listener->onTouchBegan = CC_CALLBACK_2(GuideLayer::onTouchBegan, this);
 66     Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(_listener, this);
 67
 68     return true;
 69 }
 70
 71 bool GuideLayer::init(const Rect& rect, const Color4B& color){
 72
 73     Color4B color4b = defaultColor;
 74     defaultColor = color;
 75     // 调用默认的 init() 方法
 76     if (init(rect)){
 77         defaultColor = color4b;
 78         return true;
 79     }
 80     else{
 81         return false;
 82     }
 83 }
 84
 85 bool GuideLayer::onTouchBegan(Touch *touch, Event *unused_event){
 86
 87     // 就是先检测触摸点是否在里亮的区域，
 88     // 如果不是，则阻断触摸点的向下传递，
 89     // 如果是，则允许触摸点向下传递。
 90
 91     //Vec2 touchLocation = touch->getLocation();
 92     Vec2 touchPoint = Director::getInstance()->convertToGL(touch->getLocationInView());
 93     _listener->setSwallowTouches(false);   // 设置向下传递触摸事件，true 表示不向下传递
 94     if (_rect.containsPoint(touchPoint)){
 95         log("(x,y) <===>  (%f,%f)", touchPoint.x, touchPoint.y);
 96         return false;
 97     }
 98     else{
 99         _listener->setSwallowTouches(true);    // 设置不向下传递触摸事件
100         return true;
101     }
102 }

在HelloWorldScene.cpp中的

bool HelloWorld::init(){

　　…………

// 添加新手指引界面

//Rect rect = Rect(200, 200, 250, 250);
    Size spriteHW = sprite->getContentSize();
    Rect rectspriteHw = Rect(sprite->getPositionX() - spriteHW.width / 2, sprite->getPositionY() - spriteHW.height / 2, sprite->getPositionX() - 200, 　　　　　　　　　　　　　　　　　　　　　　　　　sprite->getPositionY() - 200);
    //Rect rectspriteHw = Rect(0, 0, sprite->getPositionX(), sprite->getPositionY());
    //Layer *sc = GuideLayer::create(rectspriteHw,Color4B(255,255,255,100));
    Layer *sc = GuideLayer::create(rectspriteHw);
    //sc->setPosition(100, 100);
    this->addChild(sc);

}

结果图：