CinderによるiPhoneアプリケーションの作成について

CinderはThe Barbarian Groupが開発しているC++ライブラリで、Processing.orgのように画像、音声、動画、ネットワークなどを手軽に扱うことができます。CinderはMac OS X, Windows, iPad, iPhoneをサポートしており、修正BSDライセンスによって提供されています。

そこで、本記事ではCinderのiPhone向けのアプリケーションを作成する手順について簡単に説明します。環境はXcode 3.2.5, iOS SDK 4.2, Cinder 0.8.2です。

プロジェクトの作成と実行

CinderのDownloadページでCinder for Mac OS XをクリックしてZipファイルをダウンロードし、そのファイルを解凍すればよいです。

ダウンロードしたファイル内にコンパイル済みのライブラリファイルが含まれているのでコンパイルする必要はありません。

プロジェクトの作成と実行

次の手順でCinderのXcodeプロジェクトを作成します。

1. toolsにあるTinderBoxを実行する。

2. Cinderのトップレベルディレクトリを選択して[Open]をクリックする。

3. プロジェクトの名前と場所を指定する。ここではプロジェクト名はcinder_sampleにした。

4. [Target]を[Cocoa Touch]にして[Create]をクリックする。

5. Finderが開くのでディレクトリxcodeにあるxcodeのプロジェクトを開く。

6. (必要に応じて) プロジェクトの設定を変更する。手元の環境では、TinderBoxによってBase SDKの指定がiOS 4.1となっているプロジェクトが生成されましたが、Xcode内にはiOS 4.0とiOS 4.2のSDKしか入っていないためBase SDKをiOS 4.2に変更しました。

これで、[Build and Run]を行うと、シミュレータが起動して次のような立方体が回転するプログラムが実行されます。

なお、実機に落とすときはInfo.plistのBundle Identifierを適切なものに変更してください。

Cinderソース概要

生成されたソースファイルであるiphone_sampleApp.cppを見てみましょう。その中にクラスAppCocoaTouchを継承したクラスcinder_sampleAppが存在します。

class cinder_sampleApp : public AppCocoaTouch {
  public:
    virtual void    setup();
    virtual void    resize( ResizeEvent event );
    virtual void    update();
    virtual void    draw();
    virtual void    mouseDown( MouseEvent event );

    Matrix44f   mCubeRotation;
    gl::Texture mTex;
    CameraPersp mCam;
};

このクラス内には次の3つのメソッドが含まれています。

• setup()はプログラム開始時に一度だけ呼ばれる。ここでプログラム中にある変数の初期化を行う。
• update()はそれらの変数を変更する。
• draw()はウィンドウへの描画を行う。

Cinderのプログラムが起動したら、まずsetupが呼ばれてそれ以後はupdateとdrawが繰り返し呼ばれます。サンプルプログラムでは、setupで立方体のテクスチャを作成し、updateで立方体を回転させ、drawで立方体を描画させています。

例えば、次のようにdrawを変更した場合には、背景色が変化しながら6個の立方体が出たり引っこんだりするようになります。

void cinder_sampleApp::draw()
{
    float v = sin( getElapsedSeconds() );
    gl::clear( Color( 0.2f + red, 0.2f, v * 0.7f + 0.3f ) );

    gl::enable( GL_TEXTURE_2D );
    gl::enableDepthRead();

    mTex.bind();
    gl::setMatrices( mCam );
    glPushMatrix();
        gl::multModelView( mCubeRotation );
        gl::drawCube( Vec3f(    -v,  0.0f,  0.0f ), Vec3f( 1.0f, 1.0f, 1.0f ) );
        gl::drawCube( Vec3f(    +v,  0.0f,  0.0f ), Vec3f( 1.0f, 1.0f, 1.0f ) );
        gl::drawCube( Vec3f(  0.0f,    -v,  0.0f ), Vec3f( 1.0f, 1.0f, 1.0f ) );
        gl::drawCube( Vec3f(  0.0f,    +v,  0.0f ), Vec3f( 1.0f, 1.0f, 1.0f ) );
        gl::drawCube( Vec3f(  0.0f,  0.0f,    -v ), Vec3f( 1.0f, 1.0f, 1.0f ) );
        gl::drawCube( Vec3f(  0.0f,  0.0f,    +v ), Vec3f( 1.0f, 1.0f, 1.0f ) );
    glPopMatrix();
}

画像ファイルの利用

画像ファイルをテクスチャとして利用するのは非常に簡単です。まず、いつも通りXcode上のResourcesに画像を追加しておきます。そして、それをloadResourceとloadImageによって読み込んでサーフェスを作成すればよいだけです。そのときのsetupのコードを次に示します。

#include "cinder/ImageIo.h"
void cinder_sampleApp::setup()
{
    mCubeRotation.setToIdentity();

    Surface sur( loadImage( loadResource( "texture.png" ) ) );
    mTex = gl::Texture( sur );
}

マルチタッチの利用

マルチタッチも可能で、次のようなコードで使うことができます (クラスcinder_sampleAppへ宣言追加も必要です)。

void cinder_sampleApp::touchesBegan( TouchEvent event )
{
    for ( int i = 0; i < event.getTouches().size(); ++i )
        console() << "Touch #" << i << " @ " << event.getTouches()[i].getPos() << std::endl;
}

これによって、タッチしたときにデバッグコンソールに次のように表示するようになります。

Touch #0 @ [281,317]
Touch #1 @ [39,163]

まとめ

CinderのiPhone向けのアプリケーションを作成する手順について簡単に説明しました。チュートリアルやサンプルプロジェクトもZipファイル内にたくさんあるので参考になると思います。デバイス向き検出ができなかったりとiPhoneとiPadへの対応はまだ十分ではないという印象を受けましたが、今後の発展が期待できるライブラリであると思います。

関連項目

• Cinder
• Cinderのチュートリアル