Cocos2dx 3.0 transition article (16) New User Guide for playing games with ClippingNode

It has become increasingly busy recently. My mind is: do not have a holiday, and then try to knock on the code to finish the project before the Tomb Sweeping Day. In this way, I can take a few days off and go straight to Ningbo to do what I have been trying to do since February 1!Happiness depends on oneself !!!
-----------------
This article describes how to use ClippingNode as a beginner guide for games.
ClippingNode:
CCClipingNode is a crop node, which is easy to understand:
(1) It is a node that inherits from CCNode, so it can be put into CCLayer, CCScene, and CCNode like a common node.
(2) As a node, it can be used as a container to carry other nodes and genie. I call it the baseboard.
(3) If you want to crop a node, You need to specify the cropping part. This cropping area is called a template.
Therefore, the CCClipingNode cropping node is composed of the Bottom Plate + template, while the display is equal to the bottom plate-template. I don't know if this explanation is better understood.

For specific usage, see the screen:

1. If the game starts, there is only one button on the game interface. Click it to display "Welcome to star blog !", The code is implemented as follows:

Size visibleSize = Director: getInstance ()-> getVisibleSize (); Point origin = Director: getInstance ()-> getVisibleOrigin (); auto closeItem = MenuItemImage :: create ("CloseNormal.png", "CloseSelected.png", CC_CALLBACK_1 (HelloWorld: menuCloseCallback, this); closeItem-> setPosition (Point (160,400); closeItem-> setTag (99 ); // set the tag of the item here, so that you can easily obtain the itemauto menu = Menu: create (closeItem, NULL); menu-> setPositio N (Point: ZERO); menu-> setTag (99); // here the tag is also set to 99this-> addChild (menu, 2 ); // Its callback function is to click this button, and a line of words will appear: Welcome to star blog !. Void HelloWorld: menuCloseCallback (Object * pSender) {auto _ lable = LabelTTF: create ("Welcome to star blog! "," Arial ", 25); _ lable-> setPosition (Point (160,300); this-> addChild (_ lable, 2 );}

Effect:

2. Then add ClippingNode:

Auto clip = ClippingNode: create (); // you can specify clip> setInverted (true) for the cropping node. // you can specify clip> setAlphaThreshold (0.0f) for the cropping node ); // set the transparency Alpha value to 0this-> addChild (clip, 10); auto layerColor = LayerColor: create (Color4B (0,150,); clip-> addChild (layerColor, 1); // Add a gray transparent layer to the cropping node // create a template, that is, the "hole" you want to dig out on the cropping node, here I use the close icon as the template auto nodef = Node: create (); // create the template auto close = Sprite: create ("CloseSelected.png "); // here the close icon nodef-> addChild (close) is used; // Add the genie nodef-> setPosition (Point (160,400) on the template )); // set the coordinates to clip-> setstenric (nodef) on the Coordinate Position of the close button. // set the template.

ClippingNode usage annotations have been clearly written, so I will not explain them one by one.. After clippingNode is used, I added a special wizard using the close icon to facilitate comparison.

3. At this time, the close button in the scenario is highlighted and the close button can respond. However, if there are many buttons on my interface, they can also respond, if I only want the player to click the close button and other buttons cannot be used, what should I do? (There are always "naughty" players who don't play cards as common sense ). The method is simple, that is, add a blank button to overwrite the entire screen.

Auto blackItem = MenuItem: create (); blackItem-> setPosition (visibleSize. width/2, visibleSize. height/2); blackItem-> setContentSize (visibleSize); // set the size to the entire screen. auto blackMenu = Menu: create (blackItem, NULL ); blackMenu-> setPosition (Point: ZERO); blackMenu-> setAnchorPoint (Point: ZERO); this-> addChild (blackmenus, 100 );

In this way, you cannot respond when you click the button, because the button also overwrites a leading blank button. However, you cannot even click the close button. Why is it so troublesome? Can we have fun together ?! It seems that there are only big moves to pull out the touch listening event. I add a layer at the top of the scene (note that it is at the top, if it is under the blank button, it will not be able to touch the layer). When the player's fingers touch the screen, I can determine whether the touch is on the close button by judging the position of the touch. If yes, manually respond to the close button.

Auto listen_layer = Layer: create (); // Add a layerthis-> addChild (listen_layer, 200) at the top of the scenario; // set zOrder to 200, auto listener = EventListenerTouchOneByOne: create (); // create a touch listener (single touch) listener-> onTouchBegan = CC_CALLBACK_2 (HelloWorld: onTouchBegan, this); // specify the touch callback function _ eventDispatcher-> addEventListenerWithSceneGraphPriority (listener, listen_layer); // bind the listener and layer to the event Delegate bool HelloWorld :: onTouchBegan (Touch * touch, Event * event) {auto point = Director: getInstance ()-> convertToGL (touch-> getLocationInView ()); // obtain the coordinates auto rect = Rect (160-30,400-30, 60, 60) of the current touch. // set the coordinates and sizes of the box to the position of the close button if (rect. containsPoint (point) // if the contact is in rect {auto menu = (Menu *) this-> getChildByTag (99 ); // obtain menuauto item = (MenuItem *) menu-> getChildByTag (99) through tag; // obtain itemitem-> activate () from menu through tag (); // get the item response} return true; // return true to receive the touch event}

Well, you can.

Process Writing is a little tedious. You can delete and delete as needed.

Respect Original, reprinted please indicate from star te 530: http://blog.csdn.net/start530/article/details/20851263