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"

Slate blurred border shadow

Hello,

I want to create UI's with dynamic blurred shadows, like those seen in CSS's box-shadow feature. The logical thing to do would be bake it into an image. But I really do want it done procedurally so I can animate it.

I can't seem to find out how to do this, so I am left with the assumption that it's not a feature of slate (I'd love it if you corrected me here)

I haven't got the first clue of how to implement such a rendering feature to slate though. So if it is really not a feature and I have to implement it myself, can someone point me in the right direction? Where do I start? The slate API docs seem rather lacking at the moment so it's hard to tell what to do.

Product Version: UE 4.7
Tags:
more ▼

asked May 22 '15 at 10:17 PM in C++ Programming

avatar image

Constan7ine
138 14 15 27

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

2 answers: sort voted first

Hi,

I think the best way to do it is going to be to have a image border with the shadow and animating its content padding.

First thing (most obvious) to try out is to use Padding attribute in SBorder calss. You should be able to create a getter function for it that looks something like this:

 FMargin GetShadowBorderPadding() const
 {
 return FMargin(Your_dynamic_values_here);
 } 

then the definition of Padding parameter would look like this:

 SNew(SBorder)
 .Padding(this, &SShadowBorder::GetShadowBorderPadding)
 [
 ....
 ]

It's all in the SShadowBorder - your custom widget class.

Now all you need is function to set/animate padding values and you should get what you need. If not - you can always try to override either OnPaint or ArrangeChildren function and then precisely set padding values.

It's actually interesting how it can turn out and I think I'll implement it myself ; )

Hope this helps.

more ▼

answered May 24 '15 at 10:33 AM

avatar image

szyszek
610 16 12 36

avatar image Constan7ine May 24 '15 at 07:10 PM

Thats an awesome idea. Thank you!

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

Hey!

Since SBorder wasnt quite enough to get the desired result I made use of SOverlay widget and ended up with something like this: (mouse cursor imitates 'light source' so the shadow moves around) alt text

The shadow itself is not blurred but it's just the matter of used brush ; )

Heres the code if anyone needs it (note that I'm using Editor style in this example so you will have to add needed dependencies to your project for it to compile. Also, remove Tick function from SShadowBorder class to remove sample shadow updates)

 #pragma once
 
 #include "SlateBasics.h"
 #include "EditorStyle.h"
 
 class SShadowBorder : public SCompoundWidget
 {
 public:
     SLATE_BEGIN_ARGS(SShadowBorder)
         : _Content()
         , _DefaultPadding(10)
     {}
         SLATE_DEFAULT_SLOT(FArguments, Content)
         SLATE_ATTRIBUTE(float, DefaultPadding)
         SLATE_ATTRIBUTE(FMargin, DynamicPadding)
     SLATE_END_ARGS()
     
     void Construct(const FArguments& InArgs)
     {
         DefaultPadding = InArgs._DefaultPadding;
         DynamicPadding = InArgs._DynamicPadding;
 
         ChildSlot
         [
             SNew(SOverlay)
             // First, add slot with actual shadow border that will move around based on DynamicPadding
             +SOverlay::Slot()
             .Padding(TAttribute<FMargin>::Create(TAttribute<FMargin>::FGetter::CreateRaw(this, &SShadowBorder::GetDynamicPadding)))
             [
                 SNew(SBorder)
                 .BorderImage(FEditorStyle::Get().GetBrush("ProgressBar.Background"))
                 .BorderBackgroundColor(FColor::Black)
             ]
             // Now, on the top of the shadow, add actual content
             +SOverlay::Slot()
             .Padding(DefaultPadding.Get())
             [
                 InArgs._Content.Widget
             ]
         ];
     }
 
     virtual void Tick(const FGeometry& AllottedGeometry, const double InCurrentTime, const float InDeltaTime) override
     {
         // Use position of the cursor like a 'light source' to imitate shadow casting by content
         FVector2D MousePos = FSlateApplication::Get().GetCursorPos();
 
         FVector2D AbsoluteWidgetPos = AllottedGeometry.LocalToAbsolute(FVector2D::ZeroVector);
         FVector2D WidgetSize = AllottedGeometry.GetLocalSize();
         
         FVector2D WidgetCenter = AbsoluteWidgetPos + WidgetSize / 2.0f;
 
         FVector2D Delta = MousePos - WidgetCenter;
         Delta = Delta / 10.0f;
 
         float MaxPadding = 2 * DefaultPadding.Get();
 
         FMargin newPadding;
         newPadding.Left = FMath::Clamp<float>(DefaultPadding.Get() - Delta.X, 0, MaxPadding);
         newPadding.Top = FMath::Clamp<float>(DefaultPadding.Get() - Delta.Y, 0, MaxPadding);
         newPadding.Right = FMath::Clamp<float>(DefaultPadding.Get() + Delta.X, 0, MaxPadding);
         newPadding.Bottom = FMath::Clamp<float>(DefaultPadding.Get() + Delta.Y, 0, MaxPadding);
 
         DynamicPadding.Set(newPadding);
 
         SCompoundWidget::Tick(AllottedGeometry, InCurrentTime, InDeltaTime);
     }
 
     FMargin GetDynamicPadding()  const
     {
         return DynamicPadding.Get();
     }
 
     TAttribute<FMargin> DynamicPadding;
     TAttribute<float> DefaultPadding;
 };

Cheers!

more ▼

answered May 25 '15 at 01:45 PM

avatar image

szyszek
610 16 12 36

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
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