夏までにiPhone アプリつくってみっか!

趣味でiPhone/Androidアプリを開発し、日々勉強した事を書いています。オープンワールド系レースゲームをUnityで開発中です。

【Unity, Blender】軽くてデータ量の小さな街を作る

これまでゼンリンのJapanese Otaku Cityという、秋葉原をモデルにした街をベースにレースゲームを作ってきましたが、自分の街を作ることにしました!

建物のモデリングが90個くらい完成したので適当に並べてみたのがこれです。
植物の緑が一切ないので殺風景ですね。

f:id:takujidev:20151213144039j:plain

現時点ではJapanese Otaku Cityの地面を流用していますが、いずれは地形も自分で作る予定です。

Japanese Otaku Cityはかなりのデータ量、かつマテリアルをふんだんに使用しているため、モバイル用としてはなかなか厳しいものがあります。
もちろん、これを使ったiOS用ゲームはレースゲームも含めたくさん出ていますので使い方、用途次第だと思いますが、私のゲームではJapanese Otaku Cityの使用を諦め、自分で街を作ることにしました。
マテリアル(=テクスチャ)の使用をできるだけ少なくしてBatches, Setpass callsを低く抑えるのが目的です。

Japanese Otaku Cityを使った場合、UnityエディタのStats画面のBatchesが2728, Setpass callsが2264とかなりの値になっています。Graphicsのフレームレートは55.2fpsです。
なお、リアルタイムリフレクションはモバイルでは重すぎるので切っていてこの状態です。

f:id:takujidev:20151213140508j:plain

これは街を構成するビル各々が複数のマテリアルを使っているためだと思います。
例えば、こんなシンプルな四角いビルでも贅沢に5つのマテリアルを使用しています。

f:id:takujidev:20151213141555j:plain

そこで、今回はJapanese Otaku Cityのテクスチャを切り貼りして2048 x 2048ピクセルのテクスチャを1つだけ作り、街のすべてのビルが同じマテリアル、テクスチャを共有するようにしてみました。

f:id:takujidev:20151213142402j:plain

なお、Japanese Otaku Cityは「クリエイティブ・コモンズ 表示 4.0 国際 ライセンス(CC-BY)」で提供されていますので、クレジット表示さえしておけば改変などは自由とのことなのでありがたく使わせてもらっています。

さて、先ほどと同じようなシンプルな四角いビルですが、使用しているマテリアルは一つです。他のビルもすべて同じマテリアルを参照しています。なお、モデリングにはBlenderを使用しています。

Japanese Otaku Cityでは2階以上の部分を1つのポリゴンにし、窓1つ分のテクスチャーをリピートして貼り付ける構造のようです。この方法だとポリゴン数とテクスチャの面積は少なくて済みますが、大きなテクスチャの一部分をリピートしてポリゴンに貼り付けることは(たぶん)できないので、小さなテクスチャを独立して持つ必要があるのだと思います。

私の場合は階を積み重ねるようにポリゴンを構成し、階単位でテクスチャを貼るようにしています。大抵のビルは2階から上は同じ見た目なので、テクスチャの同じ部分を参照しています。また、幅の広いビルでは階ごとに1つのテクスチャだと窓が左右に伸びておかしく見えるので適当に縦方向にも分割する必要があります。

f:id:takujidev:20151213153029j:plain

また、1つの連続したメッシュにすることにはこだわっていません。ヘリポートやエレベーター部分の出っ張りなどの付加的な部分は別のメッシュを後づけしています。
こうするとモデリングやUV編集が楽でポリゴン数も減らせます。
パフォーマンス的にはどうなんでしょう?若干無駄な描画ピクセルが増えるデメリットがあるかもしれません。
なお、できるだけ見えない面は削除するようにはしています。

いろいろググってみましたが、「1つの連続したメッシュvs複数の別れたメッシュ」についてどちらがより適切な方法なのか結論は出ませんでした。
YouTubeチュートリアルで、「ドアに取っ手を作ろう」と言ってビル全体をぐるっと何箇所も輪切りにしているやり方も見たりしたので、作り方は人それぞれなのだと思います。

さて、冒頭のスクリーンショットで紹介した「俺の街」で早速車を走らせてパフォーマンスを確認してみましょう。

f:id:takujidev:20151213152933j:plain

Batchesが245、Setpass callsが62と大幅にダウンしています。
おかげでフレームレートが201.7fpsとなり、元の約4倍に向上しています。

もちろん、まだ木もガードレールも何もないビルだけのシンプルな街なのでJapanese Otaku Cityとフレームレートを直接比較するのは不公平ですが、マテリアルを減らすことでBatchesやSetpass callsの数を大幅に削減できることが検証できました。

ちなみにiPhone5上で実行した時のフレームレートは次のとおりです。

Japanese Otaku City: 14 - 15 fps
俺City: 37-38fps

なお、ビルド時のログに表示されるテクスチャサイズは40.7MB → 9.4MBに削減されましたが、ちゃんとした街を作るのにあと2〜3枚はテクスチャが必要なので、数MBは増加予定です。
ちなみに、Unityに取り込んだBlenderのモデルのサイズはシンプルなもので11KB, 複雑なもので47KBでした。ポリゴン(Tris)数はそれぞれ20, 470となっています。

試しにCR-Xで街を流してみました。

ご覧のとおり、メインストリートを外れるとただの空き地が広がっています。
他のビルに隠れて見えない部分はオクルージョンカリングで非表示になるので、マップをビルで埋め尽くしたとしてもfpsは下がらないと思います。

https://itunes.apple.com/jp/app/toraberushutingu-retorona/id917570972?mt=8&uo=4&at=10laCt
https://itunes.apple.com/jp/app/beecluster-wu-liaono-zongsukurorushutingugemu/id663801586?mt=8&uo=4&at=10laCt