Cocos2d-x虚拟摇杆控制精灵上下左右运动之————“赵云要格斗”（1）

转载请注明出处http://blog.csdn.net/evankaka/article/details/42043509

       有需要源代码和材料的邮箱留个，这里实现了能通过虚拟摇杆控制精灵的运动，而且能够改变精灵运动时的脸部朝向。之前看了好多人写虚拟摇杆，但是就是没写控制精灵的运动和脸朝向的。所以自己就想要写个文章好好讲下它的实现思路。好了，下面我们开始吧。

cocos2d-x版本：2.2.5

工程环境：windows7+VS2010

打开方式：将工程放在cocos2d-x安装目录下的project文件夹下用VS打开

源码免费下载（博主决定本系列资源全部免费～）

目录：

一、修改背景图片和窗口大小

二、添加虚拟摇杆

三、添加精灵并用摇杆控制精灵的运动

四、思路总结

一、修改背景图片和窗口大小

       新建一个工程，工程名为HelloCpp.为了让效果更加好些，首先修改下窗口的大小，在main.cpp中改

[cpp]  view plain  copy

1. eglView->setFrameSize(480,320);为  
2. eglView->setFrameSize(640,480);  

然后在我们要显示的层上HelloWorldScene.cpp的init()函数添加：

[cpp]  view plain  copy

1. //得到窗口的大小  
2.   CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();  
3.   CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();  
4.   
5.   //修改背景图片  
6.   CCSprite* pSprite = CCSprite::create("background_1.jpg");  
7.   pSprite->setPosition(ccp(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));  
8.   this->addChild(pSprite, 0);//这里的0表示放在最底层  

效果如下：

二、添加虚拟摇杆

      首先，先将摇杆素材放入到项目的Resources文件夹下，注意，最好把要用到的素材都放在这里，项目工程默认的素材是从此文件夹下查找。

这是摇杆的背景图片，图片不容易找啊。没有美工，只能随便网上找了点，

 这是摇杆里面的按钮图片，它是可以移动的

好了，接下来我们要开始加入摇杆的进入背景中了，我的思路是把摇杆封装成一个类，然后照看继承CCLayer，就可以响应触摸事件了，看看代码，新建一个HRocker.h头文件。这里要注意要把.cpp和.h都放到项目的class文件夹下，要不会提示找不到文件。代码如下：

[cpp]  view plain  copy

1. #ifndef __HROCKER_H__  
2. #define __HROCKER_H__  
3.   
4. #include "cocos2d.h"  
5.   
6. using namespace cocos2d;  
7.   
8. //用于标识摇杆与摇杆的背景  
9. typedef enum{  
10.     tag_rocker,  
11.     tag_rockerBG,  
12. }tagForHRocker;  
13. //用于标识摇杆方向  
14. typedef enum{  
15.     rocker_stay,  
16.     rocker_right,  
17.     rocker_up,  
18.     rocker_left,  
19.     rocker_down,  
20. }tagDirecton;  
21. class HRocker:public CCLayer  
22. {  
23. public:  
24.     HRocker(void);  
25.     ~HRocker(void);  
26.   
27.     //创建摇杆(摇杆的操作题图片资源名，摇杆背景图片资源名，起始坐标)  
28.     static HRocker* createHRocker(const char *rockerImageName,const char *rockerBGImageName,CCPoint position);  
29.     //启动摇杆(显示摇杆、监听摇杆触屏事件)  
30.     void startRocker(bool _isStopOther);  
31.     //停止摇杆(隐藏摇杆，取消摇杆的触屏监听)  
32.     void stopRocker();  
33.     //判断控制杆方向，用来判断精灵上、下、左、右运动  
34.     int rocketDirection;  
35.     //当前人物行走方向,用来判断精灵的朝向，精灵脸朝右还是朝左  
36.     bool rocketRun;  
37.     CREATE_FUNC(HRocker);  
38. private:  
39.     //自定义初始化函数  
40.     void rockerInit(const char* rockerImageName,const char* rockerBGImageName,CCPoint position);  
41.     //是否可操作摇杆  
42.     bool isCanMove;  
43.     //获取当前摇杆与用户触屏点的角度  
44.     float getRad(CCPoint pos1,CCPoint pos2);  
45.     //摇杆背景的坐标  
46.     CCPoint rockerBGPosition;  
47.     //摇杆背景的半径  
48.     float rockerBGR;  
49.     //触屏事件  
50.     virtual bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);  
51.     virtual void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent);  
52.     virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);  
53.   
54. };  
55.   
56. #endif  

