晓石头的博客
邮箱:178673693@qq.com
转载请注明出处,原文连接:http://blog.csdn.net/qiulanzhu/article/details/47209823
效果演示图
血槽血量的变化是有两个元素构成的:
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