Cocos2D-X UI基本教程：编写新手指导框

作者:课课家教育更新于： 2019-04-12 10:09:56

　　我们在刚开始玩一款手机游戏的时候都会出现新手指导框之类的新手教程，那么在游戏开发之中要怎么去制作相关的新手指导框呢？本篇教程将告诉你如何用Cocos2d-x制作新手指导框。

　　前言：

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

 

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

　　正文：

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

　　一、实现思路：

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

 

　　二、代码实现

　　GuideLayer.h

　　view plain copyclass 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%

　　view plain copyGuideLayer::GuideLayer():

　　defaultColor(0x00, 0x00, 0x00, 0xC0)

　　{}

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

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

　　view plain copybool 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方法

　　view plain copybool GuideLayer::init(const Rect& rect,const Color4B& color){

　　Color4B temp = defaultColor;

　　defaultColor = color;

　　if(init(rect)){

　　defaultColor = temp;

　　return true;

　　}else{

　　return false;

　　}

　　}

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

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

　　view plain copybool 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放到最上层。

　　附上效果图：