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方法如下

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）表示纵方向。

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