Key points in using C + + to get started in Cocos2d-x game development _c language

To sum up, the main points of the Novice guide are as follows:

• Changes in the picture.
• Touch and button response.
• Logical processing and Code organization.

Here are a few of the key points we'll be talking about:

I. Changes in the picture.

The approach to this different game is not the same, it boils down to a few:

1. The overall dimming of the picture

This is relatively simple, cocos2d has a ready-made interface:

Ccsize visiblesize = Ccdirector::shareddirector ()->getvisiblesize ();
The first parameter is the color CCC4 (r,g,b,a) a value (0~255), the larger the more opaque the following two parameters are wide, not default to screen size
cclayercolor* player=cclayercolor::create ( 0,0,0,200), visiblesize.width,visiblesize.height);
cclayercolor* player=cclayercolor::create (CCC4 (0,0,0,200));
AddChild (player,100);

The effect is as follows:

Then you can add a sprite above this layer, and the final effect may be this way:

Note: The picture originates from the network, if has the copyright question ~ you die! Please contact me!

2. Local Highlight

A relatively simple way is to prepare a few pieces of the highlighted picture, as the progress of the Guide to change and switch! Advantages can be done more beautifully, the disadvantage is that the amount of resources will be relatively large! Another way is to erase part of the area based on the overall darkening of the picture, fortunately cocos2d provides the Ccclippingnode interface ( 2.1+ version)!

Ccclippingnode class is more complicated, but we can only understand two things: one is Ccclippingnode stencil, a ccclippingnode child, how to understand it? Please look at the following picture:

This thing is believed that everybody has the impression, the above pattern (the hollow part) is the Ccclippingnode stencil (template), the entity part is Ccclippingnode's Child (Backplane), is not very good to understand, lets us use the code to realize:

Create Cliper Object
ccclippingnode* pclip=ccclippingnode::create ();
AddChild (pclip);
Add the gray backplane
cclayercolor* pcolor=cclayercolor::create (CCC4 (0,0,0,200));
Pclip->addchild (Pcolor);

Let me add the template:

Create Drawnode Object
ccdrawnode *m_paa=ccdrawnode::create ();
Static cccolor4f green = {0, 1, 0, 1};
Static Ccpoint RECT[4]={CCP ( -50,50), CCP (50,50), CCP (50,-50), CCP ( -50,-50)};
Use the above data to save a 100x100 rectangular
m_paa->drawpolygon (rect, 4, green, 0, green);
Set to the center of the screen
m_paa->setposition (CCP (VISIBLESIZE.WIDTH/2 + origin.x, VISIBLESIZE.HEIGHT/2 + origin.y));
The template
pclip->setstencil (M_PAA) set to Pclip;

Ccdrawnode is used to draw the geometry, DrawPolygon uses the drawing polygon, the parameter is the vertex array, the vertex quantity, the border width, and the fill color! Here's a little note: Never Addchild (M_PAA), because once addchild,m_ PAA will be drawn out, we are going to use it for tailoring! He will be used inside Ccclippingnode!

We're going to see this effect:

Well, it seems to be different from what we think. That's because Ccclippingnode has an option to flip whether it shows the stencil or the child minus the stencil portion! The default is to display the Hollow (stencil) section (FALSE), So we're going to change the options:

Is it reverse?
Pclip->setinverted (TRUE);

The effect is as follows, isn't it great:

3. Combined effect (change 2 rectangle to circle, plus picture)

Let's take a look at this picture first, isn't it great? The yellow rectangular area in the lower right corner is highlighted, and is illustrated with a picture, which is a good result!

Let's achieve a similar effect, using the resources:

Create Cliper ccclippingnode* pclip=ccclippingnode::create ();
Pclip->setinverted (TRUE);
AddChild (Pclip);
Add Backplane cclayercolor* pcolor=cclayercolor::create (CCC4 (0,0,0,200));

Pclip->addchild (Pcolor); Draw a circular area static cccolor4f green = {0, 1, 0, 1};//vertex color, where we don't actually draw, so we don't see the color float fradius=55.0f;//Circle radius const int NCOUNT=10 0;//Circle can actually be regarded as polygon, we use the positive 100 side model to simulate the park const FLOAT COEF = 2.0f * (float) m_pi/ncount;//compute the angle between each two adjacent vertices and center static ccpoint circle[ ncount];//vertex array for (unsigned int i = 0;i <nCount; i++) {float rads = i*coef;//radians circle[i].x = Fradius * COSF (rads);
/corresponding vertex of x circle[i].y = Fradius * Sinf (rads);//corresponds to the vertex of y} ccdrawnode *pstencil=ccdrawnode::create ();

Pstencil->drawpolygon (Circle, ncount, green, 0, green);//Draw This polygon! Move Up Pstencil->runaction (Ccrepeatforever::create (ccsequence::createwithtwoactions CCScaleBy::create (0.05f,
0.95f), Ccscaleto::create (0.125f, 1)));

