用一个空血槽图片的Sprite做背景,上面放一个ProgressTimer, 通过设置ProgressTimer的进度来控制血条的长短。建立一个Progress类来实现。
Progress.h:
#ifndef __Progress__ #define __Progress__ #include "cocos2d.h" USING_NS_CC; class Progress : public Sprite { public: bool init(const char* background, const char* fillname); /* the inputs are SpriteFrame Names. they should be loaded into SpriteFrameCache before calling this. */ static Progress* create(const char* background, const char* fill); void setFill(ProgressTimer* fill){_fill=fill;} void setProgress(float percentage){_fill->setPercentage(percentage);} private: ProgressTimer* _fill; }; #endif
Progress.cpp:
#include "Progress.h" bool Progress::init(const char* background, const char* fillname) { this->initWithSpriteFrameName(background); ProgressTimer* fill = ProgressTimer::create(Sprite::createWithSpriteFrameName(fillname)); this->setFill(fill); this->addChild(fill); fill->setType(ProgressTimer::Type::BAR); fill->setMidpoint(Point(0,0.5)); fill->setBarChangeRate(Point(1.0, 0)); fill->setPosition(this->getContentSize()/2); fill->setPercentage(100); return true; } Progress* Progress::create(const char* background, const char* fillname) { Progress* progress = new Progress(); if(progress && progress->init(background,fillname)) { progress->autorelease(); return progress; } else { delete progress; progress = NULL; return NULL; } }
init函数需要传入两个SpriteFrameName,所以UI资源需要在MainScene::init()函数中提前载入:
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("images/ui.plist","images/ui.pvr.ccz");
MainScene中需要添加一个Progress*类型的对象_progress:
Progress* _progress;
代码中设置了ProgressTimer的参数,值得注意的有:
setType:设置类型为ProgressTimer::Type::BAR,血条自然是条状类的。
setMidpoint:设置血条的起点为(0,0.5),即左侧的中间点。
setBarChangeRate:设置变化率为(1,0),即在x轴变化率为1,y轴不变化。
setPercentage:设置血条填充率为100,即满血状态。
然后在MainScene::init()函数中添加:
_progress = Progress::create("player-progress-bg.png","player-progress-fill.png"); _progress->setPosition(_progress->getContentSize().width/2, this->getContentSize().height - _progress->getContentSize().height/2); this->addChild(_progress);
然后就会在窗口的左下角出现英雄的血条。效果如下:
接下来要给敌人添加血条。可以在Player中添加,但是这么做的话默认也给玩家添加了血条(敌人的血条是随着敌人的运动而运动的)。一种解决办法是隐藏英雄的血条。
在Player中增加私有变量_progress,并在init中进行初始化,增加bool型变量_isShowBar 用来通过角色类型判断是否显示。
Player::init中添加:
auto size = this->getContentSize(); _progress = Progress::create("small-enemy-progress-bg.png","small-enemy-progress-fill.png"); _progress->setPosition( size.width*2/3, size.height + _progress->getContentSize().height/2); this->addChild(_progress); if(!_isShowBar) { _progress->setVisible(false); }
运行程序便可以看到玩家和敌人的血条都显示了。