【UE4VRゲーム制作日記】～蜂のモデリング、リギング制作手順～

# ズズさんの初めて作るUE4のVRゲームの制作日記です。
この記事は鈴鹿高専Advent Calendar 2022 8日目の記事です。

https://qiita.com/advent-calendar/2022/snct

高専4年創造工学（制作開始：4月～）でのゲーム制作の思い出として書き始めたものシリーズでもあるので、是非他にも目を通して頂けたら嬉しいです。
苦労したこと、覚えておきたいこと、思ったことなどつらつらと。
作品が完成するまで書き溜めている日記になっていますので、後々公開していきます。

## 今回作ったもの
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/4730388e-b5fe-3cd7-78d5-fc93ffb1e3ae.png"width="50%">
改めてだと思いますが、今回のモデルは「スズメバチ」です。
凶暴だと思われがちですが、よくよく見るとおもちゃみたいでかわいいですよ😊
気になるよ～って方は「おーチャンネル」でも見ていただけたらと思います。

ここからは、これからblenderでキャラクターモデリングしてみたいよって方向けの記事となっております🙌
これを見ればキャラモデがなんとなく一通り網羅できる内容かなと思います。

## 制作手順

### 1.モデルの下書き
私はいつもアナログで機構の仕組みだったり見た目をデザインしてからモデリングに移ります。
- ポイント
    - 頭の中で考えているものを図として出して、イメージを抽象化することでモデリングが格段に楽になるよ！
    - 複雑なディテールになりそうだなって時は、3面図も書いたりするよ！
    - blender上で画像を背景にしながらモデリングする方法もあるけど、その場合は綺麗な線で描くことが大事だよ！
    - ついでに三面図に合わせたり、上記の方法でモデリングするときは、しっかり頭の中で空白の部分の形を思い描かないと形が歪んでしまうので気を付けよう！

今回のコンセプトデザインの初期案だったりいろいろ載せておきます。
最終的には良いとこ取りしてモデルを制作しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/f56d6d59-21cb-82fe-4026-fcf29daf6d28.png"width="35%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/d2f02d16-bb96-7676-2afd-880bbe823729.png"width="50%">
カブトムシとかもデザインだけしてたり、フィールド案とか遊び方とかも全部イラストに起こしてたアイデアたちも載せておきます。当時の夢見心地が伺えるね！
初期は石を投げて攻撃する予定でしたが、諸事情でスプレーでの攻撃になりました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/480c2582-a8a7-7ac7-8e05-e8262904841f.png"width="40%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/f0decedb-de08-7969-10ea-f7bd5629aa9d.png"width="50%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/33d3206f-0e70-e58d-5ce7-d9bae1b232ed.png"width="50%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/ad589b9e-18a4-dfcc-a164-4035b08ac61d.png"width="48%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/57217758-a73b-427f-fe72-c92868f149fe.png"width="25%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/d3d192e7-2d7f-d110-d0f1-5f21b1bc7ac1.png"width="40%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/0e9759eb-9d46-f425-1390-2daea8dffc1c.png"width="35%">


### 2.モデリング
上記の下書きを参考にモデリングを始めます。
- ポイント
    - モデリングのコツは、まず大まかな形を作ること！
    - 大まかな形を作ってからディテールを細かくしていくことが大事！

ごめんなさい！過程の写真を撮っていなのでメッシュだけ載せておきます。悪しからずご了承ください....
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/5b180f13-e27c-7fce-7794-779496670914.png"width="50%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/9da3fae2-96e5-3690-fd2b-1a346df03f44.png"width="49.5%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/13d20b66-9008-991b-d83b-2b572d7fc631.png"width="49.7%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/80e8c8b7-014e-46c9-7ea0-1d2062988cda.png"width="49.5%">


### 3.UV展開
次にUV展開を行います。
UV展開とは2Dのテクスチャを3Dのモデルに貼り付けるために、3D空間の座標と2Dの座標とを対応付ける必要があり、その対応付けを行うために3Dのメッシュを2Dの座標に展開することをいいます。（引用http://krlab.info.kochi-tech.ac.jp/kurihara/lecture/cg/BlenderWeb_Hayashi/html/materialAndTexture.html#)

- ポイント
    - なるべく目立たない位置の辺にシーム（展開する時の切れ目）をマークする！
    - シームは少なくても変になるし、多すぎてもめんどくさい！！でも多い方がていねいかも！！！ほんとにここがめんどくさい！！！良い妥協点を見つけましょう。

