Soft shadow for Unity UI Image

user_5170571 0
Viewed 10100

What is the best approach to implement a soft shadow around the outline of a Unity UI Image? I want to achieve the effect below:

desired-soft-shadow

(Image Source: YouTube video: Soft Shadow UI || Unity 5)

My current approach is to manually add a shadow Image behind the main Image. For example, see below screenshots:

button-with-soft-shadow

scene-heirarchy

shadow-inspector

However, I find this approach tedious and messy from a workflow perspective, because I have to manually add this shadow GameObject to my GameObject hierarchy every time I want to add a soft shadow to a UI Image.

While I think it's possible to improve on this current workflow slightly, is there a better approach?

Note that I also tried Unity's built-in Shadow effect component:

built-in-drop-shadow

This is a drop shadow and not a soft shadow effect I am looking for.

But I think this approach shows an ideal workflow, where it's as simple as adding a shadow component to a GameObject with an Image.

unity3d
2 Answers

I would split the current shadow you have into 3 images: corner, edge, background.

Then, I'd make a script that instanciate those images onto all corners, edges, and below the element you're shadowing (for the backgound) with the correct size & orientation.

The script would also handle those parameters:

  • float Intensity (actually changes alpha tranparency)
  • float Spread (streches the images out)
  • Vector3 Position (simple translation in case you want your shadow to be shifted from the image you're shadowing)

You would then be able to use it for any element.

user_13786460

Procedural UI Image by Josh H on the Unity Asset Store looks promising.

Create an infinite number of basic shapes without a ton of image resources. Control and animate border-width and border-radius. It is perfect for creating flat styled UI. Easy to understand and well-commented code along with a PDF documentation will keep this package extendable.

Main features:

[...]

➤ Fall-off: can be used for soft shadow effect or glow

fall-off-distance-param

Other "procedural UI" packages may also support soft shadows.

There are some new UI assets on the Asset Store that have been released since this question was asked, e.g. True Shadow - UI Soft Shadow and Glow (beta) by Tai's Assets.

user_51705710
Related