今天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常說的，細節決定一切，雖然說得絕對了些，但是事實開發項目中基本都是細節問題困擾着大家；
好了，不多說了，繼續忙了；
