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

源码：git@github.com:baidang201/ARPG_Zhaoyun.git 

/

转载请注明出处http://blog.csdn.net/evankaka/article/details/42468047

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

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

cocos2d-x版本：2.2.5

工程环境：windows7+VS2010

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

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

目录：

一、自定义血条类

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

三、改变英雄血量

一、自定义血条类

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

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

红血条(前景)：

灰血条(背景)：

血条框架：

赵云左上角小头像：

头文件ProgressView.h：

[cpp]  view plain copy

1. #ifndef __PROGRESSVIEW_H__  
2. #define __PROGRESSVIEW_H__  
3.   
4. #include "cocos2d.h"  
5. using namespace cocos2d;  
6.   
7. class ProgressView : public CCNode  
8. {  
9. public:  
10.     ProgressView();  
11.   
12. public:  
13.     //设置血条背景  
14.     void setBackgroundTexture(const char *pName);  
15.     //设置血条前景  
16.     void setForegroundTexture(const char *pName);  
17.     //设置总血量  
18.     void setTotalProgress(float total);  
19.     //设置当前血量  
20.     void setCurrentProgress(float progress);  
21.     //得到当前血量  
22.     float getCurrentProgress() const;  
23.     //得到总血量  
24.     float getTotalProgress() const;  
25.   
26. private:  
27.     //设置前景血条显示的长度  
28.     void setForegroundTextureRect(const CCRect &rect);  
29.   
30. private:  
31.     CCSprite *m_progressBackground;//背景血条  
32.     CCSprite *m_progressForeground;//前景血条  
33.     float m_totalProgress;//总血量  
34.     float m_currentProgress;//当前血量  
35.     float m_scale;//放大倍数  
36. };  
37.   
38. #endif  

实现文件 ProgressView.cpp:

[cpp]  view plain copy

1. #include "ProgressView.h"  
2.   
3. ProgressView::ProgressView()  
4.     : m_progressBackground(NULL)  
5.     , m_progressForeground(NULL)  
6.     , m_totalProgress(0.0f)  
7.     , m_currentProgress(0.0f)  
8.     , m_scale(1.0f)  
9. {  
10.   
11. }  
12. void ProgressView::setBackgroundTexture( const char *pName )  
13. {  
14.     m_progressBackground = CCSprite::create(pName);  
15.     this->addChild(m_progressBackground);  
16. }  
17.   
18. void ProgressView::setForegroundTexture( const char *pName )  
19. {  
20.     m_progressForeground = CCSprite::create(pName);  
21.     m_progressForeground->setAnchorPoint(ccp(0.0f, 0.5f));//设置锚点  
22.     m_progressForeground->setPosition(ccp(-m_progressForeground->getContentSize().width * 0.5f, 0));  
23.     this->addChild(m_progressForeground);  
24. }  
25.   
26. void ProgressView::setTotalProgress( float total )  
27. {  
28.     if (m_progressForeground == NULL) {return;}  
29.     m_scale = m_progressForeground->getContentSize().width / total;  
30.     m_totalProgress = total;  
31. }  
32.   
33. void ProgressView::setCurrentProgress( float progress )  
34. {  
35.     if (m_progressForeground == NULL) {return;}  
36.     if (progress < 0.0f) {progress = 0.0f;}  
37.     if (progress > m_totalProgress) {progress = m_totalProgress;}  
38.     m_currentProgress = progress;  
39.     float rectWidth = progress * m_scale;  
40.     const CCPoint from = m_progressForeground->getTextureRect().origin;  
41.     const CCRect rect = CCRectMake(from.x, from.y, rectWidth, m_progressForeground->getContentSize().height);  
42.     setForegroundTextureRect(rect);  
43. }  
44.   
45. void ProgressView::setForegroundTextureRect( const CCRect &rect )  
46. {  
47.     m_progressForeground->setTextureRect(rect);  
48. }  
49.   
50.   
51.   
52. float ProgressView::getCurrentProgress() const  
53. {  
54.     return m_currentProgress;  
55. }  
56.   
57. float ProgressView::getTotalProgress() const  
58. {  
59.     return m_totalProgress;  
60. }  

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

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

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

然后定义成员变量：

[cpp]  view plain copy

1. private:  
2.     HRocker* rocker;//摇杆，第一篇摇杆文章中定义的  
3.     Hero*    hero;///精灵，第一篇摇杆文章中定义的 
4.     ControlButton* btn;//按钮控件变量，第二篇自定义按钮定义的  
5.      Map*     mymap;//地图  ，第三篇定义的  
6.      ProgressView *m_pProgressView;  //血条  

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

[cpp]  view plain copy

1. //设置英雄的血条   
2.     m_pProgressView = new ProgressView();    
3.     m_pProgressView->setPosition(ccp(150, 450));    
4.     m_pProgressView->setScale(2.2f);    
5.     m_pProgressView->setBackgroundTexture("xue_back.png");    
6.     m_pProgressView->setForegroundTexture("xue_fore.png");    
7.     m_pProgressView->setTotalProgress(100.0f);    
8.     m_pProgressView->setCurrentProgress(100.0f);   
9.     this->addChild(m_pProgressView, 2);    

效果：

半血

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

将上面改为：

[cpp]  view plain copy

1. //设置英雄的血条   
2. m_pProgressView = new ProgressView();    
3. m_pProgressView->setPosition(ccp(150, 450));    
4. m_pProgressView->setScale(2.2f);    
5. m_pProgressView->setBackgroundTexture("xue_back.png");    
6. m_pProgressView->setForegroundTexture("xue_fore.png");    
7. m_pProgressView->setTotalProgress(100.0f);    
8. m_pProgressView->setCurrentProgress(50.0f);   
9. //下面两个是为了让血条更好好看  
10. CCSprite *xuekuang=CCSprite::create("kuang.png");//添加血条的框架  
11. xuekuang->setPosition(ccp(m_pProgressView->getPositionX(),m_pProgressView->getPositionY()));  
12. CCSprite *touxiang=CCSprite::create("touxiang.png");//添加英雄的左上角的小头像  
13. touxiang->setPosition(ccp(m_pProgressView->getPositionX()-120,m_pProgressView->getPositionY()));  
14. this->addChild(touxiang,2);  
15. this->addChild(xuekuang,2);  
16. this->addChild(m_pProgressView, 2);    

下面再来看看效果：

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

三、改变英雄血量

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

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", hero->getPosition().x, hero->getPosition().y); hero->SetAnimationAdv("run_animation.plist","run_animation.png", "run_", 2, 8, 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", 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 > 0) { if( mymap->JudgeMapNotEnd(visibleSize, false)) { if( hero->JudgePositona(visibleSize) //hero in middle ) { //下面是移动地图 mymap->MoveMap(hero,visibleSize, false); break; } } hero->setPosition(ccp(hero->getPosition().x-2,hero->getPosition().y)); //向左走 CCLog("move left"); } break; case 4: //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().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：