码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2014-12-20 18:18:00      阅读：250      评论：0      收藏：0      [点我收藏+]

标签：cocos2d-x 摇杆 精灵运动

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

目录：

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

二、添加虚拟摇杆

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

四、思路总结



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

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

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


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

  //得到窗口的大小
    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
    CCPoint origin = 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"

using namespace cocos2d;

//用于标识摇杆与摇杆的背景
typedef enum{
	tag_rocker,
	tag_rockerBG,
}tagForHRocker;
//用于标识摇杆方向
typedef enum{
	rocker_stay,
	rocker_right,
	rocker_up,
	rocker_left,
	rocker_down,
}tagDirecton;
//用于标识摇杆方向
typedef enum{
	run_right,
	run_left,

}tagRunDirecton;

class HRocker:public CCLayer
{
public:
	HRocker(void);
	~HRocker(void);

	//创建摇杆(摇杆的操作题图片资源名，摇杆背景图片资源名，起始坐标)
	static HRocker* createHRocker(const char *rockerImageName,const char *rockerBGImageName,CCPoint position);
	//启动摇杆(显示摇杆、监听摇杆触屏事件)
	void startRocker(bool _isStopOther);
	//停止摇杆(隐藏摇杆，取消摇杆的触屏监听)
	void stopRocker();
	//判断控制杆方向，用来判断精灵上、下、左、右运动
	int rocketDirection;
	//当前人物行走方向,用来判断精灵的朝向，精灵脸朝右还是朝左
	bool rocketRun;
	CREATE_FUNC(HRocker);
private:
	//自定义初始化函数
	void rockerInit(const char* rockerImageName,const char* rockerBGImageName,CCPoint position);
	//是否可操作摇杆
	bool isCanMove;
	//获取当前摇杆与用户触屏点的角度
	float getRad(CCPoint pos1,CCPoint pos2);
	//摇杆背景的坐标
	CCPoint rockerBGPosition;
	//摇杆背景的半径
	float rockerBGR;
	//触屏事件
	virtual bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);
	virtual void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent);
	virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);

};

#endif

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

#include "HRocker.h"
const double PI=3.1415;
HRocker::HRocker(void)
{
	rocketRun=false;
}

HRocker::~HRocker(void)
{
}

//创建摇杆(摇杆的操作题图片资源名，摇杆背景图片资源名，起始坐标)
HRocker* HRocker::createHRocker(const char *rockerImageName,const char *rockerBGImageName,CCPoint position)
{
	HRocker *layer = HRocker::create();
	if (layer)
	{
		layer->rockerInit(rockerImageName,rockerBGImageName,position);
		return layer;
	}
	CC_SAFE_DELETE(layer);
	return NULL;
}

//自定义初始化函数
void HRocker::rockerInit(const char* rockerImageName,const char* rockerBGImageName,CCPoint position)
{
	CCSprite *spRockerBG = CCSprite::create(rockerBGImageName);
	spRockerBG->setPosition(position);
	spRockerBG->setVisible(false);
	addChild(spRockerBG,0,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;//表示摇杆方向不变
}

//启动摇杆(显示摇杆、监听摇杆触屏事件)
void HRocker::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);
}

//停止摇杆(隐藏摇杆，取消摇杆的触屏监听)
void HRocker::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);
}


//获取当前摇杆与用户触屏点的角度
float HRocker::getRad(CCPoint pos1,CCPoint pos2)
{
	float px1 = pos1.x;
	float py1 = pos1.y;
	float px2 = pos2.x;
	float py2 = pos2.y;

	//得到两点x的距离
	float x = px2 - px1;
	//得到两点y的距离
	float y = py1 - py2;
	//算出斜边长度
	float xie = sqrt(pow(x,2) + pow(y,2));
	//得到这个角度的余弦值(通过三角函数中的店里：角度余弦值=斜边/斜边)
	float cosAngle = x / xie;
	//通过反余弦定理获取到期角度的弧度
	float rad = acos(cosAngle);
	//注意：当触屏的位置Y坐标<摇杆的Y坐标，我们要去反值-0~-180
	if (py2 < py1)
	{
		rad = -rad;
	}
	return rad;
}

CCPoint getAngelePosition(float r,float angle){
	return ccp(r*cos(angle),r*sin(angle));
}

//抬起事件
bool HRocker::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent)
{
	CCPoint point = pTouch->getLocation();
	CCSprite *rocker = (CCSprite *)this->getChildByTag(tag_rocker);
	if (rocker->boundingBox().containsPoint(point))
	{
		isCanMove = true;
		CCLOG("begin");
	}
	return true;
}
//移动事件
void HRocker::ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent)
{
	if (!isCanMove)
	{
		return;
	}
	CCPoint point = pTouch->getLocation();
	CCSprite *rocker = (CCSprite *)this->getChildByTag(tag_rocker);
	//得到摇杆与触屏点所形成的角度
	float angle = 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;
		rocketRun=false;
		CCLOG("%d",rocketDirection);
	}
	else if(angle>=PI/4&&angle<3*PI/4)
	{
		rocketDirection=rocker_up;
		CCLOG("%d",rocketDirection);
	}
	else if((angle>=3*PI/4&&angle<=PI)||(angle>=-PI&&angle<-3*PI/4))
	{
		rocketDirection=rocker_left;
		rocketRun=true;
		CCLOG("%d",rocketDirection);
	}
	else if(angle>=-3*PI/4&&angle<-PI/4)
	{
		rocketDirection=rocker_down;
		CCLOG("%d",rocketDirection);
	}
}
//离开事件
void HRocker::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;
	CCLOG("%d",rocketDirection);
	CCLOG("end");
}
void HRocker::update(float dt)
{
	if(isCanMove)
	{
		
	}
}
这里的思路我等下再说吧

