游戏开发cocos2d-x实战(5) -- UI系统

Cocos2d-x提供了GUI元素，绘制丰富多彩的界面，其中包括：Label、Menu、MenuItems、Buttons和ScrollView、Slider、LoadBar、RadioButton、CheckBox、Layout、定时器等。

1、Label

Label支持四种方式的标签创建。并新增了阴影Shadow、轮廓Outline、发光Glow效果的支持。还支持文字内容的行间距、文字间距、自动换行的设置。

（1）createWithSystemFont
Label::createWithSystemFont(
const std::string& text,//字符串内容
const std::string& font, //字体（字体名称、或字体文件）
float fontSize,//字号
const Size& dimensions , //尺寸大小，默认不设置尺寸
TextHAlignment hAlignment, //水平对齐方式，默认左对齐:EFT
TextVAlignment vAlignment //垂直对齐方式，默认顶部 ::TOP
);
（2） createWithTTF
Label::createWithTTF(
const std::string& text,
const std::string& fontFile, //必须为字体文件（如”*.ttf”）
float fontSize,
const Size& dimensions,
TextHAlignment hAlignment,
TextVAlignment vAlignment
);
（3）createWithCharMap
Label::createWithCharMap(const std::string& charMapFile, int itemWidth,
int itemHeight, int startCharMap);

（4）createWithBMFont
Label::createWithBMFont(
const std::string& bmfontFilePath, //字体文件.font
const std::string& text, //内容
const TextHAlignment& alignment ,
int maxLineWidth = 0,
const Vec2& imageOffset //字符图片的起始左上角坐标。一般不要设置这个参数，因为坐标的配置均已在.font里完成
);

2、Menu和MenuItems

菜单Menu是专门用来承载菜单按钮的Layer图层，图层中的子节点只能够是菜单项MenuItem或其子类。通常先创建菜单项MenuItem，然后使用一个或多个菜单项生成菜单Menu，最后把Menu加入当前Layer图层。
由于CCMenu的父类为Layer，所以锚点为（0,0），且无法设置锚点。Menu的默认原点坐标为屏幕正中心
MenuItem是添加在Menu层中的，所以MenuItem的位置是相对于Menu层的偏移位置。MenuItem相对于Menu的偏移量默认为（0,0），且菜单项的锚点默认为（0.5,0.5）。

作为其它菜单项的父类，主要提供了一下三个功能：

（1）提供了基本按钮的状态：正常、选中、禁用。
（2）为按钮实现了基本的回调函数机制。当玩家点积按钮后，就会调用执行相应的回调函数。
（3）触碰菜单项，附有自动放大效果。

菜单项的子类可以分成三类，总共六个：

（1）文字菜单项：MenuItemLabel、MenuItemAtlasFont、MenuItemFont；
（2）图片菜单项：MenuItemSprite、MenuItemImage；
（3）切换菜单项：MenuItemToggle。

3、Button

(1) 创建Button
Button::create(
const std::string &normalImage,//正常状态的纹理贴图
const std::string& selectedImage , //选中状态的纹理贴图
const std::string& disableImage, // 禁用状态的纹理贴图
TextureResType texType
);

(2)监听事件
void addTouchEventListener(const ccWidgetTouchCallback& callback);

4、RadioButton

(1) 创建RadioButton
RadioButton* create(
const std::string& backGround,
const std::string& cross,
TextureResType texType );

(2)监听事件
void addEventListener (const ccRadioButtonCallback &callback)

	m_radioButtonGroup = RadioButtonGroup::create();
	this->addChild(m_radioButtonGroup);
	static const int NUMBER_OF_BUTTONS = 5;
	int startPosX = 40;
	for (int i = 0; i < NUMBER_OF_BUTTONS; ++i)
	{
		RadioButton* radioButton = RadioButton::create("radio_button_off.png", "radio_button_on.png");
		float posX = startPosX + 50 * i;
		radioButton->setPosition(Vec2(100, posX));
		radioButton->setScale(1.2f);
		m_radioButtonGroup->addRadioButton(radioButton);
		radioButton->addEventListener(CC_CALLBACK_2(xxxx::OnRadioButtonClicked, this));
		layerx->addChild(radioButton);
	}

void xxxx::OnRadioButtonClicked(RadioButton* radioButton, cocos2d::ui::RadioButton::EventType type)
{
	if (cocos2d::ui::RadioButton::EventType::SELECTED == type)
	{

		log("OnRadioButtonClicked SELECTED");
	}
	else
	{
		log("OnRadioButtonClicked UNSELECTED");
	}
}

5、CheckBox

CheckBox就是复选框，大家应该都见过复选框，它有两个状态，一个勾选态，一个非勾选态，通过CheckBox在这两个状态间的切换来实现一些特定的判断功能，比如是否关闭音效等。

(1)创建CheckBox
CheckBox* create(
const std::string& backGround,
const std::string& backGroundSelected,
const std::string& cross,
const std::string& backGroundDisabled,
const std::string& frontCrossDisabled,
TextureResType texType );

CheckBox* create(
const std::string& backGround,
const std::string& cross,
TextureResType texType)

(2)CheckBox监听事件

void addEventListenerCheckBox(Ref* target,SEL_SelectedStateEvent selector);