再建其相应的实现HRocker.cpp，这里要注意要把.cpp和.h都放到项目的class文件夹下，要不会提示找不到文件。代码如下：

[cpp]  view plain  copy

1. #include "HRocker.h"  
2. const double PI=3.1415;  
3. HRocker::HRocker(void)  
4. {  
5.     rocketRun=false;  
6. }  
7.   
8. HRocker::~HRocker(void)  
9. {  
10. }  
11.   
12. //创建摇杆(摇杆的操作题图片资源名，摇杆背景图片资源名，起始坐标)  
13. HRocker* HRocker::createHRocker(const char *rockerImageName,const char *rockerBGImageName,CCPoint position)  
14. {  
15.     HRocker *layer = HRocker::create();  
16.     if (layer)  
17.     {  
18.         layer->rockerInit(rockerImageName,rockerBGImageName,position);  
19.         return layer;  
20.     }  
21.     CC_SAFE_DELETE(layer);  
22.     return NULL;  
23. }  
24.   
25. //自定义初始化函数  
26. void HRocker::rockerInit(const char* rockerImageName,const char* rockerBGImageName,CCPoint position)  
27. {  
28.     CCSprite *spRockerBG = CCSprite::create(rockerBGImageName);  
29.     spRockerBG->setPosition(position);  
30.     spRockerBG->setVisible(false);  
31.     addChild(spRockerBG,0,tag_rockerBG);  
32.   
33.     CCSprite *spRocker = CCSprite::create(rockerImageName);  
34.     spRocker->setPosition(position);  
35.     spRocker->setVisible(false);  
36.     addChild(spRocker,1,tag_rocker);  
37.   
38.     rockerBGPosition = position;  
39.     rockerBGR = spRockerBG->getContentSize().width*0.5;//  
40.     rocketDirection=-1;//表示摇杆方向不变  
41. }  
42.   
43. //启动摇杆(显示摇杆、监听摇杆触屏事件)  
44. void HRocker::startRocker(bool _isStopOther)  
45. {  
46.     CCSprite *rocker = (CCSprite*)this->getChildByTag(tag_rocker);  
47.     rocker->setVisible(true);  
48.   
49.     CCSprite *rockerBG = (CCSprite *)this->getChildByTag(tag_rockerBG);  
50.     rockerBG->setVisible(true);  
51.   
52.     CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this,-1,_isStopOther);  
53. }  
54.   
55. //停止摇杆(隐藏摇杆，取消摇杆的触屏监听)  
56. void HRocker::stopRocker()  
57. {  
58.     CCSprite *rocker = (CCSprite *)this->getChildByTag(tag_rocker);  
59.     rocker->setVisible(false);  
60.   
61.     CCSprite * rockerBG = (CCSprite *)this->getChildByTag(tag_rockerBG);  
62.     rockerBG->setVisible(false);  
63.   
64.     CCDirector::sharedDirector()->getTouchDispatcher()->removeDelegate(this);  
65. }  
66.   
67.   
68. //获取当前摇杆与用户触屏点的角度  
69. float HRocker::getRad(CCPoint pos1,CCPoint pos2)  
70. {  
71.     float px1 = pos1.x;  
72.     float py1 = pos1.y;  
73.     float px2 = pos2.x;  
74.     float py2 = pos2.y;  
75.   
76.     //得到两点x的距离  
77.     float x = px2 - px1;  
78.     //得到两点y的距离  
79.     float y = py1 - py2;  
80.     //算出斜边长度  
81.     float xie = sqrt(pow(x,2) + pow(y,2));  
82.     //得到这个角度的余弦值(通过三角函数中的店里：角度余弦值=斜边/斜边)  
83.     float cosAngle = x / xie;  
84.     //通过反余弦定理获取到期角度的弧度  
85.     float rad = acos(cosAngle);  
86.     //注意：当触屏的位置Y坐标<摇杆的Y坐标，我们要去反值-0~-180  
87.     if (py2 < py1)  
88.     {  
89.         rad = -rad;  
90.     }  
91.     return rad;  
92. }  
93.   
94. CCPoint getAngelePosition(float r,float angle){  
95.     return ccp(r*cos(angle),r*sin(angle));  
96. }  
97.   
98. //抬起事件  
99. bool HRocker::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent)  
100. {  
101.     CCPoint point = pTouch->getLocation();  
102.     CCSprite *rocker = (CCSprite *)this->getChildByTag(tag_rocker);  
103.     if (rocker->boundingBox().containsPoint(point))  
104.     {  
105.         isCanMove = true;  
106.         CCLOG("begin");  
107.     }  
108.     return true;  
109. }  
110. //移动事件  
111. void HRocker::ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent)  
112. {  
113.     if (!isCanMove)  
114.     {  
115.         return;  
116.     }  
117.     CCPoint point = pTouch->getLocation();  
118.     CCSprite *rocker = (CCSprite *)this->getChildByTag(tag_rocker);  
119.     //得到摇杆与触屏点所形成的角度  
120.     float angle = getRad(rockerBGPosition,point);  
121.     //判断两个圆的圆心距是否大于摇杆背景的半径  
122.     if (sqrt(pow((rockerBGPosition.x - point.x),2) + pow((rockerBGPosition.y - point.y),2)) >= rockerBGR)  
123.     {  
124.       
125.         //保证内部小圆运动的长度限制  
126.         rocker->setPosition(ccpAdd(getAngelePosition(rockerBGR,angle),ccp(rockerBGPosition.x,rockerBGPosition.y)));  
127.     //  CCLOG("touch");  
128.     }  
129.     else  
130.     {  
131.         //当没有超过，让摇杆跟随用户触屏点移动即可  
132.         rocker->setPosition(point);  
133.         //CCLOG("touch");  
134.     }  
135.   
136.     //判断方向  
137.     if(angle>=-PI/4&&angle<PI/4)  
138.     {  
139.         rocketDirection=rocker_right;  
140.         rocketRun=false;  
141.         CCLOG("%d",rocketDirection);  
142.     }  
143.     else if(angle>=PI/4&&angle<3*PI/4)  
144.     {  
145.         rocketDirection=rocker_up;  
146.         CCLOG("%d",rocketDirection);  
147.     }  
148.     else if((angle>=3*PI/4&&angle<=PI)||(angle>=-PI&&angle<-3*PI/4))  
149.     {  
150.         rocketDirection=rocker_left;  
151.         rocketRun=true;  
152.         CCLOG("%d",rocketDirection);  
153.     }  
154.     else if(angle>=-3*PI/4&&angle<-PI/4)  
155.     {  
156.         rocketDirection=rocker_down;  
157.         CCLOG("%d",rocketDirection);  
158.     }  
159. }  
160. //离开事件  
161. void HRocker::ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent)  
162. {  
163.     if (!isCanMove)  
164.     {  
165.         return;  
166.     }  
167.     CCSprite *rockerBG = (CCSprite*)this->getChildByTag(tag_rockerBG);  
168.     CCSprite *rocker = (CCSprite*)this->getChildByTag(tag_rocker);  
169.     rocker->stopAllActions();  
170.     rocker->runAction(CCMoveTo::create(0.08f,rockerBG->getPosition()));  
171.     isCanMove = false;  
172.     rocketDirection=rocker_stay;  
173.     CCLOG("%d",rocketDirection);  
174.     CCLOG("end");  
175. }  
176. void HRocker::update(float dt)  
177. {  
178.     if(isCanMove)  
179.     {  
180.           
181.     }  
182. }  

