top of page

SHUHEI MATSUYAMA

TouchDesigner 上で、UIを作成する

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

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

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

https://www.dropbox.com/s/mmiu2i8ybuvw9i3/ui1.toe?dl=0

まず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