之后就在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);

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

技术分享

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

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

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

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

技术分享

技术分享

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

技术分享

技术分享

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

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

技术分享技术分享

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

技术分享

技术分享

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

Hero.h

#ifndef __HERO_H__
#define __HERO_H__
#include "cocos2d.h"
#include "cocos-ext.h"
using namespace cocos2d;
USING_NS_CC_EXT; 
 class Hero:public cocos2d::CCNode
 {
 public:
	   Hero(void);
	  ~Hero(void);
	 //根据图片名创建英雄
	 void InitHeroSprite(char *hero_name);
	 //设置动画,num为图片数目，run_directon为精灵脸朝向，false朝右
	 void SetAnimation(const char *name_plist,const char *name_png,const unsigned int num,bool run_directon);
	//停止动画
	 void StopAnimation();
	//判断是否在跑动画
	 bool IsRunning;
	 //英雄运动的方向
	 bool HeroDirecton;
	 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)
{

}
 void Hero::InitHeroSprite(char *hero_name)
 {
	Hero_name=hero_name;
	this->m_HeroSprite=CCSprite::create(hero_name);
	this->addChild(m_HeroSprite);
 }
 //原地奔跑动画
 void Hero::SetAnimation(const char *name_plist,const char *name_png,unsigned int num,bool run_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);
	 //用一个列表保存所有的CCSpriteFrameCache
	 CCArray* frameArray= CCArray::createWithCapacity(num);
	 unsigned int i;
	 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;

 }
 void Hero::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;
 }

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

private:
           Hero*    hero;






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


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



效果如下：


技术分享




技术分享

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



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表示脸朝右
来看看效果，这时精灵会一直不停的运动



技术分享





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


效果：

技术分享




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


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




	//判断控制杆方向，用来判断精灵上、下、左、右运动
	int rocketDirection;
	//当前人物行走方向,用来判断精灵的朝向，精灵脸朝右还是朝左
	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中不是创建了两个对像



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





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




virtual void update(float delta);


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





	//启动updata事件
	this->scheduleUpdate();
然后就是事件了





void HelloWorld::update(float delta)
{
	//判断是否按下摇杆及其类型
	switch(rocker->rocketDirection)
	{
	case 1:
		hero->SetAnimation("run_animation.plist","run_animation.png",8,rocker->rocketRun);
		hero->setPosition(ccp(hero->getPosition().x+1,hero->getPosition().y)); //向右走
		break;
	case  2:
		hero->SetAnimation("run_animation.plist","run_animation.png",8,rocker->rocketRun);
		hero->setPosition(ccp(hero->getPosition().x, hero->getPosition().y+1));   //向上走
		break;
	case 3:
		hero->SetAnimation("run_animation.plist","run_animation.png",8,rocker->rocketRun);
		hero->setPosition(ccp(hero->getPosition().x-1,hero->getPosition().y));   //向左走
		break;
	case 4:
		hero->SetAnimation("run_animation.plist","run_animation.png",8,rocker->rocketRun);
		hero->setPosition(ccp(hero->getPosition().x,hero->getPosition().y-1));   //向下走
		break;
	default:
		hero->StopAnimation();//停止所有动画和运动
		break;

	}
}




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





技术分享


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







四、思路总结


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



















Cocos2d-x虚拟摇杆控制精灵上下左右运动----之游戏开发《赵云要格斗》
标签：cocos2d-x 摇杆 精灵运动
原文地址：http://blog.csdn.net/evankaka/article/details/42043509

                

                

                    

                        

                            

                                

                                    踩

                                

                                    (0)

                            

                            

                                

                                    赞

                                

                                    (0)

                            

                        

                        

                            

                                    
                                
                            

                        

                    

                    

                        举报
                    

                    
                    

                        

                            评论 一句话评论（0）
                        

                        

                            
                            

                                
                            

                        

                        

                            

                            

                                

                                

                                

                                    
                                

                            

                            

                                登录后才能评论！
                                
                            

                            

                        

                    

                

                
            

        

        

            
            





            
            


    

        

            分享档案

        

            更多>
        

    

    

        
                
                    2021年07月29日
                    (22)

            
                
                    2021年07月28日
                    (40)

            
                
                    2021年07月27日
                    (32)

            
                
                    2021年07月26日
                    (79)

            
                
                    2021年07月23日
                    (29)

            
                
                    2021年07月22日
                    (30)

            
                
                    2021年07月21日
                    (42)

            
                
                    2021年07月20日
                    (16)

            
                
                    2021年07月19日
                    (90)

            
                
                    2021年07月16日
                    (35)

            
    




            


    

        
周排行

        

            mamicode.com排行更多图片

        

            更多

    

    

        
    




            
        

        

        

    

    
    

    

        

            友情链接
        

        

            兰亭集智  
			国之画  
			百度统计   
			 站长统计  
			阿里云  
			chrome插件  
			新版天听网
        

    





    

        

            关于我们 - 联系我们 - 留言反馈
        

        

            © 2014 mamicode.com
            版权所有   联系我们:gaon5@hotmail.com
        

        

            迷上了代码！