［UE5］提灯に当たったら、提灯をぶら下げている紐が揺れるようにする

# 概要
この記事では、UnrealEngine5で、下のような提灯を作ります。

提灯に当たったら、提灯をぶら下げている紐が揺れる

<iframe width="640" height="360" src="https://www.youtube.com/embed/DYI-1eaaW2o" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

（※この記事では、提灯のメッシュやマテリアルの作り方をお教えするわけではございません。）


# この記事の主な対象者
- BPの作り方の基礎を習得されている、初心者の方


# 事前準備
今回の記事は、こちらの記事の続きの話となるので、こちらの記事をご覧になってから読んでいただけると幸いです。
よろしくお願いいたします。

https://qiita.com/tuduru/items/3b1bbb1d29f8f7fb782d

今回の記事を読んでいただく前の提灯の状態

<iframe width="640" height="360" src="https://www.youtube.com/embed/XxAU3o0xbvc" title="lantern 3 4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


# 提灯に当たったら提灯を揺らす
### ①提灯に当たったら、紐にも力を加える
まずは、どのようにして紐を揺らすかをご説明させていただきます。

紐に使っている「Cable」コンポーネントは、下図の赤点の**パーティクル**と呼ばれる点を等間隔で持っており、この点を利用して、動きの制御が行われています。

![lanterncable_explanation.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/642263b0-d3b8-dec7-defd-7e82b1cfd4c6.jpeg)


なので、上図のオレンジ色の提灯に何かが当たって、提灯に力が加わったら、赤点のパーティクルにも力を加えるようにして、紐を揺らします。<br><br>

この赤点のパーティクルに力を加える方法として、「Cable」コンポーネントが保持している変数の **「Cable Force」** という変数を利用します。この変数にセットされた力と重力を考慮した力が、パーティクルに加わるようになります。

![cableforce.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/08ce85a6-6d8a-8bcb-7f81-5cacece8d4d1.jpeg)

この紐に力を加える方法の説明を読み、「Cableコンポーネントからパーティクルを取得して、取得したパーティクルに「Add Force」ノードとかで力を加えればよいのでは？」と思った方もいらっしゃると思います。

しかし、Cableコンポーネントにはパーティクルを取得する関数が用意されておらず、BPだけでなく、C++の方からも取得することはできません。そのため、今回は「Cable Force」を利用して、紐に力を加えます。<br><br>

揺らす方法の説明を終えたので、実装をしていきます。

まずは、提灯に何かが当たったときに、紐にも力を加える処理を行う関数を作成します。

まずは、提灯のBPを開き、＋ボタンをクリックし、新規関数を作成します。（今回の記事では「AddCableForce」という関数名にします。）

![new_function.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/1b7ea0b2-bbe0-2903-c29b-59493a769852.jpeg)

「AddCableForce」関数をダブルクリックして開くと、関数名の紫色のノードが表示されます。
その紫色のノードをクリックして、詳細パネルを開きます。

下図のように、詳細パネルの「インプット」の欄の、＋ボタンをクリックし、入力として与える変数を2つ追加してください。追加した入力用の変数の型は、下の表のようにしてください。

![new_function_input.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/ec177ddc-7669-84a0-6d9d-d74fab5b854e.jpeg)

|変数名|変数の型|備考|
|:-:|:-:|:--|
| OtherActor | Actor | 提灯に当たったアクタ |
| OtherComponent | Primitive Component | 提灯に当たったコンポーネント |

変数の型を選択する際は、下図のように「オブジェクト参照」を選択します。

![object_reference.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/e0352ff5-1c28-0abf-3d3c-592a6a777b19.jpeg)<br><br>

関数の入力用の変数を追加し終わったら、関数の紫色のノードが下図のようになっているのを確認します。

![input_node.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/d4009747-b178-0b5d-1825-a0e01152f940.jpeg)<br><br>

入力用の変数の作成完了を確認できたら、次は下図のような関数のノードを組みます。

![addcableforce.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/50ec2fdc-23c8-5a23-d3d4-859e78ab63e6.jpeg)

「Cable Force」に値をセットする前に、小さな値を掛け合わせて、紐に加わる力を弱くしているのは、弱くしないと、紐の重さや紐の張力を考慮しないで、提灯に当たった力がそのまま紐に伝わってしまうからです。<br><br>

最後に、提灯に当たったらこの関数が呼び出されるようにします。

コンポーネント一覧から、提灯のメッシュのコンポーネントの1つの「Lantern1」コンポーネントを選択し、詳細パネルを開きます。

詳細パネルの「イベント」＞「On Component Hit」の赤丸で囲んだところをクリックします。
クリックすると、イベントグラフに、「On Component Hit(Lantern1)」というインプットノードが作成されます。

![add_oncomponenthit.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/6cb76704-d4fa-fe36-2542-4ea36819d53e.jpeg)

そのインプットノードを利用し、下図のようなノードを組みます。

![oncomponenthit.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/d0808379-ef50-fbad-f862-83e42a33cd47.jpeg)

同様にして、提灯のメッシュのコンポーネント「Lanter2」と「Lantern3」の「On Component Hit」インプットノードを作成し、上図と同じようにノードを組みます。<br><br>


これで、提灯に当たったら、紐にも力が加わるようになりました。
マップにおいて確認します。

<iframe width="640" height="360" src="https://www.youtube.com/embed/Q4Ve7-yajoo" title="lantern 4 2" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


上の動画から分かるように、この時点では提灯に当たった後、紐が傾いたままになっています。
原因は、**紐に力が加えたあとに、力が加わったままになっているから**です。

なので、次は紐に加えた力を元に戻す処理を実装していきます。<br><br>


### ②紐に加えた力を元に戻す


まずは、下図のようなVector型の変数を作成します。（今回の記事では「AdditionalForce」とします。）
この変数に、紐に加える力をセットし、後で「Cable Force」にセットするようにします。

![additionalforce.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/cad3713d-de0a-83dd-f521-21421f164148.jpeg)

そのために、まずは「AddCableForce」関数のノードを、下図のように組み替えます。（緑丸で囲ったところだけ「AddCableForce」関数のノードを組み替えれば大丈夫です。）

![addcableforce_after.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/49d599ef-16e6-0785-1706-11988d7825dd.jpeg)<br><br>


最後に、下の記事で組んだ「Tick」インプットノードの続きに、下図のようにノードを組みます。

https://qiita.com/tuduru/items/3b1bbb1d29f8f7fb782d#%E6%8F%90%E7%81%AF%E3%81%8C%E7%B4%90%E3%81%AB%E3%81%8F%E3%81%A3%E3%81%A4%E3%81%84%E3%81%A6%E5%8B%95%E3%81%8F%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B

![tick_after.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/32c93c2b-e769-866c-a078-75d635846b82.jpeg)

この処理を加えることで、提灯に何かが当たった瞬間のみ力が加わり、当たっていないときには力が加わらないようになります。

マップに配置して、下の動画のように紐が動くようになったか確認します。

<iframe width="640" height="360" src="https://www.youtube.com/embed/DYI-1eaaW2o" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<br><br>

以上で完成です。
最後まで読んでいただき、ありがとうございました。