Cocos2d-x《赵云要格斗》--虚拟摇杆控制精灵上下左右运动

概述    本文将要实现一个横版格斗类游戏，并实现摇杆控制英雄上下左右运动。这里实现了能通过虚拟摇杆控制精灵的运动，而且能够改变精灵运动时的脸部朝向。之前看了好多人写虚拟摇杆，但是就是没写控制精灵的运动和脸朝向的。所以自己就想要写个文章好好讲下它的实现思路。好了，下面我们开始吧。 最终效果：     cocos2d-x版本：2.2.5     工程环境：windows7+VS2010        打

本文将要实现一个横版格斗类游戏，并实现摇杆控制英雄上下左右运动。这里实现了能通过虚拟摇杆控制精灵的运动，而且能够改变精灵运动时的脸部朝向。之前看了好多人写虚拟摇杆，但是就是没写控制精灵的运动和脸朝向的。所以自己就想要写个文章好好讲下它的实现思路。好了，下面我们开始吧。

最终效果：

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://img.blog.csdn.net/20141220173610907">

cocos2d-x版本：2.2.5

工程环境：windows7+VS2010

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

目录：

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

二、添加虚拟摇杆

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

四、思路总结

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

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

eglVIEw->setFrameSize(480,320);为eglVIEw->setFrameSize(640,480);

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

//得到窗口的大小CCSizevisibleSize=CCDirector::sharedDirector()->getVisibleSize();CCPointorigin=CCDirector::sharedDirector()->getVisibleOrigin();//修改背景图片CCSprite*pSprite=CCSprite::create("background_1.jpg");pSprite->setposition(ccp(visibleSize.wIDth/2+origin.x,visibleSize.height/2+origin.y));this->addChild(pSprite,0);//这里的0表示放在最底层

效果如下：

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://img.blog.csdn.net/20141220163835829">

二、添加虚拟摇杆

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

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://write.blog.csdn.net/postedit/42043509">

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://img.blog.csdn.net/20141220175514732">

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

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://write.blog.csdn.net/postedit/42043509">

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://img.blog.csdn.net/20141220175521734">

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

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

#ifndef__HROCKER_H__#define__HROCKER_H__#include"cocos2d.h"usingnamespacecocos2d;//用于标识摇杆与摇杆的背景typedefenum{tag_rocker,tag_rockerBG,}tagForHRocker;//用于标识摇杆方向typedefenum{rocker_stay,rocker_right,rocker_up,rocker_left,rocker_down,}tagDirecton;classHRocker:publiccclayer{public:HRocker(voID);~HRocker(voID);//创建摇杆(摇杆的 *** 作题图片资源名，摇杆背景图片资源名，起始坐标)staticHRocker*createHRocker(constchar*rockerImagename,constchar*rockerBGImagename,CCPointposition);//启动摇杆(显示摇杆、监听摇杆触屏事件)voIDstartRocker(bool_isstopOther);//停止摇杆(隐藏摇杆，取消摇杆的触屏监听)voIDstopRocker();//判断控制杆方向，用来判断精灵上、下、左、右运动introcketDirection;//当前人物行走方向,用来判断精灵的朝向，精灵脸朝右还是朝左boolrocketRun;CREATE_FUNC(HRocker);private://自定义初始化函数voIDrockerInit(constchar*rockerImagename,CCPointposition);//是否可 *** 作摇杆boolisCanMove;//获取当前摇杆与用户触屏点的角度floatgeTrad(CCPointpos1,CCPointpos2);//摇杆背景的坐标CCPointrockerBGposition;//摇杆背景的半径floatrockerBGR;//触屏事件virtualboolcctouchBegan(CCtouch*ptouch,CCEvent*pEvent);virtualvoIDcctouchmoved(CCtouch*ptouch,CCEvent*pEvent);virtualvoIDcctouchended(CCtouch*ptouch,CCEvent*pEvent);};#endif

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

