おもちゃラボ

Unityで遊びを作ってます

【Unity】LODで負荷を軽減させて60FPSを維持する

スマートデバイスなどのモバイルがターゲットのゲームは計算量をいかに減らすかがキーになります。ここではLODを使ってパフォーマンスを改善する方法を紹介します。

LODとはLevel Of Detailの略で、オブジェクトが近くにあるときは高精細のモデルを使用し、オブジェクトが遠くにあるときはローポリゴンのモデルを使用しよう、という考え方です。

f:id:nn_hokuson:20170321193923p:plain

UnityではLODを標準でサポートしているため、簡単に実装することができます。

LODの準備

ここでは「近いとき用(dragon0)」「通常用(dragon1)」「遠い用(dragon2)」の3つのモデルを用意します。もちろんカメラから近いときにハイポリ、遠いときにローポリのモデルを使います。

これをすべてシーンビューにドラッグ&ドロップします。とりあえず位置は適当で問題ありません(あとで揃えます)

f:id:nn_hokuson:20170321192750p:plain

次に、これらを束ねる空のオブジェクト(dragon)を作成し、先程の3つのオブジェクトをすべて子要素にします。

f:id:nn_hokuson:20170321192810p:plain

3つのオブジェクト(dragon0〜dragon2)の位置がすべて等しくなるようにします。ヒエラルキービューで3つのオブジェクトを選択して、インスペクタで値を(0, 0, 0)に設定します。

f:id:nn_hokuson:20170321192913p:plain

これで、3つのオブジェクトが重なって表示されます。

親オブジェクト(dragon)にLOD Groupコンポーネントをアタッチします。LOD Groupコンポーネントは「Add Component」→「Rendering」→「LOD Group」にあります。

f:id:nn_hokuson:20170321192933p:plain

LODごとのモデルを設定

LOD用のコンポーネントがアタッチできたので、次はカメラがどのくらい離れたときに、どのオブジェクトを表示するかを設定します。

まずはインスペクタのLOD0をクリックします。その下にRendersの欄が表示されるので、ヒエラルキービューからdragon0を選択してドラッグ&ドロップします。

f:id:nn_hokuson:20170321192940g:plain

LOD1とLOD2にも、それぞれdragon1とdragon2を設定します。

これで、カメラがLOD0のゾーンにあるときはdragon0が、カメラがLOD1のゾーンにあるときはdragon1が、LOD2ではdragon2が表示されます。

LOD2のゾーンよりも遠くにカメラが移動した場合は非表示になります。

LODの距離を設定

最後にそれぞれのモデルを切り替える距離を設定します。こちらも、インスペクタからGUIで設定できます。LODの区切り線をドラッグすることで、各モデルを切り替える距離を設定できます。

f:id:nn_hokuson:20170321193016g:plain

バーを動かすことで、シーンビューにリアルタイムでLOD切り替えの距離が表示されます。めっちゃ分かりやすいですね!

f:id:nn_hokuson:20170321193049p:plain

これで設定は完了です。実際にカメラを動かしてみると、カメラからの距離によってオブジェクトが切り替わっているのがわかると思います。

f:id:nn_hokuson:20170321193155p:plainf:id:nn_hokuson:20170321193159p:plain
f:id:nn_hokuson:20170321193205p:plainf:id:nn_hokuson:20170321193208p:plain

その他

LODに関しては次の記事で実例とともに説明されています。詳しく知りたい方はこちらをどうぞ。

西川善司の3Dゲームファンのための「GRAVITY DAZE」グラフィックス講座(前編) - GAME Watch

【Unity】これは便利!カメラの位置をシーンビューの視点と一致させる

「いまシーンビューで見ている映像を、そのままカメラの撮影アングルとして使いたいな〜」ということはありませんか?

この記事では、シーンビューで表示されている視点をMain Cameraの視点と一致させる方法を紹介します。
この方法を使うことでシーンビューで見たままの映像をゲームビューで使うことが出来るようになります。

f:id:nn_hokuson:20170320200207p:plain

シーンビューの見た目とカメラの画像を一致させる

Blenderの場合は「カメラをビューにロック」にチェックを入れておくと、編集画面で見たままの映像をレンダリングすることができます。これと似たようなことがUnityでもできます。

まずは撮影したい位置とアングルになるようにシーンビューで画面を移動させて下さい。

f:id:nn_hokuson:20170320175932g:plain

次に、ヒエラルキービューでMain Cameraを選択した状態で「Command+Shift+F」を押します。(Windowsの場合は「Control+Shift+F」です)

f:id:nn_hokuson:20170320180643p:plain

これにより、カメラがシーンビューの位置に移動し、また、注視方向が現在のビューと一致するように回転します。

f:id:nn_hokuson:20170320190748p:plain

インスペクタからMain CameraのField of Viewを55度くらいに設定しておくと、シーンビューでの見た目とカメラからの見た目が綺麗に一致しますよ。

f:id:nn_hokuson:20170320185553p:plain

Unityの公式ページに、その他の便利なショートカットも紹介されているので、読んでおくと使えるかもしれません!
docs.unity3d.com

【本】フラットデザインの基本ルール

フラットデザインの基本ルール Webクリエイティブ&アプリの新しい考え方。

フラットデザインはアイコンやメニューなどのUIを、立体感のないフラットな図形として表現するデザインのことです。

Windows8やiOS7ではじめて採用されたデザインですね。

f:id:nn_hokuson:20170319163656p:plain:w200

iOS7になるタイミングで、立体感のあるアイコンからフラットデザインに変わったことで、「ださい」「きもちわるい」などとかなり叩かれたようですが、今となってはすっかり馴染んでしまいました。

この本ではフラットデザインへ移行した背景や、フラットデザインのスタイルの説明のほか、数多くのWebサイトやアプリケーションを例に挙げながら、フラットデザインについて説明されています。

ものすごく分かりやすい本だな〜、と思ったら「デザインの教室」の著者の方の本だったんですね(゚Д゚)


とくに面白いな、と思ったのがフラットデザインの必要性を説明した項目。

現在ではスマートフォンでWebページを拡大しながら読むのするのが当たり前になったから、拡大に耐えうるデザインという意味でフラットデザインが主流になってきた、という説明には目からウロコでした。
 

これまでウェブはピクセルという単位を基本に作られてきたが、多くの環境でできるだけ見やすく、美しく見せるために、「画像解像度に依存しないUI」に動き始めている。

 
そう考えると、トップページのタイトルを画像で表示しているサイトって減っていますね。フォントなどの文字も画像として表示すると、拡大した時に汚くなってしまうからでしょう。

f:id:nn_hokuson:20170319170805p:plain

あと、もう一つ面白かったのが、ウェブデザインとアップルの関係。
両者に明確な相関があるわけじゃないんだけれども、デザイナさんってアップル製品を使っていることが多いから、どうしても影響があるよね、というお話。
 

ウェブのデザインは、必ずしもOSのUIデザインの影響を受けるわけではないが、アップルの採用してきたデザインが多くのデザイナーに影響を与えているのは確かであり、その影響は少なくないと考えられる。

 
iOSがフラットデザインになったことで、それに影響を受けたデザイナさんが、これからのデザインの主流を作り出していく、という流れは確かにありそうだな〜と思いました。

うーん、おもしろい!