ユニティちゃん
Lumberyard

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

More than 1 year has passed since last update.

Lumberyard Advent Calendar 2017、12月1日の記事です。

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

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

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

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

ユニティちゃんのFBXってどこにあるの?と疑問を抱いた方は「UE4でSD版ユニティちゃんを動かしてみる ー Part1 ユニティちゃんをUnrealEngineへお出迎え(インポート)ー」の「やること(Unity側)」をご覧ください。

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

FBXインポート

公式のマニュアル「FBX設定の使用」を見ながら、ユニティちゃんのFBXをインポートします。

FBXインポート 基礎編

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

なので、プロジェクトフォルダにまずユニティちゃんのFBXをおきましょう。
image.png

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

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

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

Fbxフォルダを置くと、このようにAssetBrowserに自動的に追加されます。
image.png

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

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

ただ、このFbxをインポートしても以下の画像の通り、インポート設定が色々と狂ってるのかバグなのかわかりませんが、とても凄いことになる場合があります。
image.png

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

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

image.png

クリックするとFbx Settingが表示されます。
image.png

適切なルートボーンを選択します。
image.png

Meshタブを押して何もない場合、Add another meshボタンを押してでメッシュ設定を作成します。
image.png

image.png

MeshesタブとActorsタブ、それぞれのタブで右下のUpdateボタンを押し、successfullyが表示されれば無事完了です。
image.png

インポートに成功すると、下にcgfファイル(静的メッシュファイル)が作成されています。どうやらこれがないと、メッシュが大幅に崩れてしまうようです。
image.png

この状態でFbxファイルをインポートすると以下の通りになります。
image.png

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

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

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

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

image.png

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

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

公式プラグインに対応していないMaya LTなどその他のツールは、フォーラムを見る限りFBXでインポートするのが推奨されているようなので、割安な方法でユニティちゃんの顔を適切な形に直してしまいましょう。

今回は無料で使用できるblenderを使用しました。
blender
修正時のバージョンはv2.79になるため、今後のバージョン次第では変わる可能性があります。

ユニティちゃんのモデルをblenderで修正する場合、以下のサイトが参考になります。
Blenderでユニティちゃんを読む-(2.72以降)

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

image.png

サイトを見ながら修正した結果が以下の画像になります。
image.png
インポートされた一部ボーンの向きがおかしいですけど、今回は気にしないことにします。

修正したユニティちゃんをFBX生成し、再度Lumberyardにインポートした結果、無事に顔も正常に表示されるようになりました!
image.png

※作り方次第ではFBX SettingのUpdateで以下の通り警告が大量にでますが、検証だけであれば気にしなくても大丈夫そうです。
image.png

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

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

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

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

FBXインポート まとめ

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

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

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

インポートできたユニティちゃんモデル達を並べてみました。
image.png

圧巻ですねー。

マテリアル設定

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

テクスチャーインポート

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

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

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

image.png

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

image.png

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

マテリアル追加

マテリアルにテクスチャーを追加するため、マテリアルの編集画面を開きます。
まず大前提として、FBXインポートでのUpdateで、mtlファイルが作成されていることを確認してください。
image.png

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

インポート.png

mtlファイルがある場合、Entity Outlinerから編集したいモデルを選択し、RollupBar
タグのComponentEntityにある、Mtl欄をクリックします。
マテリアル.png

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

Mtl項目をクリックすると、Material Editorが開きます。
image.png

早速編集するマテリアルを選択します。今回は髪のマテリアルを設定するので、hairマテリアルを選択します。
image.png
するとマテリアル設定の詳細が出てくるので、該当の項目にテクスチャーを反映します。

まず、Diffuse項目にテクスチャーを配置します。これは基本カラーになります。
DiffuseにあるフォルダのアイコンをクリックするとPick Texture画面が開くので、該当のテクスチャーを選択します。
image.png

Diffuseにテクスチャーが反映されます。
image.png

エディターに置かれたユニティちゃんモデルにも、マテリアルの変更がリアルタイムで行われます。
image.png

つづいてノーマルマップを設定します。
Diffuse項目の下にあるNormal Mapを開いて、右のフォルダアイコンをクリックして、該当のノーマルマップを選択してください
image.png

image.png

これでノーマルマップが無事反映されました。
image.png

モデルを見てみましょう。凸凹が付いて立体感が出た、気がします!
image.png

続いてスペキュラマップを設定します。
Normal Map項目の下にあるSqecularを開いて、右のフォルダアイコンをクリックして、該当のスペキュラマップを選択してください
image.png

image.png

これでスペキュラマップが無事反映されました。
image.png

モデルも見てみましょう。あまり変わっていないような気もします。
image.png

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

プチ特殊なマテリアル設定

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

両面描画

髪の毛とリボンが途切れるように描画されてしまうので、この二つを描画するマテリアルは両面描画させます。
image.png

設定は簡単で、Advancedにある2 Sidedにチェックを入れるだけです。
両面描画.png

リボンの裏面と髪の一部がちゃんと描画されました。
image.png

マスク

デフォルトのまま設定すると、ほほのピンク部分と両目の表示がおかしくなるため、マスクで抜きます。
image.png

image.png

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

image.png

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

image.png

両目とほほが無事適切な表示になりました。
image.png

全マテリアルを反映するとこのような感じになりました。
image.png

インポートできた全モデルにテクスチャーを貼り付けました
image.png

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

まとめ

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

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

© Unity Technologies Japan/UCL