【再考】オクトパストラベラっぽいHD-2Dの世界を再現するにあたって
最近はHD-2Dっぽい世界をUnityで再現する作業を止めてしまっていたのですが、本屋さんで興味深い本を見つけたので、今一度、HD-2Dの世界観を再現するにあたっての所感をまとめておこうと思います。
1. これまでの見解
これまでは、こちらの記事にもまとめたように、Playerを2Dとし、背景を高解像度なモデルに「荒い解像度のテクスチャ」を貼り付けるのがベストという見解を見出しました。
しかし、高解像度なモデルを作成するのが手間ですし、モデルに専用のテクスチャを貼る必要があるというところも、ひとりでゲーム開発をする上では大変作業の負担になるという問題があり、いつまで経っても世界観すら作り上げることが難しいという課題がありました。そこで、3Dドットでモデリングする方法を検討し、「MAST」というUnity上で3Dモデルをスムーズに配置できる上、任意のテクスチャの作成と貼り付けが可能な無料のアセットを見つけました。これでポリゴン数が低いモデルに「荒い解像度のテクスチャ」を貼り付けることができるようになりました。
2. 新しい知見
ここまでで作業はストップしていたのですが、この度「まるごとわかる3Dドットモデリング入門 ~MagicaVoxelでつくる! Unityで動かす!」という本を見つけました。この本に興味を持ったのは、3Dドットのゲームを作成する上での手順を段階的に紹介されていたためです。この本で私が最も興味を持ったのは、３Dドットのモデルにボーンの設定をして動作させることができるようになる手順です。
本書では「mixamo」で3Dモデルのボーンのアニメーションが公開されており、それを本サイトでボーンとモデルを繋ぎ合わせる手順が記してありました。更にUnity上でボーンを設定したキャラクタを自由に動き回らせるところまでできているところが魅力の一つでした。
なお、本書では「MagicVoxel」を利用した3Dモデルの作成方法が紹介されています。「MagicVoxel」はペイントツールで選択した色を塗ることができるので「荒い解像度のテクスチャ」を再現することが可能です。
なお、軽く調べるとMagicaVoxel入門ガイドとして3Dモデルの作り方の手順をまとめているサイトを見つけることができました。
3.どうやってHD-2Dを再現する？
このような小ネタの知識を持ち合わせたはいいのですが、果たしてこれらの技術を用いて、オクトパストラベラっぽいHD-2Dの世界を自分で作成することはできるのでしょうか？私が再現したいのはこのようなイメージの世界です。この絵からはフィールドのモデルは3Dドットではなく、「ユニークな地形」に「荒い解像度のテクスチャ」を貼り付けていると推測できます。
しかし、現在の”ベスト”と思える手法であると、３Dドットのモデルを利用したフィールドとなってしまいます。つまりは「ユニークな地形」ではなく「3Dドットのモデル」を使った地形となるわけです。「3Dドットのモデル」で「荒い解像度のテクスチャ」を貼った地形がHD-2Dっぽくなるのかを検討する必要があります。
4.「3Dドットモデル」✖️「 荒い解像度のテクスチャ」の地形でHD-2Dの世界観を！
そこで、こちらの本とHD-2Dの世界観をつくるための背景設定を参考に、HD-2Dの世界を作ってみました。
実施したことは①3Dドットモデルの読み込み、②HD-2Dの背景の設定です。
なお、今回はフリーの3Dドットモデルを「Sketchfab」から見つけてきました。
余談ですが、仮に自分で3Dドットモデルを作成する場合は、Unityの無料アセットの「MAST」ではなく、「MagicVoxel」を使ってみようと思います。なぜなら、MASTはUnityの機能を利用し、発光などのレンダリング設定を行いますが、MagicVoxelはMagicVoxel内でレンダリング設定を行い、モデルファイルとして出力できるためです。MASTはUnityの機能でも発光など多彩なレンダリング設定が可能ですが、初心者にはとっつきづらいところがあるので、MagicVoxelの機能で十分であるように今のところは思えます。
「Sketchfab」でのモデルの種類は以下の通りであり、それぞれ特徴があります。
fbx：リグやモーションのデータを格納できます。
USDZ：Appleによって推奨されているモデルで、多機能でさまざまな表現を盛り込むことができますが、Apple以外ではサポートが乏しいモデルの形式です。
glTF：モデル内にアニメーションを設定可能です。fbxよりも多機能なモデル形式です。
GLB：glTFをバイナリ形式で表現したものです。glTFを出力する際、最低でもgltf形式とbin形式の2種類が出力されますが、GLBは全てまとめて1つのファイルとして出力されます。
なお、UnityではglTFをインポートすることができず、プラグインを導入することで可能になります。
5.ダウンロード可能なHD-2Dの背景になり得るフィールド
これまでで、「荒い解像度のテクスチャ」を貼り付けた3Dドットモデルで作成されたフィールドがHD-2Dの背景になり得るフィールドであるという結論に至りました。
そこで、テクスチャがプレーンなブロックで構成されたフィールドではなく、無料かつダウンロード可能なHD-2Dのフィールドを「Sketchfab」から見つけてきました。
5.1 「MagicaVoxel」で検索をかけた場合
プレーンな人のモデルが多く配置されているが、テクスチャがプレーンではないフィールド
なお、無料かつダウンロード可能なテクスチャがプレーンなブロックで構成されたフィールドで気になったものはこちらです。
プレーンな絵のの壁のモデル
雲の動きが心地よいモデル
家の窓が発光し、地面もまた窓の発光によって明るさが反映されているモデル
発光するレンダリング処理がされている路線に、路線の発光によって光沢のあるレンダリング処理がされている列車のモデル
天井の光によって雰囲気が出ているモデル
オレンジと青の光の輪の発光とその光を受けて光沢感のあるレンダリング処理がされている衛生のモデル
PCの飛び出している画面の透明度が心地よいモデル
RPGみたいなドットなフィールドが心地よいモデル
5.2 「Isometric」で検索をかけた場合
低い解像度であるけれども、ユニークな形かつ高解像度なユニークなテクスチャが貼られている、少し凝ったモデルが検索結果に多く出ました。
5.3 「voxel」で検索をかけた場合
テクスチャが透明になっていて、森をボクセルで3Dドットで再現できているモデル（マインクラフトみたいなモデル）
箱庭感が心地よいモデル
広大な敷地のモデル
6.「3Dドットモデル」✖️「 荒い解像度のテクスチャ」の地形でHD-2Dを再現してみる
6.1 【失敗】fbxファイルをインポートしてみる お試し1
こちらのモデルでfbxファイルをインポートしてみました。
すると次のようにFBXファイルとtetureファイルが分かれて入っていました。
fbxとTextureが独立したファイルをUnityにドラッグ&ドロップで持ってくると、案の定、テクスチャが反映されていないかたちとなりました。
こちらの記事を参考にテクスチャをマテリアルに繋げようとしましたが、うまくいきませんでした。
6.2 【成功】gltfファイルをインポートしてみる お試し2
こちらの記事を参考にUnityのプロジェクトにgltfファイルを利用できるようになるようなプラグインを導入してみました。
導入したプラグインはvrm-c/UniVRMです。VRM-0.106.0_6636.unitypackageをダウンロードしました。
ダウンロードしたパッケージをダブルクリックすると、次のようなメッセージウィンドウが表示されます。右下のimportボタンを押します。
インポートが終わると、次のメッセージウィンドウが表示されるため、Accept Allをクリックします。
処理が終わると次の画面が表示されます。
次にgltfファイルをプロジェクトに読み込んでみます。 ダウンロードしたファイルを解凍し、UnityのプロジェクトのAssetsにそのまま突っ込みます。すると、gltfファイルが確認できました。
次に.gltfをヒエラルキーにドラッグ&ドロップしました。prefabとなってヒエラルキー上にgltfファイルが現れ、プレビューでも確認できました。しかし、テクスチャが反映されませんでした。
そこで参考にしたサイトではglTFファイルの読み込みに成功していたglTFモデルをダウンロードし、プロジェクトで表示させてみました。
利用したモデルはこちらです。
結果、ミノカサゴのモデルが表示されたので、利用したモデルのglTFファイルがテクスチャとの紐付け設定に不具合があることが考えられることがわかりました。
6.3 【成功】gltfファイルをインポートしてみる お試し3
次にこちらのモデルのgltfファイルをダウンロードしてみました。
すると次のようにgltfファイルが反映されていることが確認できました
更に、ダウンロードしたモデルのスケール調整と「Directional Light」の光の強さである「Intensity」を2から1.3に変更した時の見え方は次のとおりです。
元々作成したかったオクトパストラベラのHD-2Dの世界と比較すると雰囲気が似せられたように思います。
6.4 【成功】gltfファイルをインポートしてみる お試し4
次にこちらのモデルのgltfファイルをダウンロードしてみました。奥行きがあると、どう見えるのだろう？という検討です。
ダウンロードしたモデルのスケール調整と「Directional Light」の光の強さである「Intensity」を0.5に変更した時の見え方は次のとおりです。影がないせいか、オクトパストラベラの世界とは異なるように見えますが、遠くのオブジェクトがぼかされており、雰囲気は似たと思います。
6.5 【成功】gltfファイルをインポートしてみる お試し5
更に既存のモデルのglTFファイルを試してみました。プレーンな3Dドットモデルでも、奥行きと、フィールドにコントラストがあればそれらしく見えることがわかってきました。
部屋の方がプレイヤーよりもだいぶ大きい場合の見え方
部屋とプレイヤーのサイズ感を合わせた時の見え方（壁際）
部屋とプレイヤーのサイズ感を合わせた時の見え方（手前）
6.6 【失敗】gltfファイルをインポートしてみる お試し6
次にかなり奥行きのあるプレーンな3Dドットモデルを試してみました。
しかし、テクスチャが紐づいておらず、フィールドとしては機能しませんでした。
6.7 【成功】gltfファイルをインポートしてみる お試し7
再び奥行きのあるフィールドを試してみました。このフィールドが最もオクトパストラベラっぽくなったと思います。ポイントは次の３点です。
・照明を明るくしてコントラストを強めた点
・フィールドに奥行きがある点
・テクスチャがプレーンではないところがある点（家の壁やドアなど）
照明が暗い時のフィールド
照明が明るい時のフィールド
フィールドを90度回転させて角度を変えてみた時
再度オクトパストラベラのゲーム画面となります。比較用です。
7.まとめ
HD-2Dを再現するにあたり、voxcelを利用したフィールドでもオクトパストラベラっぽい世界が再現できることがわかりました。
その際のポイントは次のとおりです。
・照明を明るくしてコントラストを強めた点
・フィールドに奥行きがある点
・テクスチャがプレーンではないところがある点（家の壁やドアなど）
また、HD-2Dを再現するにあたり幾つか課題が出てきました。
・gltfファイルでテクスチャが紐づいているものそうでないものがある
・gltfファイルによっては2Dの影が投影されないものがある
8.今後やること
今後はVoxelを簡単に作成できる「MagicaVoxel」によりフィールドを作成して、上記課題がなく正常にUnityにモデルをインポートできることを確認していきたい次第です。
また、Unityの無料アセットを利用したMASTとのフィールド作成の手軽さなども検討していきたいです。