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

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

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

1. bool HelloWorld::init()
   
2. {
   
3.     bool bRet = false;
   
4.     do 
   
5.     {
   
6.         //
   
7.         // super init first
   
8.         //        CC_BREAK_IF(! CCLayer::init());        //
   
9.         // add your codes below...
   
10.         //        // 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.
    
11.         CCMenuItemImage *pCloseItem = CCMenuItemImage::create(
    
12.             "CloseNormal.png",
    
13.             "CloseSelected.png",
    
14.             this,
    
15.             menu_selector(HelloWorld::menuCloseCallback));
    
16.         CC_BREAK_IF(! pCloseItem);        // Place the menu item bottom-right conner.
    
17.         pCloseItem->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width - 20, 20));        // Create a menu with the "close" menu item, it's an auto release object.
    
18.         CCMenu* pMenu = CCMenu::create(pCloseItem, NULL);
    
19.         pMenu->setPosition(CCPointZero);
    
20.         CC_BREAK_IF(! pMenu);        // Add the menu to HelloWorld layer as a child layer.
    
21.         this->addChild(pMenu, 1); //得到屏幕大小
    
22.         CCSize size = CCDirector::sharedDirector()->getWinSize();  
    
23.         //创建进度条显示的图片，以精灵的形式创建
    
24. CCSprite* sprite1=CCSprite::create("grossini.png");
    
25. CCSprite* sprite2=CCSprite::create("grossinis_sister1.png");
    
26. CCSprite* sprite3=CCSprite::create("grossinis_sister2.png");
    
27.         //创建进度条动作，参数代表：动作执行时间，执行进度（100表示进度条完整运行一次）
    
28. CCProgressTo* progress1 = CCProgressTo::create(2,100);  
    
29. CCProgressTo* progress2 = CCProgressTo::create(2,100);
    
30. CCProgressTo* progress3 = CCProgressTo::create(2,100);
    
31.         //创建进度条渲染器，载体为精灵
    
32. CCProgressTimer* left = CCProgressTimer::create(sprite1);  
    
33. CCProgressTimer* center = CCProgressTimer::create(sprite2);  
    
34. CCProgressTimer* right = CCProgressTimer::create(sprite3);  
    
35. //设置进度条的类型。
    
36. //2.0版本以后就只剩下常用的kCCProgressTimerTypeRadial和kCCProgressTimerTypeBar两种类型了，但我们可以通过设置来实现不同的效果
    
37. //左边设置为旋转进度条效果
    
38.         left->setType(kCCProgressTimerTypeRadial);  
    
39. //中间为从左向右的进度条，类型为条形进度条
    
40. center->setType(kCCProgressTimerTypeBar);
    
41. center->setMidpoint(ccp(0,0));  
    
42.         center->setBarChangeRate(ccp(1, 0));
    
43. //从上到下的进度条，类型为条形进度条
    
44. right->setType(kCCProgressTimerTypeBar);
    
45. right->setMidpoint(ccp(0,1));  
    
46.         right->setBarChangeRate(ccp(0, 1));
    
47.         //设置进度条的位置
    
48.         left->setPosition(ccp(size.width / 2-200, size.height / 2));
    
49. center->setPosition(ccp(size.width / 2, size.height / 2));
    
50. right->setPosition(ccp(size.width / 2+200, size.height / 2));
    
51. //执行进度条动作，由此可以看出进度条效果就是一种特定的动作
    
52. left->runAction(progress1);
    
53. center->runAction(progress2);
    
54. right->runAction(progress3);
    
55. //添加到布景显示
    
56. addChild(left);  
    
57. addChild(center); 
    
58. addChild(right);         bRet = true;
    
59.     } while (0);    return bRet;
    
60. }

复制代码

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

                                

小提示：我们说一下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.csdn.net/jukai7/article/details/8564579