Shut the fuck up and write some code

グダグダ言わずにコードを書きたいブログ

ofxGUIの使い方

openFrameworks 0.8から標準でインストールされているofxGUI。簡単にUIの実装が出来る・・・はずだが、詳しい使い方がわからず・・・orz。ググってもロクな情報が出てこないので、サンプルから推測した使い方をまとめておく。(exampleフォルダに入っているguiExamepleを参考にしてください)

使いたいUIの定義

まず各UIを格納するためのパネルを定義する必要がある

ofxPanel gui;

ここに各UIアイテムを追加することになる。

UIは分かる範囲で2つ。

ofParameterは横長の可変バーのUIで サンプルを見る限り、int、floatの他、vectorやRGBなども備わっている。Stringの場合はバーではなく単なるラベルとなる。

ofParameter<float> radius;
ofParameter<ofColor> color;
ofParameter<ofVec2f> center;
ofParameter<int> circleResolution;
ofParameter<bool> filled;
ofParameter<string> screenSize;

ofxButtonはチェックボックス

ofxButton twoCircles;

UIの設定

UIを呼ぶ前にデフォルトの設定を指定してやる。 フォント、padding、パーツの縦幅、横幅などを指定する

ofxGuiSetFont("Questrial-Regular.ttf",10,true,true);
ofxGuiSetTextPadding(4);
ofxGuiSetDefaultWidth(300);
ofxGuiSetDefaultHeight(18);

表示するパネル名を指定してメインとなるパネル部分を初期化。

gui.setup("panel"); 

addメソッドで各UIを追加してやる

//Booleanの場合変数.set(表示名前,デフォルト値)
gui.add(filled.set("bFill", true));

//数値の範囲がある場合、変数.set(表示名前,初期位置,min,max)
gui.add(radius.set( "radius", 140, 10, 300 ));

//buttonの初期かはsetupメソッドで行う
gui.add(twoCircles.setup("twoCircles"));

このままaddすると最初に指定したdefaultのサイズでUIが生成されるが、サイズを変えたいなどadd前に随時ofxGuiSetDefaultWidthなどを呼び直してサイズを再度指定し直してやる。

各パーツには値が変わった場合に呼ばれるイベントハンドラでコールバック先を指定することが可能。、

circleResolution.addListener(this, &testApp::circleResolutionChanged);
ringButton.addListener(this,&testApp::ringButtonPressed);

UIの描画

表示させるためにはdrawメソッド内でUIのdrawメソッドを呼ぶ。

gui.draw();

値の取得

定義した変数名のまま取得出来る。

その他

表示位置はsetPositionで変更出来る

gui.setPosition(10, 200);

自分はiOS版で試していたのだが、PC版でもほぼ同じだと思う(むしろPC版が通常か)。iOS版だとorientationで向きを変えると操作不能になる・・・タッチの座標が正しくとれてないのかも。


閑話休題。現時点ではoFの敷居は高いなあと改めて思う。あまりにも不明点が多く良く詰まるので、情報が集まりやすくして自分みたいな初心者でもすぐ出来るような環境が無いのが痛い。まあ周りに気楽に質問出来る人がいればいいのだけど、自分のように一人で黙々とやっている環境の人も多いだろうし。 同じC++系のフレームワークでスマホゲーム用ですがCocos2D-Xというものがあります。こちら歴史は浅いフレームワークですが、本もバカバカ出版されていて、コミュニティもあって、環境は整ってる。oFはニーズがそれほど無いというのも差し引いても、書籍は無いし(日本語版は事実上1冊だけ!)情報が得にくい。せっかく使いやすいフレームワークを作っているのだから、もっとカジュアルに触れるようになることを願うものの、現実はDIYで自力で何とかやっていくしか方法は無さそう。

日本の公式サイトは取り急ぎ0.8版にアップデートすべきだw