Cocos2d-x 自定义血条及其美化----之游戏开发《赵云要格斗》（4）

概述      这里是Evankaka的博客，欢迎大家前来讨论与交流～～～～～～       转载请注明出处http://blog.csdn.net/evankaka/article/details/42468047         本章要讲解给怎么在界面上加一个血条，老规矩，还是在Cocos2d-x地图随精灵无限滚动与边缘检测----之游戏开发《赵云要格斗》（3）的基础上进行增加功能的。      

这里是Evankaka的博客，欢迎大家前来讨论与交流～～～～～～

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

本章要讲解给怎么在界面上加一个血条，老规矩，还是在Cocos2d-x地图随精灵无限滚动与边缘检测----之游戏开发《赵云要格斗》（3）的基础上进行增加功能的。

在游戏开发中，血条是一个很重要的东西，这里的血条是通过两个图片来完成，一个是前景图（红色），一个是背景图（灰色），通过改变红色图在长度显示，灰色图不变就可实现血量的变化了。当然，这里为了让界面更加好看些，又为血条加了个血框和人物的小头像。

cocos2d-x版本：2.2.5

工程环境：windows7+VS2010

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

（源码免费下载）

先来看看效果吧：由于还没有引入怪物，所以我弄成攻击一次，血条少1或10两种来看看效果

目录：

一、自定义血条类

二、使用自定义血条类并进行美化

三、改变英雄血量

一、自定义血条类

本着后头血条要给怪物来用，所以设计了一个血条类。原理其实就是两个ccsprite对像，控制前景示的大小就可以改变血量了。

首先是资源，在Resources添加以下图片

红血条(前景)：

灰血条(背景)：

血条框架：

赵云左上角小头像：

头文件ProgressVIEw.h：

#ifndef __PROGRESSVIEW_H__#define __PROGRESSVIEW_H__#include "cocos2d.h"using namespace cocos2d;class ProgressVIEw : public CCNode{public:    ProgressVIEw();public:	//设置血条背景    voID setBackgroundTexture(const char *pname);	//设置血条前景    voID setForegroundTexture(const char *pname);	//设置总血量    voID setTotalProgress(float total);	//设置当前血量    voID setCurrentProgress(float progress);	//得到当前血量    float getCurrentProgress() const;	//得到总血量    float getTotalProgress() const;private:	//设置前景血条显示的长度    voID setForegroundTextureRect(const CCRect &rect);private:    CCSprite *m_progressBackground;//背景血条    CCSprite *m_progressForeground;//前景血条    float m_totalProgress;//总血量    float m_currentProgress;//当前血量    float m_scale;//放大倍数};#endif

实现文件 ProgressVIEw.cpp:

#include "ProgressVIEw.h"ProgressVIEw::ProgressVIEw()	: m_progressBackground(NulL),m_progressForeground(NulL),m_totalProgress(0.0f),m_currentProgress(0.0f),m_scale(1.0f){}voID ProgressVIEw::setBackgroundTexture( const char *pname ){    m_progressBackground = CCSprite::create(pname);    this->addChild(m_progressBackground);}voID ProgressVIEw::setForegroundTexture( const char *pname ){    m_progressForeground = CCSprite::create(pname);    m_progressForeground->setAnchorPoint(ccp(0.0f,0.5f));//设置锚点    m_progressForeground->setposition(ccp(-m_progressForeground->getContentSize().wIDth * 0.5f,0));    this->addChild(m_progressForeground);}voID ProgressVIEw::setTotalProgress( float total ){    if (m_progressForeground == NulL) {return;}    m_scale = m_progressForeground->getContentSize().wIDth / total;    m_totalProgress = total;}voID ProgressVIEw::setCurrentProgress( float progress ){    if (m_progressForeground == NulL) {return;}    if (progress < 0.0f) {progress = 0.0f;}    if (progress > m_totalProgress) {progress = m_totalProgress;}    m_currentProgress = progress;    float rectWIDth = progress * m_scale;    const CCPoint from = m_progressForeground->getTextureRect().origin;    const CCRect rect = CCRectMake(from.x,from.y,rectWIDth,m_progressForeground->getContentSize().height);    setForegroundTextureRect(rect);}voID ProgressVIEw::setForegroundTextureRect( const CCRect &rect ){    m_progressForeground->setTextureRect(rect);}float ProgressVIEw::getCurrentProgress() const{    return m_currentProgress;}float ProgressVIEw::getTotalProgress() const{    return m_totalProgress;}

好了，这个血条类就定义好了，编译下没报错，可以移值了。

二、使用自定义血条类并进行美化

首先然要用到的地方，就是HelloWorldScene.h中添加头文件#include "ProgressVIEw.h"

然后定义成员变量：

