Lumberyard初心者が、がんばってユニティちゃんを表示してみた

[Lumberyard Advent Calendar 2017](https://qiita.com/advent-calendar/2017/lumberyard)、12月1日の記事です。

記念すべき初回を担当させていただきます。

とはいっても私は今年11月までLumberyardは両手で数えられるぐらいしか触っていない初心者のため、高度な技術情報を共有するレベルにはいたってません。

そこで勉強がてらユニティちゃんをLumberyardに表示してみることにチャレンジしたので、その結果を書いていきたいと思います。

今回検証で使用したLumberyardのバージョンは1.11.1になります。

ユニティちゃんのFBXってどこにあるの？と疑問を抱いた方は「[UE4でSD版ユニティちゃんを動かしてみる　ー Part1 ユニティちゃんをUnrealEngineへお出迎え（インポート）ー](https://qiita.com/saxor/items/76c366e9dd2ab064c316)」の「[やること(Unity側)](https://qiita.com/saxor/items/76c366e9dd2ab064c316#%E3%82%84%E3%82%8B%E3%81%93%E3%81%A8unity%E5%81%B4)」をご覧ください。

今回はFBX、テクスチャーのインポートおよびマテリアルの設定まで行います。

# FBXインポート

公式のマニュアル「[FBX設定の使用](http://docs.aws.amazon.com/ja_jp/lumberyard/latest/userguide/char-fbx-importer.html)」を見ながら、ユニティちゃんのFBXをインポートします。

## FBXインポート　基礎編

マニュアルを見る限り、どうやらLumberyaerdはプロジェクトフォルダにfbxを置くとある程度自動的にインポートしてくれるようです。

なので、プロジェクトフォルダにまずユニティちゃんのFBXをおきましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/f1b30a78-895e-e3ae-2441-b86b9473d4eb.png)

今回はスターターキットを利用しているため、もし自分と同じようにスターターキットプロジェクトに入れるのであれば、以下の場所に配置します。

C:\Amazon\Lumberyard\1.11.1.0\dev\StarterGame\Objects\

今回はObjectsフォルダの中にあるCharactersフォルダ内にFbxを置いています。

Fbxフォルダを置くと、このようにAssetBrowserに自動的に追加されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/20fdaadd-7a24-ffaa-8cc2-eb3ca60bf620.png)

検証時は色々とインポートの設定をいじくっていたため、ファイルを置いた時点でいくつか余計なファイルが生成されていますが、一番大事なのは**fbxファイルがAssetBrowserに表示される**ことです。

表示されない場合はLumberyardを再起動、それでも表示されない場合はFbxが壊れている可能性が高いため、再度公式サイトから落とすか、Maya等でFbxを生成してください。

ただ、このFbxをインポートしても以下の画像の通り、インポート設定が色々と狂ってるのかバグなのかわかりませんが、とても凄いことになる場合があります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/b2e09c29-75bd-4738-ca89-55183fec8083.png)

さっそくこのメッシュ崩れを直します。

1.10以降の場合、Fbxファイルを右クリックするとEdit Settingsが一番上にあるのでクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/5acda9d4-67aa-174f-af4d-d995e42229bf.png)

クリックするとFbx Settingが表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/526e169e-4a51-41a6-44a9-dbc04b2a5a50.png)

適切なルートボーンを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/db9aebf6-0eb8-ade6-ab15-4321092840b0.png)

Meshタブを押して何もない場合、Add another meshボタンを押してでメッシュ設定を作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/f7671ff7-5bf9-ae61-b6bb-02fe39621e26.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/f1f117e9-48d7-d749-5730-604e255df36e.png)

MeshesタブとActorsタブ、それぞれのタブで右下のUpdateボタンを押し、successfullyが表示されれば無事完了です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/372ff01b-d569-fe60-5035-a6aef609daa4.png)

インポートに成功すると、下にcgfファイル(静的メッシュファイル)が作成されています。どうやらこれがないと、メッシュが大幅に崩れてしまうようです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/a5f31447-c386-8e4a-a871-5222dc18d1d6.png)

この状態でFbxファイルをインポートすると以下の通りになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/7eed2e5f-37d7-a8da-f703-976b88878767.png)

……なんか顔がおかしいですね。しかし、ユニティちゃんのFBXをLumberyardでインポートするとこれが**仕様**になります。（FBX Settingを色々とためしましたが、どうしても直らなかったので、現状では仕様としかいえません）
Unityはもちろん、UnrealEngine4でも問題なかったユニティちゃんのFBXインポートがなぜLumberyardでは顔パーツと後頭部が変な位置に表示されるのか、正直疑問です。

というわけで、この顔パーツを元に戻すために一度3次元コンピュータグラフィックスソフトウェアで顔の位置が適切になるように修正し、再度FBXファイルを生成しないといけません。

## FBXインポート　ユニティちゃん限定作業編

