Kei Osumi – ページ 4

cocos2d-xメモリの管理

くまのがっこう神経衰弱バトル

画像や効果音を読みっぱなしにするとメモリを消費して古い機種などではアプリケーションが落ちてしまいます。そこでこまめにキャッシュを削除して消費メモリを抑える努力をしています。

くまのがっこう神経衰弱バトルはiPod 4 (iOS 6.1)メモリ256Mもサポートしているのでメモリはおよそ80Mを下回るようにしています。80Mを超えたあたりからmemory warningが出はじめます。iPhone 5以上ならそのようなことはありませんのでサポートする機種に合わせて目標値を決めれば良いとおもいます。

くまのがっこう神経衰弱バトルでは画像と効果音を大きく３つに分けて管理しています。

各シーン毎の画像／効果音
ゲーム共通の画像／効果音
アプリケーション共通の画像／効果音

cache

１．各シーン毎の画像／効果音は、シーンの開始時にキャッシュに読み込んで、そのシーンが終了するときにキャッシュを破棄します。主にシーン専用の背景画像やキャラクター、BGMなどです。

２．ゲーム共通の画像／効果音は、１２ステージあるゲームの開始時にキャッシュに読み込んで全ステージを終了したときにキャッシュを破棄します。主にゲームのスコア表示やフレーム、ゲームエフェクトなど全ステージで共通の画像です。

３．のアプリケーション共通の画像／効果音は、アプリケーションを起動したときにキャッシュに読み込んで、アプリケーションが終了するまでキャッシュを破棄しません。主に全体で使用するボタン類、メッセージなどです。

シーン毎の画像／効果音のキャッシュへの読み込みと削除はコンストラクタとデストラクタで行っています。

HelloWorldScene.h

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
#include "SimpleAudioEngine.h"

USING_NS_CC;
using namespace CocosDenshion;

class HelloWorld : public cocos2d::Layer
{
private:
    
public:
    static cocos2d::Scene* createScene();
    virtual bool init();
    CREATE_FUNC(HelloWorld);
    
    HelloWorld()
    {
        // 画像のキャッシュを生成（スプライトシートからの読込み）
        SpriteFrameCache::getInstance()->addSpriteFramesWithFile("HelloWorld.plist");
        
        // 効果音のキャッシュを生成
        SimpleAudioEngine::getInstance()->preloadEffect("hello.mp3");

    }
    
    ~HelloWorld()
    {
        // テクスチャを削除して画像のキャッシュを破棄
        Director::getInstance()->getTextureCache()->removeAllTextures();
        SpriteFrameCache::getInstance()->removeSpriteFramesFromFile("HelloWorld.plist");
        
        // 効果音のキャッシュを削除
        SimpleAudioEngine::getInstance()->unloadEffect("hello.mp3");
    }
};

#endif // __HELLOWORLD_SCENE_H__

#ifndef __HELLOWORLD_SCENE_H__

#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

#include "SimpleAudioEngine.h"

USING_NS_CC;

using namespace CocosDenshion;

class HelloWorld : public cocos2d::Layer

{

private:

public:

static cocos2d::Scene* createScene();

virtual bool init();

CREATE_FUNC(HelloWorld);

HelloWorld()

{

// 画像のキャッシュを生成（スプライトシートからの読込み）

SpriteFrameCache::getInstance()->addSpriteFramesWithFile("HelloWorld.plist");

// 効果音のキャッシュを生成

SimpleAudioEngine::getInstance()->preloadEffect("hello.mp3");

}

~HelloWorld()

{

// テクスチャを削除して画像のキャッシュを破棄

Director::getInstance()->getTextureCache()->removeAllTextures();

SpriteFrameCache::getInstance()->removeSpriteFramesFromFile("HelloWorld.plist");

// 効果音のキャッシュを削除

SimpleAudioEngine::getInstance()->unloadEffect("hello.mp3");

}

};

#endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp

#include "HelloWorldScene.h"

USING_NS_CC;

Scene* HelloWorld::createScene()
{
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    
    // 画像を表示
    auto image = Sprite::createWithSpriteFrameName("HelloWorld.png");
    this->addChild(image);
    
    // 効果音を再生
    SimpleAudioEngine::getInstance()->playEffect("hello.mp3");
    
    return true;
}