m_pCheckbox = CheckBox::create("check_box_normal.png",
									"check_box_normal_press.png",
									"check_box_active.png",
									"check_box_normal_disable.png",
									"check_box_active_disable.png");
	m_pCheckbox->setPosition(Vec2(sz.width/2, sz.height/2));

	m_pCheckbox->addEventListener(CC_CALLBACK_2(xxxxxx::OnCheckBoxSelectedEvent, this));

void xxxxxx::OnCheckBoxSelectedEvent(Ref* pSender, CheckBox::EventType type)
{
	switch (type)
	{
	case CheckBox::EventType::SELECTED:
		log("Selected");
		break;

	case CheckBox::EventType::UNSELECTED:
		log("Unselected");
		break;

	default:
		break;
	}

}

6、LoadingBar

一般作为进度条，可以用来表示血量等。

（1）创建LoadingBar
static LoadingBar * create ()
创建一个空的LoadingBar。

static LoadingBar * create (
const std::string &textureName, //背景纹理图片文件。
float percentage=0//显示的进度百分比。
)
使用一个纹理和一个进度百分比创建一个LoadingBar。

static LoadingBar * create (
const std::string &textureName, //LoadingBar背景纹理图片文件。
TextureResType texType, //LoadingBar背景纹理类型。
float percentage=0//显示的进度百分比。
)
使用一个纹理、纹理类型和一个进度百分比创建一个LoadingBar。

	m_loadingBar = LoadingBar::create("sliderProgress.png");
	m_loadingBar->setPosition(Vec2(10, 50));
	m_loadingBar->setDirection(LoadingBar::Direction::LEFT);
	m_loadingBar->setContentSize(Size(200, 30));
m_loadingBar->setPercent(100);

（2）事件监听
void addTouchEventListener(const ccWidgetTouchCallback& callback)；

loadingBar->addTouchEventListener([=](Ref* sender, Widget::TouchEventType type){
　　if (type == Widget::TouchEventType::ENDED) {
　　　　if (loadingBar->isScale9Enabled())
　　　　{
　　　　　　loadingBar->setScale9Enabled(false);
　　　　}
　　　　else
　　　　　　loadingBar->setScale9Enabled(true);
　　　　}
});

7、Slider

（1）创建Slider

Slider* create();

Slider* create(
const std::string& barTextureName,
const std::string& normalBallTextureName,
TextureResType resType = TextureResType::LOCAL);

（2）绑定事件
void addEventListener(const ccSliderCallback& callback);

	m_slider = Slider::create();
	m_slider->loadBarTexture("sliderTrack.png");
	m_slider->loadSlidBallTextures("sliderThumb.png", "sliderThumb.png", "");
	m_slider->loadProgressBarTexture("sliderProgress.png");
	m_slider->setMaxPercent(10000);
	m_slider->setPosition(Vec2(sz.width / 3, sz.height / 2));
	m_slider->addEventListener(CC_CALLBACK_2(xxxxx::OnSliderEvent, this));

void xxxxx::OnSliderEvent(Ref *pSender, Slider::EventType type)
{
	if (type == Slider::EventType::ON_PERCENTAGE_CHANGED)
	{
		Slider* slider = dynamic_cast<Slider*>(pSender);
		int percent = slider->getPercent();
		int maxPercent = slider->getMaxPercent();
		log("Percent %f", 10000.0 * percent / maxPercent);
	}
}

8、Text 和 RichText

(1) 创建

Text* Text::create(const std::string& textContent,
const std::string& fontName,
float fontSize);
RichText* RichText::create();
RichText* RichText::createWithXML(const std::string& xml, const ValueMap& defaults = ValueMap(), const OpenUrlHandler& handleOpenUrl = nullptr);

(2) 代码

Text

Text* alert = Text::create("RichText Demo", "Arial", 20);
	alert->setColor(Color3B(159, 168, 176));
	alert->setPosition(Vec2(sz.width / 2, sz.height - alert->getContentSize().height * 2));
	layerx->addChild(alert);

RichText

	m_richText = RichText::create();
	m_richText->ignoreContentAdaptWithSize(false);
	m_richText->setContentSize(Size(sz.width, 100));

	std::string str1 = "1";
	std::string str2 = "2";

	RichElementText* re1 = RichElementText::create(1, Color3B::WHITE, 255, "str1", "SimSun", 20);
	RichElementText* re2 = RichElementText::create(2, Color3B::YELLOW, 255, "And this is yellow. ", "Helvetica", 10);
	RichElementText* re3 = RichElementText::create(3, Color3B::RED, 255, "str2", "SimSun", 30);
	m_richText->pushBackElement(re1);
	m_richText->insertElement(re2, 1);
	m_richText->pushBackElement(re3);
	m_richText->setPosition(Vec2(sz.width / 3, sz.height / 2));
	layerx->addChild(m_richText);

9、定时器schedule

cocos2dx中有三种定时器：schedule，scheduleUpdate，scheduleOnce。
（1）scheduleUpdate
void scheduleUpdate(int handler, int priority);
加入当前节点后，程序会每帧都会自动执行一次默认的Update函数。（注：一定是Update函数哦，若想调用其他自己命名的函数则使用schedule）

（2）schedule
void schedule(SEL_SCHEDULE selector, float interval);
可以隔几秒执行某个自定义的函数，

（3）scheduleOnce
void scheduleOnce(SEL_SCHEDULE selector, float delay);
在几秒之后执行，并且只会执行一次。

（4）停止定时器
void unschedule(SEL_SCHEDULE selector);
void unscheduleUpdate(void);
void unscheduleAllCallbacks();

10、实战分享

下载实战结果