TouchDesigner 複数カメラをボタンでスイッチング

Button COMPでUIを作成し複数のCameraを切り替えてみたいと思います。
今回は単純に3Dモデルを置いて、あらかじめカメラも3台設置して左下にあるボタンでカメラを変更し、絵を切り替える物を作ります。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/31194/a185c90e-6d04-9765-e614-94f026e9f0e5.png)

###ネットワーク
OPが沢山置かれていますがほとんどが3Dモデルの配置やカメラ等のOPで、メインは右上の**Container COMP**と**Panel CHOP**になります。
<img alt="スクリーンショット 2018-10-19 12.41.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/31194/389def7f-1ec1-3701-dba9-9c009178eb1b.png" width="50%">

###ボタンの複製
Container COMPは、複数のUI部品をグループ化してUIを構築するためのコンポーネントです。今回はカメラを3つ用意してあるので、ボタンも3つ縦に並べて用意してあります。
<img width="50%" alt="スクリーンショット 2018-10-19 12.42.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/31194/d3772f95-3411-0c0e-7e2a-055bc143029c.png">
Container COMPの中にも色々OPが配置されていますが、1つずつ見てみましょう。
<img width="846" alt="スクリーンショット 2018-10-19 12.42.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/31194/155d56ea-a26c-c502-a46c-3700ded4f908.png">
まず中央上部にある**Button COMP**ですが、これがボタンのテンプレートとなります。

その横にある**Table DAT**は、ボタンの個数を定義してあります。一番上の行（0番目）は項目名を入れていますが、デフォルトでは無視されるので1番目からが実際のデータとして扱われます。
<img width="50%" alt="スクリーンショット 2018-10-19 12.44.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/31194/22b41671-bf0b-926a-30cc-d47e7186c7d5.png">
※テーブルの組み方により色々な活用方法がありますが、今回はボタンの個数を定義するだけです。

そして真ん中の**Replicator COMP**は、テンプレートのUI部品とテーブルのデータからUI部品を複製することができます。プロパティーを見てみると**Template DAT Table**というパラメーターに先ほどのTable DATの参照を入れています。また**Master Operator**にはテンプレートとなるButton COMPの参照を入れています。
<img width="50%" alt="スクリーンショット 2018-10-19 12.45.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/31194/9a1586c5-3cad-bf90-4c70-de7ec94f272d.png">
この3つを置くだけでButton COMPがテーブル内のデータ分複製されます。その際**Operator Prefix**に入力されている文字列が、複製されるOPの名称の元になります。

###ボタンの配置
デフォルト状態では複製したボタンは左下に重なって配置されてしまうので、座標を指定してあげる必要があります。テンプレートにしているButton COMPのプロパティをいじって動的に配置されるように**Layoutタブ**の**y**の値に計算式を入れています。
<img width="50%" alt="スクリーンショット 2018-10-19 12.46.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/31194/b1b753d5-139b-3599-6d2e-490ed2c16479.png">

計算式だけ取り出しました。
最初にボタンの個数を定義した**table1**から**numRows**で行数を取得します。そこから**me.digits**自分が複製された順番の数を引いてさらにマイナス1（テーブルの行数は項目の分1つ多いため）して自分の高さをかけると、上から順にボタンが積まれます。

```
(op('table1').numRows - me.digits - 1) * me.height
```


###テンプレートのButton COMPのプロパティ
<img width="50%" alt="スクリーンショット 2018-10-19 12.46.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/31194/7b0ba86b-08d2-07e1-1222-5d0bb7469ee8.png">
今回はスイッチングが目的なので**Button Type**を**Radio Down**にしています。これにしておくと、複数並んだボタンで押したボタンだけがアクティブになり、他のボタンは非アクティブという状態を作れます。

それからボタンに表示される文字列を変更するためButton COMPの中に入ります。
<img width="50%" alt="スクリーンショット 2018-10-19 13.49.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/31194/4bf73415-d542-3c5b-47ef-132ded0c75ea.png">
Button COMPは元々このようなネットワークで作られており、その中の**bg**OPのプロパティーをいじって文字列を変えます。
<img width="50%" alt="スクリーンショット 2018-10-19 12.45.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/31194/0a83b68d-8e6f-8758-4a83-f37879e95895.png">
変更しているのは**Text**パラメーターと**posttext**パラメーターです。
Textパラメーターは元々“Button”と入っているのを“Cam”に変えただけです。posttextパラメータには複製された順の数字を入れています。この組み合わせで文字列が“Cam1、Cam2、Cam3”と動的に生成されます。

###ちょっとしたハマりどころ
最初にButton COMPを複製した状態にして、後からテンプレートのプロパティーをいじっても即座に反映されません。そういう時はReplicator COMPのプロパティーにある**Recreate All Operators**の**All**ボタンを押して再度生成しましょう。

###Container COMPのサイズ
今回はあまり意味ないですが、ボタン群をまとめているContainer COMPのサイズも、テンプレートのButton COMPのサイズが変わったら自動で変わるように値を設定しておきます。
<img width="50%" alt="スクリーンショット 2018-10-19 14.00.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/31194/ec6e9752-789a-ffe9-cc66-eb66ecc2ebe1.png">
横幅

```
op('/project1/container1/button1').width
```

高さ

```
op('/project1/container1/button1').height * (op('/project1/container1/table1').numRows - 1)
```

ここまで設定してPerformance Modeにすると画面左下にButton UIが配置されていると思います。

###Panel COMP
Panel CHOPではContainer COMPの値を取り出します。
**Component**プロパティーにはContainer COMPの参照を入れ、**Select**で欲しい値を洗濯します。今回はラジオボタンなので**radio**の値のみ取り出します。
<img width="50%" alt="スクリーンショット 2018-10-19 12.47.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/31194/7c2d7f4f-551b-da3e-8951-e1f2164f8b3a.png">


###Render TOP
最後はRender TOPの**Renderタブ**にある**Camera(s)**が動的に変わるように値を変更します。
<img width="50%" alt="スクリーンショット 2018-10-19 12.47.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/31194/70d4f0a3-e880-dccc-94dc-388e1b48f1f0.png">
ここはPythonのformat関数でPanel CHOPの値と文字列を組み合わせているだけです。

```
'cam{0}'.format(int(op('/project1/panel1')[0]))
```

これでPerformance Modeにしてボタンを押せばカメラが切り替わりスイッチングすることができます:heavy_exclamation_mark:
カメラの切り替え以外にも色々使えそうですね:smiley:

最後に今回のYouTubeへのリンクを貼っておきます。
[![IMAGE ALT TEXT HERE](https://qiita-image-store.s3.amazonaws.com/0/31194/16c11256-81b7-8ddd-ddc8-5fa35016a8c2.png)](https://www.youtube.com/watch?v=o3U1lise8Hs)