Pstencil->setposition (CCP (VISIBLESIZE.WIDTH/2 + origin.x, VISIBLESIZE.HEIGHT/2 + origin.y)); Set this template pclip->sEtstencil (Pstencil);
Add circles and hands of the picture Ccsprite*pcircle=ccsprite::create ("circle.png");
Pcircle->setposition (CCP (VISIBLESIZE.WIDTH/2 + origin.x, VISIBLESIZE.HEIGHT/2 + origin.y));
 Pcircle->runaction (CCScaleBy::create (0.05f, 0.95f), Ccrepeatforever::create (ccsequence::createwithtwoactions)
Ccscaleto::create (0.125f, 1)));

AddChild (pcircle);
ccsprite* phand=ccsprite::create ("Hand.png");
Phand->setanchorpoint (CCP (0.0f,1.0f));
Phand->setposition (CCP (Pcircle->getcontentsize (). Width/2,pcircle->getcontentsize (). HEIGHT/2));

 Pcircle->addchild (Phand);

Above is the entire code, the effect chart is as follows (the dynamic will be better) without adding circles and hands before and after:

So how do you change the location of the highlighted area? It's simple, just change the position of the Pstencil! You can consider remembering that a member variable changes position in the Cctouchesbegan so that the highlighted area will follow your mouse!

Two. Touch and button response

1. Open touch to prevent penetrating response to judge the placement

Let's continue to look at this picture below:

This image should only be in the lower right corner of the "adventure" button to respond to, here the next line of thought:

To make the buttons in other areas less responsive, we should increase the response priority of the upper layer (Cclayer) to 128 and the button, so that if the upper layer (cclayer) is added to the game Addchild, it will receive a touch message first.
When you receive a touch message Cctouchbegan, determine whether the click is in the yellow rectangular area, and return false to the lower button to respond, or return true to prevent the message from continuing delivery.
Here is the code fragment:
1). Open Touch

BOOL Cteachlayer::init ()
{
 if (! Cclayer::init ())
 {return
 false;
 }
 Settouchenabled (true);
 return true;
}

2. Lifting touch Response priority is-128

void Cteachlayer::registerwithtouchdispatcher ()
{
//Use the same priority as 128 and Ccmenu, and Swallow event true//
ccdirector:: Shareddirector ()->gettouchdispatcher ()->addtargeteddelegate (this, -128, true);
Cclayer::registerwithtouchdispatcher ();
}

3). Judge the contact point in Cctouchbegan

BOOL Cteachlayer::cctouchbegan (cctouch* Ptouch, ccevent* pevent)
{
    //Get Touch location
 ccpoint touchpoint = Ptouch->getlocation ();
    Declares a 100x50 rectangle
 ccrect m_obrect=ccrectmake (
 ccdirector::shareddirector ()->getvisiblesize () in the lower-right corner. width-100,
 ccdirector::shareddirector ()->getvisiblesize (). height-50
 ;
    Determines whether the point is in the rectangle
 if (m_obrect.containspoint (touchpoint))
 {return
 false;
 }
 return true;
}

Come on, try it!

2. Accurate hit

The difference between the touch events on the phone and the computer is that we click with the mouse on the computer, while using the finger to press the phone, the precision of the touch is self-evident! Let's take a look at the following picture:

Let's look at the X button in the upper right corner, it should be very difficult to click on the phone! His real size should be the area of the red rectangle (assuming: 50x50), in order for the player to be able to easily click on it when booting, we set the actual touch area to the blue region (assuming: 100x100), This should be a good point!

This will have a new problem, if you click on the area between red and blue, the following X button can not respond to, then how to do? We need to modify the touch data (set to the center of the button), and then the touch event will be passed down with the new data! So the button below will be able to respond!

Let's take a look at the code:

BOOL Cteachlayer::cctouchbegan (cctouch* Ptouch, ccevent* pevent)
{
 Ccpoint touchpoint = ptouch-> GetLocation ();

 if (! Cglobal::s_bteach)
 {return
 false;
 }
    Suppose the button is in the position of (300,200), then the blue rectangle is as follows:
 ccrect m_obrect=ccrectmake (
 );

 if (M_obrect.containspoint (touchpoint))
 {
        //Get the center point of the blue rectangle (300,200)
 ccpoint POS=CCP ( ), M_obrect.getmidy ());
        This translates to a UI coordinate system (the upper left corner is 0, 0 points)
 pos=ccdirector::shareddirector ()->converttoui (POS);
        Set Touch information
 ptouch->settouchinfo (Ptouch->getid (), pos.x,pos.y);
 return false;
 }

 return true;
}

Three. Logic Processing and Code organization

Here I would like to say that the new guidance of the framework, the code must not be posted, too much too messy, said the wrong place, you are welcome to shoot brick Spit groove!>_<

1. First created a cteachlayer inherited from Cclayer, added to the top of the game (UI layer), remember, to add the game first layer, the last add Cteachlayer, you can save the global pointer!

2. Write down all the steps you want to boot with an enumeration, and set the highlight position and the touch area based on the enumeration value! You can write down the progress of the current boot to make it easier to continue booting next time!

3. The logic of the game is unavoidable to judge the Guide (example: Out of the 3rd wave when the player to guide the use of clear screen props), with the global pointer to set the steps of the guide!

4. After the boot is complete remove Cteachlayer, the game begins!