［UE5］当たったら揺れる、紐にぶら下がった提灯をつくる

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

当たったら揺れる、紐にぶら下がった提灯

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

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


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


# 事前準備
提灯のメッシュの原点を、提灯を揺らす際の支点とする部分に設定してください。

![lantern_basepoint.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/e94b864e-4618-f2fb-946a-3d4fae8ea8c4.jpeg)


# 紐にぶら下がった提灯を作る
### ①必要なコンポーネントを追加する
まず、下の画像のような、コンポーネントの構成のBPを作成します。

![lantern_components.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/128198a5-f3af-093e-fc6a-ed6dd0c52884.jpeg)

|コンポーネント名|コンポーネントの種類|備考|
|:-:|:-:|:--|
| DefaultSceneRoot | Scene | このコンポーネントを一番上の親にします。 |
| LanternPoint1~3 | Scene | 提灯が紐にくっついて動くようにするために<br>使用します。 |
| Lantern1~3 | Static Mesh | 提灯のメッシュです。 |
| SetPoint1~3 | Static Mesh | 提灯が紐にくっついて動くようにするために<br>使用します。<br>**メッシュを設定する必要はありません。** |
| PhysicsConstraint<br>1~3 | Physics Constraint | 提灯を振り子みたいに動かすために使用します。 |
| Cable | Cable | 提灯をぶら下げる紐として使用します。 |

コンポーネントの階層構造は、下のようになっています。

**《コンポーネントの階層構造》**
DefaultSceneRoot --- LanternPoint1~3
　　　　　　　　　|　　|-- Lantern1~3
　　　　　　　　　|　　|-- SetPoint1~3
　　　　　　　　　|　　|-- PhysicsConstraint1~3
　　　　　　　　　|-- Cable


コンポーネントを作成する際は、以下の点に注意します。
- **「Lantern」「LanternPoint」「PhysicalConstraint」の座標を同じにする**


### ②提灯をぶら下げる紐を作成する
①で作成したCableコンポーネントを利用して、提灯をぶら下げる紐を作成します。

作成する前の前提知識として、Cableコンポーネントがどのようなものかを説明いたします。
（かなり大まかな説明です。）

参考にしたサイトは、こちらのサイトです。

https://docs.unrealengine.com/4.27/ja/Basics/Components/CableComponent/

![cable_explanation.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/4b8ff5cd-ae9c-0ddc-4d2e-3590aa44b663.jpeg)


Cableコンポーネントは、赤点の**パーティクル**と呼ばれる点を等間隔で複数保持しており、その点と点の間に管状のメッシュを作るようになっています。赤点が動くと、それに合わせてその間の管状のメッシュも動くというようになっています。
また、赤点と赤点の間を**セグメント**と呼びます。

このセグメントの数（パーティクルの数）が少なければ少ないほど、単調な紐の揺らし方しかできなく、多ければ多いほど、複雑な揺らし方ができます。ただし、セグメントの数が増えるほど、処理負荷も大きくなるので注意しましょう。<br><br>

セグメントの数が3のとき
<iframe width="640" height="360" src="https://www.youtube.com/embed/1UcIDr5QUtA" title="lantern 3 1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<br><br>

セグメントの数が20のとき
<iframe width="640" height="360" src="https://www.youtube.com/embed/ocdoOTAIeAs" title="lantern 3 2" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


動画で見ていただいてわかるとおり、パーティクルのある場所がCableコンポーネントの当たり判定となっていることにも注意しましょう。


Cableコンポーネントの説明が終了したので、提灯をぶら下げる紐に利用するCableコンポーネントの設定をしていきます。<br><br>

コンポーネント一覧から、「Cable」コンポーネントを選択し、詳細パネルを開きます。

まずは、詳細パネルの「ケーブル」の場所を編集します。

![cable_category.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/6e56e1c8-8d6d-6b7a-1674-d1319868020e.jpeg)