#include"HRocker.h"constdoublePI=3.1415;HRocker::HRocker(voID){rocketRun=false;}HRocker::~HRocker(voID){}//创建摇杆(摇杆的 *** 作题图片资源名，摇杆背景图片资源名，起始坐标)HRocker*HRocker::createHRocker(constchar*rockerImagename,CCPointposition){HRocker*layer=HRocker::create();if(layer){layer->rockerInit(rockerImagename,rockerBGImagename,position);returnlayer;}CC_SAFE_DELETE(layer);returnNulL;}//自定义初始化函数voIDHRocker::rockerInit(constchar*rockerImagename,CCPointposition){CCSprite*spRockerBG=CCSprite::create(rockerBGImagename);spRockerBG->setposition(position);spRockerBG->setVisible(false);addChild(spRockerBG,tag_rockerBG);CCSprite*spRocker=CCSprite::create(rockerImagename);spRocker->setposition(position);spRocker->setVisible(false);addChild(spRocker,1,tag_rocker);rockerBGposition=position;rockerBGR=spRockerBG->getContentSize().wIDth*0.5;//rocketDirection=-1;//表示摇杆方向不变}//启动摇杆(显示摇杆、监听摇杆触屏事件)voIDHRocker::startRocker(bool_isstopOther){CCSprite*rocker=(CCSprite*)this->getChildByTag(tag_rocker);rocker->setVisible(true);CCSprite*rockerBG=(CCSprite*)this->getChildByTag(tag_rockerBG);rockerBG->setVisible(true);CCDirector::sharedDirector()->gettouchdispatcher()->addTargetedDelegate(this,-1,_isstopOther);}//停止摇杆(隐藏摇杆，取消摇杆的触屏监听)voIDHRocker::stopRocker(){CCSprite*rocker=(CCSprite*)this->getChildByTag(tag_rocker);rocker->setVisible(false);CCSprite*rockerBG=(CCSprite*)this->getChildByTag(tag_rockerBG);rockerBG->setVisible(false);CCDirector::sharedDirector()->gettouchdispatcher()->removeDelegate(this);}//获取当前摇杆与用户触屏点的角度floatHRocker::geTrad(CCPointpos1,CCPointpos2){floatpx1=pos1.x;floatpy1=pos1.y;floatpx2=pos2.x;floatpy2=pos2.y;//得到两点x的距离floatx=px2-px1;//得到两点y的距离floaty=py1-py2;//算出斜边长度floatxIE=sqrt(pow(x,2)+pow(y,2));//得到这个角度的余弦值(通过三角函数中的店里：角度余弦值=斜边/斜边)floatcosAngle=x/xIE;//通过反余弦定理获取到期角度的弧度floatrad=acos(cosAngle);//注意：当触屏的位置Y坐标<摇杆的Y坐标，我们要去反值-0~-180if(py2<py1){rad=-rad;}returnrad;}CCPointgetAngeleposition(floatr,floatangle){returnccp(r*cos(angle),r*sin(angle));}//抬起事件boolHRocker::cctouchBegan(CCtouch*ptouch,CCEvent*pEvent){CCPointpoint=ptouch->getLocation();CCSprite*rocker=(CCSprite*)this->getChildByTag(tag_rocker);if(rocker->boundingBox().containsPoint(point))isCanMove=true;returntrue;}//移动事件voIDHRocker::cctouchmoved(CCtouch*ptouch,CCEvent*pEvent){if(!isCanMove){return;}CCPointpoint=ptouch->getLocation();CCSprite*rocker=(CCSprite*)this->getChildByTag(tag_rocker);//得到摇杆与触屏点所形成的角度floatangle=geTrad(rockerBGposition,point);//判断两个圆的圆心距是否大于摇杆背景的半径if(sqrt(pow((rockerBGposition.x-point.x),2)+pow((rockerBGposition.y-point.y),2))>=rockerBGR){//保证内部小圆运动的长度限制rocker->setposition(ccpAdd(getAngeleposition(rockerBGR,angle),ccp(rockerBGposition.x,rockerBGposition.y)));}elserocker->setposition(point);//判断方向if(angle>=-PI/4&&angle<PI/4){rocketDirection=rocker_right;rocketRun=false;}elseif(angle>=PI/4&&angle<3*PI/4){rocketDirection=rocker_up;}elseif((angle>=3*PI/4&&angle<=PI)||(angle>=-PI&&angle<-3*PI/4)){rocketDirection=rocker_left;rocketRun=true;}elseif(angle>=-3*PI/4&&angle<-PI/4){rocketDirection=rocker_down;}}//离开事件voIDHRocker::cctouchended(CCtouch*ptouch,CCEvent*pEvent){if(!isCanMove){return;}CCSprite*rockerBG=(CCSprite*)this->getChildByTag(tag_rockerBG);CCSprite*rocker=(CCSprite*)this->getChildByTag(tag_rocker);rocker->stopAllActions();rocker->runAction(CCMoveto::create(0.08f,rockerBG->getposition()));isCanMove=false;rocketDirection=rocker_stay;}

这里的思路我等下再说吧

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

private:HRocker*rocker;

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

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

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

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://img.blog.csdn.net/20141220164752796">

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

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

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

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

650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="t2.JPG" alt="wKioL1TvBCmCDwMCAAErxU1aVVQ409.jpg" src="http://s3.51cto.com/wyfs02/M01/59/E7/wKioL1TvBCmCDwMCAAErxU1aVVQ409.jpg">

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

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://img.blog.csdn.net/20141220180059820">

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://write.blog.csdn.net/postedit/42043509">

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

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

650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="t3.JPG" alt="wKiom1TvA0iSwvlmAARocNAkQ5g287.jpg" src="http://s3.51cto.com/wyfs02/M01/59/EA/wKiom1TvA0iSwvlmAARocNAkQ5g287.jpg">

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

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://img.blog.csdn.net/20141220175806156">

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

