Cinder標準のInterfaceGlでそこそこイケてるUIをつくる

  • 6
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

Cinderについては『Cinderがすごい話 - Qiita』がいい感じにまとまっているのでどうぞ.


CinderにはInterfaceGlというUIライブラリが付属しています(実体はAntTweakBarのラッパー).
こいつがそこそこいけてるので,Cinder v0.9.0のsamples/ParamsBasic/src/ParamsBasicApp.cppから派手なやつをピックアップして紹介します.

前準備

InterfaceGl(のRef)をプライベートフィールドで持っておく.draw()関数内の適当な場所でInterfaceGldraw()しておく.

class SampleApp : public App {
public:
  // snip.

private:
  params::InterfaceGlRef mParams;

  // snip.
};
void SampleApp::setup() {
  mParams = params::InterfaceGl::create( getWindow(), "App parameters", toPixels( ivec2( 200, 300 ) ) );

// snip.
}
void SampleApp::draw() {
  // snip.

  mParams->draw();
}

この後に出てくるaddParamaddTextaddButtonはドコから呼び出しても大丈夫.実際に描画されるのはInterfaceGl#draw()を読んだ時なので,無理にアプリのdraw()でやるひつようもない.

数値

お前それでどこで使うねんと言いたくなる感じのかっこいいマウスぐるぐる操作で値をいじることができる.

3255b544-05e6-4472-b4a1-682041019db1.gif

float mObjSize;

// snip.

mParams->addParam("Cube Size", &mObjSize)
  .min(0.1f)
  .max(20.5f)
  .keyIncr("z")
  .keyDecr("Z")
  .precision(2)
  .step(0.02f);

注. 適宜コードを整形してます

回転

マウスぐるぐるでオブジェクト回転させたり.

51b21b18-f49d-48b7-80b2-fe70dacb45bf.gif

quat mObjOrientation;

// snip.

mParams->addParam("Cube Rotation", &mObjOrientation);

quatはクォータニオン.GLMの実装を利用している.

RGB/HSVとAlpha値を数値弄るのと同じようにぐりぐりできる.すぐ上に色のプレビュー出てて便利.

58ae9385-6120-43b9-8133-9dda1087e770.gif

ColorA mColor;

// snip.

mParams->addParam("Cube Color", &mColor);

ColorAはそのまま,透明度付きの色情報.いろんなとこでおなじようにつかえるよ.

方向

クォータニオンと同じような感じでベクトルもぐりぐりできる.3次元以外のベクトルだとどうなるかは試してないので不明.

38733983-1045-4c38-9bba-46d523c59a98.gif

vec3 mLightDirection;

// snip.

mParams->addParam( "Light Direction", setter, getter );

SelectBox(ComboBox,Spinner的な)

vector<string>を渡せばセレクトボックス的なアレもシュッと作れる.

92b3f32d-9678-4439-9196-308ab6a64924.gif

vector<string> mEnumNames;
int mEnumSelection;

// snip.

mParams->addParam( "an enum", mEnumNames, &mEnumSelection )
  .keyDecr( "[" )
  .keyIncr( "]" )
  .updateFn( [this] { console() << "enum updated: " << mEnumNames[mEnumSelection] << endl; } );

最後にupdateFn()がチェインされてるけど,これはどのaddParam()でも共通に使えるやつ.値が更新された時に渡された関数が呼び出される.サンプルの通り,lambdaでもいいしbindしてもいい.

所感

Pros

  • ベクトル・クォータニオンぐりぐり系UIが超便利
  • メソッドチェインできる系APIも扱いやすい

Cons

  • 複数のウィンドウをキレイに並べる方法がわからなかった
  • マルチバイト文字が使えないらしい

最終的にInterfaceGlではなくCinder-ImGuiを採用した.

References