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

水深无声 2021-09-10 11:06 331阅读 0赞

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

**转载请****注明出处[http://blog.csdn.net/evankaka/article/details/42468047][http_blog.csdn.net_evankaka_article_details_42468047]**

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

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

cocos2d-x版本：2.2.5

工程环境：windows7+VS2010

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

# （[源码免费下载][Link 1]） #

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

![20150106220045236][]

![20150106220020088][]

**目录：**

**一、自定义血条类**

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

**三、改变英雄血量**

# **一、自定义血条类** #

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

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

红血条(前景)：![20150106215015899][]

灰血条(背景)：![20150106215128174][]

血条框架：![20150106215143010][]

赵云左上角小头像：![20150106215125656][]

头文件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 style="font-family: Arial, Helvetica, sans-serif;">第一篇摇杆文章中定义的</span>
    	ControlButton* btn;//按钮控件变量，第二篇自定义按钮定义的
    	 Map*     mymap;//地图  ，第三篇定义的
    	 ProgressView *m_pProgressView;  //血条

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

效果：

![20150106214412013][]

半血

![20150106214523430][]

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

将上面改为：

//设置英雄的血条 
    	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);

下面再来看看效果：

![20150106214745609][]

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

# 三、改变英雄血量 #

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

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","run_animation.png","run_",8,rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分
    		hero->setPosition(ccp(hero->getPosition().x, hero->getPosition().y+1));   //向上走
    		break;
    	case 3:
    		hero->SetAnimation("run_animation.plist","run_animation.png","run_",8,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","run_animation.png","run_",8,rocker->rocketRun);//"run_"为run_animation.png集合图片中每张图片的公共名称部分
    		hero->setPosition(ccp(hero->getPosition().x,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：

![20150106220020088][]

每次减少10：

![20150106220045236][]

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

[Evankaka]: http://blog.csdn.net/evankaka
[http_blog.csdn.net_evankaka_article_details_42468047]: http://blog.csdn.net/evankaka/article/details/42468047
[Cocos2d-x_----_3]: http://blog.csdn.net/evankaka/article/details/42439707
[Link 1]: http://download.csdn.net/detail/evankaka/8431883
[20150106220045236]: /images/20210811/404f549058234a07814be503eb3d3b82.png
[20150106220020088]: /images/20210811/ce92c221c6724dbf9bb1d660d8296adc.png
[20150106215015899]: /images/20210811/633db588a7594e0883c8ff8e0b4bf300.png
[20150106215128174]: /images/20210811/d8db73b346e54fed90fc2ca1123a4bea.png
[20150106215143010]: /images/20210811/790d654ba7824eb5b8a59f6c90398242.png
[20150106215125656]: /images/20210811/167134b9b64341218175935959170002.png
[20150106214412013]: /images/20210811/769533ad637c450eaf4b69c2f6a81828.png
[20150106214523430]: /images/20210811/2ca374f295d34aed9d794e7d6c18ed60.png
[20150106214745609]: /images/20210811/934ba51b44c14e31a67eb2890c85ce26.png