Download | CinderからCINDER FOR MAC OS Xをダウンロード。114MB。

ダウンロードしたcinder_0.8.2_mac.zipを解凍。まずはWelcome.htmlを見る。samplesにあるサンプルを試してみる。サンプルが57個あるので、かなり研究しやすそう。

TinderBoxでXcodeプロジェクトを作成する。cinder/tools/TinderBoxを起動。

For Sureをクリック。ファイル選択画面になるので解凍したcinderフォルダを指定。更にSaveパネルが表示されるので、Xcodeプロジェクト名を指定。FirstCinderと指定した。プロジェクト詳細画面になるのでCreateボタンをクリック。

Xcodeプロジェクトが作成されたので、プロジェクトを開いて実行してみる。

とりあえず真っ黒。

コードを見てみる。FirstCinderApp.cppというファイルがメインのファイル。内容は以下。

#include "cinder/app/AppBasic.h"
#include "cinder/gl/gl.h"
 
using namespace ci;
using namespace ci::app;
using namespace std;
 
class FirstCinderApp : public AppBasic {
  public:
	void setup();
	void mouseDown( MouseEvent event );
	void update();
	void draw();
};
 
void FirstCinderApp::setup()
{
}
 
void FirstCinderApp::mouseDown( MouseEvent event )
{
}
 
void FirstCinderApp::update()
{
}
 
void FirstCinderApp::draw()
{
	// clear out the window with black
	gl::clear( Color( 0, 0, 0 ) );
}
 
CINDER_APP_BASIC( FirstCinderApp, RendererGl )

正規のnamespaceはcinder::だが、シノニムのci::を使うと短くて良い。ということでci::とci::appを利用するように宣言されている。

void setup()で変数を初期化。void update()で変数を更新。void draw()で描画。updateとdrawはCinderプロジェクトの中心になる。setup→update→draw→update→draw→…。

void prepareSettings()を作成するとCinderの設定を修正することができる。prepareSettingsはオプション。CinderのデフォルトWindowサイズは640×480でフレームレートは30。例えばこれを100×100と60に変更するには

void FirstCinderApp::prepareSettings( Settings *settings ){
    settings->setWindowSize( 100, 100 );
    settings->setFrameRate( 60.0f );
}

とする。と、こうなる。

これでは狭いので、800×600に変更。

draw()ではgl::clear( Color( 0, 0, 0 ) );でキャンバスを黒で塗っている。Color(1.0,1.0,1.0)で白になる。void clear (const ColorA &color=ColorA::black(), bool clearDepthBuffer=true)なので、引数に何も指定しなければ黒が利用される。また、depth bufferもクリアされる。

float gray = sin( getElapsedSeconds() ) * 0.5f + 0.5f;
gl::clear( Color( gray, gray, gray ), true );

とすると、grayが0.0から1.0を行き来して描画される。つまり白と灰色と黒を行き来する。