Study Notes on cocos2d-x (30) 2.1 new features ccclippingnode

This article introduces some new features of cocos2d-x, including cocosbuilder animation and some new features added from version 2.1, this article introduces a new feature that I like very much in 2.1-The ccclippingnode, which can be used to cut images based on a template. This class provides an irregular image cutting method. Before this method, we can use the settexturerect function of the texture class to cut the rectangular area, this method is just like the setclip method of j2ecloud_block. For example, when we want to implement a blood strip, we can use this method to cut out what we don't want to display, the biggest difference between ccclippingnode and ccclippingnode in the new feature is that the cut is not limited to rectangles, but can be made according to any shape. What you need to do is to give a "cut template ", this is like cutting the shape with scissors. We need something like a mold, then we can take the mold and the paper to be cut down along the edge of the mold and use scissors to cut out a mold. First, let's look at the common functions of this class (it should be noted that, the functions described here are only exclusive to this class. This class inherits from the ccnode class, so some functions of the node class will not be introduced ):

Getstencel: returns a Node object, which is the "cut template" mentioned earlier ".

Setstenpencil: Set "Cut template ".

Getalphathreshold: This cut can change the transparency of the cut. You can modify this transparency by setting this threshold.

Setalphathreshold: gets this transparency threshold.

Isinverted: In the previous example of the scissors shape, after the scissors shape is cut, is it to show the cut part or the remaining part? The default isinverted value is false, is to show the part that has been cut off, set to true is to show the remaining part. This function obtains this value.

Setinverted: Set the isinverted value.

The general process for using this effect is as follows:

// Create a "cut template"

Ccnode * stenpencil = This-> stenpencil ();

Stenpencil-> settag (ktagstencilnode );

Stenpencil-> setposition (CCP (50, 50 ));

// Create a cut node class

Ccclippingnode * clipper = This-> clipper ();

Clipper-> settag (ktagclippernode );

Clipper-> setanchorpoint (CCP (0.5, 0.5 ));

Clipper-> setposition (CCP (S. width/2-50, S. Height/2-50 ));

// Set a "cut template" for the set cut node class"

Clipper-> setstenpencil (stenpencil );

This-> addchild (clipper );

// Set the content of the cut node class

Ccnode * content = This-> content ();

Content-> setposition (CCP (50, 50 ));

Clipper-> addchild (content );

Through this new feature can achieve a lot of interesting results, first of all to learn the use of testapp in the cocos2D-x instance first is a scroll effect similar to scrollview, before that, introduce another new feature of the cocos2D-x-ccdrawnode, this class is not a new feature, but encapsulation of the original feature, before that, if we need to draw a rectangle, circle, points and other shapes, you need to re-write a class that inherits from the node or set layer, and then rewrite the draw function. Now you can use the ccdrawnode class to draw the corresponding graph directly. The related functions are as follows:

Drawdot: Draw point. The parameter specifies the coordinate position.

Drawsegment: draws a part and provides parameters such as the starting point, ending point, and radius.

Drawpolygon: draws a rectangle that provides the fill color and border color, and the Border width.

The code for implementing a scrolling effect similar to scrollview is as follows:

// Create a cut node class

Ccclippingnode * clipper = ccclippingnode: Create ();

Clipper-> settag (ktagclippernode );

Clipper-> setcontentsize (ccsizemake (200,200 ));

Clipper-> setanchorpoint (CCP (0.5, 0.5 ));

Clipper-> setposition (CCP (this-> getcontentsize (). width/2, this-> getcontentsize (). Height/2 ));

Clipper-> runaction (ccrepeatforever: Create (ccrotateby: Create (1, 45 )));

This-> addchild (clipper );

// Create a "cut template"

Ccdrawnode * stenpencil = ccdrawnode: Create ();

Ccpointrectangle [4];

Rectangle [0] = CCP (0, 0 );

Rectangle [1] = CCP (clipper-> getcontentsize (). Width, 0 );

Rectangle [2] = CCP (clipper-> getcontentsize (). Width, clipper-> getcontentsize (). Height );

