记得刚进游戏业的时候常常听人家讲 Sprite Sheet，但是不知道是什么意思。

(上图为 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 加入到场景中

希望对初学游戏程式设计的朋友有所帮助。

 

 

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

 

  

 

笔者：Alan Feng

大学由资管系毕业后便投入职场，先后担任程式设计师，系统设计师，系统分析师，专案管理师等职务。

曾服务于资讯服务业，电子代工设计公司，目前在内湖一间游戏公司担任专案管理师～ 

持有国际 PMP 证照并努力学习 Scrum 敏捷式开发框架中。