How can we make a soft drop shadow for a UMG Image?

[RahuloftheRamanEffect]

Hey there

I’m working on building a set of UMG components that follow the android material design specification, and I’ve been racking my brains trying to figure out how I can create the key and ambient shadows as described here:

[Android Material Design: Shadows][1]

What I have, so far:

So far, I’ve got a simple widget set up which uses 3 different Image components to draw the “Surface”, “Ambient Shadow” and “Key Shadow”, like below:

The Brush that draws the Images uses a Box-scaled dynamic material as its resource, since I’d like the designer to alter the shape/roundedness of the widget at any time:

And the material parameters are exposed via Blueprint to the designer:

My Brush material is set up to use a Distance Field Texture and uses the Packed Distance Field node to draw the texture at good detail without worrying about pixelation due to scaling:

And I set the “edge softness” property to a specific value to fake a “blur” effect on the texture, which I then use on the Shadow image, in conjunction with padding, to give it a feel of “elevation”, as described in the material design spec.

(The UV scaling nodes simply correct the change in shape of the image due to softening).

Now, the issues that I’m facing with this approach are:

• I end up creating at least 3 different dynamic materials per instance of this widget, which is pretty bad for performance with a large number of them instantiated in the game.

• There is a lot of overdraw, most of it unnecessary, which is also terrible for performance on mobile devices.

• Since the image is Box-scaled, the edge softness parameter barely has an effect, and the result looks nothing like I need it to:

As you can see, the shadow Images don’t have softened edges and look quite jarring, as opposed to the design specified by Google.

Question:

So, does anyone have any ideas for how one can create soft-shadows for an image in UMG, with a smooth falloff that is also good performance-wise?

Additional Info:

CSS Box shadow values for the Material Design Components at different elevations can be found at the following link, in case that helps:

[Material Elevation CSS Box Shadow Values][8]

Thanks in advance!

[anonymous_user_7ad6fa69]

Hello RahuloftheRamanEffect

Did you find the correct solution to create dynamic shadow for images or entire widget?

Thanks

[RahuloftheRamanEffect]

No luck yet.
I noticed that UE4 editor just uses a couple of generic textures to create a drop shadow effect on different UI elements, but they only really work for rectangles.

Maybe the thing to do would be to dynamically generate a bunch of textures when the widget shape is modified and use them to represent the shadow. I am yet to attempt this.

[ntrnr]

Any luck on finding the solution?

[Mr_Monkey_IV]

Unfortunately I don’t know how to make a soft shadow only in Unreal.

However, I found another way to add shadows to images. I wrap the image in an overlay and duplicate it in it. In the duplicated object I then set my desired color and opacity. Lastly I use the translation to move the image so that it becomes a shadow.

You can then turn the shadow image into a soft shadow in a graphics program if you want.

I hope this helps others reading this post too.

[FeiSuZZ]

There are multiple ways to achieve shadows, such as Gaussian blur.
In this plugin I used a different approach by calculating the distance from a point to a rectangle to determine the color of the shadow.