記得剛進遊戲業的時候常常聽人家講 Sprite Sheet,但是不知道是什麼意思。

Screen Shot 2013-03-12 at 下午8.44.22

(上圖為 Zwoptex sprite sheet 製作工具中編排 sprite 的畫面)

Sprite sheet 顧名思義就是存有很多 sprite 的資料,通常包含一個 png 檔以及 plist 檔,PNG 檔存有所有程式中要用到的 sprite,plist 則定義所有 sprite 的位置跟大小。

為什麼要使用 sprite sheet 呢?一般來說有以下幾個原因:

1. 減少 OpenGL ES 執行 draw call 的次數,有 sprite sheet 的話只要執行一次就可以把所有的 sprite 處理完儲存在記憶體中

2. 減少記憶體的使用量:因為在電腦裡 sprite 的大小是儲存為二的倍數,所以假如你有一張 129x129 的貼圖 (只比128大一點點),系統將配置一個 256x256 (2的倍數) 的貼圖來做儲存,中間會有許多空白的記憶體空間浪費掉。

3. 可利用 PNG 透明區塊儲存更多的圖像

市面上有兩個工具支援 Cocos2D 的 sprite sheet 製作:

1. Texture Packer

2. Zwoptex (此範例使用 Zwoptex 來產生 sprite sheet 因為此軟體可免費使用。)

先使用軟體將 sprite sheet 製作出來後,在 Cocos2D-x 中的語法相當簡單:

    CCSpriteBatchNode *spriteBatchNode;

    spriteBatchNode = CCSpriteBatchNode::create("scene1atlas.png");

    CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("scene1atlas.plist");

    pSprite = CCSprite::createWithSpriteFrameName("city1.png");

    pSprite->setAnchorPoint(ccp(0, 0));

    pSprite->setPosition(ccp(0,0));    

    spriteBatchNode->addChild(pSprite);

    this->addChild(spriteBatchNode,1);

 

1. 建立一個 CCSpriteBatchNode, 並 create with 您已製做完成的 sprite sheet (.png)

2. 建立一個 CCSpriteFrameCatche 並使用 addSpriteFramesWithFile 將 .plist 加入

3. 建立 sprite 物件,使用 createWithSpriteFrameName

4. 將 sprite 物件加入到 CCSpriteBatchNode 中 (所有要透過 sprite sheet 建立的 sprite 物件都必須加入到 CCSpriteBatchNode 中)

5. 最後將 CCSpriteBatchNode 加入到場景中

希望對初學遊戲程式設計的朋友有所幫助。

 

 

----------------------------------

 

Thinking.jpg  

 

筆者:Alan Feng

大學由資管系畢業後便投入職場,先後擔任程式設計師,系統設計師,系統分析師,專案管理師等職務。

曾服務於資訊服務業,電子代工設計公司,目前在內湖一間遊戲公司擔任專案管理師~ 

持有國際 PMP 證照並努力學習 Scrum 敏捷式開發框架中。


文章標籤
創作者介紹

專案管理,獨立開發,禪。

Alan Feng 發表在 痞客邦 PIXNET 留言(0) 人氣()