cocos2dX UI控件之CCProgress



cocos2dX UI控件之CCProgress

  

今天我們來學習cocos2dX爲我們提供的一個很實用的控件, CCProgress進度條, 我們先來看看有哪些常用的函數

用法:

CCProgressTimer::create( 精靈對象);

setType( 進度條樣式); //設置進度條樣式, 提供兩種可選參數, kCCProgressTimerTypeBar( 條形計時器)和kCCProgressTimerTypeRadial( 扇形計時器)

setPercentage( float); //設置當前值, 在0-100之間, 一般情況下, 我們默認設置爲0

getPercentage(); //獲取當前值

setReverseProgress( bool); //是否打開反向

setBarChangeRate( CCPoint對象); //定義起始時的樣式, 也有人說是設置錨點, 一般我習慣設置爲ccp( 1, 0), 然後setMidpoint()設置爲ccp( 0, 1), 這樣剛好是普通的進度條樣式

setMidpoint( CCPoint對象); //計時器顯示方向, 默認的是0.5, 0.5, 從中間開始

老規矩, 資源準備好:

首先, 我們來創建一個進度條和一個標籤:

<喎�"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHByZSBjbGFzcz0="brush:java;">//創建字體標籤 CCLabelTTF* ttf = CCLabelTTF::create( "loading...%0", "Arial", 24); ttf->setPosition( ccp( visibleSize.width / 2, visibleSize.height / 2 + 140)); addChild( ttf, 0, 101); //創建進度條背景, 可以不用 CCSprite* parBg = CCSprite::create( "bg.png"); parBg->setPosition( ccp( visibleSize.width / 2, visibleSize.height / 2)); addChild( parBg); //創建進度條 CCProgressTimer* myTimer = CCProgressTimer::create( CCSprite::create( "t.png")); myTimer->setPosition( ccp( visibleSize.width / 2, visibleSize.height / 2)); myTimer->setType(kCCProgressTimerTypeBar); //設置爲條形進度條 myTimer->setBarChangeRate( ccp( 1, 0)); myTimer->setMidpoint( ccp( 0, 1)); myTimer->setPercentage(0); //設置當前值 addChild( myTimer, 0, 102);

然後我們創建一個更新函數( 大家應該還記得吧), 用來斷的操作進度條和標籤, 然後再創建一個函數, 用來操作進度完成之後的行爲:

?

1 2	virtual void update(float delta);     void loadOK();

實現函數:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

void HelloWorld::update(float delta) {     CCProgressTimer* myTimer = (CCProgressTimer*)this->getChildByTag( 102);     float cu = myTimer->getPercentage();     //獲取到當前進度條的值     if ( cu >= 100)     {         //如果進度條大於100, 調用載入完成函數, 停止更新函數         loadOK();         unscheduleUpdate();     }     else     {         //否則就給當前進度加0.1         cu += 0.1f;         myTimer->setPercentage( cu);         CCString* str = CCString::createWithFormat( "loading...%0.2f", cu);         CCLabelTTF* ttf = (CCLabelTTF*)this->getChildByTag( 101);         ttf->setString( str->getCString());     } }   void HelloWorld::loadOK() {     CCLabelTTF* ttf = (CCLabelTTF*)this->getChildByTag( 101);     ttf->setString( "load OK!!!!"); }

現在, 一個裝載界面就完成了, 我們來看看效果:

大家還記得紅警這個遊戲嗎? 相信不少朋友是玩過的, 修建建築物等待的時候也可以使用進度條來做, 我們來看看如何使用CCProgressTo:

CCProgressTo::create( 消耗時間, 顯示圖片百分比);

看看用法, 我們屏蔽掉剛剛的更新函數:

?

1 2 3

CCProgressTo* to = CCProgressTo::create( 2.0f, 100.0f);     CCCallFunc* func = CCCallFunc::create( this, callfunc_selector( HelloWorld::loadOK));     myTimer->runAction( CCSequence::create( to, func, NULL));

這裏我們創建了一個動作序列, 然後在動作執行完了之後去執行我們創建的一個函數任務, CCCallFunc創建一個相當於動作的函數, 我們會在後面講到, 那個標籤我就沒有去操作它, 除了載入完成, 它是不會變的, 不要在意這些細節( 旁白: 沒見過你這麼懶的)

我們來看看效果:

沒有操作標籤哦, 親們, 這不是bug哈

效果是不是出來了, 當然, 進度條這個控件, 我們還可以用來做血條, 設置爲扇形的我們還可以用來做技能冷卻效果之類的, 反正大家自己多摸索吧,,,