【iOS-Cocos2d遊戲開發之二十】精靈的基礎知識點總匯(位元影像操作/貼圖更換/重排z軸等)以及利用CCSprite與CCLayerColor製作簡單遮蓋層！

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

    最近寫了不少Cocos2d的博文了，那麼由於Himi介紹的一般都是比較容易出錯的問題或者比較受到關注的知識點，所以不少童鞋要求寫個基礎篇，那麼這裡Himi就舉例最常用的精靈CCSprite來詳細的介紹一些吧； 考慮到網上對於Cocos2d-iphone的中文教程已有很多，所以這裡Himi會拿出一些教程沒有提到的基礎知識點來分享；

     首先我們來建立一個精靈: 

CCSprite* sprite =[CCSprite spriteWithFile:@"Icon.png"];//初始化[self addChild:sprite]; //添加入層中

    代碼很簡單，傳入一張貼圖名即可，然後添加層中，那麼這裡Himi說幾點：

 1. 精靈除了這個建立函數外，還有很多方法，最重要的另一個就是利用打包工具打包出來的幀緩衝中載入貼圖並建立；關於打包工具Himi使用的是TP，還有其他一些這裡不介紹了，Himi之前的博文也有對應的介紹；

 2.精靈預設添加進layer中預設是layer的（0，0）點，即螢幕的左下角；而且精靈的貼圖繪製是以精靈的貼圖中心點進行渲染的，簡單說如果精靈貼圖大小看成單位一，精靈的錨點（anchor）是（0.5,0.5）；這個是精靈預設錨點，當然也可以設定錨點，這個錨點的範圍是[0,1]；

3.大家如果剛接觸一門新語言、引擎、架構等就要慢慢找到它們的規律，比如在cocos2d中一般建立都是類似的建立方式，而初始化的函數基本都是以類名後的一個單詞作為開頭；比如咱們這個CCSprite類，它的建構函式就是sprite開頭的；

    OK，知道如何建立一個精靈了，下面我們來寫一點精靈的常用方法和基本位元影像操作吧：

        CCSprite* sprite =[CCSprite spriteWithFile:@"Icon.png"];//初始化        [self addChild:sprite]; //添加入層中        sprite.scale=2;//放大2倍        sprite.rotation=90;//旋轉90度        sprite.opacity=255;//設定透明度為完全不透明（範圍0～255）        sprite.position=ccp(100,100);//設定精靈中心點座標是x=100，y=100        [sprite setFlipX:YES];//X軸鏡像反轉        [sprite setFlipY:YES];//Y軸鏡像反轉        [sprite setColor:ccc3(255, 0, 0)];//設定顏色為紅色

   關於精靈的動作這些N多文章都寫過了，這裡我就不寫了，沒意義，我這裡給大家再講解下童鞋們經常糾結的兩個問題：

1.如何重新設定精靈的z軸（覆蓋層）？

       對於這個問題，很多童鞋無法找到方法的原因主要是因為大家首先想到的是更改精靈的Z軸值的大小（Z軸值越大離螢幕越近），那麼就會錯誤的使用下面這段代碼：

sprite.zOrder=2;

這句話是不允許使用的錯誤碼，因為精靈的zOrder屬性只能可讀不可修改;那麼Himi提供大家一個解決方案，那就是利用布局去重新設定你想設定的精靈的z軸值，例如以下代碼：（111.png是我從部落格隨便截出來的圖，反正比Icon.png大就可以，這樣童鞋們就能看得清楚了）

        //--z值1的精靈        CCSprite* sprite =[CCSprite spriteWithFile:@"Icon.png"];        [self addChild:sprite z:1]; //添加入層中        sprite.position=ccp(300,200);//設定精靈中心點座標是x=100，y=100        //--z值2的精靈        CCSprite* sprite2 =[CCSprite spriteWithFile:@"111.png"];        [self addChild:sprite2 z:2];         sprite2.position=ccp(220,120);

從代碼中可以很清晰看到第二個精靈sprite2的z軸大於第一個精靈sprite的z軸值，那麼sprite2肯定是覆蓋sprite上的，運行如下：

                 

下面我們來利用layer對第一個精靈進行z軸重新設定，代碼如下：

[self reorderChild:sprite z:10];

self:  CCLayer

sprite:  想要重新設定z軸（覆蓋層）的精靈

z: 想要重新設定z軸（覆蓋層）的精靈的z軸值

  OK，那麼我們重新設定了第一個精靈的z軸值為10，這時候精靈1比精靈2的z軸大了，1會覆蓋2精靈，運行效果如：

           

