Cocos2d-x   发布时间:2022-05-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Cocos2d-x 3.2编写常用UI组件(一)新手指导框GuideLayer大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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


正文:

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


一、实现思路:

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

二、代码实现

GuideLayer.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@H_450_92@
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%

1
2
3
@H_450_92@
GuideLayer::GuideLayer():
defaultColor(0x00,0x00,0xC0)
{}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@H_674_426@ 45
46
47
48
@H_450_92@
bool GuideLayer::init( const Rect&rect){
if (!Node::init()) return false ;
@H_26_96@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外区域的触摸事件
@H_26_96@m_listener=EventListenerTouchOneByOne::create();
@H_26_96@m_listener->onTouchBegan=CC_CALLBACK_2(GuideLayer::onTouchBegan, this );
@H_674_426@ Director::geTinstance()->getEventDispatcher()->addEventListenerWithSceneGraphpriority(m_listener, this );
return true ;
}

其实实现非常的简单,就是根据传入的rect区域计算出4个不可触控区域LayerColor的坐标和大小

为自己添加一个监听器,回调函数是onTouchBegan,起阻断的作用。


再看传入颜色参数的create和init方法

1
2
3
4
5
6
7
8
9
10
@H_450_92@
bool GuideLayer::init( const Rect&rect, const Color4B&color){
Color4Btemp=defaultColor;
defaultColor=color;
if (init(rect)){
defaultColor=temp;
return true ;
} else {
return false ;
}
}

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


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

1
2
3
4
5
6
7
8
9
10
@H_450_92@
bool GuideLayer::onTouchBegan(Touch*touch,Event*event){
PointtouchPoint=Director::geTinstance()->convertToGL(touch->getLOCATIOnInView());
@H_26_96@m_listener->setSwallowTouches( false );
if (m_rect.containsPoint(touchPoint)){
return false ;
} else {
@H_26_96@m_listener->setSwallowTouches( true );
return true ;
}
}

就是先检测触摸点是否在里亮的区域,如果不是,则阻断触摸点的向下传递,如果是,则允许触摸点向下传递。

由于这样子实现,所以在用到GuideLayer的时候要注意了,尽量addChild的时候把GuideLayer放到最上层。


附上效果图和GuideLayer源码

GuideLayer源码:点击下载

大佬总结

以上是大佬教程为你收集整理的Cocos2d-x 3.2编写常用UI组件(一)新手指导框GuideLayer全部内容,希望文章能够帮你解决Cocos2d-x 3.2编写常用UI组件(一)新手指导框GuideLayer所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。