这里的思路我等下再说吧

之后就在HelloWorldScene.h添加头文件#include "HRocker.h"，并加入摇杆类的成员变量

[cpp]  view plain  copy

1. private:  
2.          HRocker*  rocker;  

在HelloWorldScene.h的init()函数添加：

[cpp]  view plain  copy

1. //添加摇杆  
2.     rocker = HRocker::createHRocker("Direction_bt.png","Direction_bc.png",ccp(110,60));//其中第一张图片为摇杆的按钮，第二张为背景  
3.     this->addChild(rocker,2);  
4.     rocker->startRocker(true);  

效果如下：我们可以看到，可以移动摇杆了

效果还是不错的，很灵敏，小球也不会跳出

三、添加精灵并用摇杆控制精灵的运动

这里为了能让精灵运行，我自己创建了一个类, Hero,它继承了CCNode,里面实现了动画播放和停止

赵云的走的动作其实就是一系列的图片合成在一起，

另外，赵云不运动时的图片为

 zhoayun.png。这是不运动时精灵的贴图图片，

这里我为了省事，直接用工具TexturePacker将它们打包生成相应的png和plist，这两个合起来在cocos2d-x可以组成一个动画，比较省事

命名为run_animation.png和run_animation.plist，然后还是把它们放在项目的Resources文件夹下

为了让代码更加容易理解些，我自己创建了一个类, Hero,它继承了CCNode,并且里面有一成员变量 CCSprite* m_HeroSprite;我们就是通过控制它的动画来实现运动的。里面实现了动画播放和停止，好了，代码如下

Hero.h

[cpp]  view plain  copy

