True Shadowとは？
True Shadowは、uGUIのUI要素にリアルタイムでソフトシャドウやグローを付けられるアセットです。ImageやTextに対してコンポーネントを足すだけで、デザインツールで作るようなぼかしの効いた影が表現できます。
Unityには標準でShadowやOutlineというコンポーネントがありますが、これらで作れる影はオフセットしただけのハードな影で、ぼかすことができません。「Figmaで作った柔らかい影を、そのままUnityで再現したい」と思ったときに、標準コンポーネントだと物足りなさを感じる場面は多いはずです。
True Shadowは、その隙間を埋めてくれるアセットです。
Asset Storeのページはこちら：
標準のShadow / Outlineだと何が困るのか
まず、Unity標準のShadowコンポーネントでできることを確認しておきます。Shadowは、対象のUIを指定した方向にずらして影色で描画するだけのシンプルな仕組みです。
そのため、次のような表現は標準コンポーネントでは難しくなります。
- 輪郭をぼかした柔らかいドロップシャドウ
- 内側に落ちるインセットシャドウ
- 発光しているように見せるグロー
- 影を複数重ねて立体感を出すニューモフィズム風のUI
これらを自前で実現しようとすると、影用の画像を一つひとつ用意したり、専用のシェーダーを書いたりすることになり、かなりの手間がかかります。
True Shadowは、UIのシルエットから実行時に影のテクスチャを生成する仕組みになっているため、複雑な形のUIでも形状に沿った自然な影を出せます。
True Shadowでできること
True ShadowをUIに付けると、インスペクター上のパラメータを調整するだけで、さまざまな影の表現が作れます。
主に調整できるのは次のような項目です。
Size… 影のサイズ（ぼかしの大きさ）Spread… 影の広がりOffset Angle/Offset Distance… 影の方向と距離Inset… 外側の影と内側の影（インセットシャドウ）の切り替えColor… 影の色Blend Mode… 影の合成方法（Normal/Additive/Screen/Multiply）
色を明るめにしてSpreadを広げればグローのような発光表現になりますし、True Shadowを同じオブジェクトに複数付ければ、明暗の影を組み合わせたニューモフィズム風のUIも作れます。
対応するUI要素も幅広く、ImageはもちろんRawImageやTextにも使えます。TextMeshProにも実験的に対応しています。
TrueShadowコンポーネントを追加して、有効/無効を切り替えると以下の様になります。
インスペクターでパラメータをいじるとUnityエディタ上ですぐに見た目が反映されるので、デザインを確認しながら感覚的に詰めていけます。
導入はAdd Componentするだけ
導入の手順はとてもシンプルです。
- Asset Storeで
True Shadowを購入 Package ManagerのMy Assetsからインポート- 影を付けたい
ImageやTextのGameObjectを選択 Add ComponentからTrueShadowを追加- インスペクターで
SizeやColorなどを調整
色々変更してみると以下の様になります。
特別なセットアップは不要で、コンポーネントを足してパラメータを触ればすぐに影が出ます。
この記事では導入の入り口までにとどめますが、より詳しい使い方は公式のドキュメントにまとまっています。
購入を考えるときの判断材料
買うかどうかを判断するうえで知っておきたいポイントを整理します。
価格
True Shadowの通常価格は20ドル前後と、比較的手頃です。Asset Storeのセールでさらに安くなることもあります。
最新の価格はストアのページで確認してください。
「UIの影をきれいにする」という一点に対して、自前でシェーダーや影画像を用意する手間を考えると、十分に元が取れる価格だと思います。
対応範囲の注意点
購入前に必ず確認しておきたいのが、対応している範囲です。
- uGUI専用です。
SpriteRendererには対応していません - UI Toolkit（UI Elements）には対応していません。作者も対応予定はないと明言しています
uGUIでUIを組んでいるプロジェクトなら問題ありませんが、UI Toolkitへの移行を考えている場合は注意が必要です。
パフォーマンスについて
True Shadowは、生成した影のテクスチャをキャッシュし、同じ形状のUI間で使い回す仕組みになっています。
影の再生成はUIの形が変わったときだけ発生するため、静的なUIでは負荷が抑えられる設計です。
とはいえ、リアルタイムに影を生成する以上、描画コストはゼロではありません。
モバイル向けなど負荷がシビアな環境では、影を多用しすぎないようにしつつ、実機で表示を確認しながら使うのがおすすめです。
向いている人
- uGUIでリッチな見た目のUIを作りたい
- ぼかし影やグロー、ニューモフィズム風のデザインを取り入れたい
- 影のために画像やシェーダーを自作する手間を省きたい
このあたりに当てはまるなら、価格も手頃なので導入しやすいアセットです。
まとめ
True Shadowは、uGUIの標準コンポーネントでは作れない「ぼかしの効いた影」や「グロー」を、コンポーネントを足すだけで実現できるアセットです。
デザインツールで作った柔らかい影をUnityで再現したいときに、強い味方になってくれます。
価格も手頃なので導入のハードルは低めですが、uGUI専用でUI Toolkitには非対応という点だけは、購入前に必ず確認しておきましょう。
