top of page

SHUHEI MATSUYAMA

TouchDesigner 上で、UIを作成する

ここでは touchdesigner 上でUIを 作る方法について説明します。

touchdesigner では簡単にUIを作成し、プログラムをコントロールすることができます。

今回作成した プログラムは 以下のリンクから入手できます。

まずBotton CMOPを作成してください。

そして右からの出力にNull CHOPを接続します.

Botton CMOP をアクティブにし、 ボタンの部分をクリックしてみてください.

ボタンを押すと 1が出力されます、 もう一度押すと0に戻ります。

デフォルトではボタンのタイプはtoggle downになっています。

パラメーターのBotton タブを選び Botton typeからボタンのタイプを変更することができます。

モメンタリーに変更してみてください

モメンタリーでは、ボタンがおされている間のみ1を出力します。

次にSlider COMPを作成してください

Slider COMPの右の出力にNull CHOPを接続します。

Slider COMPをアクティブにし、スライダーをドラック&ドロップで動かしてみてください

スライダーが中心にいる時は0.5出力します。

左にいる時は0、右に行くと1を出力します。

UIから出力される値を 他のオペレーターに代入することでUIを使ってプログラムを制御することができます

ここでは,先ほど作成したUIを使った簡単なプログラムを作成してみます。

Constant top を2つ作成します。色を赤と青に設定しました。

次にSwitch TOP、 Cross TOPを作成します

Switch TOP Cross TOPにそれぞれconstant top2つを入力します

以下のような状態になります。

ボタンからnullへ出力されている値をスイッチへ代入します

また同じように スライダーから出力されている値をcross TOPのcrossパラメーターに代入します 。

ボタンとスライダーをそれぞれ動かしてみてください。

Switch TOPでは 接続された topの 出力が変更されます。

Cross TOPでは 入力された二つのTOPが ミックスされた 画像が出力されます

このような要領で UI作成していきます 。

簡単ですが、UIの作り方の基礎は以上です。

より複雑のUIを作る際には 複数のボタンを 1つの まとまりとして UIを構成することもできます 。

応用的な使い方については、また別の機会に説明したいと思います

TouchDesigner
     チュートリアル
最新記事
アーカイブ
タグから検索
ソーシャルメディア
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square
bottom of page