2.如何更換已建立的精靈貼圖？

    在上面我介紹了精靈的建立一般有兩種:一種是利用幀緩衝，另一種是直接索引貼圖ID進行建立；所以呢更換精靈貼圖也一般分為兩種方法；

首先介紹第一種直接利用建立貼圖進行更換：

 執行個體代碼如下：

//-----沒有換貼圖前CCSprite*sprite =[CCSprite spriteWithFile:@"Icon.png"];sprite.position=ccp(150,150);[self addChild:sprite];//-----換貼圖後CCSprite*sprite2 =[CCSprite spriteWithFile:@"Icon.png"];sprite2.position=ccp(350,150);[self addChild:sprite2];//更換貼圖CCTexture2D * texture =[[CCTextureCache sharedTextureCache] addImage: @"Default.png"];//建立貼圖[sprite2 setTexture:texture]; 

運行效果如下：

           

    第二種利用幀替換：

    

        //載入幀緩衝，這個testpngs.plist儲存了Icon和111兩張圖，-hd表示高清版本iphone4        [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"testpngs-hd.plist"];        //-----沒有換貼圖前         CCSprite*sprite =[CCSprite spriteWithSpriteFrameName:@"Icon.png"];        sprite.position=ccp(150,150);        [self addChild:sprite];        //-----換貼圖後        CCSprite*sprite2 =[CCSprite spriteWithSpriteFrameName:@"Icon.png"];        sprite2.position=ccp(350,150);        [self addChild:sprite2];        //更換幀貼圖        //從幀緩衝中取出111.png        CCSpriteFrame* frame2 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"111.png"];        [sprite2 setDisplayFrame:frame2];

運行效果如下：

-------------下面來介紹如何來利用CCSprite精靈或者CCLayerColor簡單實現一個簡單的覆蓋層（遮擋）效果

      首先利用CCSprite來實現，代碼如下：

        CCSprite *sprLeft = [CCSprite spriteWithFile:@"Icon.png"];        sprLeft.position=ccp(100,180);        [self addChild:sprLeft];        //----建立一個簡單的覆蓋層        //擷取當前螢幕寬高        CGSize size =[[CCDirector sharedDirector]winSize];        //建立一個精靈（無貼圖）        CCSprite*sprite =[CCSprite node];        //設定精靈貼圖大小（全螢幕寬高）        sprite.textureRect=CGRectMake(0, 0, size.width, size.height);        sprite.position=ccp(size.width*0.5,size.height*0.5);        sprite.opacity=127;//半透明[0~255]        sprite.color=ccc3(0, 0, 0);//設定黑色        [self addChild:sprite];        //----        CCSprite* sprRight = [CCSprite spriteWithFile:@"Icon.png"];        sprRight.position=ccp(300,180);        [self addChild:sprRight];

      這裡我建立了兩個精靈一個被覆蓋 一個不被覆蓋 這樣只要讓童鞋們看得更清楚～

     下面利用第二種方式實現：

  

        //----        CCSprite *sprLeft = [CCSprite spriteWithFile:@"Icon.png"];        sprLeft.position=ccp(100,180);        [self addChild:sprLeft];        //----建立一個簡單的覆蓋層        //建立一個精靈（無貼圖）        CCLayerColor *layer =[CCLayerColor layerWithColor:ccc4(0, 0, 0, 127)];        [self addChild:layer];        //----        CCSprite* sprRight = [CCSprite spriteWithFile:@"Icon.png"];        sprRight.position=ccp(300,180);        [self addChild:sprRight];

      第二種方法大家可以看到就兩句話實現，原因這裡解釋下：

                第一種設定了貼圖大小，layer不需要！因為layer預設全屏；

                第一種設定了座標，layer不需要！因為layer預設螢幕中心點；

                第一種設定了透明度和顏色，layer也設定了～在layer建立的時候建立的，在layer建立時傳入的四個參數：

                四個參數分別表示RGBA！注意是RGBA！！！！不是ARGB！（因為Himi做過me、Android所以看到設定顏色第一概念就是ARGB。。所以剛接觸這裡各種鬱悶，總是效果不是如自己想的。。。）

               這裡補充下：RGBA 顏色的三原色，紅色、綠色、藍色、透明度！

 兩種實現方式效果都如所示：

                        

 

       希望童鞋們在初學的時候儘可能的遇到問題按照如下順序去做：首先自己多次嘗試->去看源碼->百度google->最後請教他人

      OK，就寫到這裡!下篇見～繼續忙了；