• TOP
  • >
  • その他
  • >
  • 画像を高速で表示する

画像を高速で表示する

画像を表示する際にはCCSpriteクラスを利用して行なってきました。

//cocos2dx2.x
CCSprite*sprite = CCSprite::create("star.png");
addChild(sprite);

//cocos2dx3.x
auto sprite = Sprite::create("star.png");
this->addChild(sprite);

もし、この方法で沢山のスプライトを作るとメモリーに負荷がかかり、画面が遅くなる恐れがあります。
今回は紹介するCCSpriteBatchNodeクラスは、この画像を表示のメモリーの負荷を抑えることができます。

具体的な使い方

CCSpriteBatchNodeクラスの使い方は以下のようなコードになります。
//cocos2dx3.x
auto batch = SpriteBatchNode::create("star.png");
this->addChild(batch);
    
for (int i= 0; i < 10000; i++) {
        
   auto hoge = Sprite::createWithTexture(batch->getTexture());
   hoge->setPosition(Point(0+CCRANDOM_0_1()*400,0+CCRANDOM_0_1()*400));
   this->addChild(hoge);
}


//coocs2dx2.x
CCSpriteBatchNode *batch = CCSpriteBatchNode::create("star.png");
this->addChild(batch,0);
    
for (int i = 0; i<100; i++) {
         
    CCSprite *sprite = CCSprite::createWithTexture(batch->getTexture());
    sprite->setPosition(ccp(0+CCRANDOM_0_1()*100*i,0+CCRANDOM_0_1()*300));
    addChild(sprite);

        
}


CCSpriteBatchNodeの使い方

CCSpriteBatchNodeクラスを使って、前もっと画像データを読み込みます。
これを行うことで、今後同じ画像データが呼ばれた時のメモリーの負担が少なくなります。
//前もっと画像データを読み込みます
//cocos2dx3.x
auto batch = SpriteBatchNode::create("star.png");
this->addChild(batch);

//cocos2dx2.x
CCSpriteBatchNode *batch = CCSpriteBatchNode::create("star.png");
this->addChild(batch,0);

CCSprite

実際に画像を表示する際に、CCSpriteBatchNodeクラスから画像を利用します。
//cocos2dx3.x
auto sprite = Sprite::createWithTexture(batch->getTexture());

//cocos2dx2.x
CCSprite *sprite = CCSprite::createWithTexture(batch->getTexture());

CCSpriteBatchNodeクラスを使う時の注意点

CCSpriteBatchNodeクラスは万能というわけではなく、以下のような欠点があります。
これに注意をして利用しましょう。
  • Z値の変更ができない。
  • CCSpriteBatchNodeクラスで読み込んだ画像データしか利用できない。

Z値の変更ができない。

CCSpriteBatchNodeクラスを読み込んだ時のZ値を利用する。CCSpriteを作成時に変更できない。
//この場合はZ値は0
CCSpriteBatchNode *batch = CCSpriteBatchNode::create("star.png");
this->addChild(batch,0);


CCSpriteBatchNodeクラスで読み込んだ画像データしか利用できない。

当然ながら、CCSpriteBatchNodeを利用した画像データしか利用できません。

個人的な感想

端末の処理速度が上がっているので、このSpriteBatchNodeを使わなくても高速で画像を表示できるようになっています。
【実験】
    auto batch = SpriteBatchNode::create("HelloWorld.png");
    this->addChild(batch);
    
    for (int i= 0; i < 10000; i++) {
        
        //SpriteBatchNodeを使う
        auto hoge = Sprite::createWithTexture(batch->getTexture());
        hoge->setPosition(Point(0+CCRANDOM_0_1()*400,0+CCRANDOM_0_1()*400));
        this->addChild(hoge);
        
     //SpriteBatchNodeを使わない
        //auto hoge = Sprite::create("HelloWorld.png");
        //hoge->setPosition(Point(0+CCRANDOM_0_1()*400,0+CCRANDOM_0_1()*200));
        //this->addChild(hoge);

        
    }




【結果】iPod(iOS7.1)
使った場合[0.287901秒]
使わなかった場合[0.443091秒]

確かに速度は速くなりますが、同じ画像を10000回同時に表示させる場面は多くありません。
用途によって使っていきましょう。

            

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

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

【Sponsored Link】

更新履歴