【Unity】UIに立体的に見せるライティングを付ける
要するにuGUIにノーマルマップを適応してみた所、少し面白い感じになったので紹介します。ドット絵のようなものは、もう少しマトモなノーマルマップを適応するともう少し綺麗になるかも。
ノーマルマップ
3Dモデルでモデルを立体に見せる手法の一つにノーマルマップという物があります。これは法線をテクスチャに書き込んで置くことで、ローポリなオブジェクトでもハイポリな感じのライティングを行うためのものです。
例えば下のようなタイルのテクスチャがあったとします。地面は板ポリなので凹凸はテクスチャの色でのみ再現されています。
これにノーマルマップを設定し立体感を出します。ノーマルマップを設定した絵に光を当てることで、光の反射が表現され、質感がぐっと良くなります。
ついでにAOマップやらハイトマップやらを付けると、より見た目がよくなりますが、それに関しては追々。とにかくノーマルを付与すると光を当てた際に立体的な感じになります。
UIにマテリアル（材質）を適応する
uGUIですが、実はノーマルマップをはじめとしたライティングを適応する事が出来ます。マスク出来ない等の問題を無視すれば、StandardShaderをそのまま設定したりとかも出来ちゃいます。下はStandardShaderを使用したUI。
適応するのは簡単、ImageのMaterialにStandardShaderを設定したマテリアルを設定するだけ。その際AlbedoはImageに設定したテクスチャが優先されます。
フォントの場合、RenderingModeをFadeに設定します。ノーマルに適当なノーマルマップを付けて置くと凹凸したりします。
なおノーマルマップで綺麗な感じにライティングが出来るのは、CanvasのRender ModeがWorld SpaceもしくはScreenSpace Cameraの場合のみっぽいです。
UIにノーマルマップを適応する
いよいよ、ドット絵にノーマルマップを適応します。
とりあえずUIはこんな感じです。
せっかくなので、UI向けでノーマルマップ（シェーダーにはBumpMapと書かれてる）を適応できるシェーダーを用意します。下のアセットに含まれますので、インポートします。UI/Lit/Bumpedシェーダーがソレです。
ドット絵に適応するノーマルマップを用意します。本当はDCCツールでドット絵を綺麗に出来たら楽しそうではあるのですが、そんなの無いのでノーマルマップを作ってくれるWebサービスを使います。
テクスチャから作るのでちょっと不具合がある気がしますが、まぁ良しとします。
次にマテリアルにUI/Lit/Bmpedシェーダーを設定し、ノーマルマップを適応します。
Imageを改造すればBmpmapへコンポーネントから適応できますが、今回はしてないのでマテリアルに直でテクスチャを設定します。
なおノーマルマップはスプライトとUVが一致してる必要があります。つまり、Unity標準のSpritePackarではなく、自前でパッキングした方が良いです。
あとはノーマルマップを適応したマテリアルをUIに設定すれば、立体的に見えるライティングが設定できます。
背景やテキストにも適当なノーマルやシェーダーを付与すればこんな感じになります。
スプライトへの適応
今回はUIでしたが、スプライトにも適応できます。ノーマルマップへの適応とか少し工夫すると、影回りもドットっぽく出来るので少し面白いです。
ただ、もっと面白そうなアプローチもあるので、こっちもそのうち触ってみたい所。
関連
