How can we make a soft drop shadow for a UMG Image?
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:
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:
As you can see, the shadow Images don't have softened edges and look quite jarring, as opposed to the design specified by Google.
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?
CSS Box shadow values for the Material Design Components at different elevations can be found at the following link, in case that helps:
Thanks in advance!
asked Dec 21 '18 at 09:05 AM in Rendering
Follow this question
Once you sign in you will be able to subscribe for any updates here