cocos2d-x学习日志 --新手向导

 新手引导：为了让第一次进入游戏的玩家能更加轻松容易的了解游戏功能。

    如图：

实现思路:

   1.采用遮罩的形式突出引导重点，同时屏蔽其它功能。

  2.在遮罩添加解说UI及相应动画

  如图：

   注：光亮区域即是可触碰区域。

具体实现：

1.CCClipingNode

  为了实现遮罩功能，我们选择一个模板切割图片的节点-- CCClipingNode.它的继承关系如下：

• 首先它是一个节点，继承于CCNode，所以它可以像普通节点一样放入CCLayer，CCScene，CCNode中。
• 作为节点，它就可以用作容器，承载其他节点和精灵。我把它叫底板。
• 如果想要对一个节点进行裁剪，那需要给出裁剪的部分，这个裁剪区域，我把它叫模版。  

  所以CCClipingNode裁剪节点在组成上=底板+模版，而在显示上=底板+模版.

  如图：

2. CCClipingNode API：

注：

  getStencil：返回一个节点对象，这个对象就是之前提到的“裁减模板”。

  setStencil：设置“裁减模板”。

  getAlphaThreshold:：这种裁减是可以改变裁减的透明度的，修改这个透明度就是通过设置这个阈值。

  setAlphaThreshold：获得这个透明度阈值。

  isInverted：之前说过的剪刀剪形状的例子，剪完形状以后，是显示被剪掉的部分，还是显示剩余的部分呢，默认isInverted值是false，是显示被剪掉的部分，设置为true则是显示剩余的部分。这个函数获得这个值。

  setInverted：设置isInverted值。

3.CCDrawNode

      为了绘制相应图形，使用CCDrawNode类，它的继承关系如下：

4. CCDrawNodeAPI：

      注释：

      drawDot：绘制点，参数给出坐标位置。

      drawSegment：绘制片断，给出起始点，结束点，半径等参数。

      drawPolygon：绘制矩形，可以分别给出填充颜色和边框颜色，还可以设置边框宽度。

实现代码：

1）绘制矩形区域：

RectangleLayer.h

[cpp]  view plain copy

1. #ifndef __RECTANGLELAYER_LAYER__  
2. #define __RECTANGLELAYER_LAYER__   
3. #include "cocos2d.h"  
4. USING_NS_CC;  
5. class RectangleLayer:public cocos2d::CCLayer  
6. {  
7. public:  
8.     static RectangleLayer* create(const char *pszFileName,CCPoint pos,CCRect rect, int pType);  
9.     virtual bool initWithFile(const char *pszFilename,CCPoint pos,CCRect rect, int pType);  
10.     virtual bool init();  
11.   
12.     RectangleLayer(void);  
13.     virtual ~RectangleLayer(void);  
14.   
15.     virtual void registerWithTouchDispatcher();  
16.     void refreshRect(CCPoint pos,CCRect rect, int pType);    
17.     bool ccTouchBegan( CCTouch* pTouch, CCEvent* pEvent );   
18.     CCString* getGuideMsgByType(int pType);    
19.     void setGuideVisible(bool isVisible);    
20.     CREATE_FUNC(RectangleLayer);  
21.   
22. private:  
23.     CCSprite* mCircle;    
24.     CCSprite* pHand;  
25.     CCDrawNode *mStencil;    
26.     CCRect m_obRect;    
27.     CCDictionary* m_pMsgDictionary;   
28.   
29. };  
30.   
31. #endif  

RectangleLayer.cpp

[cpp]  view plain copy

