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

发布时间：2020-12-14 20:18:43 所属栏目：百科来源：网络整理

导读：在很多的游戏里（特别是RPG游戏），一开始都会有一个关于操作的介绍，几乎都像下图那样子的。除了系统希望你所点击的区域外，其余区域都会变暗，而且你点暗的区域是不会有任何反应的。正文：下面我们来讲怎么实现的：一、实现思路：我们可以用Cocos2d-x

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

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

正文：

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

一、实现思路：

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

二、代码实现

GuideLayer.h

 
        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; 
       
        Color4BdefaultColor; 
       
        Rectm_rect; 
       
        EventListenerTouchOneByOne*m_listener; 
       
        };

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

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

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

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

 
        bool 
        GuideLayer::init( 
        const 
        Rect&rect){ 
       
        if 
        (!Node::init()) 
        return 
        false 
        ; 
       
        m_rect=rect; 
       
        SizevisibleSize=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方法

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

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

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

 
        bool 
        GuideLayer::onTouchBegan(Touch*touch,Event*event){ 
       
        PointtouchPoint=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源码：点击下载

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!