Lab

Cocos2d-x:棒状プログレスバーの作成

 Tag :  Published : 2014-5-26

Pocket

CCProgressTimerを使用します
棒状のプログレスバーを作成します。

画像の準備

左から右へ伸びる棒状のプログレスバーを作成します。

cocos2d-x プログレスバーの画像

まず棒状の画像を用意します。

cocos2d-x プログレスバーの画像

棒状プログレスバーの設定

setPercentageが0なので、最初は非表示になります。
一時的にsetPercentage(100)など書き換えて、表示を確認します。

    //スプライトを作成
    CCSize s = CCDirector::sharedDirector()->getVisibleSize();
    CCSprite* pBar = CCSprite::create("bar.png");
    
    //タイマーにスプライトをセット
    CCProgressTimer* pTimer = CCProgressTimer::create(pBar);
    
    //最初は0パーセント
    pTimer->setPercentage(0);
    
    //タイマーの形(棒状に設定)
    pTimer->setType(kCCProgressTimerTypeBar);
    
    //バーの伸びる方向(x方向に設定)
    pTimer->setBarChangeRate(ccp(1, 0));
    
    //タイマーの基準点(左側に設定)
    pTimer->setMidpoint(ccp(0, 0));
    
    //タイマーを配置
    pTimer->setPosition(ccp(s.width*.5, s.height*.5));
    pTimer->setTag(100);
    addChild(pTimer);

    //パーセント表示用テキスト
    CCLabelTTF* percentTxt = CCLabelTTF::create("0%", "Arial", 35);
    percentTxt->setPosition(ccp(pTimer->getPositionX(), pTimer->getPositionY()+50));
    percentTxt->setTag(200);
    addChild(percentTxt);
    

棒状プログレスバーの更新

今回はscheduleUpdateを使って、毎フレーム毎1パーセントずつ増えるようにしてみます。

    this->scheduleUpdate();
    
void HelloWorld::update(float dt){
    //1パーセントずつ追加
    CCProgressTimer* pTimer = (CCProgressTimer*)this->getChildByTag(100);
    int percent = pTimer->getPercentage();
    pTimer->setPercentage(percent+1);
    
    //テキストの更新
    CCLabelTTF* percentTxt = (CCLabelTTF*)this->getChildByTag(200);
    percentTxt->setString(CCString::createWithFormat("%d%%", percent)->getCString());
    
    //100になったら停止
    if(percent >= 100){
        this->unscheduleUpdate();
        percentTxt->setString("Completed!");
    }
}
    

pageTop