Cocos2dx3.2编写常用UI组件(一)新手指导框GuideLayer

前言:

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

Cocos2dx3.2编写常用UI组件(一)新手指导框GuideLayer_第1张图片

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


正文:

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

一、实现思路:

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

Cocos2dx3.2编写常用UI组件(一)新手指导框GuideLayer_第2张图片


二、代码实现

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;

	Color4B defaultColor;

	Rect m_rect;
	EventListenerTouchOneByOne* m_listener;
};

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

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


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

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

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方法

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方法罢了。


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

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源码

Cocos2dx3.2编写常用UI组件(一)新手指导框GuideLayer_第3张图片

GuideLayer源码:点击打开链接

你可能感兴趣的:(cocos2dx,系列教程)