cocos3.3 ClippingNode做游戏的新手指导 .

游戏开发中，很多游戏都会出现新手指导，让玩家熟悉游戏的操作流程。

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

（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,150));  
	clipper->addChild(layerBg);  
	auto stencil=Sprite::create("Closenormal.png");  
	stencil->setPosition(closeItem2->getPosition());  
	clipper->setStencil(stencil);//设置裁剪模板  
	clipper->setInverted(true); //设置底板可见，显示剩余部分  
	clipper->setAlphaThreshold(0.0f);//设置绘制底板的Alpha值为0 

    auto clipper=ClippingNode::create(); //创建一个ClippingNode对象
    this->addChild(clipper,1);
    
    //添加了一个背景层
    auto layerBg=LayerColor::create(Color4B(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

如果你的模版和你用显示的控件所用的图片都是相同的就可以高亮这个控件。

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

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

//设置是否向下传递触摸

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

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