【iOS-Cocos2d遊戲開發之十七】靈活使用精靈可視地區(TextureRect)與錨點(anchorPoint),並結合可視地區與錨點製作進度條！

 李華明Himi 原創,轉載務必在明顯處註明：
轉載自【黑米GameDev街區】 原文連結: http://www.himigame.com/iphone-cocos2d/501.html

      今天Himi單用一篇博文來給童鞋們介紹精靈相關的兩個常用的細節知識點；

      首先來介紹第一個知識點：精靈可視地區；

      不管在哪個移動平台上進行開發遊戲都會接觸使用到可視地區，比如Kjava（J2me）平台的setClip方法，Android的clipRect方法等等，那麼在iOS上也一樣存在，這裡我們介紹cocos2d引擎中的可視地區得函數是setTextureRect；

      可能沒有接觸過遊戲得童鞋不明白其概念，那麼Himi就簡單概述下：

      所謂可視地區就是在一個完整的表面上對其設定一定大小的地區，讓其只顯示設定的地區的面，其他部分隱藏不顯示出來；最常用的是將一張圖片設定一個可視地區，只讓這張圖展示設定的地區；

      那麼這裡在囉嗦幾句，在cocos2d中精靈CCSprite的可視地區一般可以通過兩種方式來設定：

1.在建立精靈的時候進行設定；2.在建立後進行設定；舉例如下：

        建立一個cocos2d項目，然後在HelloWorldLayer.m中init方法中建立一個精靈，代碼如下：

        //---正常建立的icon圖        CCSprite * spriteOld =[CCSprite spriteWithFile:@"icon.png"];        spriteOld.position=ccp(80,100);        [self addChild:spriteOld];        //---建立時設定30寬30高的可視地區        CCSprite * spriteNew =[CCSprite spriteWithFile:@"icon.png" rect:CGRectMake(0, 0, 30,30)];        spriteNew.position=ccp(150,100);        [self addChild:spriteNew];        //---建立後對其設定30寬30高的可視地區        CCSprite * spriteT =[CCSprite spriteWithFile:@"icon.png"];        [spriteT setTextureRect:CGRectMake(10, 10, 30, 30)];        spriteT.position=ccp(230,100);        [self addChild:spriteT]; 

     上面我建立了3個精靈，第一個沒有設定可是地區的icon精靈，第二個和第三個是設定了可視地區寬30高30的精靈，但是第二個和第三個精靈的可是地區寬高相同，但是起始點不同；而且第二個是從建立精靈的時候設定可視地區，第三個精靈則是建立精靈後進行設定的，設定的地方不一樣，功能是一樣的；

    需要詳細講解的是不管用以上兩種設定可視地區的哪種方法都需要傳入一個CGRect對象，這個CGrect參數有四個，座標x，y，以及寬高w，y；

    那麼CGRect在可是地區的函數中的作用如下：

    CGRect的x，y表示從這個精靈貼圖的（x，y）座標開始設定可視地區，（w，h）可視地區的大小；    

     下面是運行，童鞋們通過三個精靈（從左往右）之間的對比就很容易明白的：

 

     下面介紹第二個知識點：精靈錨點（anchorPoint）；

        渲染錨點的作用就是在渲染圖片的時候確定其渲染的方式，一般常用的錨點有以下幾種：

      圖片左上方、圖片右上方、圖片中心點、圖片左下角、圖片右下角等等

      首先童鞋們需要知道一點，在cocos2d引擎中在layer中添加渲染精靈貼圖的時候預設的錨點是其中心點；

      那麼由於cocos2d中layer的原點（0，0）點是螢幕的左下角，所以如果預設建立一個精靈添加到layer中的話，是精靈的中心點放置在layer的原點上，即精靈圖片顯示在螢幕中只是精靈的寬一半高一半，如：

         

                對應代碼如下：

        //---使用預設錨點        CCSprite * spriteOld =[CCSprite spriteWithFile:@"icon.png"];         [self addChild:spriteOld];

      那麼如果我們設定其精靈的錨點為左下角則正好將精靈icon完整顯示出來，因為精靈的左下角正好與layer的原點重合，如：

        

          對應代碼如下：

        //---設定精靈錨點為左下角        CCSprite * spriteNew =[CCSprite spriteWithFile:@"icon.png"];        spriteNew.anchorPoint=ccp(0,0);        [self addChild:spriteNew];

         設定的方法是精靈的anchorPoint屬性，賦值的是個CGPoint對象，其CGPoint中的x與y最大取1，表示最右與最下；

    

      ---------以上介紹的過於簡單，那麼下面Himi利用可視地區與錨點的特性製作一種從左往右樣式簡單進度條；

      首先我們仍然使用cocos2d的icon圖作為一個進度條，然後讓其從左往右不斷顯示出來；步驟如下：

    第一步:建立一個精靈，設定精靈的錨點為x=0（最左側），y=0.5（精靈的y軸中點），代碼如下：

        //---使用預設錨點        CCSprite * spriteP =[CCSprite spriteWithFile:@"icon.png"];          spriteP.position=ccp(size.width*0.5,size.height*0.5);//設定座標        spriteP.anchorPoint=ccp(0,0.5);//設定錨點        [self addChild:spriteP z:0 tag:88]; //將精靈添加到layer中顯示

            細心的童鞋可能會發現以上代碼運行後發現精靈並不顯示在螢幕中點，嗯，因為我們設定了精靈的錨點，現在精靈的左下角與螢幕中點重合著；

   第二步：添加一個變數用於記錄當前進度：

@interface HelloWorldLayer : CCLayer{    float currentShowRect;//當前可視地區的大小}

   然後開啟一個重新整理函數：
  

-(id) init{    [self scheduleUpdate];}-(void)update:(ccTime)himi{//每一幀都會執行的函數}

   

   最後一步：在重新整理函數中書寫從左往右慢慢顯示icon進度條邏輯代碼，代碼如下：

-(void)update:(ccTime)himi{//每一幀都會執行的函數    //實現進度條邏輯    CCSprite *sprite =(CCSprite*)[self getChildByTag:88];    currentShowRect++;    if(currentShowRect>=100){        currentShowRect=0;    }    [sprite setTextureRect:CGRectMake(0, 0, currentShowRect,sprite.position.y)];    }

    運行如下：(icon顯示地區越來越大，不斷迴圈)

       OK，本篇介紹完畢，可能童鞋們會認為本篇知識點過於簡單，如果你是個經常關注Himi部落格的童鞋，那麼你會發現Himi基本上所有的博文都是介紹了很多細節方面的問題，原因一，千篇一律的文章太多，別人都寫那麼多了，我也沒必要贅述。原因二，Himi常說的，細節決定一切，雖然說得絕對了些，但是事實開發項目中基本都是細節問題困擾著大家；

      好了，不多說了，繼續忙了；