【UE4】MorphTargetで女の子の表情をきゃわいく変えよう



# 0.これがしたい人向け↷
https://youtu.be/_wLHHvxjOsA

ブループリントから動的にキャラクターの表情を変える方法の初心者向け解説です！
いざ行かん、きゃわわ道。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/ec368916-3768-45e1-13a7-d4f4078826ef.png)


# 1. 下準備
### 1-0. 前提
今記事はUE4.27にセレスティアちゃんというVRChatではおなじみのキャラクターをインポートして使っています。

### 1-1. インポート時の注意
キャラクターのスケルタルメッシュをFBX形式でインポートする際は、Import Morph Targetsにチェックを入れるのをお忘れなく！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/2e531e9e-daab-e9b9-cdcc-8ec6cd15ceed.png)

サイズ100倍にします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/cb1b7e81-3d4d-513f-491e-334abc123cf6.png)


### 1-2.インポート後、テクスチャも別途インポート
インポートできましたが、テクスチャがついてきていません。MorphTargetは確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/530e8645-4b23-a946-5d0b-4d6c87d1685f.png)

別途、テクスチャ画像をインポートしましょう。セレスティアちゃんだと最低4枚必要ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/1e43f0eb-5658-4718-25cf-8b56489d3b91.png)

テクスチャを反映させると可愛くなりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/58bcb927-c05f-02b6-79dc-75ba723ea8d2.png)


### 1-3.ブループリントアクター作成
キャラクターのスケルタルメッシュを入れたBPアクターを作りましょう。
アクターを継承すればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/3b7c0f8e-1ca3-8a87-258a-dc828db6cc05.png)






# 2. 超簡単に表情を変えたいなら
### 2-0.プレビュー
気になるMorphをプレビューしてみましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/1ed66834-ba18-ff7b-d61c-971a16f04d14.png)

### 2-1.SetMorphTarget
EventBeginでSetMorphTargetを実行！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/bdc1c623-bebf-860a-cbd3-e9247a1285e2.png)


### 2-2.レベルに配置
レベル内に配置して実行すると表情が変わっていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/40a5f074-440f-99e3-9117-8e89de96cf42.png)


# 3. 動きのある表情にするなら
### 3-1.AnimSequenceで表情作成
AnimationSequenceで表情が変わるアニメーションを作りましょう。

アニメーションシーケンスを準備して開くと、Curvesという項目から変化させたいMorphCurvesを追加できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/12558da1-0bbd-3e74-23cd-485f3816a758.png)

悲しい表情に使えそうなMorphCurvesを追加してジグザグ動かしてみました。
![2023-12-24_04h30_33.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/a37210ab-10c1-bf11-7d1b-78224d7a3cb9.gif)

### 3-2.BPアクターで実行
SkeletalMeshComponentに先ほど作ったシーケンスを割り当てれば...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/95c0a498-2a08-c58b-877d-dd8ef4a68536.png)

女の子の表情が動いた！やったね🌟
![2023-12-24_04h39_29.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/afcf3c74-3a33-572f-4320-4545534a6fd5.gif)




# 4. 体にAnimationをつけつつ表情も変えたいなら
以下のようなAnimationBlueprintを作ると身体のアニメーションと表情のアニメーションを独立して管理出来て便利です！
Layerd blend per bonesは上半身と下半身で別のアニメーションをさせたいときなどでよく使われるノードですが、Morphのブレンドにも使えます。
（よりスマートな実装方法あれば教えてください！）



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/ce18af6c-874b-f634-f01b-3f31927f83e0.png)


今作ったAnimBPをスケルタルメッシュコンポーネントにセットして...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/a117aba0-2af3-8660-8a60-666b09930cb3.png)


ワーヤッタヤッタデキター!!ヤバーイ！ネンマツモシゴトダバンザーイ！ウギャー！アドベントカレンダーワッショイワッショイ！ドッヒャー！！！
![2023-12-24_05h03_36.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/eeb97a9a-e246-b7d1-3c41-da7e1c0e9f39.gif)

Bodyアニメーションと表情アニメーションをそれぞれStateMachineで管理すれば、それぞれ独立して色々付け替えることができますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/7e3ea950-9212-4d60-e67e-98749cf3fd81.png)

ちなみに、CurveBlendOptionをOverrideにしている場合、MorphのBlendの程度は0か1でしか変わりません。
- BlendWeight=0 ➡ BlendPoseの表情が反映されない
- BlendWeight>0 ➡ BlendPoseの表情が100％反映される

ご注意ください。


# 5.おわりに
いかがでしたでしょうか？
みなさんもぜひゲーム内で可愛く表情を変える女の子を実装してみてください☆
最後まで読んでくれてありがとうございました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/2d83606e-a1fd-4c91-fa0c-f3995481738b.png)