1. #ifndef __HERO_H__  
2. #define __HERO_H__  
3. #include "cocos2d.h"  
4. #include "cocos-ext.h"  
5. using namespace cocos2d;  
6. USING_NS_CC_EXT;   
7.  class Hero:public cocos2d::CCNode  
8.  {  
9.  public:  
10.        Hero(void);  
11.       ~Hero(void);  
12.      //根据图片名创建英雄  
13.      void InitHeroSprite(char *hero_name);  
14.     //设置动画,num为图片数目，run_directon为精灵脸朝向，false朝右,name_each为name_png中每一小张图片的公共名称部分  
15. <span style="white-space:pre">    </span> void SetAnimation(const char *name_plist,const char *name_png,const char *name_each,const unsigned int num,bool run_directon);  
16.     //停止动画  
17.      void StopAnimation();  
18.     //判断是否在跑动画  
19.      bool IsRunning;  
20.      //英雄运动的方向  
21.      bool HeroDirecton;  
22.      CREATE_FUNC(Hero);  
23.  private:  
24.      CCSprite* m_HeroSprite;//精灵  
25.      char *Hero_name;//用来保存初始状态的精灵图片名称  
26.  };  
27. #endif // __HERO_H__  

然后是Hero.cpp

[cpp]  view plain  copy

1. #include "Hero.h"  
2. USING_NS_CC;   
3. USING_NS_CC_EXT;  
4. Hero::Hero(void)  
5. {  
6.     IsRunning=false;//没在放动画  
7.     HeroDirecton=false;//向右运动  
8.     Hero_name=NULL;  
9. }  
10.   
11. Hero::~Hero(void)  
12. {  
13.   
14. }  
15.  void Hero::InitHeroSprite(char *hero_name)  
16.  {  
17.     Hero_name=hero_name;  
18.     this->m_HeroSprite=CCSprite::create(hero_name);  
19.     this->addChild(m_HeroSprite);  
20.  }  
21.  //动画播放，可以是跑、攻击、死亡、受伤等  
22.  void Hero::SetAnimation(const char *name_plist,const char *name_png,const char *name_each,unsigned int num,bool run_directon)  
23.  {  
24.      if(HeroDirecton!=run_directon)  
25.      {   HeroDirecton=run_directon;  
26.      m_HeroSprite->setFlipX(run_directon);  
27.      }  
28.      if(IsRunning)  
29.          return;  
30.      //将图片加载到精灵帧缓存池  
31.     CCSpriteFrameCache *m_frameCache=CCSpriteFrameCache::sharedSpriteFrameCache();  
32.      m_frameCache->addSpriteFramesWithFile(name_plist,name_png);  
33.      //用一个列表保存所有的CCSpriteFrameCache  
34.      CCArray* frameArray= CCArray::createWithCapacity(num);  
35.      unsigned int i;  
36.      for(i=2;i<=num;i++)  
37.      {  
38.          CCSpriteFrame* frame=m_frameCache->spriteFrameByName(CCString::createWithFormat("%s%d.png",name_each,i)->getCString());  
39.          frameArray->addObject(frame);  
40.      }  
41.      //使用列表创建动画对象  
42.      CCAnimation* animation=CCAnimation::createWithSpriteFrames(frameArray);  
43.      if(HeroDirecton!=run_directon)  
44.      {   HeroDirecton=run_directon;  
45.            
46.      }  
47.      animation->setLoops(-1);//表示无限循环播放  
48.     animation->setDelayPerUnit(0.1f);//每两张图片的时间隔，图片数目越少，间隔最小就越小  
49.   
50.      //将动画包装成一个动作  
51.      CCAnimate* act=CCAnimate::create(animation);  
52.       
53.       
54.      m_HeroSprite->runAction(act);  
55.      IsRunning=true;  
56.   
57.  }  
58.  void Hero::StopAnimation()  
59.  {  
60.      if(!IsRunning)  
61.          return;  
62.     m_HeroSprite->stopAllActions();//当前精灵停止所有动画  
63.   
64.     //恢复精灵原来的初始化贴图   
65.     this->removeChild(m_HeroSprite,TRUE);//把原来的精灵删除掉  
66.     m_HeroSprite=CCSprite::create(Hero_name);//恢复精灵原来的贴图样子  
67.     m_HeroSprite->setFlipX(HeroDirecton);  
68.     this->addChild(m_HeroSprite);  
69.     IsRunning=false;  
70.     IsRunning=false;  
71.  }  

之后就在HelloWorldScene.h添加头文件#include "Hero.h"，并加入成员变量

[cpp]  view plain  copy

1. private:  
2.            Hero*    hero;  

在HelloWorldScene.h的init()函数添加：

[cpp]  view plain  copy