まずは、上画像の赤線の「ケーブル」＞「End Location」を変更して、紐の終端の位置をずらします。（今回の記事では、X座標を「300」に変更し、紐の終端の位置をX軸方向に300ずらします。）

次に、上画像の青線の「ケーブル」＞「Cable Length」を変更して、紐の長さを長くします。（今回の記事では、「300」と設定します。）

次に、上画像の黄色線の「ケーブル」＞「Num Segments」を変更して、セグメントの数を増やし、より紐のような動きができるようにします。（今回の記事では「20」と設定します。）

次に、上画像のオレンジ色線の「ケーブル」＞「Solver Iterations」を変更して、紐が硬めの状態にします。この値が小さければ小さいほど、柔らかい紐のようになり、値が大きければ大きいほど硬めの紐のようになります。（今回の記事では「16」と設定します。）

最後に、上画像の緑線の「ケーブル」＞「Enable Collision」にチェックを入れ、紐に当たったら紐が揺れるようにします。<br><br>


これで、紐の設定は終了です。


### ③提灯が紐にくっついて動くようにする

まずは、「PhysicsConstraint」コンポーネントの設定を行い、提灯が振り子のように揺れるようにします。

提灯が大きく揺れないようにしたり、回転しないようにしたりするのは、私が過去に書いた[こちらの記事](https://qiita.com/tuduru/items/be2b9d3887b9c91023e7#4-%E6%8F%90%E7%81%AF%E3%81%8C%E5%A4%A7%E3%81%8D%E3%81%8F%E6%8F%BA%E3%82%8C%E3%81%9F%E3%82%8A%E5%9B%9E%E8%BB%A2%E3%81%97%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B)を参考にして設定してください。

また、提灯のメッシュが紐のメッシュと重なって、反発しあわないようにするのも、私が過去に書いた[こちらの記事](https://qiita.com/tuduru/items/be2b9d3887b9c91023e7#3-%E3%82%B3%E3%83%AA%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%8C%E5%8F%8D%E7%99%BA%E3%81%97%E5%90%88%E3%82%8F%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B)を参考にして設定してください。<br><br>

https://qiita.com/tuduru/items/be2b9d3887b9c91023e7

<br>

提灯を振り子のように揺らすために、「PhysicsConstraint1」コンポーネントの詳細パネルを開き、「コンストレイント」＞「Compnent Name 1」＞「Component Name」に、「SetPoint1」と入力し、「コンストレイント」＞「Compnent Name 2」＞「Component Name」に、「Lantern1」と入力します。

![physicsconstraint.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/751673b3-6b87-000b-5271-8d44c868a8c3.jpeg)

同様にして、「PhysiceConstraint2」コンポーネントには「SetPoint2」「Lantern2」、「PhysiceConstraint3」コンポーネントには「SetPoint3」「Lantern3」を設定します。<br><br>


次に、提灯が紐にくっついて移動するようにします。

具体的には、提灯のメッシュ「Lantern1~3」コンポーネントを、提灯をぶら下げる紐の「Cable」コンポーネントのパーティクルにくっついて動くようにします。

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

提灯のBPのイベントグラフを開き、下の画像のようなノードを組みます。

![attach_lantern_to_particle.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628167/5c7b8d5a-89b9-fe1b-7bbd-ca581fbe798a.jpeg)
<br>

ノードを組み終わったら、作成した提灯のBPをマップに配置し、下の動画のように動くか確認してみましょう。

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

動画では問題なく動いているように見えますが、この状態だと1つ大きな問題があります。

それは **「提灯に当たっても、紐が揺れない」** ということです。

<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>

紐に当たったら、提灯も一緒に揺れますが、提灯に当たっても、提灯だけしか揺れない状態にあります。

なので、次の記事で、提灯に当たったら紐が揺れるようにしていきます。

https://qiita.com/tuduru/items/557af9c98ab1d68649aa