Cocos2d-x的學習之旅（八）進度條

聲明

本教程僅用于初學cocos2dx同學使用，内容由本人（Code-Man)編寫，此教程使用cocos2dx版本為3.4。本教程内容可以自由轉載，但必須同時附帶本聲明，或注明出處。QQ群：Cocos2d-CodeMonkey ,461679592

。

今天來講一下進度條。進度條在遊戲中通常以兩種方式存在，我會分别介紹這兩種的實作方式。

第一種：條形進度條。 第二種：扇形進度條。

資源：

條形進度條：

效果：

扇形進度條：

效果：

總結：進度條并沒有我們想象中那麼難，無法就是有一張地圖，上面覆寫一張一樣大小的圖檔，根據百分比來進行顯示，僅此而已。其實進度條還用在了資源加載方面，關于這方面的知識，會在以後的課程中講解。

bool LessonEightScene::init(){
    if (!Layer::init()) {
        return false;
    }
    
    WinSize=Director::getInstance()->getVisibleSize();
    //背景
    auto bg=Sprite::create("LessonOne_Bg.png");
    bg->setPosition(WinSize/2);
    this->addChild(bg);
    
    //第一種更新函數（也叫排程器），每一幀執行一次
    this->scheduleUpdate();
    
    
    
    
    //進度條底部圖檔
    auto progress_bg=Sprite::create("petLvUp_proBarFrame.png");
    progress_bg->setPosition(progress_bg->getContentSize().width/2+100, WinSize.height/2+WinSize.height/2/2);
    this->addChild(progress_bg);
    
    //建立一個條形進度條
    auto proBar=ProgressTimer::create(Sprite::create("petLvUp_proBar.png"));
    //這種進度條錨點（0，0）與底部圖檔重疊
    proBar->setAnchorPoint(Vec2(0,0));
    //添加到底部圖檔上
    progress_bg->addChild(proBar);
    //進度條的類型為條形，另一個是扇形。
    proBar->setType(ProgressTimer::Type::BAR);
    //設定條形進度條是X軸(從左到右，從右到左)為進度的，還是Y(從上到下，從下到上)軸為進度.
    proBar->setBarChangeRate(Vec2(1, 0));
    //設定進度條的起始位置
    proBar->setMidpoint(Vec2(0,0));
    //進度的初始值，數值0~100之間。
    proBar->setPercentage(0);
    
    //增加經驗按鈕
    auto AddExButton=MenuItemFont::create("經驗加+5",[&,proBar](Ref*){
        if (proBar->getPercentage()<100) {
            //進度值小于100，則0.1秒的時間向目前的進度值前進5.
            proBar->runAction(ProgressTo::create(0.1, proBar->getPercentage()+5));
        }else{
            //進度值大于等于100則設定進度值為0
            proBar->setPercentage(0);
        }
    });
     AddExButton->setPosition(progress_bg->getPosition()+Vec2(200,0));
    
    
    
    
    //扇形進度條底部圖檔
    auto progress_bg_2=Sprite::create("sectorProgress.png");
    progress_bg_2->setPosition(progress_bg_2->getContentSize().width/2+100, WinSize.height/2-WinSize.height/2/2);
    this->addChild(progress_bg_2);
    
    //建立一個扇形進度條
    auto proSector=ProgressTimer::create(Sprite::create("sectorProgress_frame.png"));
    //這種進度條錨點（0，0）與底部圖檔重疊
    proSector->setAnchorPoint(Vec2(0,0));
    //添加到底部圖檔上
    progress_bg_2->addChild(proSector);
    //進度條的類型為條形，另一個是扇形。
    proSector->setType(ProgressTimer::Type::RADIAL);
    //是否反向旋轉，預設為false
    proSector->setReverseProgress(true);
    //進度的初始值，數值0~100之間。
    proSector->setPercentage(100);
    
    //扣血按鈕
    auto stopUpData1Button=MenuItemFont::create("血量-5", [&,proSector](Ref*obj){
        if (proSector->getPercentage()<=0) {
            proSector->setPercentage(100);
        }else{
            proSector->runAction(ProgressTo::create(0.1, proSector->getPercentage()-5));
        }

    });
    stopUpData1Button->setPosition(progress_bg_2->getPosition()+Vec2(200,0));
    
    //按鈕菜單
    auto men=Menu::create(AddExButton, stopUpData1Button ,NULL);
    men->setPosition(Vec2::ZERO);
    this->addChild(men);
    
    
    
    return true;
}
           

本文Demo資源：http://pan.baidu.com/s/1dD2dRmL