Lab

Cocos2d-x:円形プログレスバーの作成

 Tag :  Published : 2014-5-26

Pocket

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

画像の準備

円形のプログレスバーを作成します。
円なのでプログレス”バー”ではないのですが、なんと読んでよいのかわからない。。。

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

まず円形の画像を用意します。

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

円形プログレスバーの設定

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

    //スプライトを作成
    CCSize s = CCDirector::sharedDirector()->getVisibleSize();
    CCSprite* pCircle = CCSprite::create("circle.png");
    
    //タイマーにスプライトをセット
    CCProgressTimer* pTimer = CCProgressTimer::create(pCircle);
    
    //最初は0パーセント
    pTimer->setPercentage(0);

    //タイマーを配置
    pTimer->setPosition(ccp(s.width*.5, s.height*.5));
    pTimer->setTag(100);
    addChild(pTimer);

    //パーセント表示用テキスト
    CCLabelTTF* percentTxt = CCLabelTTF::create("0%", "Arial", 50);
    percentTxt->setPosition(ccp(pTimer->getPositionX(), pTimer->getPositionY()));
    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