Cocos2dx3.2 compile common UI components (1) GuideLayer

Cocos2dx3.2 compile common UI components (1) GuideLayer

Preface:

In many games (especially RPG games), there will be an introduction to operations at the beginning, almost like that.

Except for the area that the system wants you to click, the other areas will be dimmed, and the area that you click will not respond.

 

Body:

The following describes how to implement it:

I. Implementation ideas:

We can use the LayerColor provided by Cocos2dx to add four layers around the area you want to be clicked, as shown in

 

Ii. Code Implementation

GuideLayer. h

 

Class GuideLayer: public Node {private: GuideLayer (); public: // used to create a guiding layer. Parameter: static GuideLayer * create (const Rect & rect) in the touchable area ); // create a guiding layer. Parameter: Specifies the color of the touchable area. The color is 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 ;};

The header file is not complex and should be clear. Here, defaultColor is black and the transparency is 25%.

 

 

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

 

 

GuideLayer has two create methods. The difference is that one create method uses the default color (black), and the other can accept one color parameter.

First, use the create and init methods of the default color.

 

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 ); // set the listener to intercept the touch event m_listener = EventListenerTouchOneByOne: create (); m_listener-> onTouchBegan = CC_CALLBACK_2 (GuideLayer: onTouchBegan, this); Director :: getInstance ()-> getEventDispatcher ()-> addEventListenerWithSceneGraphPriority (m_listener, this); return true ;}

In fact, the implementation is very simple, that is, the coordinates and sizes of LayerColor in four non-touch areas are calculated based on the input rect area.

 

Add a listener for yourself. The callback function is onTouchBegan, which blocks the listener.

 

Then let's look at the create and init methods of the incoming color parameters.

 

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

The default init method is called indirectly.

 

 

Finally, let's take a look at the listener's callback function.

 

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;}}

 

It is to first check whether the touch point is in the highlighted area. If not, the downward transmission of the touch point is blocked. If yes, the downward transmission of the touch point is allowed.

Because of this implementation, you should pay attention when using GuideLayer. When addChild is used, put GuideLayer to the top layer.

 

Appendix and GuideLayer source code