#include "HelloWorldScene.h"

USING_NS_CC;

Scene* HelloWorld::createScene()

{

auto scene = Scene::create();

auto layer = HelloWorld::create();

scene->addChild(layer);

return scene;

}

bool HelloWorld::init()

{

if ( !Layer::init() )

{

return false;

}

// 画像を表示

auto image = Sprite::createWithSpriteFrameName("HelloWorld.png");

this->addChild(image);

// 効果音を再生

SimpleAudioEngine::getInstance()->playEffect("hello.mp3");

return true;

}

この場合にシーンを切り替えた次のシーンでも同じHelloWorld.plistを使用していると現在のシーンのデストラクタにキャッシュが削除されてしまいエラーになりますので注意してください。

またシーンの切り替え中は現在のシーンと次のシーンのキャッシュ両方を同時に持つ事になるのでメモリの使用量は2重になりますので注意してください。

scene

キャッシュの設計を終えたら実際に動かしてXcodeのデバッグナビゲータを使ってメモリの使用量を測定して何処で何がメモリを喰っているか分析します。

memory

メモリを多く消費するところがある場合には画像の読み込みと破棄のタイミングを個別に調整してメモリの消費を抑えています。

古い機種を切り捨てればここまで神経を使わなくてもいいのかな…

Pocket

cocos2d-x共通の処理

Pocket

くまのがっこう神経衰弱バトル

全てのシーンで共通の処理をどのうように実装するかいろいろ考えて試しました。

はじめにAppDelegate.hとAppDelegate.cppに変数や関数を宣言して各シーンから呼び出してみたのですが、iPhoneでは問題なく動作しましたがAndroidでバックグラウンドに落としてからフォアグラウンドに戻ったときにAppDelegate.cpp内で宣言した変数の値が初期化されてしまうケースがありましたのでやめました。

つぎに、シーンの元になるクラスを作って全てのシーンがそれを継承する形でつくってみました。

AppFrame.h

#ifndef __hello__AppFrame__
#define __hello__AppFrame__

#include "cocos2d.h"

USING_NS_CC;

class AppFrame : public LayerColor
{
protected:
    
    /* ここに共通の処理を書く */
    
    // 例）unix時間を応答する関数
    double unixtime();
    
public:
    virtual bool init();
    CREATE_FUNC(AppFrame);
};

#endif /* defined(__hello__AppFrame__) */

#ifndef __hello__AppFrame__

#define __hello__AppFrame__

#include "cocos2d.h"

USING_NS_CC;

class AppFrame : public LayerColor

{

protected:

/* ここに共通の処理を書く */

// 例）unix時間を応答する関数

double unixtime();

public:

virtual bool init();

CREATE_FUNC(AppFrame);

};

#endif /* defined(__hello__AppFrame__) */

AppFrame.cpp

#include "AppFrame.h"

bool AppFrame::init()
{
    if (!LayerColor::initWithColor(Color4B(0, 0, 0, 0)))
    {
        return false;
    }
    
    return true;
}

// unix時間を応答する関数
double AppFrame::unixtime()
{
    struct timeval t;
    gettimeofday(&t, NULL);
    return (double)t.tv_sec + (double)t.tv_usec / 1000000;
}

#include "AppFrame.h"

bool AppFrame::init()

{

if (!LayerColor::initWithColor(Color4B(0, 0, 0, 0)))

{

return false;

}

return true;

}

// unix時間を応答する関数

double AppFrame::unixtime()

{

struct timeval t;

gettimeofday(&t, NULL);

return (double)t.tv_sec + (double)t.tv_usec / 1000000;

}

シーンを作るときにはこれを継承して

HelloScene.h

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
#include "AppFrame.h"

USING_NS_CC;

// AppFrameを継承したクラスにする
class HelloWorld : public AppFrame
{
private:
    
public:
    static cocos2d::Scene* createScene();
    virtual bool init();
    CREATE_FUNC(HelloWorld);
};

#endif // __HELLOWORLD_SCENE_H__