#### UV展開の手順
>①画面上部から【UVEditing】を選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/7eb843a6-88e0-cb44-4bf4-43352d987514.png"width="60%">
②シームは辺を左クリックで選択し、右クリックから【シームをマーク】を選択する。
③シームのマークが十分にできたら、メッシュ上で【L(リンク選択)】を押し、リンク選択から【シーム】を選択する。（リンク選択の範囲がシームで囲ったメッシュごとになる）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/2d7bc283-65eb-2f73-06d3-f21357e920d6.png"width="30%">
④それぞれをシームごとに【L】で選択し、【U(UV展開)】を押してUV展開を行う。
　そうすると、下図右部のようにメッシュが展開される。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/7568899f-a640-a4b2-9080-eba1a9abe139.png"width="60%">
【U】から表示される【ビューから投影】や【スマートUV展開(なんか自動的にスマートに展開してくれるやつ)】等をうまく使い分けて、残りのメッシュも展開して、世界一分かりやすいUVマップを目指そう！！色ごとに固めて配置したりすると、後々楽かもしれないです。
>
>⑤結果丸1日かけて世界一見づらいUVマップが完成したよ！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/a9c7b2b4-0822-916a-b81d-1eba95d6a614.png"width="60%">

### 4.テクスチャ制作(SubstancePainter)
次はみんな大好きテクスチャ制作です。モデルにぺたぺたする画像を作っていきます。
テクスチャ制作はSubstancePainterを使用しました。Adobeで1.5万ぐらいで買ったのですが、今は学生は無料で使えるそうです😢我の一万....

UV展開したモデルをSubstancePainterで読み込み、テクスチャを作っていきます。サブぺは有能すぎて楽しい！
制作したそれぞれのテクスチャはこちらになります。

←BaseColor    ↓Normal    →OcclusionRoughnessMetallic
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/fd18cdf9-a128-d28d-88a6-093c2c1b0947.png"width="30%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/ce93d866-283b-eb0b-758a-5788930dd7f3.png"width="30%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/6f7816ee-1859-2da6-cbc7-f1b1fbab101e.png"width="30%">

#### SubstancePainterへの導入方法
>①blender上にて画面上部の【ファイル】から【Export】から【FBX】へ変換を行う。
②SubstancePainterを起動させ、画面左上の【ファイル】から【新規】を選択、新規プロジェクトというタブが表示されるので【選択】ボタンからblenderのFBXデータを読み込む。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/a54347c7-7797-068c-69dd-31e5a6f1199c.png"width="50%">
③画面上に下図のようなモデルとUVマップが表示されたらちまちま作業の開始です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/79b48f7f-3178-72b2-3915-caf23abe60f3.png)

#### SubstancePainter～メカニック風マテリアル即時つけ焼きブレイド編～
ちょーーーーー簡単にちょーーーーー時短でサブぺを体験したい方へのおすすめテクスチャ制作を紹介します。
基本的な操作方法は【Alt+(マウス操作)】ですのでお気をつけて。
>①画面下部の【スマートマテリアル】を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/367f1d69-c5b0-eb15-b142-da75a2f666e3.png"width="%">
②検索タブで【BronzeArmor】（じゃなくても可）を検索、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/40ea73bc-8d4e-9063-2b71-dc396ade3648.png)
③上記のマテリアルを、画面右方のレイヤーに【ドラック＆ドロップ】
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/3e163911-129c-af8f-353e-2c3c8fcd0f84.png"width="80%">
④次にまた任意のマテリアルを【BronzeArmor】のレイヤーの上へ【ドラック＆ドロップ】し、右クリックから【黒のマスク】を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/1f61ee97-7b8e-3daa-39d3-cfe1150f1267.png)
⑤マテリアルのファイルを開いて、【BaseMetal】の【Basecolor】の色を弄って、好きな色に変更することも
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/805f82cc-e738-dd88-ea8e-bc9de40beac5.png"width="40%">
⑥左図のように【黒マスク】を選択したまま,右図の赤丸の【ポリゴン塗りつぶし】を選択する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/8390153d-e364-4838-5f63-558541b0be0b.png"width="25%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/3dff9a29-5c1e-5501-88a7-4dc8fe4967e4.png"width="75%">
⑦下図のように塗りつぶしを繰り返す！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/e3dcb3ff-e1df-2556-d0de-b137fb196dc8.png"width="75%">
⑧ちなみにブラシで直接書き込むこともできるよ！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/3163883b-b32f-3e05-6c08-ed353d6b1069.png"width="50%">
⑨最後に【ファイル】→【テクスチャの書き出し】からタブを開き、【出力テンプレート】から【UnrealEngine4(Packed)】を選択し、【書き出し】を選択でテクスチャの完成！！おめでとう！！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/263c59dc-092d-1052-c533-65fb7b6089cc.png)

#### SubstancePainter解説動画
とーーーーっても分かりやすい方の解説動画はこちら

https://youtu.be/eYEpNf_ij9g

https://youtu.be/7AlW4sk6GDw

