TouchDesigner でのドラッグ&ドロップについて

概要

TouchDesignerでのドラッグアンドドロップについて学んでいきます。

公式Wiki

TouchDesignerでのD&D

読み込み可能ファイルのインポート

ネットワークエディタに対してTouchDesignerで読み取れるファイル形式をドロップすることで対応するオペレータでそのファイルを読み取れるのはよく知られていると思います。

オペレータをエクスポート

ネットワークエディタ上にあるオペレータをデスクトップなどにドロップすると対応するファイル形式で保存されます。

ほかのTouchDesignerのネットワークエディタにコピー

サンプルファイルから引っ張ってくるときとかに便利
(なぜか接続切れたところがありますが…)

Panel Components でのD&D

上記の例はネットワークエディタ上で行えるものですが自分で作ったUIに対しては自分でカスタマイズしてドラッグアンドドロップに対する処理を行うことができます。

Drop Script

COMPのドロップスクリプトは他のCOMPやファイルがドロップされたときに実行されます。

Drag Script

COMPがドラッグが始まったときに実行されます。

デフォルトでは /sys/drag, /sys/dropになっていますがちょっと解説するには長かったので今回は省略します。

Setting

Containerを作り、パラメータのDrag&Dropのタブで以下のように変更します。

取得できる値

Drag

args
args[0] ドラッグされたオペレータの名前
args[1] ドラッグされているオペレータのインデックス
args[2] ドラッグされているオペレータの数
args[3] オペレータの種類
args[4] ドラッグされているオペレータの親のパス

Drop

args
args[0] ドロップされたNodeの名前、CHOPのチャンネル名またはファイル名（ドロップされたものによる）
args[1] マウスが離されたときのX座標
args[2] マウスが離されたときのY座標
args[3] ドロップされたもののインデックス
args[4] ドロップされたものの総数
args[5] オペレータの種類、又は拡張子
args[6] ネットワークのフルパス、又は
args[7] ドラッグされたCOMP

drag, drop ともに、print(args)と書き込みドラッグアンドドロップをしてみた例

実例

TouchDesignerでUIに動画ファイルやTOXファイルをドラッグアンドドロップして読み込む方法、およびUI上でCOMPをドラッグアンドドロップで操作できるもの

こんな感じの

ファイル

上で学んだD&Dの知識で実現することができます。
ドロップされたファイルの拡張子やパス、Containerの名前などから行う処理を決めています。
Movie、Toxどちらも対応しているBankになっています。