Edge Lighting Filter Component

Overview

This component is used to add a lighting and shadow effect to a UI element.

WebGL Demo

Properties

Property	Type	Range	Default	Description
Light
Angle	Float	[0..360]	135.0	The clockwise angle for the lighting (and shadow).
Distance	Float	[0..32]	2.0	The distance in pixels to inset the edge lighting.
Blur	Float	[0..32]	2.0	The radius of the edge lighting blur in pixels.
Color	Color		White	The color of the light.
Shadow
Enabled	Bool	True	32.0	The length of the blur in pixels.
Distance	Float	[0..64]	2.0	The distance in pixels that the shadow is cast.
Blur	Float	[0..128]	4.0	The radius of the shadow blur in pixels.
Color	Color		Black	The color of the shadow.
Apply
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.
Strength	Float	[0..1]	1.0	Strength of the effect.

Usage

Add this component to any GameObject that contains a UI Graphic component (eg Text, Image, RawImage, etc).

Usage with TextMeshPro

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

Examples

Text

Buttons

Lighting

Scripting

Namespace

The namespace

using ChocDino.UIFX;

Adding the EdgeLightingFilter Component

Add the EdgeLightingFilter component to your GameObject

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

filter.BeginPropertyChange();
filter.Angle = 135f;
filter.Distance = 2f;
filter.Blur = 2f;
filter.LightColor = Color.white;
filter.ShadowEnabled = true;
filter.ShadowColor = Color.black;
filter.ShadowBlur = 4f;
filter.ShadowDistance = 2f;
filter.Strength = 1f;
filter.EndPropertyChange();