private:	HRocker* rocker;//摇杆，第一篇摇杆文章中定义的	Hero*    hero;///精灵，<span >第一篇摇杆文章中定义的</span>	Controlbutton* btn;//按钮控件变量，第二篇自定义按钮定义的	 MaP*     mymap;//地图  ，第三篇定义的	 ProgressVIEw *m_pProgressVIEw;  //血条

然后就在init()函数中初始化：

//设置英雄的血条 	m_pProgressVIEw = new ProgressVIEw();  	m_pProgressVIEw->setposition(ccp(150,450));  	m_pProgressVIEw->setScale(2.2f);  	m_pProgressVIEw->setBackgroundTexture("xue_back.png");  	m_pProgressVIEw->setForegroundTexture("xue_fore.png");  	m_pProgressVIEw->setTotalProgress(100.0f);  	m_pProgressVIEw->setCurrentProgress(100.0f); 	this->addChild(m_pProgressVIEw,2);  

效果：

半血

感觉好丑啊，想想再给血条加个框，再加个小头像

将上面改为：

	//设置英雄的血条 	m_pProgressVIEw = new ProgressVIEw();  	m_pProgressVIEw->setposition(ccp(150,450));  	m_pProgressVIEw->setScale(2.2f);  	m_pProgressVIEw->setBackgroundTexture("xue_back.png");  	m_pProgressVIEw->setForegroundTexture("xue_fore.png");  	m_pProgressVIEw->setTotalProgress(100.0f);  	m_pProgressVIEw->setCurrentProgress(50.0f); 	//下面两个是为了让血条更好好看	CCSprite *xuekuang=CCSprite::create("kuang.png");//添加血条的框架	xuekuang->setposition(ccp(m_pProgressVIEw->getpositionX(),m_pProgressVIEw->getpositionY()));	CCSprite *touxiang=CCSprite::create("touxiang.png");//添加英雄的左上角的小头像	touxiang->setposition(ccp(m_pProgressVIEw->getpositionX()-120,m_pProgressVIEw->getpositionY()));	this->addChild(touxiang,2);	this->addChild(xuekuang,2);	this->addChild(m_pProgressVIEw,2);  

下面再来看看效果：

事实再次证明，美工是多么重要啊！这样子明显好看多了，这时血条有了。

三、改变英雄血量

其实这里改变血量很简单了，

m_pProgressVIEw->setCurrentProgress(改动); 这一句就可以了，那我们要怎么来验证了，我想到了一个方法，攻击一次，血条让它自己少1（初始是100）；

voID HelloWorld::update(float delta)函数中改动：

voID HelloWorld::update(float delta){		//判断是否按下摇杆及其类型	CCSize visibleSize1 = CCDirector::sharedDirector()->getVisibleSize();//得到窗口大小	switch(rocker->rocketDirection)	{	case  1:		hero->SetAnimation("run_animation.pList","run_animation.png","run_",8,rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分		if(hero->getpositionX()<=visibleSize1.wIDth-8)//不让精灵超出右边,8可以改成你喜欢的		{			if(!hero->JudgePositona(visibleSize1)||mymap->JudgeMap(hero,visibleSize1))//精灵没到达窗口中间位置或者地图已经移动到边缘了，精灵才可以移动，否则只播放动画				hero->setposition(ccp(hero->getposition().x+1,hero->getposition().y)); //向右走			//下面是移动地图			mymap->MoveMap(hero,visibleSize1);		}		break;	case  2:		hero->SetAnimation("run_animation.pList",rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分		hero->setposition(ccp(hero->getposition().x,hero->getposition().y+1));   //向上走		break;	case 3:		hero->SetAnimation("run_animation.pList",rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分		if(hero->getpositionX()>=8)//不让精灵超出左边,8可以改成你喜欢的			hero->setposition(ccp(hero->getposition().x-1,hero->getposition().y));   //向左走		break;	case 4:		hero->SetAnimation("run_animation.pList",hero->getposition().y-1));   //向下走		break;	case 0:		hero->StopAnimation();//停止所有动画和运动		break;	}	//判断是否出动攻击	if(btn->istouch)	{		if(hero->IsAttack)//英雄没在攻击			return;		hero->AttackAnimation("attack1_animation.pList","attack1_animation.png","attack_",6,rocker->rocketRun);		m_pProgressVIEw->setCurrentProgress(m_pProgressVIEw->getCurrentProgress()-1); //更改血量	}}

每次减少1：

每次减少10：

<span >最后，有需要的把邮箱留下，不管是工程还是资源都可以～</span>

总结

以上是内存溢出为你收集整理的Cocos2d-x 自定义血条及其美化----之游戏开发《赵云要格斗》（4）全部内容，希望文章能够帮你解决Cocos2d-x 自定义血条及其美化----之游戏开发《赵云要格斗》（4）所遇到的程序开发问题。

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