Cocos2d Sprite Sheets -
Command line with TexturePacker:
<key>player_idle_01</key> <dict> <key>x</key><integer>0</integer> <key>y</key><integer>0</integer> <key>width</key><integer>64</integer> <key>height</key><integer>64</integer> </dict> 4.1 Loading a Sprite Sheet // Load the sprite sheet cache auto spritecache = SpriteFrameCache::getInstance(); spritecache->addSpriteFramesWithFile("characters.plist", "characters.png"); // Create a sprite from the sheet auto player = Sprite::createWithSpriteFrameName("player_idle_01.png"); this->addChild(player); 4.2 Using SpriteBatchNode (for maximum performance) auto batch = SpriteBatchNode::create("characters.png"); this->addChild(batch); auto sprite1 = Sprite::createWithSpriteFrameName("player_run_01.png"); auto sprite2 = Sprite::createWithSpriteFrameName("player_run_02.png"); cocos2d sprite sheets
| Method | Draw Calls | FPS | Memory (MB) | |--------|------------|-----|--------------| | Individual PNGs | 501 | 32 | 78 MB | | Sprite sheet (no batch node) | 1 | 58 | 42 MB | | Sprite sheet + SpriteBatchNode | 1 | 60 | 42 MB | Command line with TexturePacker: <
TexturePacker chars/*.png --sheet chars.png --data chars.plist --format cocos2d Test scenario: 500 moving sprites on iPhone 6 (Cocos2d-x 3.x). auto animate = Animate::create(animation)
auto animation = Animation::createWithSpriteFrames(frames, 0.1f); auto animate = Animate::create(animation); player->runAction(RepeatForever::create(animate)); | Tool | Platform | Features | |------|----------|----------| | TexturePacker (recommended) | Win/Mac/Linux | GUI, cocos2d plist export, trimming, rotation | | Zwoptex | Mac | Legacy, simple | | ShoeBox | Mac | Free, batch processing | | Adobe Flash CS6 | Win/Mac | Sprite sheet export (older) |
batch->addChild(sprite1); batch->addChild(sprite2); All sprites in a SpriteBatchNode must share the same texture. 4.3 Animation from Sprite Sheet Vector<SpriteFrame*> frames; for (int i = 1; i <= 10; i++) auto frame = spritecache->getSpriteFrameByName("player_run_0" + StringUtils::toString(i) + ".png"); frames.pushBack(frame);