#ifndef __HELLOWORLD_SCENE_H__

#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

#include "AppFrame.h"

USING_NS_CC;

// AppFrameを継承したクラスにする

class HelloWorld : public AppFrame

{

private:

public:

static cocos2d::Scene* createScene();

virtual bool init();

CREATE_FUNC(HelloWorld);

};

#endif // __HELLOWORLD_SCENE_H__

HelloScene.cpp

#include "HelloWorldScene.h"

Scene* HelloWorld::createScene()
{
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init()
{
    // AppFrameを初期化する
    if (!AppFrame::init())
    {
        return false;
    }
    
    // 共通処理を実行
    log("%f", unixtime());
    
    return true;
}

#include "HelloWorldScene.h"

Scene* HelloWorld::createScene()

{

auto scene = Scene::create();

auto layer = HelloWorld::create();

scene->addChild(layer);

return scene;

}

bool HelloWorld::init()

{

// AppFrameを初期化する

if (!AppFrame::init())

{

return false;

}

// 共通処理を実行

log("%f", unixtime());

return true;

}

とりあえずこれでうまく動いているのでこれでゲームを作っています。

Pocket

cocos2d-x画像の表示と解像度

Pocket

くまのがっこう神経衰弱バトル

様々なディスプレイのサイズに合わせてゲームをつくるのにはどうしたらよいのでしょうか。書籍などには様々な設定方法とその表示結果が紹介されていますが結局どれを選択したらよいのか？できるだけ手間をかけずに対応したかったので以下の条件でいろいろ試しました。

ゲーム画面のデザインが簡単
プログラムへの画像の組み込みが簡単
解像度に関係なく用意する画像は1つにしたい
スマホだけ考えてタブレットの画質は考慮しない

その結果、ゲーム画面は以下のルールで作成することに決めました。

ゲーム画面は640 x 1136 pxで設計
画像の座標は640 x 1136 pxの中央を原点とする
ゲームの操作は中央を原点とした640 x 960 pxの範囲内にする

このルールで作られた画像をResolutionPolicy::NO_BORDERでディスプレイにフィットさせて表示しています。

game_display

実際にこの条件で作った画面をiPhone 4, iPhone 5s, nexus 5で表示してみて操作と画質に問題がないと判断してこの仕様に決めました。iPhone 4をサポートしていることもありますがiPadで操作できないとappleの審査でリジェクトされるのでゲームの操作は640 x 960 pxの範囲内で可能にしています。

AppDelegate.h

横画面のとき
#define APP_VIEW_WIDTH   1136
#define APP_VIEW_HEIGHT  640

縦画面のとき
#define APP_VIEW_WIDTH   640
#define APP_VIEW_HEIGHT  1136

横画面のとき

#define APP_VIEW_WIDTH 1136

#define APP_VIEW_HEIGHT 640

縦画面のとき

#define APP_VIEW_WIDTH 640

#define APP_VIEW_HEIGHT 1136

AppDelegate.cpp

glview->setDesignResolutionSize(APP_VIEW_WIDTH, APP_VIEW_HEIGHT, ResolutionPolicy::NO_BORDER);

1	glview->setDesignResolutionSize(APP_VIEW_WIDTH, APP_VIEW_HEIGHT, ResolutionPolicy::NO_BORDER);

画像の位置は画面の中央を原点にしてデザインしています。

game_design

画面のデザインもプログラムへの画像の組み込みも中央が原点の方が直感的に解りやすいのでこの方法に決めました。

プログラムで画像の座標を指定するときは中央が原点の座標を画面の原点へ変換する関数を使用しています。左端と右端を原点とした座標の変換も実装しています。

HelloWorldScene.h

#include "cocos2d.h"
#include "AppDelegate.h"

USING_NS_CC;

class HelloWorld : public Layer
{
private:
    
    // 画面の座標を中心に変換する関数
    Point cntr(int x, int y);
    Point left(int x, int y);
    Point right(int x, int y);
    
public:
    static Scene* createScene();
    virtual bool init();
    CREATE_FUNC(HelloWorld);
};

#include "cocos2d.h"

#include "AppDelegate.h"

USING_NS_CC;

class HelloWorld : public Layer

{

private:

// 画面の座標を中心に変換する関数

Point cntr(int x, int y);

Point left(int x, int y);

Point right(int x, int y);

public:

static Scene* createScene();

virtual bool init();

CREATE_FUNC(HelloWorld);

};

HelloWorldScene.cpp

#include "HelloWorldScene.h"

Scene* HelloWorld::createScene()
{
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    
    // 画像を画面中央に表示
    auto imageCenter = Sprite::create("HelloWorld.png");
    imageCenter->setPosition(cntr(0, 0));
    imageCenter->setScale(0.5);
    this->addChild(imageCenter);
    
    // 画像を画面左端に表示
    auto imageLeft = Sprite::create("HelloWorld.png");
    imageLeft->setPosition(left(0, 0));
    imageLeft->setScale(0.5);
    this->addChild(imageLeft);
    
    // 画像を画面右端に表示
    auto imageRight = Sprite::create("HelloWorld.png");
    imageRight->setPosition(right(0, 0));
    imageRight->setScale(0.5);
    this->addChild(imageRight);
    
    return true;
}

// 中心からの座標を計算
Point HelloWorld::cntr(int x, int y)
{
    return Point(APP_VIEW_WIDTH / 2 + x, APP_VIEW_HEIGHT / 2 + y);
}

// 左端からの座標を計算
Point HelloWorld::left(int x, int y)
{
    // デザインの画面サイズと実際の画面サイズの差を計算
    Size visibleSize = Director::getInstance()->getVisibleSize();
    int d = (APP_VIEW_WIDTH - visibleSize.width) / 2;
    
    return Point(d + x, APP_VIEW_HEIGHT / 2 + y);
}

// 右端からの座標を計算
Point HelloWorld::right(int x, int y)
{
    // デザインの画面サイズと実際の画面サイズの差を計算
    Size visibleSize = Director::getInstance()->getVisibleSize();
    int d = (APP_VIEW_WIDTH - visibleSize.width) / 2;
    
    return Point(APP_VIEW_WIDTH - d - x, APP_VIEW_HEIGHT / 2 + y);
}

#include "HelloWorldScene.h"

Scene* HelloWorld::createScene()

{

auto scene = Scene::create();

auto layer = HelloWorld::create();

scene->addChild(layer);

return scene;

}

bool HelloWorld::init()

{

if ( !Layer::init() )

{

return false;

}

// 画像を画面中央に表示

auto imageCenter = Sprite::create("HelloWorld.png");

imageCenter->setPosition(cntr(0, 0));

imageCenter->setScale(0.5);

this->addChild(imageCenter);

// 画像を画面左端に表示

auto imageLeft = Sprite::create("HelloWorld.png");

imageLeft->setPosition(left(0, 0));

imageLeft->setScale(0.5);

this->addChild(imageLeft);

// 画像を画面右端に表示

auto imageRight = Sprite::create("HelloWorld.png");

imageRight->setPosition(right(0, 0));

imageRight->setScale(0.5);

this->addChild(imageRight);

return true;

}

// 中心からの座標を計算

Point HelloWorld::cntr(int x, int y)

{

return Point(APP_VIEW_WIDTH / 2 + x, APP_VIEW_HEIGHT / 2 + y);

}

// 左端からの座標を計算

Point HelloWorld::left(int x, int y)

{

// デザインの画面サイズと実際の画面サイズの差を計算

Size visibleSize = Director::getInstance()->getVisibleSize();

int d = (APP_VIEW_WIDTH - visibleSize.width) / 2;

return Point(d + x, APP_VIEW_HEIGHT / 2 + y);

}

// 右端からの座標を計算

Point HelloWorld::right(int x, int y)

{

// デザインの画面サイズと実際の画面サイズの差を計算

Size visibleSize = Director::getInstance()->getVisibleSize();

int d = (APP_VIEW_WIDTH - visibleSize.width) / 2;

return Point(APP_VIEW_WIDTH - d - x, APP_VIEW_HEIGHT / 2 + y);

}

sample1 私たちはこのような方法でゲームをデザインしています。

Pocket