#ifndef__HERO_H__#define__HERO_H__#include"cocos2d.h"#include"cocos-ext.h"usingnamespacecocos2d;USING_NS_CC_EXT;classHero:publiccocos2d::CCNode{public:Hero(voID);~Hero(voID);//根据图片名创建英雄voIDInitHeroSprite(char*hero_name);//设置动画,num为图片数目，run_directon为精灵脸朝向，false朝右voIDSetAnimation(constchar*name_pList,constchar*name_png,constunsignedintnum,boolrun_directon);//停止动画voIDStopAnimation();//判断英雄是否运动到了窗口的中间位置boolJudgePositona(CCSizevisibleSize);//判断是否在跑动画boolisRunning;//英雄运动的方向boolHeroDirecton;CREATE_FUNC(Hero);private:CCSprite*m_HeroSprite;//精灵char*Hero_name;//用来保存初始状态的精灵图片名称};#endif//__HERO_H__

然后是Hero.cpp

#include"Hero.h"USING_NS_CC;USING_NS_CC_EXT;Hero::Hero(voID){IsRunning=false;//没在放动画HeroDirecton=false;//向右运动Hero_name=NulL;}Hero::~Hero(voID){}voIDHero::InitHeroSprite(char*hero_name){Hero_name=hero_name;this->m_HeroSprite=CCSprite::create(hero_name);this->addChild(m_HeroSprite);}//原地奔跑动画voIDHero::SetAnimation(constchar*name_pList,unsignedintnum,boolrun_directon){if(HeroDirecton!=run_directon){HeroDirecton=run_directon;m_HeroSprite->setFlipX(run_directon);}if(IsRunning)return;//将图片加载到精灵帧缓存池CCSpriteFrameCache*m_frameCache=CCSpriteFrameCache::sharedSpriteFrameCache();m_frameCache->addSpriteFramesWithfile(name_pList,name_png);//用一个列表保存所有的CCSpriteFrameCacheCCArray*frameArray=CCArray::createWithCapacity(num);unsignedinti;for(i=2;i<=num;i++){CCSpriteFrame*frame=m_frameCache->spriteFrameByname(CCString::createWithFormat("run_%d.png",i)->getCString());frameArray->addobject(frame);}//使用列表创建动画对象CCAnimation*animation=CCAnimation::createWithSpriteFrames(frameArray);if(HeroDirecton!=run_directon){HeroDirecton=run_directon;}animation->setLoops(-1);//表示无限循环播放animation->setDelayPerUnit(0.1f);//每两张图片的时间隔，图片数目越少，间隔最小就越小//将动画包装成一个动作CCAnimate*act=CCAnimate::create(animation);m_HeroSprite->runAction(act);IsRunning=true;}voIDHero::StopAnimation(){if(!IsRunning)return;m_HeroSprite->stopAllActions();//当前精灵停止所有动画//恢复精灵原来的初始化贴图this->removeChild(m_HeroSprite,TRUE);//把原来的精灵删除掉m_HeroSprite=CCSprite::create(Hero_name);//恢复精灵原来的贴图样子m_HeroSprite->setFlipX(HeroDirecton);this->addChild(m_HeroSprite);IsRunning=false;IsRunning=false;}boolHero::JudgePositona(CCSizevisibleSize){if(this->getpositionX()!=visibleSize.wIDth/2)//精灵到达左边returnfalse;elsereturntrue;//到达中间位置}

效果如下：

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://img.blog.csdn.net/20141220175933630">

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://write.blog.csdn.net/postedit/42043509">

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

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

添加一句

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

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

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://img.blog.csdn.net/20141220170536219">

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

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

效果：

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://img.blog.csdn.net/20141220170714750">

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

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

//判断控制杆方向，用来判断精灵上、下、左、右运动introcketDirection;//当前人物行走方向,用来判断精灵的朝向，精灵脸朝右还是朝左boolrocketRun;

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

//设置动画,boolrun_directon);

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

private:HRocker*rocker;//摇杆Hero*hero;///精灵

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

virtualvoIDupdate(floatdelta);

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

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

然后就是事件了

voIDHelloWorld::update(floatdelta){//判断是否按下摇杆及其类型switch(rocker->rocketDirection){case1:hero->SetAnimation("run_animation.pList","run_",rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分hero->setposition(ccp(hero->getposition().x+1,hero->getposition().y));//向右走break;case2:hero->SetAnimation("run_animation.pList",rocker->rocketRun);hero->setposition(ccp(hero->getposition().x,hero->getposition().y+1));//向上走break;case3:hero->SetAnimation("run_animation.pList",rocker->rocketRun);hero->setposition(ccp(hero->getposition().x-1,hero->getposition().y));//向左走break;case4:hero->SetAnimation("run_animation.pList",hero->getposition().y-1));//向下走break;default:hero->StopAnimation();//停止所有动画和运动break;}}

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

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" src="http://img.blog.csdn.net/20141220173610907">

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

四、思路总结

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

总结

以上是内存溢出为你收集整理的Cocos2d-x《赵云要格斗》--虚拟摇杆控制精灵上下左右运动全部内容，希望文章能够帮你解决Cocos2d-x《赵云要格斗》--虚拟摇杆控制精灵上下左右运动所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。