这里是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对像,控制前景示的大小就可以改变血量了。
红血条(前景):
灰血条(背景):
血条框架:
赵云左上角小头像:
头文件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"
然后定义成员变量:
然后就在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 style="font-size:24px;">最后,有需要的把邮箱留下,不管是工程还是资源都可以~</span>