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
Color	Color		Black	The color of the shadow.
Inner Shadow Enabled	Bool		False	Whether to render the inner shadow.
Drop Shadow Enabled	Bool		False	Whether to render the drop shadow.
Distance	Float	[0..64]	2.0	The distance in pixels that the drop shadow is cast.
Blur	Float	[0..128]	4.0	The radius of the drop shadow blur in pixels.
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.ShadowColor = Color.black;
filter.InnerShadowEnabled = false;
filter.DropShadowEnabled = false;
filter.ShadowDistance = 2f;
filter.ShadowBlur = 4f;
filter.Strength = 1f;
filter.EndPropertyChange();