血槽血量的變化是有兩個元素構成的：

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;
	}
}