早速3次元コンピュータグラフィックスソフトウェアで直しましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/3b20818b-ac57-99bb-8afd-c4be5d9de8d8.png)

公式がMayaと3ds Maxをプラグイン込みでサポートしているので、サブスクリプションを払っている方はどれかを使えば問題ないです。

しかし上記二つのツールは￥30,240/1ヵ月とライセンス料が高いため、ユニティちゃんの顔位置を戻すだけというだけで１か月分のサブスクリプション料金を払うのは正直割高です。

公式プラグインに対応していないMaya LTなどその他のツールは、[フォーラム](https://gamedev.amazon.com/forums/questions/8252/maya-lt-and-plugin.html)を見る限りFBXでインポートするのが推奨されているようなので、割安な方法でユニティちゃんの顔を適切な形に直してしまいましょう。

今回は無料で使用できるblenderを使用しました。
![blender](https://www.blender.org/wp-content/themes/bthree/assets/images/logo.png?x67638)
修正時のバージョンはv2.79になるため、今後のバージョン次第では変わる可能性があります。

ユニティちゃんのモデルをblenderで修正する場合、以下のサイトが参考になります。
[Blenderでユニティちゃんを読む-(2.72以降)](http://qcganime.web.fc2.com/UNITYCHAN/UnityChan01.html)

どうやらblenderでユニティちゃんのFBXをインポートすると同様の現象が発生するようですね。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/278118b4-cb08-ba67-3644-f92dd5760005.png)

サイトを見ながら修正した結果が以下の画像になります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/d9dcd5ff-93d9-0624-65d6-a95f594b9aaf.png)
インポートされた一部ボーンの向きがおかしいですけど、今回は気にしないことにします。

修正したユニティちゃんをFBX生成し、再度Lumberyardにインポートした結果、無事に顔も正常に表示されるようになりました！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/d2e9f57e-66b6-61c8-efbf-3ea23beac18c.png)

※作り方次第ではFBX SettingのUpdateで以下の通り警告が大量にでますが、検証だけであれば気にしなくても大丈夫そうです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/eb873c58-3967-3ce8-5af6-de2b9c57ff91.png)

他のユニティちゃんモデルアセットを調べたところ、以下のアセットで上記の作業が必要です。

・ユニティちゃん通常モデル
・ユニティちゃんCRS

SDユニティちゃんは通常服のユニティちゃんはエラーが出たため、FBXの再作成が必要です。
SDコハクちゃんズモデルは何も問題はありませんでした。

※なぜハロウィンユニティちゃんは普通にインポートできたのか謎です

## FBXインポート　まとめ

簡単にユニティちゃん3DモデルのFBX再作成が必要か否かをまとめてみました。

| アセット名     |       FBXの再作成が必要か |
|:-----------------|:------------------:|
|ユニティちゃん通常          |              ○ |
|ハロウィンユニティちゃん         |              × |
|ユニティちゃんCRS         |              ○ |
|ローポリユニティちゃん        |              × |
|SDユニティちゃん        |              ○ |
|SDこはくちゃんズ        |              × |

※1.11.1時点、今後改善される可能性あり

インポートできたユニティちゃんモデル達を並べてみました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/21c54699-aa64-a6a7-4728-1a0cb8308fb5.png)

圧巻ですねー。

# マテリアル設定

続いてマテリアルの設定を行います。
僕のスキルではシェーダースクリプトを書いてトゥーンレンダリングする、ということは残念ながらできないため、簡単なテクスチャー反映のやり方を書いていきます。

##テクスチャーインポート

テクスチャーをインポートし、各モデルのマテリアル設定を行います。

まずテクスチャーをプロジェクトフォルダに配置します。
以下の場所に置くと、Lumberyardが自動的にAssetBrowserへ読み込みます。

C:\Amazon\Lumberyard\1.11.1.0\dev\StarterGame\Objects\

![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/df94ea68-5f9d-812e-7b03-1f3f2dcb493b.png)

画像のフォルダはハロウィンユニティちゃんのテクスチャーファイル一式です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/2f2f84fe-114e-be40-1910-d24cbd655c8d.png)

AssetBrowserにはこのように追加されます。

## マテリアル追加

マテリアルにテクスチャーを追加するため、マテリアルの編集画面を開きます。
まず大前提として、FBXインポートでのUpdateで、mtlファイルが作成されていることを確認してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/ad1adfa3-1288-0a7e-05b0-275a888b0f2f.png)

mltファイルがない場合、マテリアルの作成がうまくいかなかったため、FBX Settingから以下のチェックボックスを入れた上でUpdateしてマテリアルを作成します。

