cocos2d-x初学笔记09：进度条Progress_cocos2d进度条-优快云博客

本文介绍如何在Cocos2d-x项目中使用进度条，包括创建进度条、设置不同类型及方向，并通过实例展示旋转进度条、水平及竖直条形进度条的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

首先我们新建一个项目，命名为“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方法如下

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）表示纵方向。
最后祝愿每一个奋斗在路上的人早日实现梦想！

原文链接： http://blog.youkuaiyun.com/jukai7/article/details/8564579