1. //添加赵云精灵  
2.     hero=Hero::create();  
3.     hero->InitHeroSprite("zhoayun.png");  
4.     hero->setPosition(ccp(200,200));  
5.     this->addChild(hero,1);  

效果如下：

这时图片还是静止的为了要验证一个精灵的运动，我们来播放一个它的走动的动画，在上面

[cpp]  view plain  copy

1. hero=Hero::create();  
2.     hero->InitHeroSprite("zhoayun.png");  
3.     hero->setPosition(ccp(200,200));  
4.     this->addChild(hero,1);  

添加一句

[cpp]  view plain  copy

1. hero->SetAnimation("run_animation.plist","run_animation.png",8,false);//8表示plist中的图片数目,false表示脸朝右  

来看看效果，这时精灵会一直不停的运动

如果我们要改变精灵的脸朝向呢？简单，false改成true

[cpp]  view plain  copy

1. hero->SetAnimation("run_animation.plist","run_animation.png",8,true);//8表示plist中的图片数目,false表示脸朝右  

效果：

好了，验证正确后，我们还不是把上面那一句注释掉，因为精灵应该是我们点了摇杆让他动它才动的。

其实要控制人物的运动很简单，无非是在播房动画的同时，要移动精灵的位置，当然，这里我们也要判断精灵的脸朝向，上面的摇杆类HRocker中

[cpp]  view plain  copy

1. //判断控制杆方向，用来判断精灵上、下、左、右运动  
2. int rocketDirection;  
3. //当前人物行走方向,用来判断精灵的朝向，精灵脸朝右还是朝左  
4. bool rocketRun;  

我们只要将这两个参数传给赵去的英雄类Hero中的

//设置动画,num为图片数目，run_directon为精灵脸朝向，false朝右
void SetAnimation(const char *name_plist,const char *name_png,const unsigned int num,bool run_directon);

看到了没，一个刚好是int 型，一个刚好是bool型。那我们要怎么来控制了。前面我们在HelloWorldScene中不是创建了两个对像

[cpp]  view plain  copy

1. private:  
2.     HRocker* rocker;//摇杆  
3.     Hero*    hero;///精灵  

将rocker的值传给hero不就可以控制了么？想着要能每帧都能更新，所以在HelloWorldScene.h中加入事件

[cpp]  view plain  copy

1. virtual void update(float delta);  

一定要注意在HelloWorldScene.cpp的init()函数下面添加

[cpp]  view plain  copy

1. //启动updata事件  
2. this->scheduleUpdate();  

然后就是事件了

[cpp]  view plain  copy

1. void HelloWorld::update(float delta)  
2. {  
3.     //判断是否按下摇杆及其类型  
4.     switch(rocker->rocketDirection)  
5.     {  
6.     case 1:  
7.         hero->SetAnimation("run_animation.plist","run_animation.png","run_",8,rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分  
8.         hero->setPosition(ccp(hero->getPosition().x+1,hero->getPosition().y)); //向右走  
9.         break;  
10.     case  2:  
11.         hero->SetAnimation("run_animation.plist","run_animation.png","run_",8,rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分  
12.         hero->setPosition(ccp(hero->getPosition().x, hero->getPosition().y+1));   //向上走  
13.         break;  
14.     case 3:  
15.         hero->SetAnimation("run_animation.plist","run_animation.png","run_",8,rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分  
16.         hero->setPosition(ccp(hero->getPosition().x-1,hero->getPosition().y));   //向左走  
17.         break;  
18.     case 4:  
19.         hero->SetAnimation("run_animation.plist","run_animation.png","run_",8,rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分  
20.         hero->setPosition(ccp(hero->getPosition().x,hero->getPosition().y-1));   //向下走  
21.         break;  
22.     default:  
23.         hero->StopAnimation();//停止所有动画和运动  
24.         break;  
25.   
26.     }  
27. }  

好了，我们来看看效果如何

效果还不错，也不会很卡。总算大功告成了！

四、思路总结

      其实这里的思路是把摇杆类的精灵类分开来实现，摇杆类中有可以控制按钮的运动，并有返回当前你摇杆的操作类型，是向上还是向下，是脸朝右还朝左，然后还这些参数传给英雄精灵类，这里的英雄我们也要设置它的动画，然后就是在创建两个个类的实例对像的层中来调用它们，并在updata（）函数中判断摇杆是否按下，及方向，然后设置赵云精灵类的移动的动画的播放。思路就是这样了，由于工程还要一直改下去，如果谁现在想要我的素材和工程的，留个邮箱给我就是了哈，我会发给你们的。

源码免费下载（博主决定本系列资源全部免费～）