Cocos2dx 3.2 横版过关游戏Brave学习笔记（五）

每次需要设置坐标的时候，要通过Director获取窗口尺寸以及原点坐标，有些繁琐，可以利用cpp-tests中的VisibleRect类来简化输入，将源文件和头文件拷贝至Classes下，包含头文件即可使用。


添加血条


和原版教程一样，现在为角色添加血条。
可以用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;
	}
}

另外还需要提前载入缓存资源，在使用Progress之前。

	SpriteFrameCache::getInstance()->addSpriteFramesWithFile("image/ui.plist","image/ui.pvr.ccz");

然后在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);

运行程序可以看到玩家的血条了。

然后我们还要给敌人增加血条。可以在Player类中添加，但是这样岂不是把玩家头上也加上血条了？
没关系，可以让玩家头上的血条默认隐藏。

在Player中增加私有变量_progress，并在init中进行初始化，增加bool型变量_isShowBar 用来通过角色类型判断是否显示。

	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的创建函数，不妨自己写个函数，简化操作：

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

上面新建了一个PauseLayer层，需要将原来的界面盖住，并显示相应的按钮，实现如下：

#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主要做了两件事，显示界面以及按钮，分别为Home按钮以及Resume按钮，以及拦截触摸事件。


这次和上次的状态机不同，基本上与原来的lua代码是一一对应的。

代码提交了一下，理由为："Note 5 add UI"

https://github.com/douxt/Brave_cpp