标签：新手引导   cocos2dx   clippingnode   

auto stencil=Sprite::create("arrow.png");
stencil->setPosition(btn_right->getPosition());

    btn_right = Button::create("arrow.png");

那做为苦逼的我们，如何实现新手指导？（虽然很苦逼，有时却很快乐～）

（1）背景置灰、图标高亮

（2）屏蔽其他图标的点击事件

1. 背景置灰、图标高亮

背景遮罩使用 ：ClippingNode

ClippingNode 的定义

ClippingNode(裁剪节点)可以用来对节点进行裁剪，可以根据一个模板切割图片的节点，生成任何形状的节点显示。ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术。

ClippingNode 的具体使用文档：http://cocos2d-x.org/docs/manual/framework/native/v3/ClippingNode/zh

那具体如何实现，上菜～

    auto clipper=ClippingNode::create(); //创建一个ClippingNode对象
    this->addChild(clipper,1);
    
    //添加了一个背景层
    auto layerBg=LayerColor::create(Color4B(0,0,0,150));
    clipper->addChild(layerBg);
    
    auto stencil=Sprite::create("arrow.png");
    stencil->setPosition(btn_right->getPosition());
    
    clipper->setStencil(stencil);//设置裁剪模板
    clipper->setInverted(true); //设置底板可见，显示剩余部分
    clipper->setAlphaThreshold(0.0f);//设置绘制底板的Alpha值为0

主要说一下

    btn_right = Button::create("arrow.png");

    auto stencil=Sprite::create("arrow.png");
    stencil->setPosition(btn_right->getPosition());
   

2.屏蔽其他的图标的点击事件

auto listen_layer = Layer::create();//首先在场景的最上方再添加一个layer
    this->addChild(listen_layer,200);//zOrder设置为200，反正能在最上方就好
    
    listener = EventListenerTouchOneByOne::create();//创建一个触摸监听(单点触摸）
    listener->onTouchBegan = CC_CALLBACK_2(TollgateScene::onTouchBegan, this);//指定触摸的回调函数
    _eventDispatcher->addEventListenerWithSceneGraphPriority(listener,listen_layer);//将listener和layer绑定，放入事件委托中
    listener->onTouchBegan = [=](Touch *touch, Event *event){
        auto point = Director::getInstance()->convertToGL(touch->getLocationInView());//获得当前触摸的坐标
        auto rect = btn_right->boundingBox();
        if(rect.containsPoint(point))//如果触点处于rect中
        {
            listener->setSwallowTouches(false);
        }
        else
        {
            listener->setSwallowTouches(true);
        }
        return true;
    };

listener->setSwallowTouches(false); //可以向下传递触摸
其实主要的想法就是：

在场景最上面添加一个层，然后给层绑定点击事件，如果触摸坐标在你需要触摸的范围，就可以向下传递触摸，如果不在则停止向下传递触摸。

ClippingNode做游戏的新手指导

标签：新手引导   cocos2dx   clippingnode   

原文地址：http://blog.csdn.net/lengxue789/article/details/41481329