cocos2dx学习之路（四）

UI组件下
cocos2d-x常见的进度条
掌握进度条的使用方式
了解滑动条及其使用方式
cocos2d-x中的复选框与开关菜单的区别
掌握复选框的使用方式
了解游戏中的几种文本框
掌握文本框的使用方式
进度条–LoadingBar
设置进度条朝向：
bar -> setDirector(LoadingBar::Direction::LEFT);
加载进度条显示图片
bar ->loadTexture(“bar.png”);
设置百分比刻度
bar -> setPercent(25);

//#LoadingBarDemo.h
#pragma once
#include "cocos2d.h"
USING_NS_CC;//using namespace std;
#include"ui/CocosGUI.h"
using namespace ui;
#include "spine/spine.h"
#include "spine/spine-cocos2dx.h"
using namespace spine;
class LoadingBarDemo:public Scene
{
public:
	//创建进度条显示场景
	static Scene* createScene();
	//场景初始化
	virtual bool init();
	//封装了create以及构造析构函数
	CREATE_FUNC(LoadingBarDemo);
private:
	//骨骼动画节点
	SkeletonAnimation*_skeletonNode;
	//血条
	LoadingBar* _bar;
	//创建游戏角色的骨骼动画
	void createRoleAnimation();
};
//#LoadingBarDemo.cpp
#include"LoadingBarDemo.h"
Scene* LoadingBarDemo::createScene()
{
	return LoadingBarDemo::create();
}
bool LoadingBarDemo::init()
{
	if(!Scene::init())
		return false;
	//创建一个进度条
	_bar = LoadingBar::create();
	_bar->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
	//放屏幕正中心
	//bar->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));
	
	//设置骨骼动画屏幕位置
	//添加骨骼动画节点,骨骼动画的锚点在底部中心，因为骨骼动画高度随时在变化，因此锚点的方法被重写了，无论怎么设置都在底部中心，因此此处只给一个固定高度。
	_bar->setPosition(Vec2(0,430);
	
	//添加进度条节点
	//this->addChild(bar);
	
	_skeletonNode -> addChild(_bar);
	//加载进度条图片
	_bar-> loadTexture("loadingbar/blood.png");
	//设置初始百分比
	//bar->setPercent(50);
	//设置骨骼动画血条
	_bar->setPercent(100);
	//设置进度条朝向
	_bar->setDirection(ui::LoadingBar::Direction::LEFT);
	//添加一个减血的button
	auto button = Button::create("button/attack.png","button/attack2.png","button/attack3.png");
	//设置锚点
	button->setAnchorPoint(Vec2::ANCHOR_BOTTOM_RIGHT);
	button->setPosition(Vec2(Director::getInstance()->getVisibleSize().width - 20,0));
	//按钮显示设置字样
	button->setTitleText("Attack");
	button->setTitleFontSize(24);
	button->setTitleColor(Color3B::RED);

	//添加事件
	button->addTouchEventListener([&](Ref* ref,ui::Widget::TouchEventType type)
	{
		if(type== ui::Widget::TouchEventType::ENDED)
		{
			//控制进度条
			if(_bar->getPercent() <= 0)return;
			//血条显示减血
			_bar->getPercent(_bar->getPercent() - 10);
			//播放一次待机动作，0为轨道编号
			_skeletonNode->addAnimation(0,"idle",false);
			//禁用按钮，直到待机动作播放完成后启用按钮
			auto button = dynamic_cast<Button*>(ref);
			button->setEnabled(false);
			button->setTitleColor(Color3B::GRAY);

			if(_bar->getPercent() > 0)
			{
				_skeletonNode->addAnimation(0,"walk",true);//待机动作完成后血条大于0就进行恢复
				button->runAction(Sequence::create(DelayTime::create(1.f),CallFunc::create([button](){
				button->setEnabled(true);
				button->setTitleColor(Color3B::RED);
				}),NULL));
			}
		}
	});
	
	//添加到场景中
	this -> addChild(button);
	return true;
}
void LoadingBarDemo::createRoleAnimation()
{
	//加载骨骼资源
	auto atlas = spAtlas_createFromFile("spine/spineboy.atlas",0);
	auto attachmentLoader = (spAttachmentLoader*)Cocos2dAttachmentLoader_create(_atlas);
	//加载骨骼动画数据
	spSkeletonJson* json = spSkeletonJson_createWithLoader(attachementLoader);
	//重置显示大小为实际大小的0.6倍(文件加载的时候加载指定大小空间)
	json -> scale = 0.6;
	auto skeletonData = spSkeletonJson_readSkeletonDataFile(json,"spine/spineboy.json");
	spSkeletonJson_dispose(json);
	auto stateData = spAnimationStateData_create(skeletonData);
	//创建骨骼动画节点
	_skeletonNode = SkeletonAnimation::createWithData(skeletonData,false);
	_skeletonNode-> setAnimationStateData(stateData);
	_skeletonNode->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));
	//既有文件加载出来后**进行显示的时候**进行缩放
	_skeletonNode->setScale(0.5f);
	this->addChild(_skeletonNode);
	//播放行走动画
	_skeletonNode->setAnimation(0,"walk",true);//true表示重复播放，false表示只播放一次，就卡着不动。walk是骨骼动画的制作过程有一个叫walk的行为，名字叫walk
}

AppDelegate.cpp中
// create a scene. it’s an autorelease object
auto scene = LoadingBarDemo::createScene();
实战：给游戏怪物添加一个血条，玩家点击按钮造成伤害。
要求：
1、使用LoadingBar创建血条
2、血条初始满血
3、每次点击按钮减少10%血
在上边类中添加private:
SkeletonAnimation*_skeletonNode;
完成上边步骤后，如果想实现持续掉血，需要用到调度器Scheduler。