SOU·COLLE
イラストレーション/デザイン/ゲーム開発の「そうそう,これこれ。」な覚書。

Photoshopのドロップシャドウで影のテクスチャをつくる

UnityでuGUIのスプライトに影を出すにはShadowコンポーネントを使う。Shadowコンポーネントは簡易なもので,エッジにぼかしを追加するといった機能は無い。

ということでテクスチャをつくるわけだけど,つくるたびにマスクを調整していては面倒臭い。スマートフィルターでぼかすという手もあるが,少しだけ形状にこだわることができるレイヤースタイルのドロップシャドウでつくってみる。

レイヤーを準備する

まずべた塗りレイヤーを適当なサイズでマスクする。
このマスク自体をぼかすわけではないので,レイヤーを「塗り:0%」にする。

べた塗りレイヤーを影のサイズでマスクした様子

ノックアウトを無効にする

レイヤースタイルからドロップシャドウを追加する。初期設定だと塗りの部分がすっぽり抜けていると思う。

塗り0%のレイヤーにドロップシャドウの初期設定をかけた状態

この抜けの部分を影で埋めるには,ドロップシャドウの項,最下段「レイヤーがドロップシャドウをノックアウト」のチェックボックスを外す。

「レイヤーがドロップシャドウをノックアウト」をオフにした状態
塗りの部分にもドロップシャドウが適用されるようになった

ドロップシャドウを調整する

あとは自分が使いたい形に調整するだけ。

設定を調整した状態
特になんの変哲も無いぼかしがかかった影用のテクスチャ

輪郭を使えば影のテクスチャ以外も何かつくれるかもしれない。

輪郭を設定した状態
何に使うかはさておき

余談
Middlemanに移行してはじめての記事。なぜかWordPressで書いていた時よりも気軽に書ける。サーバーの設定やら何やらを手伝ってくれた会社の仲間二人に感謝。