vvvv gamma入門 - 9 GUI

vvvvでGUIを表示するにはImGUIを使います。
基本的な使い方はヘルプパッチが充実しているのでそちらを参照してください。

ImGuiのヘルプ

今回は以上!
…と終われれば良かったのですが、Strideで使う場合に少し躓いたのでTipsをメモしておきます。

StrideでImGuiを使うヘルプパッチがあります。

ImGui inStride

HowTo ImGui in Stride

ただこちらのヘルプパッチはImGuiのSceneWidgetを用いてStrideのシーンを表示しています。
言わばImGuiの中にStrideを表示している様なイメージです。
vvvvで作ったアプリを全画面表示してデバッグ用のUIを表示したいケースが多いと思います。つまりStrideの中にImGuiを表示する様なイメージです。

ということで試行錯誤した結果こんなパッチになりました。
CreateとResetというボタンを配置し、Createボタンを押すとBoxがランダム位置に作成されます。Resetボタンを押すと配置したBoxをすべて消します。
ついでにBoxの数をボタンの下に表示しています。

StrideとImGui

StrideとImGui

ポイントはGroupノードです。1つ目にStrideのシーンをSceneTexture、FullscreenQuadRendererのコンボで表示したものを繋ぎ、2つ目にImGuiの表示を繋ぎます。

また、ImGuiを使うとSceneWindowではなくRenderWindowでレンダリング結果を表示することになります。SceneWindowをマウス操作するとOrbitCameraを動かしてくれますが、RenderWindowはデフォルトではOrbitCameraを動かしてくれません。
そこで、CameraInputSourceComponent、CameraInputSourceSceneRendererという2つのノードを使うことで、RenderWindowでもOrbitCameraを動かせるようになります。
CameraInputSourceComponentの出力はOrbitCameraのInputSourceに繋ぎます。OrbitCameraのInputSourceは非表示になっているのでConfigureで表示させます。
CameraInputSourceSceneRendererの出力はGroupノードに繋ぎます。
InputSourceというものがドキュメントが見当たらないので、いまいち何なのかはっきりしませんが、CameraInputSourceComponentが自身が繋がっているウィンドウの入力をよしなに取ってきて処理しているのだと思われます。

RenderWindowでOrbitCameraを操作する

OrbitCameraのInputSourceピンを表示させる

ついでにSwitchでGUIを表示/非表示させる様にも出来ます。デバッグメニューなどで使えそうです。

Switchで表示/非表示

今回は以上です!
それでは次回の記事で!