x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

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

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

Reference Image

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:

Hierarchy

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:

Brush

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

Widget Variables

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:

Material

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: Result

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

Thanks in advance!

Product Version: UE 4.21
Tags:
hierarchy.png (9.3 kB)
brush.png (14.6 kB)
material.png (161.4 kB)
result.png (4.3 kB)
more ▼

asked Dec 21 '18 at 09:05 AM in Rendering

avatar image

RahuloftheRamanEffect
6 1 2 2

avatar image anton.katkov Jan 23 '19 at 09:02 AM

Hello RahuloftheRamanEffect

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

Thanks

avatar image RahuloftheRamanEffect Jan 23 '19 at 09:20 AM

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.

(comments are locked)
10|2000 characters needed characters left

0 answers: sort voted first
Be the first one to answer this question
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question