[超入門]Touchdesignerの「UnrealEngine Plug-in Samples」 解説してみたよ～ CHOP基本編

#CHOPは強力や！
UE4 plugin samplesの一番実用的なところ来ましたー！！
それが
**CHOP!!**

いや、手で攻撃するやつじゃなくて

アパマーン

うん、それはショ～ップやから

ちゃうて
**CHOP!**

UE4のきれいな世界でインスタンシングとかできちゃうよ～

ってことで、今回もこちらの動画で説明してます！
実際に手動かさなくても
見るだけでもだいぶ価値あり！！

<iframe width="560" height="365" src="https://www.youtube.com/embed/forPxDoJlbA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


#動画のポイントだけ
さぁさぁ基本的には動画内で説明しているので、
こちらでは大事なポイントだけを
ご紹介していきます

#なんの型なの？
[前回TOPで型変換の話](https://qiita.com/miwa_maroon/items/5dfd12d823703e408a2d)をしました。

TOPはUnrealEngineでいう何という型でした？

**Texture2D**でしたね

**じゃあCHOPはなんでしょう**

それは、

####Float Array!!

####小数の配列です！！

ただし、**channelの指定する**必要があります！

といっても、意味わかりましぇんという方もいるので
具体例を出して説明していきます。

###配列の中身が一つの時
まずこちら！
![CHOP_chan30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/726d3cfc-d6d8-de04-bbfd-d7840d7a50b9.jpeg)

これは、channelを30個持っているCHOPです。
さらに、ひとchannelごとに、1つのFloat Arrayを持っています。

Arrayは配列と思ってください(配列がわからない人は後述するので、いったんそーゆーものがあるって感じで)。
そしてその配列に、一つの値が入っています。

これがこのCHOPの正体

もし、この値を使いたい！
![InkedCHOP_chan30_info_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/9b8c2365-f5e4-0c23-0e45-7fabdd8862ac.jpeg)

時は、

まず、チャンネル3を指定して(Indexは2)Float Arrayを取得します
TouchEngineComponentには
**GetChannel**
![get_channel.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/5a947bdc-11d4-b13c-8858-76f775b0f3d9.jpeg)

という関数が用意されているので、チャンネル番号を指定して使ってください。

そして取得したFloat Arrayの0番目を指定すると値を取得できます。
![get_index0_float.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/b020916a-394b-bef3-e5ba-b5622f460254.jpeg)


配列といいつつ、中身の値が一つなので普通のFloatの値と変わりませんね

###配列の中身が複数の時
![chop_3channels.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/388fa520-990a-e519-32fd-bdd428d538f8.jpeg)

このCHOP、先ほどと違うのがチャンネルごとに**複数**の値を保持してるところです。

こちらのこの値が取得したいとしましょう
![Inkedchop_3channels_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/b6e1c5ef-ae96-bf60-1b04-e624b0640f2c.jpeg)

チャンネル指定は先ほどと一緒です。
**GetChannel**でIndex2を指定しFloat Arrayを取得
さあ違うのはここです。
今回はFloat Arrayに100個の値が入っています
取り出したいのは**41番目**のデータなので
Float ArrayのGetで**Indexを40**に指定すると値が取得できます。

意外と簡単ですね

###結局、配列(Array)ってなんなん？
よく言われるのは、たくさんの値を保持できる箱📦
と言われます。

遊戯王のパックも配列と言えますね。
5つの値を持つ配列で、たいていIndex4がレアカードですね。

Indexというのは番号です。基本的には0番から数えるので、
5番目はIndex4になります。

ハイチュウも配列。
総武線の路線図も配列。

世の中は配列で溢れてます。
もしかして、これも配列ですか？？
というのありましたら、コメントください！

配列発見隊つくりましょう笑笑

#インスタンシング
たぶんみんな知りたいであろう
**インスタンシング**について！

このCHOPを使えばできます！
ただ仕組みとしては、Touchdesignerのワークフローとはちょっと違います

Touchdesignerみたいにgeometry compにCHOPぶち込めばできるみたいな甘いことではなくて、

先ほど説明したインデックスで値の取得を繰り返して、static meshそれぞれのposition に設定する感じです。
![instancing.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/dfe19457-f981-5d38-3968-c15aaa16dcec.jpeg)

詳しい部分は動画で説明しているので割愛しますが、
重要なのは

`For eachノード`でIndexを0〜99まで繰り返しているのと、
そのIndexを元に取り出したtx ty tzを
`Instanced transform`のLocationに入れることで
それぞれのposition に反映しています。

多少BPノード知識が必要になりますが、
こーやればできるので
使う際は丸パクリでいいと思います！

開発者もテストにテストを重ねた結果がこのノードに現れてると思うので！！

#CHOPはまだまだ美味しい
CHOPには**物理計算**できる系があります。
例えば`Spring CHOP`はばねの計算ができます。

それを次回アドバンス編にてやっていきます！

ほなまたぁ