ロボットタイプのアバターにUV展開でマテリアルをはる手順



![SS 192.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/a41cd967-f549-8677-1efa-2e99bf69518d.png) ごくいちぶの界隈にしか需要がないけど

# この記事のターゲット
[Unity/VRChatにロボット系3Dモデルをインポートして動かす全行程](https://qiita.com/Ninagawa_Izumi/items/974c047fdd6327621b3a)
の続きの記事です。
UV展開が面倒だけど軽量化のためにそろそろやるか...という方向けの記事です。
ロボット型アバターならではの、ちょっと特殊でお手軽な割り付け方法になります。

# 準備物
* [この手順](https://qiita.com/Ninagawa_Izumi/items/974c047fdd6327621b3a)で作成した自作アバターデータ（ロボットタイプ）
* Blender
* Unity

※BlenderはバージョンによってUIが大きく異なります。当記事では3.01を使っています。


# 工程の全容

**貼り付ける画像の準備して→BlenderでUVの割り付けて→fbxをエクスポート**

となります。では早速作業をしていきます。

# [01] 3Dモデルを開く

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/63b0cf15-1dfe-2823-172b-86cf0d0785f7.png" width = 70%>

Blenderでマテリアルで色付けされたロボット（アバター）のファイルを開きます。


# [02] 貼り付ける画像の準備をする

いきなりですがここでいったんBlenderから離れます。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/c97f65cd-bb08-9845-1d52-ef5501126ead.png" width = 50%>

ロボットに使う色で塗り分けた画像ファイルを作るのですが、図のようにパワポでつくったものを雑にスクショしたものでも問題ありません。
なんと色面の大きさも適当で大丈夫です。（理由は後述）


# [03] マテリアルを準備をする

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/8236f304-4b99-2c50-50b7-c6f00947b83d.png" width = 80%>

「UV Editing」のタブで画面移動し、左画面の上にあるメニューの「絵のアイコン」から、「開く」を選択します。


<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/f484aab3-582b-4d71-4f4d-337b917cbf6f.png" width = 70%>

前の手順で準備した画像ファイルを選んで開きます。左側に選んだ画像ファイルが表示されます。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/e8e8e4a1-aa80-fc74-0dcb-eeea072b5603.png" width = 30%>

右側のマテリアルのタブ（赤い地球儀型のアイコン）に移動します。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/6b2b182d-f249-b280-a344-ca6968a89717.png" width = 50%>

「＋」ボタンでマテリアルスロットを追加し、そのまま「新規」ボタンでマテリアルを作成します。
テキストボックスで適当な名前（写真ではTOUGOU）をつけます。
このマテリアルに画像とメッシュを紐付けていくわけです。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/b303dd9e-90e9-1303-b327-c2d2642b1174.png" width = 50%>

マテリアルに画像を紐づけるために、「サーフェス」メニュー内の「ベースカラー」の項目のところにある、小さい丸ボタンを押します。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/bba913a3-8963-6919-062c-b5c23cde6892.png" width = 90%>

ポップアップメニューの「テクスチャ」の欄より「画像ファイル」を選択します。
「開く」のボタンが出現するので、先ほどパワポなどで作成した画像ファイルを開きます。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/f2018100-b80b-fcd8-9f0f-9e9699d01d4a.png" width = 50%>

プレビューに塗り分けられた球のアイコンが表示されます。

# [04] UV展開をして割り付ける

UV Editingの画面にいることを確認します。
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/be2f8be2-69d8-45da-9f16-9ad63259fe79.png" width = 90%>
右側のマテリアルの玉アイコンが並んでいるところから、一番上のマテリアルを選び、「選択」ボタンを押します。
すると、その色が割りつけられているパーツが全選択されます。
この時、左側のUV展開ウインドウにもいいかげんな展開図が表示されますが気にせず進めます。
同じ色のマテリアルが複数ある場合には、同様の手順を繰り返すことで一括選択ができます。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/224efa8a-d150-064b-72ce-f8adcb193a8f.png" width = 70%>

UV Editingのアバターが表示されている画面の上の「UV」メニューから、
「スマートUV投影」を選択し、

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/95419a4f-283a-510e-4faf-2f8d6421db0f.png" width = 50%>

OKを押します。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/e12c6d43-a96c-fc3e-f479-bc5b6abdaa72.png" width = 50%>

すると左側に展開図がまとめられた形で投影されます。


<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/1cda72b4-ce13-c026-5d69-0cdb2afcc908.png" width = 50%>

これを色に当てはめる作業をします。
「a」キーを押して全選択し「p」キーでピン留めします。
ピン留めはもう一度UV展開したときもその位置に展開する、という機能らしいので、この段階でピン留めをしなくてもよいかもしれません。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/08cb9b91-c095-239a-1f4c-d583894707cc.png" width = 50%>

全選択のまま「s」キーを押して展開図のサイズを小さくします。
「g」キーを押すと画面内を移動できるようになるので、当てはめたい色のところにおいていきます。
今回のマテリアルは模様ではなく色ベタの面なので、元の画像ファイルのサイズとは関係なく、好きな場所に好きなだけ縮小してUV展開図を配置することができます。
　　

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/9dd8b8fe-69ad-df01-4c94-45d1aa100956.png" width= 300/>    

つぎに、マテリアルプロパティから先ほどつくった「TOUGOU」を選択し「割り当て」を押します。
こうすることでパーツにTOUGOUのマテリアルが割り当てられます。
（※20220715 この大事な工程が抜けていることに気づき追記しました。）

**この手順を繰り返し、全ての割り付けを完了させます。**

# [05] おまけ:色数が足りなくなったとき

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/d8e2820c-449d-7e89-19ac-0eb5d781cacd.png" width = 70%>

「Texture Paint」のタブに移動すると、画像に色を上塗りできるようになります。
左の画面の筆アイコンやバケツアイコンを選択し、左画面上部の色のついたボックス（デフォルトは白かも）よりカラーピッカーで色を選ぶと、開いている画像に色を塗ることができます。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/1d79b65c-83f5-34ac-d43a-93937253b8eb.png" width = 70%>

これは黄色が置かれていた面にバケツで緑色を塗ったところです。

# [06] 画像ファイルとUVを紐づける

UV展開図画面の画像をいったん保存します。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/d58c805f-d725-4a87-b1c9-1ec2278f1b1e.png" width = 70%>

保存をするには、UV展開図ウィンドウのメニューより「画像」→「保存」を選びます。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/93c7361c-0122-b9f9-f53a-d0587e4041ad.png" width = 70%>

画面右のマテリアルプロパティ（赤い球のアイコン）の中で、
冒頭で「TOUGOU」と名付けたの統合用マテリアルを選択します。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/4f7b4c19-fa6a-a22d-9698-99c4c1e532a3.png" width = 70%>

上部のタブよりシェーダー画面に移動します。 
画像のノードを追加します。（この手順は不要な場合もあるかもしれません）
「shift + a」の後、「テクスチャ」→「画像テクスチャ」を選択します。

![b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/a833951b-0631-b058-4bea-d1a46d57f8c7.png)
いま作成したノードから、フォルダ型のボタンを押して最初にパワポなどで作成（の後でBlenderより変更保存した）した画像を選択します。
これでUVテクスチャへの割り付けと紐付けが完了となります！

**ここで一旦保存をすると安心です。**

# [07] 古いマテリアルを削除する

マテリアルプロパティ（赤い球のアイコン）で古いマテリアルを削除していきます。
「TOUGOU」だけを残して正しく着色されていれば成功です。

この時、**UV EditingやModelingの画面ではどんどんモデルから色が抜けていき焦るかもしれませんが、Shadingの画面でパーツの色が残っていれば大丈夫**です。

うまくいかなかった場合は、Ctrl+z(コマンドz)や復帰メニューなどで戻り、手順に抜け漏れがなかったかを確認します。

# [08] FBXをエクスポートする
fbx形式で保存してBlenderの作業は終了です。

# [09] FBXをUnityにインポートする
Unityに読み込む場合には、「Asset」「Import New Asset…」で読み込むと、テクスチャのマテリアルごと読み込まれます。
（画面下のAssetsにドラッグ＆ドロップでインポートするとマテリアルがついてこないのでご注意。）

# ＜静止立像用のポージングとボーン抜き＞

ボーン入りの動くアバターではなく、ボーンなしの静止立像のファイルを作成したい時の手順です。

まず、ポーズモードでポーズを作成します。（詳細割愛）

次に、そのポーズで静止した状態のファイルが出力できるようにしていきます。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/5adc178b-5aca-15f9-4b35-a1af4a68f8db.png" width = 50%>

オブジェクトモードで右のリストからアーマチュアのオレンジ▽を選択し、
したのモディファイア（水色のスパナアイコン）のV矢印ボタンで適用をチェック。
これでポーズが固定されます。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/ed0d3da6-b6b8-f5eb-72a9-27d4ec01bb81.png" width = 50%>

アーマチュアのグリーンの人形のところの骨マークの上で右クリックし、「削除」を選択します。
これでボーンがはずれます。

そのままfbxで保存すればOKです。

お疲れ様でした！！！

### 変なところがありましたらコメント欄等でご指摘ください！

# 参考
今回の手順は[@waryou5](https://twitter.com/waryou5)さん、[@S_Thurk](https://twitter.com/S_Thurk)さんに教えていただきました。
ありがとうございました。

その他参考URL
* [BlenderのUV展開！手動で思い通りにUV展開する方法まとめ](https://tohawork.com/b-uvedit)
* [VRChat メカCADからアバター作成メモ](https://s-thurk.hateblo.jp/entry/ar1896233)

など。

### つづきの記事
https://qiita.com/Ninagawa_Izumi/items/3943f4bcc20de9800c55


### 前の記事
https://qiita.com/Ninagawa_Izumi/items/974c047fdd6327621b3a