#### blenderへのモデルとテクスチャの反映の仕方
>①画面上方から【Shading】タブに移り、マテリアルの【新規】ボタンを押します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/84e1af26-66da-6250-d109-656953c83471.png"width="50%">
②そうするとこのようなノードが表示されるので、【プリンシブルBSDF】のノードを選択し、【ctrl+shift+T】キーを押しましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/1591c7e3-7806-a44b-3eb0-8d3fd200167e.png"width="20%">
③ファイルビューが出てきたら、先程サブぺで作成したテクスチャ【BaseColor】【Normal】【OcclusionRoughnessMetallic】の三枚を選択します。すると、あら不思議！完璧なノードが組まれたではありませんか！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/5b42a118-111e-2459-9f08-b7b1535b9af8.png"width="30%">
これで君も怖いものなしのテクスチャー達人！

#### UE4へのモデルとテクスチャの反映の仕方
>①UE4を起動したら、エクスプローラーを起動し、UE4のコンテンツブラウザの任意の場所へ先程作成した【FBXファイル】【BaseColor】【Normal】【OcclusionRoughnessMetallic】のテクスチャを【ドラック＆ドロップ】します。
②次に、コンテンツブラウザ上の任意の場所で右クリックし、【マテリアル】を選択、生成されたマテリアルに任意の名前をつけ、【ダブルクリック】してマテリアルタブを開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/f83e19cc-b1a4-6173-1268-ba4deb1c324d.png"width="40%">
③コンテンツブラウザ上のテクスチャ3枚をマテリアルタブのエディタ上へ【ドラック＆ドロップ】を行い、下図のようにノードを組みます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/a6170cd3-9dae-df3f-7a7a-48d911cc709e.png"width="60%">
④マップ上に表示させたメッシュに作成したマテリアルを【ドラック＆ドロップ】して完成です！！
　これで君も怖いものなしマテリアル達人！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/2919f100-1200-14a5-124e-eddceb40b326.png"width="50%">


### 5.リギング
次は世界が愛すべきリギング作業です。
ボーン(簡単に言えば骨組み)を作って、骨を動かしてキャラクターを動かせるように設定する作業です。
#### リギングの手順
>①【Shift+A →アーマチュアを選択】
②【R -90】//ボーンの回転
③【E】//ボーンを延長して関節ごとに切り分け動かしたいところに伸ばしていく
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/5bbd1ca9-6ab4-a795-69bd-ca0170edf4d4.png"width="50%">

#### ボーンにメッシュが追従するように設定します。
>①オブジェクトモードで【shiftを押しながら[メッシュ]→[アーマチュア]の順で左クリック】し、二重選択の状態にする
②【ctrl+P】を押して、ペアレント対象という項目をだす
③【アーマチュア変形】の中の【自動のウェイトで】を選択
※ここでエラーが発生した場合は諦めて【空のグループで】を選択しましょう
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/3f6bf979-3989-37db-c05b-df1997bc3d65.png"width="50%">
【自動のウェイトで】がうまう反映された方は、これで大まかなリギングが出来ました
④【ポーズモード】でボーンを動かしてみて追従しているか確認してください。

#### ウェイトペイント
次にボーンを動かしたときのメッシュの影響度を弄って、不自然さを解消していきます。
【空のグループで】で適用した方はここの作業量が10倍ほど増えるだけなので頑張りましょう！
>①今回は【shift+[アーマチュア]→[メッシュ]の順で選択】して二重選択の状態にして、画面左上から【ウェイトペイント】を選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/36f0c965-bc15-ecfc-114e-e63c7767642d.png"width="50%">
>この項目はちまちま作業編なので、分かりやすい方の動画を張っておきます。

#### ウェイトペイントの解説動画

https://youtu.be/HQ67uB_n4cQ

#### IKの設定
次はとっても便利！関節の設定です
IKとは[I(いい感じの)K(関節)]のことである。
簡単に言うと、人間に例えると、手の平のボーンを動かすだけで、それに追従して腕を曲げたりすることのできる機能であります。
CGアニメーターさんが喜びます。
ちょーーーーーーーめんどくさい設定なので、分かりづらいかもしれませんがご了承ください....
>①（すみません間に合わなかったので後日公開させて頂きます）

### 6.モーション
最後の作業は動かしてなんぼ！アニメーション、モーション制作です
モーションは、画面上部のコントロールタブから【Animation】を選択し、
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/bf3ed01b-8789-6b47-56ca-a5c0c2ed379a.png">
画面下部に表示される【ドープシート】で作業を行います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653576/0210909f-631e-c7b0-db75-7ce89c77f98d.png"width="50%">
ここもかーーーーーなりめんどくさいので割愛させていただきます。

#### モーションの解説動画
参考動画はこちら

https://youtu.be/Sge-SHPVxpo

ちなみに今回制作したアニメーションはこちらです。

//youtudeモーション動画

## おわりに
ここまで見てくださってありがとうございます！
キャラクターモデリングって奥が深いんですね...
作れば作るほど、効率のいいやり方とか自分のやりやすい方法とかが分かってくるので、皆さんもどんどん作ってってください！
世界のどこかの誰かの参考になれば幸いです。