Rectangle [3] = CCP (0, clipper-> getcontentsize (). Height );

// Draw a rectangle

Cccolor4fwhite = {1, 1, 1, 1 };

Stenpencil-> drawpolygon (rectangle, 4, white, 1, white );

// Set a "cut template" for the set cut node class"

Clipper-> setstenpencil (stenpencil );

// Set the content of the cut node class

Ccsprite * content = ccsprite: Create (s_back2 );

Content-> settag (ktagcontentnode );

Content-> setanchorpoint (CCP (0.5, 0.5 ));

Content-> setposition (CCP (clipper-> getcontentsize (). width/2, clipper-> getcontentsize (). Height/2 ));

Clipper-> addchild (content );

Then, you can use the three touch-controlled functions to set the content location. effect:

If scrollview is an existing solution, the following effect will reflect the new effect and achieve the effect of a bullet punch:

Void holedemo: setup ()

{

// The ABCD diagram used in many parts of the bullet breakdown Image

Ccsprite * target = ccsprite: Create (s_ppathblock );

Target-> setanchorpoint (ccpointzero );

Target-> setscale (3 );

// Create a ccclippingnode. This ccclippingnode is not responsible for cutting the bullet hole and is responsible for cutting the "ABCD image ".

M_pouterclipper = ccclippingnode: Create ();

M_pouterclipper-> retain ();

Ccaffinetransformtranform = ccaffinetransformmakeidentity ();

Tranform = ccaffinetransformscale (Tranform, target-> getscale (), target-> getscale ());

M_pouterclipper-> setcontentsize (ccsizeapplyaffinetransform (Target-> getcontentsize (), Tranform ));

M_pouterclipper-> setanchorpoint (CCP (0.5, 0.5 ));

M_pouterclipper-> setposition (ccpmult (ccpfromsize (this-> getcontentsize (), 0.5f ));

M_pouterclipper-> runaction (ccrepeatforever: Create (ccrotateby: Create (1, 45 )));

M_pouterclipper-> setstenpencil (target );

// Ccclippingnode responsible for bullet hole cutting

Ccclippingnode * holesclipper = ccclippingnode: Create ();

// Display the remaining parts after cutting

Holesclipper-> setinverted (true );

// Set the Alpha threshold

Holesclipper-> setalphathreshold (0.05f );

Holesclipper-> addchild (target );

// The bullet hole layer. All the bullet holes are in this node.

M_pholes = ccnode: Create ();

M_pholes-> retain ();

Holesclipper-> addchild (m_pholes );

// "Cutting template" for cutting bullet holes"

M_pholesstenpencil = ccnode: Create ();

M_pholesstenpencil-> retain ();

Holesclipper-> setstencel (m_pholesstencel );

M_pouterclipper-> addchild (holesclipper );

This-> addchild (m_pouterclipper );

This-> settouchenabled (true );

}

After clicking a certain point, the point breaks down:

// Random size Rotation

Float scale = ccrandom_0_1 () * 0.2 + 0.9;

Floatrotation = maid () * 360;

// The film on the bullet hole is used as decoration only

Ccsprite * hole = ccsprite: Create ("images/hole_+t.png ");

Hole-> setposition (point );

Hole-> setrotation (rotation );

Hole-> setscale (scale );

M_pholes-> addchild (hole );

// Real bullet hole cutting

Ccsprite * holestenpencil = ccsprite: Create ("images/hole_stencil.png ");

Holestenpencil-> setposition (point );

Holestenpencil-> setrotation (rotation );

Holestenpencil-> setscale (scale );

M_pholesstenpencil-> addchild (holestenpencil );

// Scale the "ABCD image" that is "hit" to make the effect more realistic.

M_pouterclipper-> runaction (ccsequence: createwithtwoactions (ccscaleby: Create (0.05f, 0.95f), ccscaleto: Create (0.125f, 1 )));

Effect:

I think this function is very interesting. I plan to write a game instance which will be posted on my blog in a short time.

 

If any errors occur, please give me more advice.