[UE4]UnrealEngineでユニティちゃんを召喚する(後編)

[前編記事](https://qiita.com/iwax10/items/e07967e6e615cec5d5e9)からの続きとなります。
この記事ではモデルへのマテリアル適用と、モデルのアニメーション、そのあたりの細かなTipsをご紹介いたします。
それではやっていきましょう！

###Unityちゃんにマテリアルを適用
マテリアルを適応する前に、前編記事で作ったマテリアルの名前を、検索しやすくするために以下のように変更しちゃいましょう。
こうすることで、マテリアルは全て"M"から始まるので検索がしやすくなります。
hair_01_Mat -> M_hair_01
body_01_Mat -> M_body_01
skin_01_Mat -> M_skin_01
cheek_00_Mat -> M_cheek_00
face_00_Mat -> M_face_00
guide_Mat -> M_guide (これ多分いらないと思うけど一応)
eye_iris_L_00_Mat -> M_eye_iris_L_00
eye_iris_R_00_Mat -> M_eye_iris_R_00
eyeline_00_Mat -> M_eyeline_00 
![000.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/f3c2fa39-4515-09af-1bc0-625e19d86d66.jpeg)

それでは、マテリアルを適用していきましょう。以下のファイルを開きます。
![001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/afb80f5e-a7f2-46f6-6d1a-cddbb45e73cb.jpeg)

すると以下のような画面が開くと思います。
![002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/65493180-37a9-651f-b45d-536bab7c2966.jpeg)

この左の項目に、さっき名前を変更したマテリアルたちを順番に適用していきます。
ちなみに、Highlightという項目にチェックをいれると、そこがどこのパーツなのかアウトラインが表示されます。
以下のように順番にマテリアルを適用してみていってください。
(Element５は多分マテリアル無しでも大丈夫なもの...？だと思っていますが、なんとなくM_guideを入れています。多分間違っているので何もマテリアルを入れなくても大丈夫です。)

![003.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/fdfcdaaa-7873-607f-1bd7-030b9552da2b.jpeg)

してシェーダーコンパイルが終わると可愛い可愛いUnityちゃんとご対めn...
![004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/4b7ff3f8-9590-cc61-3cba-5dc4f34dce54.jpeg)

![005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/702a359e-8301-3814-435a-909fb98cccfe.jpeg)

( ﾟДﾟ)！？


###ほっぺたマテリアルの修正

Unityちゃんの頬っぺが偉いことになってます。これはこれで可愛いかもしれませんが修正しましょう。Unityちゃんファンに怒られないように。
"Content->Models->Materials->M_cheek_00"ファイルを開きマテリアルエディタを開きましょう。
そしてマテリアルの半透明を有効化する為に以下のようにBlendModeを"Opaque"から"Translucent"にします。

![006.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/101c9b89-a451-2c2d-0525-bd4e9499fc9d.jpeg)

したらマテリアルエディタのノードを以下のように修正すると、無事頬っぺたが頬っぺた頬っぺたしてるのが確認できると思います。
![007.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/d9d0e234-2206-507c-d18e-20d4cedc3718.jpeg)




###アニメーションイ付きデータのインポート

次に、実際にUnityちゃんを動かすためのアニメーションデータをインポートしましょう。
前編でコピーした素材の中から"unitychan_WIN00.fbx"を選択して"Content -> Models -> UnityChan" の中にインポートします。
![008.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/d0a3a6ec-8af5-7607-75d1-789161d34f27.jpeg)

すると、前編でインポートしたときと同じようにインポートウィンドウが開きますが、今度は以下のように設定します。
![009.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/650fedf1-868a-f83f-ae63-d6436ce03ee2.jpeg)

ImportMeshを外したのは既に前編でUnityちゃんの基本となるボディは読み込んであるからで、"Skeltal"はそのボディの共通となる骨を選択します。
インポートが無事終わったら、新規で作られたファイルを開いてみましょう。
![010.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/b123d8d9-0ef9-f9e0-6ce3-9e60d13dad96.jpeg)

あんたなっちゅうとこで寝そべってんねんー！！！( ﾟДﾟ)！！！丸見えやでパンts...

とインポートしたモデルの回転情報がおかしいので修正してあげます。
すでに読み込んでいるモデルでも、座標を修正して再インポートすることがUnrealEditor上で可能です。
左の"Asset Details"タブから"Transofrom"を探してXの座標を90にします。
![011.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/967f9a77-fba4-6b03-ac4b-949fa622f4cb.jpeg)

そして上のツールバーからReimportAnimationをクリックし再読み込みします。
![012.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/aa8f1a25-a445-cc6c-db3f-d4701af8bf8a.jpeg)

Unityちゃん、地に足つく
![013.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/5d07f4c9-c887-275b-b0dd-149591554856.jpeg)



###Hello World
では読み込んだアニメーションをマップ上で再生してみましょう。
以下のようにドラッグアンドドロップをして世界に召喚してください。
![014.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163667/f9cdba74-f047-8b67-5365-370ab74b2c7f.jpeg)

そして"Play"をしてみると...
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">[UE4]Fbxなどの外部ファイルをインポートする<br>(前編) <a href="https://t.co/dIPyvZvtiE">https://t.co/dIPyvZvtiE</a><br>(後編) <a href="https://t.co/cNO80d2U1I">https://t.co/cNO80d2U1I</a> <a href="https://t.co/HHONoxx8Gy">pic.twitter.com/HHONoxx8Gy</a></p>&mdash; iwax (@iwax51101141) <a href="https://twitter.com/iwax51101141/status/1170636456320102400?ref_src=twsrc%5Etfw">September 8, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
表示をUnlitに変更すると、よりUnityちゃん感がでますね！


###お疲れさまでした
まさか前後編に分かれるとは思ってなかった...。画像が多いのでページが長くなっちゃいましたね。
あ、記事とかで間違いだったりとかがあった場合TwitterでもFacebookでもいいんでいつでもマサカリ飛ばしてください。 <

自分のサイトでも技術Tipsなどをあげているので良ければ遊びに来てください。
https://iwaxlab.com

それでは