cocos2d-x初学笔记09：进度条Progress

原文：http://blog.csdn.net/jukaiblog/article/details/8564579

在游戏中，进度条有很多需要用到的地方，比如说加载游戏界面时显示加载进度，显示角色生命值的多少等。接下来我们就来学一下进度条的用法。

首先我们新建一个项目，命名为“ProgressTest”，然后导入我们需要的图片资源。由于没有准备类似进度条的图片，那我们就和TestCpp示例演示的一样，用两个人物图片来演示进度条的效果。从D:\cocos2d-2.0-x-2.0.4\samples\TestCpp\Resources\Images（你的目录有可能不一样）找到grossini.png，grossinis_sister_01.png，grossinis_sister_02.png复制到我们自己的项目中的Resources文件夹，然后在VS中右击项目选择添加->现有项，添加刚刚复制的图片到我们的项目AnimationTest即可。

（注意：我使用的cocos2d-x版本是2.0.4，系统是win7）下载地址

打开HelloWorld.cpp文件，我们修改init方法如下

[cpp] view
plaincopy

bool HelloWorld::init()

{

bool bRet = false;

do

{

//////////////////////////////////////////////////////////////////////////

// super init first

//////////////////////////////////////////////////////////////////////////

CC_BREAK_IF(! CCLayer::init());

//////////////////////////////////////////////////////////////////////////

// add your codes below...

//////////////////////////////////////////////////////////////////////////

// 1. Add a menu item with "X" image, which is clicked to quit the program.

// Create a "close" menu item with close icon, it's an auto release object.

CCMenuItemImage *pCloseItem = CCMenuItemImage::create(

"CloseNormal.png",

"CloseSelected.png",

this,

menu_selector(HelloWorld::menuCloseCallback));

CC_BREAK_IF(! pCloseItem);

// Place the menu item bottom-right conner.

pCloseItem->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width - 20, 20));

// Create a menu with the "close" menu item, it's an auto release object.

CCMenu* pMenu = CCMenu::create(pCloseItem, NULL);

pMenu->setPosition(CCPointZero);

CC_BREAK_IF(! pMenu);

// Add the menu to HelloWorld layer as a child layer.

this->addChild(pMenu, 1);

//得到屏幕大小

CCSize size = CCDirector::sharedDirector()->getWinSize();

//创建进度条显示的图片，以精灵的形式创建

CCSprite* sprite1=CCSprite::create("grossini.png");

CCSprite* sprite2=CCSprite::create("grossinis_sister1.png");

CCSprite* sprite3=CCSprite::create("grossinis_sister2.png");

//创建进度条动作，参数代表：动作执行时间，执行进度（100表示进度条完整运行一次）

CCProgressTo* progress1 = CCProgressTo::create(2,100);

CCProgressTo* progress2 = CCProgressTo::create(2,100);

CCProgressTo* progress3 = CCProgressTo::create(2,100);

//创建进度条渲染器，载体为精灵

CCProgressTimer* left = CCProgressTimer::create(sprite1);

CCProgressTimer* center = CCProgressTimer::create(sprite2);

CCProgressTimer* right = CCProgressTimer::create(sprite3);

//设置进度条的类型。

//2.0版本以后就只剩下常用的kCCProgressTimerTypeRadial和kCCProgressTimerTypeBar两种类型了，但我们可以通过设置来实现不同的效果

//左边设置为旋转进度条效果

left->setType(kCCProgressTimerTypeRadial);

//中间为从左向右的进度条，类型为条形进度条

center->setType(kCCProgressTimerTypeBar);

center->setMidpoint(ccp(0,0));

center->setBarChangeRate(ccp(1, 0));

//从上到下的进度条，类型为条形进度条

right->setType(kCCProgressTimerTypeBar);

right->setMidpoint(ccp(0,1));

right->setBarChangeRate(ccp(0, 1));

//设置进度条的位置

left->setPosition(ccp(size.width / 2-200, size.height / 2));

center->setPosition(ccp(size.width / 2, size.height / 2));

right->setPosition(ccp(size.width / 2+200, size.height / 2));

//执行进度条动作，由此可以看出进度条效果就是一种特定的动作

left->runAction(progress1);

center->runAction(progress2);

right->runAction(progress3);

//添加到布景显示

addChild(left);

addChild(center);

addChild(right);

bRet = true;

} while (0);

return bRet;

}

运行程序，会看到从左向右依次为旋转进度条，水平进度条，竖直进度条，效果如下



小提示：我们说一下center->setMidpoint(ccp(0,0)); 和 center->setBarChangeRate(ccp(1, 0));这两个函数的功能。

首先setMidpoint()函数是设置进度条的起始点，（0,y）表示最左边，（1,,y）表示最右边，（x,1）表示最上面，（x,0）表示最下面。

然后setBarChangeRate()函数是用来设置进度条动画方向的，（1,0）表示横方向，（0,1）表示纵方向。

最后祝愿每一个奋斗在路上的人早日实现梦想！