おもちゃラボ

Unityで遊びを作っていきます

【Unity】Unity5.6で綺麗な画面を作るための5つの手順

Unityでキレイな画作りをしたいときの、基本的な設定手順を5つに分けて紹介します。Cinematic Filterやカラースペースの変更は処理が重いので、スマートフォン向けではないかもしれません。

f:id:nn_hokuson:20170410191838j:plain

完成までのステップは次のようになります。

手順1 オブジェクトを配置する

シーンビューにオブジェクトを配置してから、マテリアルを作成&設定します。マテリアルの設定は、基本的にMetalicとSmoothnessで調整します。
このままでは、「ただ配置した感」が拭えませんね・・・

f:id:nn_hokuson:20170410192000j:plain

上の金色とピンクゴールドの玉の設定は次のようにしてみました。

f:id:nn_hokuson:20170410192037p:plain:w280 f:id:nn_hokuson:20170410192045p:plain:w270

金属っぽい見た目にしたい場合は次のページが参考になります。
blogs.unity3d.com

手順4でライトをベイクするため、動かないオブジェクトはインスペクタから「static」を設定しておきましょう。

f:id:nn_hokuson:20170410192211p:plain:w350

手順2 カラースペースをリニアにする

カラースペースをGanmmaからLinearに変更します。カラースペースについては次のページが参考になります。
docs.unity3d.com

f:id:nn_hokuson:20170410200726j:plain

カラースペースを変更するには、メニューバーから「Edit」→「Project Settings...」→「Player」を選択し、インスペクタから「Other Settings」→「Color Space」を「Linear」に変更します。

f:id:nn_hokuson:20170410200545p:plain:w350

カラースペースを変更した結果は次のようになります。

f:id:nn_hokuson:20170410193453j:plain

手順3 スカイボックスを設定する

金属などの反射をキレイに見せるためには反射する映像が必要です。反射映像としてスカイボックスを設定します。スカイボックスはAsset Storeやサイトで配布されているので、それを利用しましょう。

www.hdrlabs.com

ダウンロードしたスカイボックスをプロジェクトビューに追加し、インスペクタから「Texture Shape」を「Cube」に変更します。

f:id:nn_hokuson:20170410193551p:plain:w300

続いてプロジェクトビューで新規にマテリアルを作成し、それをSkybox用のマテリアルとして設定します。インスペクタの「Shader」の欄から「Skyboxy/CubeMap」を選択して、CubeMap(HDR)の欄に先程の天球画像を設定します。

f:id:nn_hokuson:20170410193827j:plain:w300

作成したマテリアルをシーンビューにドラッグ&ドロップすると、作成したスカイボックスが表示されます。

f:id:nn_hokuson:20170410193917j:plain

球への映り込みも反映されて、だいぶん絵として落ち着いてきました。でも、まだ影が浮いている感じがしますね〜

手順4 アンビエントオクルージョンを表現する

アンビエントオクルージョン(影になる暗いところをしっかりと暗くする)を表現するため、ライトをベイクします。(ベイクの主目的はライティング負荷の軽減ですけど・・・^^;)

ライトを焼く対象はStep1で「static」に設定したオブジェクトです。ちゃんとstaticに設定されているか確認しておきましょう。

続いて、ライトの設定をベイク用の設定に変更します。Directional Lightのインスペクタから「Mode」を「Mixed」に設定します。

f:id:nn_hokuson:20170410194042p:plain:w350

ライトをMixedに設定することで、staticオブジェクトの影を焼き、動くオブジェクトの影はリアルタイムで計算する、という折衷案を実現できます。ちなみに・・・ライトのタイプをBakedに設定すると、リアルタイムで動くオブジェクトの影は表示されません。

メニューバーから「Window」→「Lighting」→「Settings」を選択し、Lightingウインドウを表示してください。
設定するのは次の3点です

  • Ambient Occlusionのチェックを入れる
  • IndirectContributionを設定する
  • DirectContributionを設定する

f:id:nn_hokuson:20170410194101p:plain:w450

こちらの記事でもAmbient Occlusionの設定について紹介しています。
nn-hokuson.hatenablog.com

アンビエントオクルージョンの設定をした後の画像がこちらになります。オブジェクトと床が接する部分や、球の間の空間が他の部分と比べるとさらに暗くなっています。

f:id:nn_hokuson:20170410194431j:plain

手順5 Cinematic Image Effectを使う

Unity5.6からは標準のEffectパッケージが廃止されたため、Asset Storeからダウンロードする必要があります。Unityが標準で提供しているエフェクトのアセットには

・Legacy Image Effect
・Cinematic Image Effect

があるようです。

ここでは後者のシネマティックイメージエフェクトのアセットを使ってみます。

f:id:nn_hokuson:20170410194719j:plain

ダウンロードしたCinematic Image Effectの中からBloomとTonemappingスクリプトをMain Cameraにアタッチしてください。

それぞれのエフェクトのパラメータはインスペクタから調整します。ここは、どのような絵にしたいかによって設定が変わってきます。色々と試してみてくださいね!

f:id:nn_hokuson:20170410194822p:plain:w250  f:id:nn_hokuson:20170410194827p:plain:w250

また、Bloomについてはこちらの記事で紹介しています。合わせてどうぞ。
nn-hokuson.hatenablog.com

最終的な画像はこちらになります!
f:id:nn_hokuson:20170410191838j:plain