[?李華明Himi?](http://www.himigame.com/about-himi)原創,轉載務必在明顯處注明： 轉載自[【黑米GameDev街區】](http://www.himigame.com/)?原文鏈接:?[http://www.himigame.com/iphone-cocos2d/501.html](http://www.himigame.com/iphone-cocos2d/501.html "【iOS-Cocos2d游戲開發之十七】靈活使用精靈可視區域(TextureRect)與錨點(anchorPoint),并結合可視區域與錨點制作進度條！") [](http://blog.csdn.net/xiaominghimi/article/details/6911387) 今天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常說的，細節決定一切，雖然說得絕對了些，但是事實開發項目中基本都是細節問題困擾著大家； 好了，不多說了，繼續忙了；