Please reload

最新記事
TouchDesigner
     チュートリアル

TouchDesigner 上で、UIを作成する

January 4, 2016

ここでは 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を構成することもできます  。

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

Please reload

ソーシャルメディア
Please reload

タグから検索
Please reload

アーカイブ
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square