Unreal build-in Background Blur can't achieve the effect we want, so write this by self.
- Can control whether blur whole image or some part of the image.
- Special effect by blur image pixel's some RGB channels.
- Create UI material
- Write shader code to process image pixels
- Create dynamic material at runtime
- Modify paramater of this dynamic material
- Create slate brush and use this dynamic material
- Create SImage and use this slate brush
Create UI material:
Shader in custom node is:
float3 blur = Texture2DSample(Tex, TexSampler, UV);
if(Rate > 0 && Rate < 1)
{
float2 dim;
Tex.GetDimensions(dim.x, dim.y);
float radius = Rate*dim.x;
int count = 0;
for (int i = -radius; i < radius; i++)
{
for(int j=-radius;j<radius;j++)
{
float2 uvOffset = UV+float2(i/dim.x,j/dim.y);
if(uvOffset.x>0&&uvOffset.y>0&&uvOffset.x<dim.x&&uvOffset.y<dim.y)
{
count+=1;
blur += Texture2DSample(Tex, TexSampler,uvOffset);
}
}
}
blur/=count;
}
return blur;
Will recalculate image's pixel by UV moving as below:
Create dynamic material and set image brush:
UTexture* Texture = LoadObject<UTexture>(GetTransientPackage(), TEXT("/Game/TestTexture.TestTexture"));
UMaterial* Material = LoadObject<UMaterial>(GetTransientPackage(), TEXT("/Game/UIMaterial.UIMaterial"));
UMaterialInstanceDynamic* MaterialDynamic = UMaterialInstanceDynamic::Create(Material, GetTransientPackage());
MaterialDynamic->SetTextureParameterValue(TEXT("TexObject"), Texture);
MaterialDynamic->SetScalarParameterValue(TEXT("Rate"), 0.2);
// MaterialDynamic->SetScalarParameterValue(TEXT("AlphaSwitch"), 1);
// MaterialDynamic->SetScalarParameterValue(TEXT("AlphaSwitch"), 0);
FSlateBrush Brush = FSlateBrush();
Brush.SetResourceObject(MaterialDynamic);
TestImage->SetBrush(Brush);
Support: [email protected]