Cocos2d-X 3.4版-自定义血量条《赵云要格斗》

在ProgressView中，主要有变化的地方就是Rect的构造方式改变了。从CCReckMake改为Rect::Rect(...);

血量条的基本思路就是以要显示在Scene上的血量条的长度作为基准，通过比较玩家当前的血量，和总血量

对学两条选择性的显示一部分，来表示玩家血量的变化。

ProgressView.h

//
//  ProgressView.h
//  Fight
//
//  Created by Cytzrs on 15/2/3.
//
//

#ifndef __Fight__ProgressView__
#define __Fight__ProgressView__

#include <iostream>
#include "cocos2d.h"
using namespace cocos2d;

class ProgressView : public Node
{
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 Rect &rect);
    
private:
    Sprite *m_progressBackground;//背景血条
    Sprite *m_progressForeground;//前景血条
    float m_totalProgress;//总血量
    float m_currentProgress;//当前血量
    float m_scale;//放大倍数
};
#endif /* defined(__Fight__ProgressView__) */

ProgressView.cpp

//
//  ProgressView.cpp
//  Fight
//
//  Created by Cytzrs on 15/2/3.
//
//

#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 = Sprite::create(pName);
    this->addChild(m_progressBackground);
}

void ProgressView::setForegroundTexture( const char *pName )
{
    m_progressForeground = Sprite::create(pName);
    m_progressForeground->setAnchorPoint(Vec2(0.0f, 0.5f));//设置锚点
    m_progressForeground->setPosition(Vec2(-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 Point from = m_progressForeground->getTextureRect().origin;
    const Rect rect = Rect::Rect(from.x, from.y, rectWidth, m_progressForeground->getContentSize().height);
    setForegroundTextureRect(rect);
}

void ProgressView::setForegroundTextureRect( const Rect &rect )
{
    m_progressForeground->setTextureRect(rect);
}



float ProgressView::getCurrentProgress() const
{
    return m_currentProgress;
}

float ProgressView::getTotalProgress() const
{
    return m_totalProgress;
}

最后将血量条加入Scene：

    //设置英雄的血条
	m_pProgressView = new ProgressView();
	m_pProgressView->setPosition(Vec2(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);
    
    //下面两个是为了让血条更好好看
	Sprite *xuekuang=Sprite::create("kuang.png");//添加血条的框架
	xuekuang->setPosition(Vec2(m_pProgressView->getPositionX(),m_pProgressView->getPositionY()));
	Sprite *touxiang=Sprite::create("touxiang.png");//添加英雄的左上角的小头像
	touxiang->setPosition(Vec2(m_pProgressView->getPositionX()-120,m_pProgressView->getPositionY()));
	this->addChild(touxiang,2);
	this->addChild(xuekuang,2);
	this->addChild(m_pProgressView, 2);

其中xuekuang，touxiang两个精灵与血量条的实现无关，只是起到装饰作用，所以要通过m_pProgressView的位置

来决定把自己放在那里来进行装饰。

然后再血量需要改变的地方调用

m_pProgressView->setCurrentProgress(m_pProgressView->getCurrentProgress()-1);

通过改变setCurrentProgress的参数来改变血量值，通常的做法是对当前的血量加减来实现。

关于学两条，在我自己的工作经历中，我选择了使用ControlSlider控件来实现，下边是我的方式：

首先在XXX.h中(我的是HellWorld.h)声明一个ControlSlider实例：

ControlSlider *slider;

然后再.cpp中这样使用:

    slider = ControlSlider::create(Sprite::create("xue_back1.png"),Sprite::create("xue_fore1.png") ,Sprite::create() );
    slider->setAnchorPoint(Vec2(0.0f, 0.5f));
    slider->setMinimumValue(0.0f); // Sets the min value of range
    slider->setMaximumValue(100.0f); // Sets the max value of range
    slider->setPosition(kuang->getPositionX()+1, kuang->getPositionY());
    slider->setEnabled(false);
    this->addChild(slider);
    
    slider->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), Control::EventType::VALUE_CHANGED);

同样的，我们还是采用类似的方法来改变血量条的现实:

slider->setValue(slider->getValue()+1);

最后，通过给ControllSlider设置回调，我们可以再slider发生变化时做一些特定的是，不过我现在还没想到要做什么

暂且打个log吧。

代码入下：

void valueChanged(Ref *sender, Control::EventType controlEvent);

void HelloWorld::valueChanged(Ref *sender, Control::EventType controlEvent)
{
    log("---df-ds-f-%f", slider->getValue());
    if(slider->getValue() > -0.0000001 && slider->getValue() < 0.0000001)
    {
        for(int i = 0; i < 100; i++)
        {
            log("U dE");
        }
    }
}

PS：多写博客，帮助自己，方便他人！