Cocos2d-X 基礎 | Sprite 詳解

什麼是精靈(Sprite)?遊戲中的主角、敵人都可能是一個精靈,但並不是所有的圖形對象都是一個精靈,只有你能控制它,它纔是一個精靈,如果無法控制,那就只能是一個節點。準確來說,精靈是一個能通過改變自身屬性:位置、旋轉、縮放、傾斜、顏色和透明度等,變成可控制的 2D 圖像。

 

1.精靈的創建方法

可以使用一張圖片來創建一個精靈,除此之外還可以使用圖集或者精靈緩存來創建。

1.1通過指定圖片創建精靈

auto sprite = Sprite::create("sprite.png");

1.2通過指定圖片指定區域創建精靈

auto sprite = Sprite::create("sprite.png", Rect(0, 0, 20, 20));

1.3通過指定紋理創建精靈

Texture2D *cache = Director::getInstance()->getTextureCache()->addImage("Spriet.png");

auto sprite = Sprite::createWithTexture(cache);

1.4通過指定紋理指定區域創建精靈,第三個參數設置是否旋轉紋理

auto sprite = Sprite::createWithTexture(TextureCache::getInstance()->addImage("Sprite.png", Rect(0, 0, 20, 20), true);

1.5通過精靈幀創建精靈

SpriteFrameCache *frameCache = SpriteFrameCache::getInstance();

frameCache->addSpriteFrameWithFile("SpriteSheet.plist")    //SpriteFrame 只加載一次,後續一直保存在 SpriteFrameCache 中

SpriteFrame *spriteFrame = frameCache->getSpriteFrameByName("sprite.png");

auto sprite = Sprite::createWithSpriteFrame(spriteFrame);

1.6通過精靈幀緩存創建精靈

SpriteFrameCache *frameCache = SpriteFrameCache::getInstance();

frameCache->addSpriteFrameWithFile("SpriteSheet.plist")    //SpriteFrame 只加載一次,後續一直保存在 SpriteFrameCache 中

auto sprite = Sprite::createWithSpriteFrameName("sprite.png");

ps:精靈幀不再使用後要及時清除,否則如果再有相同名稱精靈幀時會產生衝突:

void removeSpriteFrameByName(const std::string &name):移除指定名字的精靈幀

void removeSprites():移除指定精靈幀

void removeSpriteFramesFromFile(const std::string &plist):移除指定座標文件的精靈幀

void removeUnusedFrames():移除沒有使用的精靈幀

 

2.精靈的控制

成功創建精靈後,現在可以通過修改精靈的屬性去控制精靈了。

2.1錨點

錨點確定了精靈對象在計算座標位置的一個基準點,這個點是精靈內部的點,錨點影響精靈的縮放,旋轉,傾斜,但不影響顏色和透明度。錨點使用的座標系以左下角爲原點 (0, 0)。默認情況下,所有的節點對象錨點是 (0.5, 0.5)。 通過 setAnchorPoint() 方法可以設置精靈的錨點:

sprite->setAnchorPoint(0, 1);    //錨點的取值範圍爲 0~1

錨點設置爲(0,1)時的效果(紅點爲錨點所在的位置):

2.2位置

位置表示精靈所在父節點中的位置,當需要設置一個精靈的位置時,需要用到 setPosition() 方法:

sprite->setPosition(Vec2(100,100));

2.3旋轉

通過 setRotation() 方法,旋轉用來設置精靈以錨點爲基準點的旋轉,順時針旋轉爲正,逆時針旋轉爲負,默認情況下,旋轉角度爲 0.0。

sprite->setRotation(20.0f);

順時針旋轉 20° 的效果:

2.4縮放

通過 setScale() 方法控制精靈的縮放。可以控制精靈水平縮放,垂直縮放,也可以整體縮放。默認水平和豎直的縮放值都是 1.0。

sprite->setScale(2.0);    //控制整體縮放

sprite->setScaleX(2.0);    //控制 X 軸縮放

sprite->setScaleY(2.0);    //控制 Y 軸縮放

效果:

2.5傾斜

通過 setSkewX() 控制精靈的傾斜度,可以控制精靈水平傾斜,豎直傾斜,或者水平豎直同時傾斜,默認水平和豎直的傾斜值都是 0.0。

sprite->setSkewX(20.0f);    //控制 X 軸傾斜

sprite->setSkewY(20.f);    //控制 Y 軸傾斜

效果:

2.6顏色

通過 setColor() 控制精靈的顏色。將一個 RGB 值設置到 Color3B 對象,調用精靈的 setColor() ,就能完成精靈顏色的設置。RGB 是三個從 0-255 的值,三個值分別代表紅綠藍的顏色深度,數值越大,顏色越深。特別的 RGB(255, 255, 255) 是白色。如果你不想自己指定 RGB 的三個值,也可以使用 Cocos2d-x 提供的預定義顏色,比如: Color3B::White,Color3B::Red。

sprite->setColor(Color3B::WHITE);

sprite->setColor(Color3B(255, 255, 255))

效果:

2.7透明度

精靈的透明度可以通過 setOpacity() 傳入一個特定的值來設置,這個值的範圍是 0-255,數值越大透明度越低,255 代表完全不透明,0 代表完全透明。

sprite->setOpacity(30);

效果:

 

3.性能優化

可以通過使用紋理圖集、精靈幀緩存或者多邊形精靈進行精靈的性能優化。

3.1使用紋理圖集

紋理圖集(Texture)也稱爲精靈表(Sprite Sheet)

使用紋理圖集的優點:

1.減少文件讀取次數,讀取一張圖片比讀取一推小文件要快。

2.減少 OpenGL ES 繪製調用並且加速渲染

OpenGL ES 1.1僅僅能夠使用2的n次冪大小的圖片(即寬度或者高度是2、4、8、64…)。

如果採用小圖片OpenGL ES1.1會分配給每個圖片2的n次冪大小的內存空間,即使這張圖片達不到這樣的寬度和高度也會分配大於此圖片的2的n次冪大小的空間。那麼運用這種圖片集的方式將會減少內存碎片。

雖然在Cocos2d-x v2.0後使用OpenGL ES2.0,它不會再分配2的幾次冪的內存塊了,但是減少讀取次數和繪製的優勢依然存在。

3.減少內存消耗。

4.Cocos2d-x全面支持Zwoptex和TexturePacker,所以創建和使用紋理圖集是很容易的。

具體實現方法在精靈的創建方法中已做說明,這裏不再重複。

3.2使用精靈幀緩存

精靈幀緩存是緩存的一種,緩存有如下幾種:

1.紋理緩存(TextureCache)

使用紋理緩存可以創建紋理對象。

2.精靈幀緩存(SpriteFrameCache)

和紋理圖集相對應,把plist文件讀到內存,到文件裏面創建精靈幀緩存,然後再從精靈幀緩存中獲得精靈對象,反覆使用精靈對象時候,使用精靈幀緩存可以節省內存消耗。

將一個圖讀到精靈幀緩存中,同時也會加載到紋理緩存中。

3.動畫緩存(AnimationCache)

動畫緩存主要用於精靈動畫,精靈動畫中的每一幀是從動畫緩存中獲取的。

具體實現方法在精靈的創建方法中已做說明,這裏不再重複。

3.3多邊形精靈

首先觀察下面這張圖:

注意左右兩種情況的不同。

左側,是一個典型的精靈繪製時的處理,精靈被處理成一個有兩個三角形組成的矩形。

右側,是一個多邊形精靈繪製時的處理,精靈被處理成一系列小的三角形。

顯然可以看到,右側多邊形精靈需要繪製的像素數量比左側精靈需要的像素數量更小,但是由於劃分了多個三角形出現了更多的頂點,由於在現代的圖形處理中,一般繪製定點比繪製像素消耗的性能少。所以多邊形精靈的性能更好。

可以通過 AutoPolygon 工具類方法來生成多邊形精靈:

auto pinfo = AutoPolygon::generatePolygon("filename.png");

auto sprite = Sprite::create(pinfo);

 


我是「Super於」,立志做一個每天都有正反饋的人!歡迎大家關注我的公衆號「遊戲開發小白變怪獸」,一起進步!

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章