源码：git@github.com:baidang201/ARPG_Zhaoyun.git
/////////////////////////////////////////////////////////////////
转载请注明出处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对像，控制前景示的大小就可以改变血量了。
红血条(前景)：
灰血条(背景)：
血条框架：
赵云左上角小头像：
头文件ProgressView.h：
[cpp]
view plain
copy
@H_301_150@
@H_301_150@
@H_301_150@
- #ifndef__PROGRESSVIEW_H__
- #define__PROGRESSVIEW_H__
- #include"cocos2d.h"
- usingnamespacecocos2d;
- classProgressView:publicCCNode
- {
- public:
- ProgressView();
- public:
- //设置血条背景
- voidsetBackgroundTexture(constchar*pName);
- //设置血条前景
- voidsetForegroundTexture(//设置总血量
- voidsetTotalProgress(floattotal);
- //设置当前血量
- voidsetCurrentProgress(floatprogress);
- //得到当前血量
- floatgetCurrentProgress()const;
- //得到总血量
- floatgetTotalProgress()private:
- //设置前景血条显示的长度
- voidsetForegroundTextureRect(constCCRect&rect);
- CCSprite*m_progressBackground;//背景血条
- CCSprite*m_progressForeground;//前景血条
- floatm_totalProgress;//总血量
- floatm_currentProgress;//当前血量
- floatm_scale;//放大倍数
- };
- #endif @H_602_404@ @H_301_150@
- ProgressView::ProgressView()
- :m_progressBackground(NULL)
- ,m_progressForeground(NULL)
- ,m_totalProgress(0.0f)
- {
- }
- voidProgressView::setBackgroundTexture(char*pName)
- m_progressBackground=CCSprite::create(pName);
- this->addChild(m_progressBackground);
- }
- voidProgressView::setForegroundTexture( 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);
- voidProgressView::setTotalProgress(floattotal)
- if(m_progressForeground==NULL){return;}
- m_scale=m_progressForeground->getContentSize().width/total;
- m_totalProgress=total;
- voidProgressView::setCurrentProgress(floatprogress)
- return;}
- if(progress<0.0f){progress=0.0f;}
- if(progress>m_totalProgress){progress=m_totalProgress;}
- m_currentProgress=progress;
- floatrectWidth=progress*m_scale;
- constCCPointfrom=m_progressForeground->getTextureRect().origin;
- constCCRectrect=CCRectMake(from.x,from.y,rectWidth,m_progressForeground->getContentSize().height);
- setForegroundTextureRect(rect);
- voidProgressView::setForegroundTextureRect(constCCRect&rect)
- m_progressForeground->setTextureRect(rect);
- floatProgressView::getCurrentProgress()const
- returnm_currentProgress;
- floatProgressView::getTotalProgress()const
- returnm_totalProgress;
- } @H_602_404@ @H_301_150@
- HRocker*rocker;//摇杆，第一篇摇杆文章中定义的
- Hero*hero;///精灵，第一篇摇杆文章中定义的
- ControlButton*btn;//按钮控件变量，第二篇自定义按钮定义的
- Map*mymap;//地图，第三篇定义的
- ProgressView*m_pProgressView;//血条 @H_602_404@ @H_301_150@
- m_pProgressView=newProgressView();
- 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); @H_602_404@ @H_301_150@ 效果：
- //下面两个是为了让血条更好好看
- 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,153); font-weight:bold; background-color:inherit">this->addChild(touxiang,2);
- this->addChild(xuekuang,2);
- 404@
@H_301_150@
下面再来看看效果：事实再次证明，美工是多么重要啊！这样子明显好看多了，这时血条有了。
三、改变英雄血量
其实这里改变血量很简单了，
m_pProgressView->setCurrentProgress(改动); 这一句就可以了，那我们要怎么来验证了，我想到了一个方法，攻击一次，血条让它自己少1（初始是100）；
void HelloWorld::update(float delta)函数中改动：
@H_301_150@ @H_301_150@1 @H_301_150@2 @H_301_150@3 @H_301_150@4 @H_301_150@5 @H_301_150@6 @H_301_150@@H_301_150@void HelloWorld::update(float delta)
{//判断是否按下摇杆及其类型
switch(rocker->rocketDirection)
{case 1:
//CCLog("move %f %f", hero->getPosition().x, hero->getPosition().y);
hero->SetAnimationAdv("run_animation.plist","run_animation.png", "run_", 2, 8, rocker->rocketRun);
if(hero->getPosition().x+2 + hero->GetHeroSprite()->getContentSize().width/2 < visibleSize.width)
{if( mymap->JudgeMapNotEnd(visibleSize, true))
{if(
hero->JudgePositona(visibleSize) //hero in middle
){//下面是移动地图
mymap->MoveMap(hero,visibleSize, true);
break;
}}//精灵没到达窗口中间位置或者地图已经移动到边缘了，精灵才可以移动，否则只播放动画
hero->setPosition(ccp(hero->getPosition().x+2,hero->getPosition().y)); //向右走
CCLog("move right");
}
break;
case 2:
//CCLog("move %f %f", rocker->rocketRun);
if(hero->getPosition().y+2 + hero->GetHeroSprite()->getContentSize().height/2 > visibleSize.height)
{break;
}hero->setPosition(ccp(hero->getPosition().x, hero->getPosition().y+2)); //向上走
break;
case 3:
//CCLog("move %f %f", rocker->rocketRun);
if(hero->getPosition().x-2 - hero->GetHeroSprite()->getContentSize().width/2 > 0)
{if( mymap->JudgeMapNotEnd(visibleSize, false))
{if(
hero->JudgePositona(visibleSize) //hero in middle
){//下面是移动地图
mymap->MoveMap(hero, false);
break;
}}hero->setPosition(ccp(hero->getPosition().x-2,hero->getPosition().y)); //向左走
CCLog("move left");
}
break;
case 4:
//CCLog("move %f %f", rocker->rocketRun);
if(hero->getPosition().y-2 - hero->GetHeroSprite()->getContentSize().height/2 < 0)
{break;
}hero->setPosition(ccp(hero->getPosition().x,hero->getPosition().y-2)); //向下走
break;
default:
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()-10); //更改血量
}}
每次减少1：每次减少10：
实现文件 ProgressView.cpp:
@H_301_150@
@H_301_150@
@H_301_150@
- #include"ProgressView.h"
好了，这个血条类就定义好了，编译下没报错，可以移值了。
二、使用自定义血条类并进行美化
首先然要用到的地方，就是HelloWorldScene.h中添加头文件#include "ProgressView.h"
然后定义成员变量：
@H_301_150@
@H_301_150@
@H_301_150@
- private:
然后就在init()函数中初始化：
@H_301_150@
@H_301_150@
@H_301_150@
- //设置英雄的血条
半血
感觉好丑啊，想想再给血条加个框，再加个小头像
将上面改为：
@H_301_150@
@H_301_150@
@H_301_150@
- m_pProgressView->setCurrentProgress(50.0f);