1. #include "RectangleLayer.h"  
2.   
3. USING_NS_CC;  
4.   
5. RectangleLayer::RectangleLayer()  
6. {  
7.   
8. }  
9.   
10. RectangleLayer::~RectangleLayer()  
11. {  
12.   
13. }  
14.   
15. RectangleLayer* RectangleLayer::create(const char *pszFileName,CCPoint pos,CCRect rect, int pType)    
16. {  
17.     RectangleLayer *pobGuideLayer = new RectangleLayer();  
18.     if (pobGuideLayer && pobGuideLayer->initWithFile(pszFileName,pos,rect,pType))  
19.     {  
20.         pobGuideLayer->autorelease();  
21.         return pobGuideLayer;  
22.     }  
23.     CC_SAFE_DELETE(pobGuideLayer);  
24.     return NULL;  
25. }  
26.   
27. bool RectangleLayer::init()  
28. {  
29.     if (!CCLayer::init())  
30.     {  
31.         return false;  
32.     }  
33.   
34.     return true;  
35. }  
36.   
37.   
38. bool RectangleLayer::initWithFile(const char *pszFileName,CCPoint pos,CCRect rect, int pType)  
39. {  
40.     if (!CCLayer::init())  
41.     {  
42.         return false;  
43.     }  
44.     m_obRect = rect;   
45.     setTouchEnabled(true);  
46.       
47.     //创建cliper对象  
48.     CCClippingNode* pClip = CCClippingNode::create();  
49.     pClip->setInverted(true);  
50.     addChild(pClip);  
51.   
52.     mCircle=CCSprite::create(pszFileName);    
53.     mCircle->setPosition(pos);   
54.     mCircle->setAnchorPoint(ccp(-0.5f,0.5f));  
55.     mCircle->runAction(CCRepeatForever::create(CCSequence::createWithTwoActions(CCScaleBy::create(0.05f, 0.95f),    
56.         CCScaleTo::create(0.125f, 1))));    
57.     addChild(mCircle);    
58.   
59.     //加入灰色的底板  
60.     CCLayerColor* pColor = CCLayerColor::create(ccc4(0,0,0,180));  
61.     pClip->addChild(pColor);  
62.   
63.     mStencil = CCDrawNode::create();  
64.     static ccColor4F green = {0,1,0,1};  
65.     float width = m_obRect.size.width;  
66.     float height = m_obRect.size.height;  
67.     float x = pos.x;  
68.     float y = pos.y;  
69.     static CCPoint rect1[4] = {ccp(0,height),ccp(width,height),ccp(width,0),ccp(0,0)};  
70.     mStencil->drawPolygon(rect1,4,green,0,green);  
71.     mStencil->setPosition(pos);  
72.     pClip->setStencil(mStencil);  
73.   
74.     mStencil->runAction(CCRepeatForever::create(CCSequence::createWithTwoActions(CCScaleBy::create(0.05f, 0.95f),    
75.         CCScaleTo::create(0.125f, 1))));  
76.   
77.     return true;  
78. }  
79.   
80. void RectangleLayer::registerWithTouchDispatcher()    
81. {    
82.     //使用-128和CCMenu优先级相同,并且吞掉事件true//    
83.     CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, -130, true);    
84.     CCLayer::registerWithTouchDispatcher();    
85. }    
86.   
87.   
88. void RectangleLayer::refreshRect(CCPoint pos,CCRect rect, int pType)    
89. {    
90.     float fRadius=mCircle->getContentSize().width;    
91.     float scale = rect.size.width/fRadius;    
92.     mCircle->setScale(scale);    
93.     mCircle->setPosition(pos);    
94.     mStencil->setPosition(pos);    
95.     mStencil->setScale(scale);     
96.   
97.     //设置触碰区域  
98.     float x = pos.x;  
99.     float y = pos.y;  
100.     float width = mCircle->getContentSize().width *scale;  
101.     float height = mCircle->getContentSize().height * scale;  
102.     m_obRect = CCRectMake(x, y, width, height);  
103. }    
104.   
105. bool RectangleLayer::ccTouchBegan( CCTouch* pTouch, CCEvent* pEvent )    
106. {    
107.     //得到触摸位置    
108.     CCPoint touchPoint = pTouch->getLocation();    
109.   
110.     //判断点是否在矩形  CCRect m_obRect1 = m_obRect中    
111.     if (m_obRect.containsPoint(touchPoint))    
112.     {    
113.         //CCPoint pos = ccp(m_obRect.getMidX(),m_obRect.getMidY());  
114.         CCPoint pos = pTouch->getLocation();  
115.         //这里要转化为UI坐标系(左上角为0,0点)  
116.         pos = CCDirector::sharedDirector()->convertToUI(pos);  
117.         //设置触摸信息  
118.         pTouch->setTouchInfo(pTouch->getID(),pos.x,pos.y);  
119.         CCLog("helloWorld");  
120.         //removeFromParent();   //触发后移除  
121.         return false;    
122.     }   
123.     return true;    
124. }    
125.   
126. //是否显示  
127. void RectangleLayer::setGuideVisible(bool isVisible)    
128. {    
129.     this->setVisible(isVisible);    
130.     setTouchEnabled(isVisible);    
131. }    
132.   
133. //获取文字信息  
134. CCString* RectangleLayer::getGuideMsgByType(int pType)    
135. {    
136.     char typeStr[10];    
137.     sprintf(typeStr, "%d", pType);    
138.     CCString* msg = (CCString*)m_pMsgDictionary->objectForKey(typeStr);    
139.     return msg;    
140. }    