![インポート.png](https://qiita-image-store.s3.amazonaws.com/0/104377/7011f427-085b-4826-5cf4-dfd7fcb3e06e.png)

mtlファイルがある場合、Entity Outlinerから編集したいモデルを選択し、RollupBar
タグのComponentEntityにある、Mtl欄をクリックします。
![マテリアル.png](https://qiita-image-store.s3.amazonaws.com/0/104377/7adf7eb5-2885-3300-ac27-6c04c568af09.png)

※ここがFBXから作成されたmtlファイル以外が入っている場合があります。その場合インポートに失敗してマテリアルが壊れてしまったので残念ながら最初から設定をやり直してのインポートになります。

Mtl項目をクリックすると、Material Editorが開きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/3e9025f1-fec3-ca85-a58f-f824c485aaa1.png)

早速編集するマテリアルを選択します。今回は髪のマテリアルを設定するので、hairマテリアルを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/39c7a8a8-326c-ee38-7246-2e56bf45d924.png)
するとマテリアル設定の詳細が出てくるので、該当の項目にテクスチャーを反映します。

まず、Diffuse項目にテクスチャーを配置します。これは基本カラーになります。
DiffuseにあるフォルダのアイコンをクリックするとPick Texture画面が開くので、該当のテクスチャーを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/e2fb4b4a-82ef-bf85-bf0d-c618049d8ee1.png)

Diffuseにテクスチャーが反映されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/696c7bc8-a923-6bea-f334-d64c90693b6f.png)

エディターに置かれたユニティちゃんモデルにも、マテリアルの変更がリアルタイムで行われます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/0331411f-b02f-0d2d-c1c3-3bd40cb27368.png)

つづいてノーマルマップを設定します。
Diffuse項目の下にあるNormal Mapを開いて、右のフォルダアイコンをクリックして、該当のノーマルマップを選択してください
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/05517d5e-55e1-5847-fded-244e5c305513.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/65cb7226-e751-bde7-764b-b9c872ebd37f.png)

これでノーマルマップが無事反映されました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/76c9bdd0-0780-eccf-948b-dad0dd9adaec.png)

モデルを見てみましょう。凸凹が付いて立体感が出た、気がします！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/94fe4d7d-500c-4245-2717-c35cc9c1b7db.png)

続いてスペキュラマップを設定します。
Normal Map項目の下にあるSqecularを開いて、右のフォルダアイコンをクリックして、該当のスペキュラマップを選択してください
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/705e12a8-5ceb-41df-d449-2688fd0e6d4f.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/72042a3c-ff88-468b-e83d-792c63272d01.png)

これでスペキュラマップが無事反映されました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/ef1c638c-07aa-d9b8-38bc-2910f836df26.png)

モデルも見てみましょう。あまり変わっていないような気もします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/2af1ce59-1fa0-2a2c-44f1-992418fa6458.png)

基本的なテクスチャーインポートは以上になります。

## プチ特殊なマテリアル設定
ユニティちゃんのモデルには、テクスチャーの両面描画が必要なもの、マスクをかける必要があるものがいくつかあります。順に簡単に解説していきます。

### 両面描画
髪の毛とリボンが途切れるように描画されてしまうので、この二つを描画するマテリアルは両面描画させます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/568bae1b-af42-03b4-a961-2479b2439e57.png)

設定は簡単で、Advancedにある2 Sidedにチェックを入れるだけです。
![両面描画.png](https://qiita-image-store.s3.amazonaws.com/0/104377/06bba03b-b700-aab4-bc26-02bc21675596.png)

リボンの裏面と髪の一部がちゃんと描画されました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/77aad329-b71e-4e62-eb66-c5cd5d0e78f3.png)

### マスク

デフォルトのまま設定すると、ほほのピンク部分と両目の表示がおかしくなるため、マスクで抜きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/92a798c0-2f99-16fe-f6e3-9f695d1737d0.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/6cbdfa6f-80de-0cd5-9da9-debc2b6c4dfc.png)

Opacity Settings欄にある、Alpha Testのバーを動かして、適切なマスク表示になるように調整します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/4339a3f2-0524-7daa-85c8-f375e2740431.png)

両目のマテリアルも同様にAlpha Testの値を調整します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/0b8c5cc8-9a93-c076-d307-cefa117fe4ae.png)

両目とほほが無事適切な表示になりました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/8033705a-5134-fa74-a10b-a25013d53741.png)

全マテリアルを反映するとこのような感じになりました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/938d84ef-1e51-084b-6f81-06b2cbe7cad9.png)

インポートできた全モデルにテクスチャーを貼り付けました
![image.png](https://qiita-image-store.s3.amazonaws.com/0/104377/81a019d9-f81b-bcc5-25d3-bb41ef7306b6.png)

やっぱり色がつくといいですね！

# まとめ
とりあえず簡単ですが、ユニティちゃんをLumberyardに表示できました。
次回はアニメーションのインポートと簡単な移動スクリプトを組んでみようと思います。

明日は中の人、下田さんによる「初心に戻ってそもそもゲームエンジンってナニ？」です！
楽しみですね！

© Unity Technologies Japan/UCL