【UE4】Clothing Toolを使った布表現

# 最初に

どうも、ろっさむです。

手順は基本的にドキュメントに書いてある通りとなりますが、いくつか試す中で躓いた箇所もあるので、Qiitaにてまとめておこうと思います。

UE4の公式ドキュメント
https://docs.unrealengine.com/en-US/Engine/Physics/Cloth/Overview/index.html


# 手順

## Clothの箇所を選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/c83db4af-7f6c-0953-72b5-ca311200706f.png)

まずはAssetsの下にある任意のキャラのスケルタルメッシュを開いてください。今回は趣味で開発してるゲームのキャラクターを使用して解説します。

上部メニューの**「セクション選択」をアクティブにした状態**で、布としたいメッシュを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/372649d6-de09-5cab-3f47-16efc2f4feef.png)


選択したメッシュ上で右クリックをし、「Create Clothing Data from Section」を選択してクロス用データに名前を付け、コリジョンが該当のメッシュと対応しているものか確認したうえで作成を押下してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/f0f7a5d6-54d9-53ad-c676-7c48d18b9607.png)


## Clothのデータを編集する
基本的にはUE4の公式ドキュメントと同様で、ブラシツールなどで頂点単位で編集を行います。
https://docs.unrealengine.com/en-US/Engine/Physics/Cloth/Overview/index.html

まずは上部メニューの `Activate Cloth Paint`を押下してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/3058b2d5-8b25-1d3d-e871-d2307c7a9c2d.png)

次に、表示された `Clothing`タブにて自身で作成したClothing Dataを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/91aca1b6-af52-1abc-a0f5-e05dd68b63dc.png)


そうすると選択したキャラクターのメッシュ部分がピンク色になったかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/26d327ee-1d2b-8731-3db8-ae4e3872a56d.png)

あとは、`Clothing`タブの下にある `Cloth Painting`から任意のモードを選び、`Paint Value`の値を確認しながら、`Radius`を調節して塗っていくだけです。ちなみに `Paint Value`の値については以下の通りです。

0 : 布に非ず
100 : 完全に布

またShiftを押しながら塗ることで消しゴム機能のように取り消しの塗りができます。

ただ、もしShiftを押しながらのブラシツールで編集を戻すことができなかった場合は、「Tool Settings 」>「Paint Value」を変更することで逆の編集を行うことができます。


![image.png (11.7 kB)](https://img.esa.io/uploads/production/attachments/10908/2020/03/26/72406/a356b062-8980-4f7b-a125-37ea6601104e.png)

## Clothデータを適用する
「Cloth Paint」を非アクティブの状態に戻してから、布とするメッシュを再度右クリックして「Apply Clothing Data...」を選び、先ほどクロス設定したアセットを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/2a464cbb-06e2-ffd5-07b0-3218b33fcc5e.png)

そうするとクロス設定が適用されてシミュレーションされると思います。

## Clothシミュレーションを行う

クロスのアセット適用後にCloth Paintで編集中にHキーを押下するとプレビューが確認できます。

## コリジョンの調整

布や胴体のコリジョンをうまく調整しないと布があらぶったり盛り上がったりなど意図していない状態になることがあります。その場合には右上の一覧から「Physics」を選択してPhysicsAssetを確認し、適宜編集を行ってください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/57ce4323-420d-31b2-784e-82cf552b528d.png)



例えばクロスだけに適用したいコリジョンをつけるのであれば `L_UpperLeg`などを右クリックしてコンテキストメニューを表示して、`Add Shape > Add Taperad Capsules`を押下して、位置や大きさを調整します。
<img width="1974" alt="image.png (403.3 kB)" src="https://img.esa.io/uploads/production/attachments/10908/2020/12/06/72406/9ddfbf74-39ab-41fd-a0ae-0cea3effe0a4.png">

<img width="889" alt="image.png (982.3 kB)" src="https://img.esa.io/uploads/production/attachments/10908/2020/12/06/72406/fdc2666b-a047-4909-822d-855e8f43a33e.png">

諸々調整後に試しにアニメーションを流し込んでプレビューしてみます。
再度、Meshの編集画面に戻って、 `Preview Controller`を`Use Specific Animation`などにして任意のアニメーションを適用させます。

うまく設定できているといい感じに布みを感じる動きになっていると思います。

![cloth.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/1e4d0057-c874-27f6-3702-ad18b66455d7.gif)