Cocos2d-x虚拟摇杆控制精灵上下左右运动----之游戏开发《赵云要格斗》(1)

前端之家收集整理的这篇文章主要介绍了Cocos2d-x虚拟摇杆控制精灵上下左右运动----之游戏开发《赵云要格斗》(1)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这里是Evankaka博客,欢迎大家前面讨论与交流~~~~~~

转载请注明出处http://www.jb51.cc/article/p-getkrcwn-kh.html

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

cocos2d-x版本:2.2.5

工程环境:windows7+VS2010

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

源码免费下载博主决定本系列资源全部免费~)

目录:

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

二、添加虚拟摇杆

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

四、思路总结



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

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

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


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

  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文件夹下,要不会提示找不到文件代码如下:

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

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

  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,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,CCPoint position)
  27. {
  28. CCSprite *spRockerBG = CCSprite::create(rockerBGImageName);
  29. spRockerBG->setPosition(position);
  30. spRockerBG->setVisible(false);
  31. addChild(spRockerBG,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. rocker->setPosition(ccpAdd(getAngelePosition(rockerBGR,angle),ccp(rockerBGPosition.x,rockerBGPosition.y)));
  126. // CCLOG("touch");
  127. }
  128. else
  129. {
  130. //当没有超过,让摇杆跟随用户触屏点移动即可
  131. rocker->setPosition(point);
  132. //CCLOG("touch");
  133. }
  134.  
  135. //判断方向
  136. if(angle>=-PI/4&&angle<PI/4)
  137. {
  138. rocketDirection=rocker_right;
  139. rocketRun=false;
  140. CCLOG("%d",rocketDirection);
  141. }
  142. else if(angle>=PI/4&&angle<3*PI/4)
  143. {
  144. rocketDirection=rocker_up;
  145. CCLOG("%d",rocketDirection);
  146. }
  147. else if((angle>=3*PI/4&&angle<=PI)||(angle>=-PI&&angle<-3*PI/4))
  148. {
  149. rocketDirection=rocker_left;
  150. rocketRun=true;
  151. CCLOG("%d",rocketDirection);
  152. }
  153. else if(angle>=-3*PI/4&&angle<-PI/4)
  154. {
  155. rocketDirection=rocker_down;
  156. CCLOG("%d",rocketDirection);
  157. }
  158. }
  159. //离开事件
  160. void HRocker::ccTouchEnded(CCTouch *pTouch,CCEvent *pEvent)
  161. {
  162. if (!isCanMove)
  163. {
  164. return;
  165. }
  166. CCSprite *rockerBG = (CCSprite*)this->getChildByTag(tag_rockerBG);
  167. CCSprite *rocker = (CCSprite*)this->getChildByTag(tag_rocker);
  168. rocker->stopAllActions();
  169. rocker->runAction(CCMoveTo::create(0.08f,rockerBG->getPosition()));
  170. isCanMove = false;
  171. rocketDirection=rocker_stay;
  172. CCLOG("%d",rocketDirection);
  173. CCLOG("end");
  174. }
  175. void HRocker::update(float dt)
  176. {
  177. if(isCanMove)
  178. {
  179. }
  180. }
这里的思路我等下再说吧

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

  1. private:
  2. HRocker* rocker;

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

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

效果如下:我们可以看到,可以移动摇杆了


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

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

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

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



另外,赵云不运动时的图片



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

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


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



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

Hero.h

  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

  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,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. animation->setLoops(-1);//表示无限循环播放
  47. animation->setDelayPerUnit(0.1f);//每两张图片的时间隔,图片数目越少,间隔最小就越小
  48.  
  49. //将动画包装成一个动作
  50. CCAnimate* act=CCAnimate::create(animation);
  51. m_HeroSprite->runAction(act);
  52. IsRunning=true;
  53.  
  54. }
  55. void Hero::StopAnimation()
  56. {
  57. if(!IsRunning)
  58. return;
  59. m_HeroSprite->stopAllActions();//当前精灵停止所有动画
  60.  
  61. //恢复精灵原来的初始化贴图
  62. this->removeChild(m_HeroSprite,TRUE);//把原来的精灵删除
  63. m_HeroSprite=CCSprite::create(Hero_name);//恢复精灵原来的贴图样子
  64. m_HeroSprite->setFlipX(HeroDirecton);
  65. this->addChild(m_HeroSprite);
  66. IsRunning=false;
  67. IsRunning=false;
  68. }

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

  1. private:
  2. Hero* hero;
  1.  

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

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

效果如下:


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

  1. hero=Hero::create();
  2. hero->InitHeroSprite("zhoayun.png");
  3. hero->setPosition(ccp(200,1);
添加一句

  1. hero->SetAnimation("run_animation.plist","run_animation.png",8,false);//8表示plist中的图片数目,false表示脸朝右
来看看效果,这时精灵会一直不停的运动



如果我们要改变精灵的脸朝向呢?简单,false改成true
  1. hero->SetAnimation("run_animation.plist",true);//8表示plist中的图片数目,false表示脸朝右

效果


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

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

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

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

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

看到了没,一个刚好是int 型,一个刚好是bool型。那我们要怎么来控制了。前面我们在HelloWorldScene中不是创建了两个对像
  1. private:
  2. HRocker* rocker;//摇杆
  3. Hero* hero;///精灵

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

  1. virtual void update(float delta);

一定要注意在HelloWorldScene.cpp的init()函数下面添加
  1. //启动updata事件
  2. this->scheduleUpdate();
然后就是事件了
  1. void HelloWorld::update(float delta)
  2. {
  3. //判断是否按下摇杆及其类型
  4. switch(rocker->rocketDirection)
  5. {
  6. case 1:
  7. hero->SetAnimation("run_animation.plist","run_",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",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",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",hero->getPosition().y-1)); //向下走
  20. break;
  21. default:
  22. hero->StopAnimation();//停止所有动画和运动
  23. break;
  24.  
  25. }
  26. }
好了,我们来看看效果如何
效果还不错,也不会很卡。总算大功告成了!

四、思路总结

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

源码免费下载(博主决定本系列资源全部免费~)

猜你在找的Cocos2d-x相关文章