Cocos2d-x 3.2编写常用UI组件（一）新手指导框GuideLayer

在很多的游戏里（特别是RPG游戏），一开始都会有一个关于操作的介绍，几乎都像下图那样子的。

除了系统希望你所点击的区域外，其余区域都会变暗，而且你点暗的区域是不会有任何反应的。

正文：

下面我们来讲怎么实现的：

一、实现思路：

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

二、代码实现

GuideLayer.h

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

class   GuideLayer :  public  Node{        private :            GuideLayer();        public :            //用于创建一个指导层,参数：可触控区域            static  GuideLayer* create( const  Rect& rect);                    //用于创建一个指导层,参数：可触控区域，不可触控区域的颜色            static  GuideLayer* create( const  Rect& rect, const  Color4B& color);                private :            bool  init( const  Rect& rect);            bool  init( const  Rect& rect, const  Color4B& color);            bool  onTouchBegan(Touch* touch,Event* event);        private :            LayerColor* area1;            LayerColor* area2;            LayerColor* area3;            LayerColor* area4;                    Color4B defaultColor;                    Rect m_rect;            EventListenerTouchOneByOne* m_listener;   };

头文件并不复杂，应该可以看明白。这里的defaultColor是黑色，透明度为25%

1 2 3

GuideLayer::GuideLayer():        defaultColor(0x00, 0x00, 0x00, 0xC0)   {}

GuideLayer有两个create方法，区别在于一个create是使用默认的颜色（黑色），另一个可以接受一个颜色参数。

先看使用默认颜色的create和init方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

bool  GuideLayer::init( const  Rect& rect){        if (!Node::init())    return  false ;        m_rect = rect;        Size visibleSize = Director::getInstance()->getVisibleSize();        area1 = LayerColor::create(            defaultColor,            visibleSize.width,            visibleSize.height - rect.getMaxY()            );        area1->setAnchorPoint(Point(0,0));        area1->setPosition(Point(0,rect.getMaxY()));            area2 = LayerColor::create(            defaultColor,            visibleSize.width,            rect.getMinY()            );        area2->setAnchorPoint(Point(0,0));        area2->setPosition(Point(0,0));            area3 = LayerColor::create(            defaultColor,            rect.getMinX(),            rect.getMaxY()-rect.getMinY()            );        area3->setAnchorPoint(Point(0,0));        area3->setPosition(Point(0,rect.getMinY()));                area4 = LayerColor::create(            defaultColor,            visibleSize.width - rect.getMaxX(),            rect.getMaxY() - rect.getMinY()            );        area4->setAnchorPoint(Point(0,0));        area4->setPosition(Point(rect.getMaxX(),rect.getMinY()));            this ->addChild(area1);        this ->addChild(area2);        this ->addChild(area3);        this ->addChild(area4);            //设置监听器，截断非rect外区域的触摸事件        m_listener = EventListenerTouchOneByOne::create();        m_listener->onTouchBegan = CC_CALLBACK_2(GuideLayer::onTouchBegan, this );        Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(m_listener, this );            return  true ;   }

其实实现非常的简单，就是根据传入的rect区域计算出4个不可触控区域LayerColor的坐标和大小

为自己添加一个监听器，回调函数是onTouchBegan，起阻断的作用。

再看传入颜色参数的create和init方法

1 2 3 4 5 6 7 8 9 10

bool  GuideLayer::init( const  Rect& rect, const  Color4B& color){        Color4B temp = defaultColor;        defaultColor = color;        if (init(rect)){            defaultColor = temp;            return  true ;        } else {            return  false ;        }   }

只不过是间接调用了默认的init方法罢了。

最后，我们看一下监听器的回调函数

1 2 3 4 5 6 7 8 9 10

bool  GuideLayer::onTouchBegan(Touch* touch,Event* event){        Point touchPoint = Director::getInstance()->convertToGL(touch->getLocationInView());        m_listener->setSwallowTouches( false );        if (m_rect.containsPoint(touchPoint)){            return  false ;        } else {            m_listener->setSwallowTouches( true );            return  true ;        }   }

就是先检测触摸点是否在里亮的区域，如果不是，则阻断触摸点的向下传递，如果是，则允许触摸点向下传递。

由于这样子实现，所以在用到GuideLayer的时候要注意了，尽量addChild的时候把GuideLayer放到最上层。

附上效果图和GuideLayer源码

GuideLayer源码：点击下载