血槽血量的变化是有两个元素构成的：

1.血槽图

2.红色的进度条

当进度条的进度值不断减少的时候，就产生血量减少的效果。

UI的布局我采用了CocoStudio的UI编辑器，感觉不错，挺容易上手的,如果需要相关资料的给我留言。继续上图~

二、再说实现

bool HelloWorld::init()
{
    if (!Layer::init())
    {
        return false;
    }

	auto bk = CCSprite::create("q2.jpg");
	bk->setAnchorPoint(Point::ZERO);
	bk->setPosition(Point::ZERO);
	this->addChild(bk);

    /* 加载UI */
    auto UI = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("ph2Ui_1.ExportJson");
    UI->setPosition(Point(50,50));
    this->addChild(UI);
    
    /* 获取控件对象 */
    m_hpBar = (LoadingBar*)Helper::seekWidgetByName(UI,"hpBar");
	Button* addBtn = (Button*)Helper::seekWidgetByName(UI,"addBtn");
	Button* delBtn = (Button*)Helper::seekWidgetByName(UI,"delBtn");

    /* 添加点击监听 */
	addBtn->addTouchEventListener(this,toucheventselector(HelloWorld::onClickAdd));
	delBtn->addTouchEventListener(this,toucheventselector(HelloWorld::onClickDel));

    return true;
}
/* 补血 */
void HelloWorld::onClickAdd(Ref*,TouchEventType type)
{
    switch (type)
    {
case TouchEventType::TOUCH_EVENT_ENDED:
/* 设置进度条的进度值 */
        m_hpBar->setPercent(m_hpBar->getPercent() + 5);
        break;
    }  
}
/* 伤害 */
void HelloWorld::onClickDel(Ref*,TouchEventType type)
{
	switch (type)
	{
	case TouchEventType::TOUCH_EVENT_ENDED:
		m_hpBar->setPercent(m_hpBar->getPercent() - 5);
		break;
	}
}

源代码免积分下载：http://download.csdn.net/detail/qiulanzhu/8954033