詳解CCProgressTimer 進度條並修改cocos2d源碼實現“理想”遊戲進度條!

【黑米GameDev街區】 原文鏈接: http://www.himigame.com/iphone-cocos2d/491.html


         遊戲開發中難免用到進度條,例如做一些遊戲技能的CD時間等都會使用到;那麼cocos2d當然也封裝了進度條,但是不太理想,如果童鞋們用過就應該知道,那麼今天介紹兩個知識點,第一:介紹cocos2d中的進度條CCProgressTimer如何使用;第二點:修改cocos2d封裝的CCProgressTimer源碼,實現“理想”形式的進度條;

        OK,首先來學習下如何在cocos2d中使用CCProgressTimer進度條:

        在cocos2d中使用進度條很簡單,創建進度條並添加到當前layer的代碼如下,童鞋們一看就懂:

  1. CCProgressTimer *ct=[CCProgressTimer progressWithFile:@"icon.png"];  
  2.        ct.position=ccp( size.width /2 , size.height/2);   
  3.        [self addChild:ct z:0 tag:90];  

         很簡單的創建,那麼如果急躁的童鞋們只是到這裏就立刻run你的項目,那麼肯定看不到進度條,不用擔心,看不到就對了;

         進度條它在cocos2d封裝的時候,默認有一個最大進度值 100,最小 0,那麼你創建的時候默認的當前進度是0,所以是看不到的;

         下面來看兩個進度條比較重要的兩個屬性:

  1. ct.percentage = 0; //當前進度  
  2. ct.type=kCCProgressTimerTypeHorizontalBarLR;//進度條的顯示樣式  

          percentage 指的是當前進度條的進度值,那麼想讓一個進度條正常顯示出來,那麼需要percentage!=0才行,一般都會在一個不斷刷新的函數中讓其進度條不斷++,進而實現其進度條功能;

          這裏我就簡單寫下代碼:

                 1.首先在init函數中,添加  :[self scheduleUpdate];

                 2. 然後添加如下函數即可:(這個函數中就是讓當前進度不斷++,大等於100就還原當前進度值爲0,讓其循環)  

  1. -(void)update:(ccTime)himi{  
  2.     CCProgressTimer*ct=(CCProgressTimer*)[self getChildByTag:90];   
  3.     ct.percentage++;  
  4.     if(ct.percentage>=100){  
  5.         ct.percentage=0;  
  6.     }  
  7. }  

               

          type屬性也是很容易理解的,就是進度條的類型,在cocos2d中封裝了以下6種顯示方式:

  1. kCCProgressTimerTypeRadialCCW,         扇形逆時針形式  
  2. kCCProgressTimerTypeRadialCW,          扇形順時針形式  
  3. kCCProgressTimerTypeHorizontalBarLR,   從左往右增張的形式  
  4. kCCProgressTimerTypeHorizontalBarRL,   從右往左增張的形式  
  5. kCCProgressTimerTypeVerticalBarBT,     從下往上增張的形式  
  6. kCCProgressTimerTypeVerticalBarTB,     從上往下增張的形式  
    

          爲了讓童鞋們更清楚今天要講的第二點知識,所以這裏我將這些形式截圖出來,大家先看下:


           kCCProgressTimerTypeRadialCCW 與 kCCProgressTimerTypeRadialCW的樣式如下圖: 

                              


           kCCProgressTimerTypeHorizontalBarLR 與  kCCProgressTimerTypeHorizontalBarRL 的樣式如下圖:

                        


           kCCProgressTimerTypeVerticalBarBT 與 kCCProgressTimerTypeVerticalBarTB   的樣式如下圖:

                            

 

   OK,簡單的介紹了進度條的使用和樣式後,那麼請各位童鞋用10秒時間仔細觀察3類樣式!!!

        童鞋們可能已經看出了一些端倪,這裏假設我們有一個技能需要做成有CD時間的,那麼如果我們採用進度條,那麼這個進度條需要一張圖片,我們一般會使用陰影作爲進度表示CD時間進而顯示,如下圖:(我將一張半透明的灰色圖作爲進度條,下面的cocos2d的icon當成技能!這裏進度條的樣式選擇從下往上的形式)


                            

      大家仔細觀察,進度條(灰色塊)逆時針增加,等到了最大進度值100的時候正好黑色塊會將技能(icon圖)給遮擋住......悲劇啊,這哪是技能CD啊,反了吧!!!!

一般技能CD時間過後應該正好將技能icon全部露出來,也就是說正確的應該是進度條在0進度的時候正好全部遮擋技能icon,噹噹前進度爲最大100的時候正好這個遮擋的灰色塊應該正好沒有,這樣纔對啊,這正好反了。。。。。

  最簡單的解決方式就是將進度條的當前進度值初始化設置100,然後不斷減少就好了;

      當然啦,Himi 索性去cocos2d裏對CCProgressTimer源碼進行了修改:

      首先進入 cocos2d的CCProgressTimer.m 源碼中,然後搜索以下代碼:

  1. float alpha = percentage_ / 100.f;  
     然後再其下方添加如下代碼:

  1. if(alpha != 0.f && alpha !=1.f)  
  2. {  
  3.     alpha = 1.f-alpha;  
  4. }  

      然後直接運行項目,截圖如下:

               

  

          這纔是對的啊,當進度條的當前進度是0的時候正好覆蓋技能icon,當進度條的當前進度值最大100的時候正好將技能icon全部展漏了出來;這個纔是正確的技能CD!

          備註:童鞋們在使用引擎做遊戲的時候,肯定會遇到一些根本無法通過引擎提供的方法去解決,那麼我們可以直接去修改源碼來解決問題,而不是一味的順從引擎,這才能體現出引擎開源的好處啦。嘿嘿;

 

         好啦,這一篇就介紹到這裏,繼續忙了.....。

發佈了19 篇原創文章 · 獲贊 15 · 訪問量 37萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章