先日のポストで「TouchDesigner Remoteがリリースされたことで、TouchDesignerでUIを構築する意味が大きくなった」と書きましたが、スライダーやノブなどの部品がブラウザーにライブラリ化されているものの、１つのパネルにまとめるのはパラメータウィンドウで数値をチクチク調整する作業で、結構面倒だったりします。そんな面倒なUIパネルの作成を直感的にしてくれるのが、UIg（ユーザーインタフェース・ジェネレータ）というコンポーネントです。このコンポーネントを作成したシーンに組み込むことで、フローティングウィンドウからドラッグ＆ドロップでUI部品を組み込み、レイアウトすることができます。今回はこのUIgコンポーネントの簡単な組み込み方法を紹介します。

●UIgコンポーネントのシーンへの組み込み

まず、後々のメンテナンスも考慮して作成したシーンをContainer COMPで１まとめにしておきます。その際にUIでコントロールしたいパラメータをIn CHOPで外部入力できるようにCHOPネットワークを仕込んでおきます。また、入力される数値のレンジを0~1のレンジになるようにしておきます。（UIgに限らず、外部デバイスを使用してコントロールする場合、入力値のレンジが0~1の場合が多いので、こうした習慣をつけてシーンを作成しておくと、ライブラリ化が後で楽になります）

コンテナに１まとめにしたものを更にContainer COMPで入れ子にします。入れ子にしたコンテナがシーン・ネットワークのトップノードに置かれた状態にします。（トップノードにはデフォルトで４つのコンテナがありますが、これらはデフォルトで作成される、各種設定を定義するものです。）

UIgコンポーネントは予めTouchDesignerのBrowserにライブラリとして登録されています。TouchDesignerの Build更新以外でもコンポーネント単体での更新もされています。ここで紹介する手順はUIg33バージョンを例にしています。確認したところ、Build11660以前のものでは古いコンポーネントがライブラリに組み込まれていました。TouchDesignerのBuildが11660以前の場合は、こちらよりコンポーネントをダウンロードして、メニューバーからDialog>Explorerを選択して、エクスプローラーからダウンロードしたコンポーネント・ファイル（.toxファイル）をネットワークウィンドウにドラッグ＆ドロップします。※コンポーネントファイルはデスクトップ以外の場所に置きます。TouchDesignerのライブラリのコンポーネントを使用する場合は、BrowserからUI>uigをネットワークウィンドウへドラッグ＆ドロップします。

コンポーネントをドラッグ＆ドロップすると、新たにuigというコンテナが追加され、作成したシーンが入れ子になったコンテナと点線のワイヤで接続されます。（コンテナのコンポーネント名がデフォルトのproject1の場合）
点線のワイヤが接続されない場合は後述するフローティングウィンドウでEdit画面に切り替えて、ウィンドウ上部のテキストボックスに入れ子になったコンテナのパスを記述します。（例：入れ子になったコンテナの名前がtest1の場合、/test1 と記述します。）
ワイヤが接続されれば、UIgコンポーネントの組み込みは完了です。

●UIgコンポーネントの使用方法

uigコンポーネント上で右クリックでポップアップメニューを表示して、View…を選択します。フローティングウィンドウでビューワーが表示されます。このフローティングウィンドウをツールメニューとして使用してUIを作成します。
作成したシーンが入れ子になっているコンテナをダブルクリックして、コンテナ内へ移動します。表示されている、ボタンやスライダーをネットワークウィンドウへドラッグ＆ドロップすると、各UI部品のコンポーネントがネットワークに追加されます。各コンポーネントのアウトプットコネクタと作成したシーンのコンテナのインプットコネクタを接続すると、UIとシーンのパラメータが関連付けられます。UIのコンポーネントを選択して、ノードの右下にあるViewer Activeをアクティブにすると、UIを操作することができます。

フローティングウィンドウ上部のEditを選択すると、レイアウト画面に切り替わります。この画面ではUIパネルのサイズ（ウィンドウ上部のw/h）と各UIのサイズと位置（ウィンドウ下部）を設定することができます。画面上のUIを選択白色になり、そのままドラッグするとレイアウトを変更することができます。数値で細かく調整したい場合はウィンドウ下部のx/yを使用します。UIのサイズ変更はw/hを使用します。

フローティングウィンドウ上部のOperateを選択すると、UIパネルとして操作することができます。ウィンドウのサイズ、UIのサイズと位置も変更できますが、UIは変更対象が最後に選択したUIになります。

簡単ですがUIgコンポーネントの使用法を紹介しました。直感的にいろいろいじった設定は、全てOPネットワークとして、uigコンポーネント以下のネットワークに構築されます。自分の作成したネットワークにはOPなどは追加されないので、後で作成した部分だけ入れ替えるということも可能です。登録されているUIに関しては、実際にネットワークにドラッグ＆ドロップして挙動を試してみてください。気に入らなければ、UIコンポーネントを選択して削除するだけでOKです。大まかなレイアウトだけUIgで手早く作成して、挙動の設定などはOPをいじってカスタマイズする、といった使い方もできるのではないかと思います。