【UE4】【無料でキャラクター提供】絵本”えんとつ町のプペル”のキャラクターを3Dで動かす

VRの会社をやっている高品@[vLab](http://v-lab.co.jp/)と申します。
昨年会社としては以下のコンテンツを作った会社でもあります。
https://www.youtube.com/watch?v=beUg2jCdI3Q
<img width="912" alt="Screen Shot 2020-01-01 at 14.44.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/28295717-71d8-8dfb-1df5-186acf369179.png">
これはキングコング西野さんが作成した絵本、「えんとつ町のプペル」をVRで再現したものになっていて、15分ほどのストーリーテリングの(歩ける)VR物語です。
■Steamにて販売中
https://store.steampowered.com/app/1079520/PoupeIIe_Of_ChimneyTown_VR_into_the_world/?l=japanese
今回はこの絵本に登場したキャラクターをUE4(2Dとか3Dのゲームが作れるエンジン)で動かす方法を記載していこうと思います。
**すごく簡単です**
<font color="Red">ご依頼があった方限定でルビッチなどのデータを差し上げてます。Twitterよりご連絡ください！</font>
みんなでルビッチをあんなことやこんなことをしちゃいましょうー
## フローは以下です。
1. UE4インストール
- UE4を起動して、FBX、テクスチャなどをインポート
- マテリアルのエディタ上で紐づける
- アニメーションをつける
- 動かす
- 本気で作り上げるとこんな感じ

## ではやってみましょ
###1 . UE4インストール
以下URLを参考にしUE4をインストールしてください
https://docs.unrealengine.com/ja/GettingStarted/Installation/index.html
インストールには結構時間がかかります・・・・
今回は、バージョン4.22.3でやります！

###2 . UE4起動して、FBX、テクスチャなどをインポート
※データが欲しい方はTwitterよりご連絡くださいmm
■プロジェクトの作成
以下写真の右上にある”Launch”をクリック
<img width="1137" alt="Screen Shot 2020-01-01 at 16.06.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/80449675-9000-d298-0ca4-9a7765113bff.png">
■”New Project”で”Virtual Reality”を選択し、保存先、プロジェクト名を記載して「Create Project」を選択
<img width="1096" alt="Screen Shot 2020-01-01 at 16.08.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/6c8e58b2-9109-7342-5065-94114d141599.png">
■Lubicchiフォルダを作ってあげる
「Content Browser」上で、右クリックし「New Folder」を選択して、名前を適当につけてあげる
<img width="1433" alt="Screen Shot 2020-01-01 at 16.33.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/3f25facf-7411-66c5-6ad4-e7556238bd73.png">
■データを受け取ったら、UE4にインポートをします。
「Lubicchi」フォルダをクリックし、「import」をクリックする
<img width="1431" alt="Screen Shot 2020-01-11 at 0.18.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/eb3a175b-23d9-e9b0-73b0-34678f13db9c.png">
<img width="1263" alt="Screen Shot 2020-01-10 at 21.24.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/27d87139-30f4-f974-43bb-e95f1e43b82a.png">
インポートするときに、「Skeltal Mesh」のチェックが入っていることを確認し、「import All」をクリックする
<img width="397" alt="Screen Shot 2020-01-01 at 16.33.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/9889cce3-8702-8263-024d-93f94f53fa0b.png">
メッセージログが表示されますが、気にしなくて大丈夫です。
<img width="993" alt="Screen Shot 2020-01-11 at 0.20.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/8f95153b-c8e8-5506-0349-b23038bb14c4.png">
インポートされたことを確認
<img width="1440" alt="Screen Shot 2020-01-11 at 0.21.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/97713fbe-a18f-1674-07d6-96e096f30788.png">
###3 . マテリアルのエディタ上で紐づける
現状のままでは、ルビッチは白いままになっているので、テクスチャ、NormalMap、ORMを結びつけてあげる
「M_Lubicchi」をダブルクリックし、以下のように結びつけて、「Save」をしてあげるとルビッチに色がつきます。
まずは以下のように画面を並べてあげて、3つのファイルをドラッグ&ドロップしてあげます
<img width="1425" alt="Screen Shot 2020-01-11 at 0.23.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/ecd44f34-ffa8-36e3-31a9-e4701d6e5412.png">
以下のように繋げてあげましょう
<img width="1440" alt="Screen Shot 2020-01-11 at 0.26.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/853c8a39-4111-14cd-0eab-381810e21c96.png">
###4 . アニメーションをつける
適当なアニメーションをつけてあげる。
今回はEPICのマーケットプレイスで無料のアニメーションをダウンロードしてきました。
https://www.unrealengine.com/marketplace/ja/product/animation-starter-pack
※ルビッチに適さないアニメーションなので注意
もしブラウザ上からダウンロードできない場合は、EPIC gamesにログインして以下のように購入してください
<img width="1241" alt="Screen Shot 2020-01-11 at 0.37.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/9e06a649-7372-7ffd-f85d-6a7aa55eb5d0.png">
**ここからがちょっとだけ面倒・・**
まずダウンロードしたファイルを作成しているプロジェクトに「Add to project」でインポートします。
<img width="1227" alt="Screen Shot 2020-01-11 at 0.39.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/e969c0c3-f748-f96d-5adf-a79cef40d10a.png">
インポートされたフォルダの中の「Aim_Space_Hip」をダブルクリックします
<img width="1440" alt="Screen Shot 2020-01-10 at 21.49.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/8b7d0187-8b9a-a1d0-cd64-fe4253c6d707.png">
なんか動いてます
<img width="1363" alt="Screen Shot 2020-01-10 at 21.51.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/bda1b346-e16d-16f8-2689-1c3b861b1e2c.png">
「Skelton」をクリックすると、大の字の人（グレーマンといいます）が現れます。
なぜこのプロセスを踏んだかというとあとあとわかります、"この大の字"のグレーマンを覚えておいてください。

次にルビッチの「SK_Lubicchi_Mix_Skeleton」をダブルクリックして開きましょう
あれ、ルビッチとグレーマンの大の字がちょっと違う・・
これだと、ダウンロードしたグレーマンのアニメーションをRetargetすることができません・・
なので、ルビッチの手や足の角度をグレーマンに合わせてあげます
「Skelton Tree」でそれぞれ角度を変更します
■左手の角度変更
<img width="1059" alt="Screen Shot 2020-01-11 at 0.46.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/0be33724-3608-9f52-8ffb-fd3c64237350.png">
■右手の角度変更
<img width="1065" alt="Screen Shot 2020-01-11 at 0.47.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/e4a2ca3f-800b-475b-cd58-cf134bcae85d.png">
■左足の角度変更
<img width="1065" alt="Screen Shot 2020-01-11 at 0.47.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/5d148518-da08-9fa4-daa0-a4974ed5b504.png">
■右足の角度変更
<img width="1062" alt="Screen Shot 2020-01-11 at 0.47.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/1c20f870-2e4e-9a48-20a3-3d1fe283db5d.png">
「Retarget Manager」をクリックします。
「Modify Pose」-「Use CurrentPose」をクリックし、Saveします
<img width="1064" alt="Screen Shot 2020-01-11 at 0.50.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/ad642ba1-9c1a-06b5-28c1-044e6222b0da.png">
次にグレーマン側でもこの処理をします。
Contentsブラウザに戻り、「AnimStarterPack」-「Aim_Space_Hip」をダブルクリックし、
「Skelton」を選択します。
<img width="1408" alt="Screen Shot 2020-01-11 at 1.15.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/48339a2c-7d99-d9ff-5854-efee84e4fb7d.png">
<img width="1400" alt="Screen Shot 2020-01-11 at 1.15.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/c3fdf1d5-29d9-f572-b162-78985a9fd8c7.png">
「SelectRig」で「SelectHumanoidRig」を選択します
<img width="1402" alt="Screen Shot 2020-01-11 at 1.16.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/e773dce1-2a74-3ca7-4c2a-e0b52c8958ee.png">
「SelectRig」に"Humanoid"が表示されます
<img width="1404" alt="Screen Shot 2020-01-11 at 1.17.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/d04d1f99-04ef-11dc-8094-4227cafb367a.png">
「Show base」になっていることを確認し、"Auto Map"を選択します
<img width="1414" alt="Screen Shot 2020-01-11 at 1.19.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/627a973f-fd9a-a4c1-fc2d-3dbd6342432e.png">
「Modify Pose」で"Use CurrentPose"を選択します
<img width="1403" alt="Screen Shot 2020-01-11 at 1.19.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/3677acb4-edee-31d7-621d-6ca248ea3d6e.png">
初めの画面に戻って、「Aim_Space_Hip」を右クリックし、「Retarget Anim Assets」-「Replicated Anmi Assrets and Retarget」を選択します
<img width="1435" alt="Screen Shot 2020-01-11 at 1.20.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/8d13b3ca-8175-5e11-433b-a41908ef1895.png">
"SK_Lubicchi_Mix_Skeleton"が表示されると思うので、選択し、「Retarget」を選択します
<img width="1072" alt="Screen Shot 2020-01-11 at 1.22.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/a87da53e-6676-b328-5c3c-677d00828cae.png">
なんかファイルができた！
<img width="1433" alt="Screen Shot 2020-01-11 at 1.23.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/6d79e8b0-86c7-2d94-1007-664f69dbcd1d.png">
開いてみると・・・・大変なことに！
これが西野さんにバレると直ちに怒られます！修正！
![Lubicchi-yabai.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/8128485c-2f65-7a31-7da6-37c58a4cfb9e.gif)
うまくRetargetできていないのが原因です。
ちゃんとRetargetしてあげましょう
ここが最も手間です・・
Lubicchiの「SK_Lubicchi_Mix_Skeleton」とグレーマンの「UE4_Mannequin_Skeleton」を開きます。
※AutoMapで自動でRetargetしてくれるのですが、うまく行っていないことが多いです
なので、自分で全てを確認しましょう

■グレーマンのSource、Retarget先の確認
<img width="1404" alt="Screen Shot 2020-01-11 at 1.27.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/e9727e26-c328-123d-33da-b7a3908588c7.png">
■ルビッチのSource、Retarget先の確認
<img width="1403" alt="Screen Shot 2020-01-11 at 1.27.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/d24dcdc1-a643-b076-3507-513797b702b9.png">
SorceとTargetが一致していないのが原因なので、直してあげるとうまく行きます。
「Character」-「Bones」-「Selected Only」を選択してあげるとやりやすくなりますよ。

１つだけ例で手順を示します。
グレーマンの「index_01_l」が「index_01_l」にターゲットされています。
これがどこの部分かというと、人差し指の付け根の部分ですね。
<img width="1402" alt="Screen Shot 2020-01-11 at 1.33.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/e1ec56e3-7ce8-bed0-f6f0-4febed7083ab.png">
なので、ルビッチにもここをあててあげます。
<img width="1402" alt="Screen Shot 2020-01-11 at 1.35.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/452bea68-e121-2736-d59c-5d4a06577bd8.png">
<img width="364" alt="Screen Shot 2020-01-11 at 1.35.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/f4e832f6-78f5-cdeb-0e84-2b21081e33c1.png">
これをひたすら繰り返すと！
問題なくアニメーションができます！
![Lubicchi01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/ee428bdf-e54a-c581-18a6-fb19ff27ba5b.gif)


＜参考＞
https://docs.unrealengine.com/ja/Engine/Animation/RetargetingDifferentSkeletons/index.html
###5 . 動かす
アニメーションをステージで動かしてみる
ホーム画面で、動かしたいアニメーションをドラッグ&ドロップでステージに移動させます。
そして、再生ボタンを押すと動きます

<img width="1431" alt="Screen Shot 2020-01-11 at 15.14.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/3f9fb1e9-1036-58f4-7c41-f05ad9824b1d.png">


###6 . Maxで作り上げるとこんな感じ
キャラクターの動作、エンバイロメントの作成、シーケンサーでボイスやアニメーション、BPでシステム側の設計をしてあげるとこんなことがUE4上でできます。

![max-Seq.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560063/24809019-2d39-6720-398e-09288d7d7703.gif)

**さて、なんかUE4触りたくなりました？？**
もしご要望があれば他のキャラクターも提供可能です。

補足ですが、2020年の年末に「えんとつ町のプペル」が映画化されるみたいです。
このデータを使って、是非皆さんでプペルを盛り上げていければと思います。

基本的に「えんとつ町のプペル」は著作権フリーです（西野さん天才）
なので、自由に使っていただいておkです。
僕自身2019/6にSteamでリリースした後、弊社でデータを持ち続けていましたが、もはやパブリックにした方がええやろー！
ということで今回Qiitaに記載させていただきました。

最後に宣伝させてください・・
現在もUE4でVRゲームやストーリーテリング系のVR（また西野さん関連かも？）を制作中です。
一緒に作品作りたいって方は是非お声がけくださいー！
それでは是非、皆さんもルビッチで遊びましょうーー

不備不足あったら何でもご連絡ください・・・！