索引篇:
http://www.cocoachina.com/bbs/read.php?tid=227226
http://www.cocoachina.com/bbs/read.php?tid=227229
http://www.cocoachina.com/bbs/read.php?tid=227305
http://www.cocoachina.com/bbs/read.php?tid=227328
这次我们要为游戏增加一些UI元素。
添加血条
原版教程中用了ProgressTimer来实现血条,这个基本可以照搬过来。
ProgressTimer是什么呢?cpp-tests里面的 ActionsProgressTest 里面有若干示例,例如:
以及
我们所需要的比较接近第二种情况,即一个横向的血条,从左到右血量从0%变化到100%。
用一个空血槽图片的Sprite做背景,上面放一个ProgressTimer, 通过设置ProgressTimer的进度来控制血条的长短。
建立一个Progress类来实现:
头文件:
#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 ``` 其实现为:#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资源需要提前载入:SpriteFrameCache::getInstance()->addSpriteFramesWithFile("image/ui.plist","image/ui.pvr.ccz"); ``` 代码中设置了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(VisibleRect::left().x + _progress->getContentSize().width/2, VisibleRect::top().y - _progress->getContentSize().height/2); this->addChild(_progress); ``` 每次需要设置坐标的时候,要通过Director获取窗口尺寸以及原点坐标,有些繁琐,可以利用cpp-tests中的VisibleRect类来简化输入,将源文件和头文件拷贝至Classes下,加入工程,包含头文件即可使用。 运行程序可以看到玩家的血条了。 然后我们还要给敌人增加血条。可以在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); } ``` 运行程序便可以看到玩家和敌人的血条都显示了。 增加暂停界面 在右上角增加一个暂停按钮,触摸按钮会暂停游戏,并弹出暂停菜单。从暂停菜单,可以返回开始界面(目前还没有),以及继续游戏。 先从简单的做起,先给界面增加一个暂停的按钮好了。 因为UI资源已经载入SpriteFrameCache,所以我们可以从这里面直接提取SpriteFrame来建立MenuItemImage 对象。但是MenuItemImage好像没有直接用spriteFrame的创建函数,不妨自己写个函数,简化操作。具体实现请下载代码参考。在MainScene::init中加入:auto pauseItem = CustomTool::createMenuItemImage("pause1.png", "pause2.png", CC_CALLBACK_1(MainScene::onTouchPause,this)); pauseItem->setPosition(VisibleRect::right().x - pauseItem->getContentSize().width/2, VisibleRect::top().y - pauseItem->getContentSize().height/2); ``` 下面定义并实现一下函数MainScene::onTouchPause:void MainScene::onTouchPause(Ref* sender) { _player->pause(); _enemy1->pause(); _enemy2->pause(); auto layer = PauseLayer::create(); this->addChild(layer,100); } ``` 原版教程里一个display.pause()就实现了暂停。 我现在暂时用手动暂停所有角色的方法来模拟。 有暂停就有恢复:void MainScene::onTouchResume() { _player->resume(); _enemy1->resume(); _enemy2->resume(); } ``` 注意:当时第一次写,用的这个暂停方法不合适,尤其是当角色死亡之后对象被回收,这时再这样暂停会引发错误。更好的方法是用Director自带的pause和resume方法。 以后的版本里改正了这个问题。 上面的onTouchPause中创建了一个新的PauseLayer,并通过设置zOrder保证其覆盖在前面。 其实头文件如下:#ifndef __PauseLayer__ #define __PauseLayer__ #include "cocos2d.h" USING_NS_CC; class PauseLayer : public LayerColor { public: bool init(); CREATE_FUNC(PauseLayer); void addUI(); void addTouch(); void home(Ref* obj); void back(Ref* obj); private: EventListenerTouchOneByOne* _listener; }; #endif ``` 实现为:#include "PauseLayer.h" #include "VisibleRect.h" #include "CustomTool.h" //#include "StartScene.h" #include "MainScene.h" bool PauseLayer::init() { if(!LayerColor::init()) return false; this->initWithColor(Color4B(162, 162, 162, 128)); addUI(); addTouch(); return true; } void PauseLayer::addUI() { auto background = Sprite::createWithSpriteFrameName("pause-bg.png"); background->setPosition(VisibleRect::center()); this->addChild(background); auto homeItem = CustomTool::createMenuItemImage("home-1.png","home-2.png", CC_CALLBACK_1(PauseLayer::home,this)); auto resumItem = CustomTool::createMenuItemImage("continue-1.png","continue-2.png", CC_CALLBACK_1(PauseLayer::back,this)); auto bgSize = background->getContentSize(); homeItem->setPosition(bgSize.width/3, bgSize.height/2); resumItem->setPosition(bgSize.width*2/3,bgSize.height/2); auto menu = Menu::create(homeItem, resumItem, NULL); menu->setPosition(VisibleRect::leftBottom()); background->addChild(menu); } void PauseLayer::addTouch() { _listener = EventListenerTouchOneByOne::create(); _listener->onTouchBegan =&](Touch* touch, Event* event) { log("PauseLayer::addTouch"); return true; }; _listener->setSwallowTouches(true); _eventDispatcher->addEventListenerWithSceneGraphPriority(_listener, this); } void PauseLayer::home(Ref* obj) { _eventDispatcher->removeEventListener(_listener); this->removeFromParentAndCleanup(true); //auto start = StartLayer::createScene(); //Director::getInstance()->replaceScene(start); } void PauseLayer::back(Ref* obj) { _eventDispatcher->removeEventListener(_listener); auto main = (MainScene*)this->getParent(); this->removeFromParentAndCleanup(true); main->onTouchResume(); } ``` PauseLayer继承了LayerColor类,通过initWithColor(Color4B(162, 162, 162, 128))实现了一种透明的灰色背景,并在此之上添加了一个精灵模拟弹出窗口,并在窗口上添加了两个按钮,分别是Home按钮,目前功能还没实现,还有一个Resume按钮,按了之后会继续游戏。 另外PauseLayer还将触屏事件进行了拦截,使其不被下层的对象接收到。 运行一下,效果为: 提交一下代码,名为"Note 5 add UI" 下一篇: http://www.cocoachina.com/bbs/read.php?tid=227643