Cocos2d-x虚拟摇杆控制精灵上下左右运动
发布时间：2020-12-14 20:05:21 所属栏目：百科 来源：网络整理
导读：找了好多资料，觉得这个不错， 这里实现了能通过虚拟摇杆控制精灵的运动，而且能够改变精灵运动时的脸部朝向。之前看了好多人写虚拟摇杆，但是就是没写控制精灵的运动和脸朝向的。所以自己就想要写个文章好好讲下它的实现思路。好了，下面我们开始吧。 目录
|
找了好多资料，觉得这个不错， 这里实现了能通过虚拟摇杆控制精灵的运动，而且能够改变精灵运动时的脸部朝向。之前看了好多人写虚拟摇杆，但是就是没写控制精灵的运动和脸朝向的。所以自己就想要写个文章好好讲下它的实现思路。好了，下面我们开始吧。 目录：一、修改背景图片和窗口大小 二、添加虚拟摇杆 三、添加精灵并用摇杆控制精灵的运动 四、思路总结 新建一个工程，工程名为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表示放在最底层 效果如下： 首先，先将摇杆素材放入到项目的Resources文件夹下，注意，最好把要用到的素材都放在这里，项目工程默认的素材是从此文件夹下查找。 这是摇杆的背景图片，图片不容易找啊。没有美工，只能随便网上找了点， 这是摇杆里面的按钮图片，它是可以移动的 好了，接下来我们要开始加入摇杆的进入背景中了，我的思路是把摇杆封装成一个类，然后照看继承CCLayer，就可以响应触摸事件了，看看代码，新建一个HRocker.h头文件。这里要注意要把.cpp和.h都放到项目的class文件夹下，要不会提示找不到文件。代码如下： #ifndef__HROCKER_H__ #define__HROCKER_H__ #include"cocos2d.h" usingnamespacecocos2d; //用于标识摇杆与摇杆的背景 typedefenum{ tag_rocker, tag_rockerBG,Simsun; font-size:14px; line-height:30px">}tagForHRocker; //用于标识摇杆方向 rocker_stay,Simsun; font-size:14px; line-height:30px"> rocker_right,Simsun; font-size:14px; line-height:30px"> rocker_up,Simsun; font-size:14px; line-height:30px"> rocker_left,Simsun; font-size:14px; line-height:30px"> rocker_down,Simsun; font-size:14px; line-height:30px">}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,Simsun; font-size:14px; line-height:30px"> //是否可操作摇杆 boolisCanMove; //获取当前摇杆与用户触屏点的角度 floatgetRad(CCPointpos1,CCPointpos2); //摇杆背景的坐标 CCPointrockerBGPosition; //摇杆背景的半径 floatrockerBGR; //触屏事件 virtualboolccTouchBegan(CCTouch*pTouch,CCEvent*pEvent); virtualvoidccTouchMoved(CCTouch*pTouch,Simsun; font-size:14px; line-height:30px"> virtualvoidccTouchEnded(CCTouch*pTouch,Simsun; font-size:14px; line-height:30px">}; #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,Simsun; font-size:14px; line-height:30px"> 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() rocker->setVisible(false); 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~-180 if(py2<py1) rad=-rad; returnrad; CCPointgetAngelePosition(floatr,floatangle){ returnccp(r*cos(angle),r*sin(angle)); //抬起事件 boolHRocker::ccTouchBegan(CCTouch*pTouch,CCEvent*pEvent) CCPointpoint=pTouch->getLocation(); if(rocker->boundingBox().containsPoint(point)) isCanMove=true; CCLOG("begin"); returntrue; //移动事件 voidHRocker::ccTouchMoved(CCTouch*pTouch,Simsun; font-size:14px; line-height:30px"> if(!isCanMove) return; //得到摇杆与触屏点所形成的角度 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))); // CCLOG("touch"); else //当没有超过，让摇杆跟随用户触屏点移动即可 rocker->setPosition(point); //CCLOG("touch"); //判断方向 if(angle>=-PI/4&&angle<PI/4) rocketDirection=rocker_right; CCLOG("%d",rocketDirection); 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,Simsun; font-size:14px; line-height:30px"> rocker->stopAllActions(); rocker->runAction(CCMoveTo::create(0.08f,rockerBG->getPosition())); isCanMove=false; rocketDirection=rocker_stay; CCLOG("end"); voidHRocker::update(floatdt) if(isCanMove) 这里的思路我等下再说吧 之后就在HelloWorldScene.h添加头文件#include"HRocker.h"，并加入摇杆类的成员变量 HRocker*rocker; 在HelloWorldScene.h的init()函数添加： //添加摇杆 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 #ifndef__HERO_H__ #define__HERO_H__ #include"cocos-ext.h" USING_NS_CC_EXT; classHero:publiccocos2d::CCNode Hero(void); ~Hero(void); //根据图片名创建英雄 voidInitHeroSprite(char*hero_name); //设置动画,num为图片数目，run_directon为精灵脸朝向，false朝右,name_each为name_png中每一小张图片的公共名称部分 <spanstyle="white-space:pre"> </span>voidSetAnimation(constchar*name_plist,constchar*name_png,constchar*name_each,constunsignedintnum,boolrun_directon); //停止动画 voidStopAnimation(); //判断是否在跑动画 boolIsRunning; //英雄运动的方向 boolHeroDirecton; CREATE_FUNC(Hero); CCSprite*m_HeroSprite;//精灵 char*Hero_name;//用来保存初始状态的精灵图片名称 #endif//__HERO_H__ 然后是Hero.cpp #include"Hero.h" USING_NS_CC; 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) //将图片加载到精灵帧缓存池 CCSpriteFrameCache*m_frameCache=CCSpriteFrameCache::sharedSpriteFrameCache(); m_frameCache->addSpriteFramesWithFile(name_plist,name_png); //用一个列表保存所有的CCSpriteFrameCache CCArray*frameArray=CCArray::createWithCapacity(num); unsignedinti; for(i=2;i<=num;i++) CCSpriteFrame*frame=m_frameCache->spriteFrameByName(CCString::createWithFormat("%s%d.png",name_each,i)->getCString()); frameArray->addObject(frame); //使用列表创建动画对象 CCAnimation*animation=CCAnimation::createWithSpriteFrames(frameArray); animation->setLoops(-1);//表示无限循环播放 animation->setDelayPerUnit(0.1f);//每两张图片的时间隔，图片数目越少，间隔最小就越小 //将动画包装成一个动作 CCAnimate*act=CCAnimate::create(animation); m_HeroSprite->runAction(act); IsRunning=true; voidHero::StopAnimation() if(!IsRunning) m_HeroSprite->stopAllActions();//当前精灵停止所有动画 //恢复精灵原来的初始化贴图 this->removeChild(m_HeroSprite,TRUE);//把原来的精灵删除掉 m_HeroSprite=CCSprite::create(Hero_name);//恢复精灵原来的贴图样子 m_HeroSprite->setFlipX(HeroDirecton); IsRunning=false; 之后就在HelloWorldScene.h添加头文件#include"Hero.h"，并加入成员变量 Hero*hero; //添加赵云精灵 hero=Hero::create(); hero->InitHeroSprite("zhoayun.png"); hero->setPosition(ccp(200,200)); this->addChild(hero,1); 这时图片还是静止的为了要验证一个精灵的运动，我们来播放一个它的走动的动画，在上面 hero=Hero::create(); 添加一句 hero->SetAnimation("run_animation.plist","run_animation.png",8,false);//8表示plist中的图片数目,false表示脸朝右 来看看效果，这时精灵会一直不停的运动 如果我们要改变精灵的脸朝向呢？简单，false改成true hero->SetAnimation("run_animation.plist",true);//8表示plist中的图片数目,Simsun; font-size:14px; line-height:30px">效果： 好了，验证正确后，我们还不是把上面那一句注释掉，因为精灵应该是我们点了摇杆让他动它才动的。 其实要控制人物的运动很简单，无非是在播房动画的同时，要移动精灵的位置，当然，这里我们也要判断精灵的脸朝向，上面的摇杆类HRocker中 我们只要将这两个参数传给赵去的英雄类Hero中的 //设置动画,num为图片数目，run_directon为精灵脸朝向，false朝右voidSetAnimation(constchar*name_plist,Simsun; font-size:14px; line-height:30px">看到了没，一个刚好是int型，一个刚好是bool型。那我们要怎么来控制了。前面我们在HelloWorldScene中不是创建了两个对像 HRocker*rocker;//摇杆 Hero*hero;///精灵 将rocker的值传给hero不就可以控制了么？想着要能每帧都能更新，所以在HelloWorldScene.h中加入事件 virtualvoidupdate(floatdelta); 一定要注意在HelloWorldScene.cpp的init()函数下面添加 //启动updata事件 this->scheduleUpdate(); 然后就是事件了 voidHelloWorld::update(floatdelta) //判断是否按下摇杆及其类型 switch(rocker->rocketDirection) case1: hero->setPosition(ccp(hero->getPosition().x+1,hero->getPosition().y));//向右走 break; case2: hero->setPosition(ccp(hero->getPosition().x,hero->getPosition().y+1));//向上走 case3: hero->setPosition(ccp(hero->getPosition().x-1,hero->getPosition().y));//向左走 case4: default: hero->StopAnimation();//停止所有动画和运动 好了，我们来看看效果如何 效果还不错，也不会很卡。总算大功告成了！ 其实这里的思路是把摇杆类的精灵类分开来实现，摇杆类中有可以控制按钮的运动，并有返回当前你摇杆的操作类型，是向上还是向下，是脸朝右还朝左，然后还这些参数传给英雄精灵类，这里的英雄我们也要设置它的动画，然后就是在创建两个个类的实例对像的层中来调用它们，并在updata（）函数中判断摇杆是否按下，及方向，然后设置赵云精灵类的移动的动画的播放，思路就是这样了。
用过了，的确挺好用 原地址：http://www.58player.com/blog-2541-136551.html （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |