Drop Shadow Filter Component

Overview

This component adds a visual shadow effect to the UI object it is applied to.

WebGL Demo

Properties

Property	Type	Range	Default	Details
Shadow
Mode	Enum		Default	Which mode to use when rendering the shadow. Options are: • Default - Standard drop shadow where shadow is cast behind. • Inset - Shadow is cast inside giving a sunken appearance. • Glow - a blurred version of the Graphic is rendered underneath - make sure the Color is a bright value. • Cutout Drop shadow with the source Graphic cut out from it.
Angle	Float	[0..360]	135.0	The angle that shadow is cast in degrees.
Distance	Float	[0..256]	8.0	The distance in pixels that the shadow is cast.
Spread	Float	[-128..128]	0.0	Dilates the shadow to make it thicker. Using this adds significantly more processing.
Color	Color		Black	The color of the shadow.
Blur
Down Sample	Enum		Auto	How to downsample the texture before blurring. Downsampling gives improved performance, however the quality can be lower especially when animation the blur amount, but for still images it's usually not noticeable. Options are: • Auto - Automatic downsampling will depend on the platform. • None - No downsampling. • Half - Downsample to half the size. • Quarter - Downsample to a quarter the size. • Eighth - Downsample to an eighth the size.
Blur	Float	[0..256]	4.0	The radius of the blur filter in pixels.
Hardness	Float	[0..2]	1.0	Makes the shadow darker or lighter.
Apply
Source Alpha	Float	[0..1]	1.0	Fades the source Graphic.
Strength	Float	[0..1]	1.0	Strength of the effect.
Render Space	Enum		Canvas	Which coordinate system use when rendering this filter. Options are: • Canvas: Render the filter before any transforms (scale/rotation/translation etc) are applied. • Screen: Render the filter after transforms have been applied. Read more about this property here.
Expand	Enum		Expand	Whether to expand the Graphic area to accommodate this filter overflowing the original bounds. Setting this to None can be useful when applying effects to content you want to enclose in a frame using something like the FrameFilter component.

Spread Property

Avoid using the Spread property as it adds significant amount of processing.

Usage

Add this component to any GameObject that contains a UI Graphic component (eg Text, Image, RawImage, etc). The object will now render with a shadow.

Usage with TextMeshPro

To use this filter effect with TextMeshPro - Text (UI) use the Filter Stack (TextMeshPro) component.

Examples

Interactive

Inset

Under Glow

Scripting

Namespace

The namespace

using ChocDino.UIFX;

Adding the DropShadowFilter Component

Add the DropShadowFilter component to your GameObject

// Add the component to your GameObject and set default properties
var shadow = AddComponent<DropShadowFilter>();

shadow.BeginPropertyChange();
shadow.Mode = DropShadowMode.Default;
shadow.Angle = 135f;
shadow.Distance = 8f;
shadow.Color = Color.black;
shadow.Downsample = Downsample.Auto;
shadow.Blur = 4f;
shadow.Hardness = 1f;
shadow.SourceAlpha = 1f;
shadow.Strength = 1f;
shadow.EndPropertyChange();