[超入門]Touchdesignerの「UnrealEngine Plug-in Samples」 解説してみたよ～ DAT＆リアルタイム通信編

#DAT編
いや～set upからTouchEngine Componentの説明からTOP、CHOP、インスタンシングと来て、
最後に**DAT！**
まあDATなんていつ使うねんって思うじゃないですか～
それが使うんですよ。
いつ使うって？
**それはcsvとかtxtのデータを扱うときです。**
UE4だとそこらへんかなりめんどくさそうなんですよね。Touchdesignerユーザーにとって

例えば、**データビジュアライゼーション**したいときとかは、データを**csv**とかで取ってくること多いと思います
csvとかtxtの処理はDATでやるとかなりラクですよね。
データ自体を並べ替えたりとか選択したりするのも簡単だし！

よって！DATは使います！！！(強引)

そして、お待ちかね、TouchdesignerとUE4の**リアルタイム通信**の方法もハウツーします

#動画をご用意しております
今回も[動画](https://www.youtube.com/watch?v=VvQHU_1PC0s)で**細かく解説しながらハンズオン**してます！ぜひ！！
<iframe width="760" height="515" src="https://www.youtube.com/embed/VvQHU_1PC0s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

#DATの扱い方をエクストリームで解説
ハンズオンで詳しく説明をしたのが、上記の[動画](https://www.youtube.com/watch?v=VvQHU_1PC0s)なので、
qiitaでは、大事なことを**エクストリーム**に解説していきます。


###最終アウトプットは基本的にTableの形にしなければならない
なんでかって言われると、この後出てくる値の取得方法が**Table**じゃないとできないからです

###データの取得はGet Cell でCellを指定する
![getcell.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/46bd1698-f321-46ac-e2ea-759af890b6c0.jpeg)

データの取得は基本的に行と列それぞれでインデックスを指定することになります。
その時、使うのが`Get Cell`
基本的にはこのノードで取得してください

ちなみに、行にインデックス17を指定して、列にインデックス18を指定するとこれが完全体になります。
クリリンはブチぎれますが、、
とかいう冗談は置いといて

###値の型はFStringという文字列である
DATで取得できるデータはすべて**FString**という**文字列**になります
FStringって聞きなれないかと思いますが、要は文字列です。
たとえ数字のデータをCellに入れてようが、それは文字列です
文字列絶対！です

###他tips
値の取得は、Get Cell以外にも`Get Row`や`Get Column`があります。
これは行や列をFStringの配列として取得できるノードです。

もし検索してもここら辺のノード出てこないよ！ってときは
ノード検索画面右上のcontext sensitiveのチェックを外すと解決するはずです。
こちらは、[動画](https://www.youtube.com/watch?v=VvQHU_1PC0s)でも説明してます。
![check_box.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/4e3d49cd-f961-2063-6b94-a08cc8f9d29e.jpeg)


文字列で取り出した後は煮るなり焼くなりしてください

#リアルタイム通信
お待ちかね！
TouchdesignerとUE4の**リアルタイム通信**はどうやるのか。
それは、`Touch In / Touch Out`を使うことです。
UE4の中でTouchdesignerのノードが動くということは、同じPC内だったら
TouchdesignerのTouch Outから、UE4に仕込まれた`Touch In`で受信できるわけですね！
![realtime.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/a5eff74e-e211-4cef-687e-f807c6cbe7a1.jpeg)


#実装方法
ここでは、[TouchEngineを0から使う方法](https://www.youtube.com/watch?v=VvQHU_1PC0s)も学べるようになってます
いままでは、実際に作られたものを見てきただけですが、実際に作ってみるってなると話は別になってきます。

といっても、ここまで見られてさえいればだいたいどんな感じで作るのかとはわかるのではないでしょうか
こちらも[動画](https://www.youtube.com/watch?v=VvQHU_1PC0s)の後半部分をじっくりみればエラーなく作ることができます！

###作り方をちょーざっくり言うと
UE4側は
TouchEngineComponentのActorでBluePrintを作ります
そうすると、TouchEngineComponentを持つBluprintが作成されるので
Get OutputからGet TouchEngine OutPut、そしてGetCellをつなぎます。
あと微調整して、ワールドにこのBluePrintを配置します。
Touchdesigner側は
なんらのtext出してTableに変えて、Touch Outにつなげます。
そして、これとは別にtox用のbaseなりcontainerをつくって
こちらにはTouch Inを入れます。
それをToxとして保存し、このToxをUE4のContentsフォルダー内にぶちこみます

あとは、今まで見てきたように設定すれば完了！
![touch_out_get_cell.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/f79ff6c8-86e8-1dd2-dbe4-3f88902c5d51.jpeg)


だいぶエクストリームですけど、深夜に書いているということでお許しくださいまし！
[動画](https://www.youtube.com/watch?v=VvQHU_1PC0s)はちゃんと解説してますので、足りない説明あったらそちらへどうぞ！

#UE4とTouchEngineでの実例
https://twitter.com/miwata34/status/1453874228604796928

私が作った**データビジュアライゼーション**です
こちらはデータの元となるcsvを**UE4 plugin**で読み込んで、**DATの操作**をしています。
それをグラフに変えたり、イワシの位置を制御したりしています


#TouchdesignerとUE4ユーザーは仲良くなれる
このUE4 pluginを機にこの二つのアプリケーションを密にして、
**UE4わからんけどTouchdesignerわかるという人**が、少しでもUE4に興味を持って
日々の作品制作やVJ、お仕事等々に活かせればなあと
ささやかに願っているであります

あ、言い忘れてましたが、miwa_maroonはどっちも大したことありません。これからもっと勉強しますので、私の成長も記事やyoutube通して
見守っていただければなと思います。

そんなこんなで長いUE4 sampleの説明は終わりです！**僕たちには未来しかない!**
Backしないぜfuture!!
それでは！