[?李華明Himi?](http://www.himigame.com/about-himi)原創,轉載務必在明顯處注明： 轉載自[【黑米GameDev街區】](http://www.himigame.com/)?原文鏈接:?[http://www.himigame.com/iphone-cocos2d/516.html](http://www.himigame.com/iphone-cocos2d/516.html "【iOS-Cocos2d游戲開發之二十】精靈的基礎知識點總匯(位圖操作/貼圖更換/重排z軸等)以及利用CCSprite與CCLayerColor制作簡單遮蓋層！") [](http://blog.csdn.net/xiaominghimi/article/details/6955680) 最近寫了不少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，就寫到這里!下篇見～繼續忙了； ? ? ? ? ??