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

前端之家收集整理的这篇文章主要介绍了Cocos2d-x 自定义血条及其美化----之游戏开发《赵云要格斗》(4)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这里是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:

  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:

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

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


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

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

然后定义成员变量:

  1. private:
  2. HRocker* rocker;//摇杆,第一篇摇杆文章中定义的
  3. Hero* hero;///精灵,<span style="font-family: Arial,sans-serif;">第一篇摇杆文章中定义的</span>
  4. ControlButton* btn;//按钮控件变量,第二篇自定义按钮定义的
  5. Map* mymap;//地图 ,第三篇定义的
  6. ProgressView *m_pProgressView; //血条

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

  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);
效果


半血


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

将上面改为:

  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. void HelloWorld::update(float delta)
  2. {
  3. //判断是否按下摇杆及其类型
  4. CCSize visibleSize1 = CCDirector::sharedDirector()->getVisibleSize();//得到窗口大小
  5. switch(rocker->rocketDirection)
  6. {
  7. case 1:
  8. hero->SetAnimation("run_animation.plist","run_animation.png","run_",8,rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分
  9. if(hero->getPositionX()<=visibleSize1.width-8)//不让精灵超出右边,8可以改成你喜欢的
  10. {
  11. if(!hero->JudgePositona(visibleSize1)||mymap->JudgeMap(hero,visibleSize1))//精灵没到达窗口中间位置或者地图已经移动到边缘了,精灵才可以移动,否则只播放动画
  12. hero->setPosition(ccp(hero->getPosition().x+1,hero->getPosition().y)); //向右走
  13. //下面是移动地图
  14. mymap->MoveMap(hero,visibleSize1);
  15. }
  16. break;
  17. case 2:
  18. hero->SetAnimation("run_animation.plist",rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分
  19. hero->setPosition(ccp(hero->getPosition().x,hero->getPosition().y+1)); //向上走
  20. break;
  21. case 3:
  22. hero->SetAnimation("run_animation.plist",rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分
  23. if(hero->getPositionX()>=8)//不让精灵超出左边,8可以改成你喜欢的
  24. hero->setPosition(ccp(hero->getPosition().x-1,hero->getPosition().y)); //向左走
  25. break;
  26. case 4:
  27. hero->SetAnimation("run_animation.plist",hero->getPosition().y-1)); //向下走
  28. break;
  29. case 0:
  30. hero->StopAnimation();//停止所有动画和运动
  31. break;
  32. }
  33.  
  34. //判断是否出动攻击
  35. if(btn->isTouch)
  36. {
  37. if(hero->IsAttack)//英雄没在攻击
  38. return;
  39. hero->AttackAnimation("attack1_animation.plist","attack1_animation.png","attack_",6,rocker->rocketRun);
  40. m_pProgressView->setCurrentProgress(m_pProgressView->getCurrentProgress()-1); //更改血量
  41. }
  42. }

每次减少1:


每次减少10:



  1. <span style="font-size:24px;">最后,有需要的把邮箱留下,不管是工程还是资源都可以~</span>

猜你在找的Cocos2d-x相关文章