読者です 読者をやめる 読者になる 読者になる

テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】UIに立体的に見せるライティングを付ける

f:id:tsubaki_t1:20160218231014g:plain

要するにuGUIにノーマルマップを適応してみた所、少し面白い感じになったので紹介します。ドット絵のようなものは、もう少しマトモなノーマルマップを適応するともう少し綺麗になるかも。

ノーマルマップ

3Dモデルでモデルを立体に見せる手法の一つにノーマルマップという物があります。これは法線をテクスチャに書き込んで置くことで、ローポリなオブジェクトでもハイポリな感じのライティングを行うためのものです。

例えば下のようなタイルのテクスチャがあったとします。地面は板ポリなので凹凸はテクスチャの色でのみ再現されています。

f:id:tsubaki_t1:20160218231748j:plain

これにノーマルマップを設定し立体感を出します。ノーマルマップを設定した絵に光を当てることで、光の反射が表現され、質感がぐっと良くなります。

f:id:tsubaki_t1:20160218231932j:plain

ついでにAOマップやらハイトマップやらを付けると、より見た目がよくなりますが、それに関しては追々。とにかくノーマルを付与すると光を当てた際に立体的な感じになります。

f:id:tsubaki_t1:20160218232230j:plain

UIにマテリアル(材質)を適応する

uGUIですが、実はノーマルマップをはじめとしたライティングを適応する事が出来ます。マスク出来ない等の問題を無視すれば、StandardShaderをそのまま設定したりとかも出来ちゃいます。下はStandardShaderを使用したUI。

f:id:tsubaki_t1:20160218234215j:plain

適応するのは簡単、ImageのMaterialにStandardShaderを設定したマテリアルを設定するだけ。その際AlbedoはImageに設定したテクスチャが優先されます。

f:id:tsubaki_t1:20160218234502j:plain

フォントの場合、RenderingModeをFadeに設定します。ノーマルに適当なノーマルマップを付けて置くと凹凸したりします。

f:id:tsubaki_t1:20160218234651j:plain

なおノーマルマップで綺麗な感じにライティングが出来るのは、CanvasのRender ModeがWorld SpaceもしくはScreenSpace Cameraの場合のみっぽいです。

f:id:tsubaki_t1:20160218235009j:plain

UIにノーマルマップを適応する

いよいよ、ドット絵にノーマルマップを適応します。

とりあえずUIはこんな感じです。

f:id:tsubaki_t1:20160219000637j:plain

せっかくなので、UI向けでノーマルマップ(シェーダーにはBumpMapと書かれてる)を適応できるシェーダーを用意します。下のアセットに含まれますので、インポートします。UI/Lit/Bumpedシェーダーがソレです。

f:id:tsubaki_t1:20160218235553j:plain

http://u3d.as/aiR

ドット絵に適応するノーマルマップを用意します。本当はDCCツールでドット絵を綺麗に出来たら楽しそうではあるのですが、そんなの無いのでノーマルマップを作ってくれるWebサービスを使います。

cpetry.github.io

テクスチャから作るのでちょっと不具合がある気がしますが、まぁ良しとします。

f:id:tsubaki_t1:20160218235130j:plain

次にマテリアルにUI/Lit/Bmpedシェーダーを設定し、ノーマルマップを適応します。
Imageを改造すればBmpmapへコンポーネントから適応できますが、今回はしてないのでマテリアルに直でテクスチャを設定します。

なおノーマルマップはスプライトとUVが一致してる必要があります。つまり、Unity標準のSpritePackarではなく、自前でパッキングした方が良いです。

f:id:tsubaki_t1:20160218235805j:plain

あとはノーマルマップを適応したマテリアルをUIに設定すれば、立体的に見えるライティングが設定できます。

背景やテキストにも適当なノーマルやシェーダーを付与すればこんな感じになります。

f:id:tsubaki_t1:20160219000428j:plain

スプライトへの適応

今回はUIでしたが、スプライトにも適応できます。ノーマルマップへの適応とか少し工夫すると、影回りもドットっぽく出来るので少し面白いです。

f:id:tsubaki_t1:20160218224402g:plain

ただ、もっと面白そうなアプローチもあるので、こっちもそのうち触ってみたい所。

3dnchu.com

関連

f:id:tsubaki_t1:20160218233126j:plain

https://www.assetstore.unity3d.com/jp/#!/content/36243

tsubakit1.hateblo.jp