在HelloWorldScene.cpp 的init方法添加代码:

[cpp]  view plain copy

1. CCRect m_obRect=CCRectMake(    
2.     100,    
3.     160,    
4.     100,    
5.     100);    
6.   
7. CCPoint dstPoint = mCircle->getPosition();  
8.    
9. CCPoint newPoint = ccp(100,160);  
10.   
11. RectangleLayer *myGuideLayer = RectangleLayer::create("hand.png",newPoint,m_obRect,0);  
12.   
13. //myGuideLayer->refreshRect(newPoint1,m_obRect1, 0);  
14. addChild(myGuideLayer);  

运行效果：

2）绘制圆形区域：

      因实现原理和以上类似，只需要更改下代码即可：

RoundnessLayer.cpp

[cpp]  view plain copy

1. #include "RoundnessLayer.h"  
2.   
3. USING_NS_CC;  
4.   
5. RoundnessLayer::RoundnessLayer()  
6. {  
7.   
8. }  
9.   
10. RoundnessLayer::~RoundnessLayer()  
11. {  
12.   
13. }  
14.   
15. RoundnessLayer* RoundnessLayer::create(const char *pszFileName,CCPoint pos,CCRect rect, int pType)    
16. {  
17.     RoundnessLayer *pobGuideLayer = new RoundnessLayer();  
18.     if (pobGuideLayer && pobGuideLayer->initWithFile(pszFileName,pos,rect,pType))  
19.     {  
20.         pobGuideLayer->autorelease();  
21.         return pobGuideLayer;  
22.     }  
23.     CC_SAFE_DELETE(pobGuideLayer);  
24.     return NULL;  
25. }  
26.   
27. bool RoundnessLayer::init()  
28. {  
29.     if (!CCLayer::init())  
30.     {  
31.         return false;  
32.     }  
33.   
34.     return true;  
35. }  
36.   
37.   
38. bool RoundnessLayer::initWithFile(const char *pszFileName,CCPoint pos,CCRect rect, int pType)  
39. {  
40.     if (!CCLayer::init())  
41.     {  
42.         return false;  
43.     }  
44.     m_obRect = rect;   
45.     setTouchEnabled(true);  
46.     CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();  
47.   
48.     //创建裁减节点类  
49.     CCClippingNode* pClip = CCClippingNode::create();  
50.     pClip->setInverted(true);  
51.     addChild(pClip);  
52.   
53.     //遮罩层  
54.     CCLayerColor* pColor = CCLayerColor::create(ccc4(0,0,0,180));  
55.     pClip->addChild(pColor);  
56.   
57.   
58.     mCircle=CCSprite::create(pszFileName);    
59.     float fRadius = rect.size.width/2;          //圆的半径    
60.     mCircle->setPosition(pos);    
61.     mCircle->setAnchorPoint(ccp(-0.5f,0.5f));  
62.     mCircle->runAction(CCRepeatForever::create(CCSequence::createWithTwoActions(CCScaleBy::create(0.05f, 0.95f),    
63.         CCScaleTo::create(0.125f, 1))));    
64.     addChild(mCircle);    
65.   
66.     //绘制圆形区域    
67.     static ccColor4F green = {1, 1, 1, 1};          //顶点颜色,这里我们没有实质上没有绘制,所以看不出颜色    
68.   
69.     const int nCount=100;                           //圆形其实可以看做正多边形,我们这里用正100边型来模拟园    
70.     const float coef = 2.0f * (float)M_PI/nCount;   //计算每两个相邻顶点与中心的夹角    
71.     static CCPoint circle[nCount];                  //顶点数组    
72.     for(unsigned int i = 0;i <nCount; i++) {    
73.         float rads = i*coef;                        //弧度    
74.         circle[i].x = fRadius * cosf(rads);         //对应顶点的x    
75.         circle[i].y = fRadius * sinf(rads);         //对应顶点的y    
76.     }    
77.   
78.     //绘制矩形，可以分别给出填充颜色和边框颜色，还可以设置边框宽度  
79.     mStencil=CCDrawNode::create();    
80.     mStencil->drawPolygon(circle, nCount, green, 0, green);  //绘制这个多边形!    
81.       
82.     //动起来    
83.     mStencil->runAction(CCRepeatForever::create(CCSequence::createWithTwoActions(CCScaleBy::create(0.05f, 0.95f),    
84.         CCScaleTo::create(0.125f, 1))));   
85.       
86.     float x = pos.x + rect.size.width/2;  
87.     float y = pos.y + rect.size.width/2;  
88.   
89.     mStencil->setPosition(ccp(x,y));    
90.   
91.     //设这模板    
92.     pClip->setStencil(mStencil);    
93.   
94.     //CCLayerColor* layer1 = CCLayerColor::create(ccc4(192, 0, 0, 25), rect.size.width, rect.size.height);  
95.     //layer1->setPosition(pos);  
96.     //addChild(layer1);  
97.   
98.     return true;  
99. }  
100.   
101. void RoundnessLayer::registerWithTouchDispatcher()    
102. {    
103.     //使用-128和CCMenu优先级相同,并且吞掉事件true//    
104.     CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, -130, true);    
105.     CCLayer::registerWithTouchDispatcher();    
106. }    
107.   
108.   
109. void RoundnessLayer::refreshRect(CCPoint pos,CCRect rect, int pType)    
110. {    
111.     //调整大小  
112.     float fRadius=mCircle->getContentSize().width*0.5;    
113.     float scale = rect.size.width/fRadius;    
114.   
115.     //调整光亮区坐标  
116.     float x = pos.x + rect.size.width/2;  
117.     float y = pos.y + rect.size.width/2;  
118.   
119.     mCircle->setScale(scale);    
120.     mCircle->setPosition(pos);    
121.     mStencil->setPosition(ccp(x, y));    
122.     mStencil->setScale(scale);    
123.   
124.     //设置触碰区域  
125.     float rectX = pos.x;  
126.     float rectY = pos.y;  
127.     float width = mCircle->getContentSize().width *scale;  
128.     float height = mCircle->getContentSize().height * scale;  
129.     m_obRect = CCRectMake(rectX, rectY, width, height);  
130. }    
131.   
132. bool RoundnessLayer::ccTouchBegan( CCTouch* pTouch, CCEvent* pEvent )    
133. {    
134.     //得到触摸位置    
135.     CCPoint touchPoint = pTouch->getLocation();    
136.   
137.   
138.     //判断点是否在矩形  CCRect m_obRect1 = m_obRect中    
139.     if (m_obRect.containsPoint(touchPoint))    
140.     {    
141.         CCPoint pos = ccp(m_obRect.getMidX(),m_obRect.getMidY());  
142.         //这里要转化为UI坐标系(左上角为0,0点)  
143.         pos = CCDirector::sharedDirector()->convertToUI(pos);  
144.         //设置触摸信息  
145.         pTouch->setTouchInfo(pTouch->getID(),pos.x,pos.y);  
146.   
147.         CCLog("helloWorld");  
148.         return false;    
149.     }   
150.     CCLog("no");  
151.     return true;    
152. }    
153.   
154. void RoundnessLayer::setGuideVisible(bool isVisible)    
155. {    
156.     this->setVisible(isVisible);    
157.     setTouchEnabled(isVisible);    
158. }    
159.   
160. CCString* RoundnessLayer::getGuideMsgByType(int pType)    
161. {    
162.     char typeStr[10];    
163.     sprintf(typeStr, "%d", pType);    
164.     CCString* msg = (CCString*)m_pMsgDictionary->objectForKey(typeStr);    
165.     return msg;    
166. }    

运行效果：

      有关解说UI及动画的话，就按自己的项目要求贴到遮罩层上，就OK了。

      若想让真机正常显示，稍微更改接口参数：

for iOS:  in AppController replace the gl-view creation with:

[cpp]  view plain copy

1. EAGLView *__glView = [EAGLView viewWithFrame: [window bounds]  
2.                                     pixelFormat: kEAGLColorFormatRGBA8  
3.                                     depthFormat: GL_DEPTH24_STENCIL8_OES  
4.                              preserveBackbuffer: NO  
5.                                      sharegroup: nil  
6.                                   multiSampling: NO  
7.                                 numberOfSamples: 0];  

for Android:  in game activity:

[cpp]  view plain copy

1. public Cocos2dxGLSurfaceView onCreateView() {  
2.        Cocos2dxGLSurfaceView glSurfaceView = new Cocos2dxGLSurfaceView(this);  
3.        glSurfaceView.setEGLConfigChooser(5, 6, 5, 0, 16, 8);  
4.        return glSurfaceView;  
5.    }  

引用博客：

      http://bbs.9ria.com/thread-182383-1-1.html

      http://blog.csdn.net/jackystudio/article/details/17160973