cocos2d-xでは画像を表示する方法はいくつかあります。
今回、紹介するのはCCSpriteFrameCacheクラスを使った方法です。

この方法はプロパティリストに関連付けられた一枚の画像から、必要なモノを取り出して利用します。
読み込んだキャッシュから利用するので、画像を高速で表示することができます。
また、画像データをまとめられるので、サイズの節約にも繋がります。

画像を表示するための準備

CCSpriteFrameCacheクラスを利用するには、全容の画像とプロパティリストを作成する必要があります。
これには専用のエディタを作成しないといけないのですが、私は「TexturePacker」の利用をお勧めします。

TexturePacker

有償のアプリケーションなんですが、cocos2d-x専用の画像とプロパティリストが簡単に作成できます。
同時に、画像のサイズの圧縮もできます。
詳しくはこちらを参考にしてください。
TexturePacker – Create Sprite Sheets for your game!

CCSpriteFrameCacheクラスを利用する

画像が準備出来れば、実際に画面に表示をしてみましょう。
今回利用する画像データはこんなものです。

画像データはこちらからお借りしました。
Cocos2d for Iphone 1 Game Development Cookbook


具体的なコードは以下のようになります。
【cocos2dx3.x】

//プロパティリストをSpriteFrameCacheを使い読み込む
    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("Images.plist");

//読み込んだキャッシュから画像を取り出し、Spriteクラスとして利用する。
    auto _spriteC = Sprite::createWithSpriteFrameName("button.png");
    _spriteC->setPosition(Point(winSize.width/2,winSize.height/2));
    this->addChild(_spriteC);

【cocos2dx2.x】

//プロパティリストを読み込む
CCSpriteFrameCache::sharedSpriteFrameCache()-> addSpriteFramesWithFile("buttons.plist");

//読み込んだキャッシュから画像を取り出し、Spriteクラスとして利用する。
 CCSprite*sprite = CCSprite::createWithSpriteFrameName("button.png");
 sprite->setPosition(ccp(400,300));
 this->addChild(sprite);

【結果】

コードの解説

//cocos2dx3.x
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("buttons.plist");

//cocos2dx2.x
CCSpriteFrameCache::sharedSpriteFrameCache()-> addSpriteFramesWithFile("buttons.plist");

最初の一行目で、SpriteFrameCacheクラスを利用してプロパティリストを読み込んでいます。
ここで読み込まれた画像をSpriteクラスで利用しています。

　　　　　　　　　　　　

経営育成ゲーム「わたしの動物園」をリリースしました！

cocos2dxを使って作成したアプリを作成しました。
無料で遊べますので、ぜひゲーム作りの参考にしてみて下さい！