画像やテキストに簡単に影を追加する(shadowコンポーネント)|Unityゲーム制作

Unityで画像ボタンやテキストに簡単な影を付けてみます。shadowコンポーネントを利用して簡単に実装していきます。

はじめに

「Unity 2022.3.14f1」ヴァージョンで作成しています。下記のボタン画像を利用していきます。

画像作成時に画像に影を付ける方法もありますが、Unity側で追加で影を付けてみます。

実装開始

Hierarchyにて「UI」→「Image」を追加します。

ImageのSourceImageをボタンに変更します。

AddComponentから「Shadow」を追加します。

影の色(Effect Color)、影の方向(Effect Distance)を設定することで簡単に追加することが出来ます。

公式リファレンスは下記にて。

Shadow - Unity マニュアル

Shadow コンポーネントはシンプルな輪郭エフェクトを Text や Image などのグラフィックコンポーネントに加えます。このコンポーネントはグラフィックコンポーネントと同じゲームオブジェクト上になければなりません。

docs.unity3d.com

テキストにも適用できるけど、テキストの場合はTextMeshProを使えば良さそう。