Outline Filter Component

Overview

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

WebGL Demo

Properties

Property	Type	Range	Default	Description
Distance
Method	Enum		DistanceMap	The algorithm to use for creating the outline. Options are: • DistanceMap - This is usually the best method as it has the best performance, especially for large outlines. • Dilate - This is a legacy method and is much slower than DistanceMap especially when Size is larger than 4.0, but it does have slightly smoother outline than DistanceMap. This enables the Blur property but doesn't enable some more advanced options that will be available in the DistanceMap method soon.
Shape	Enum		Circle	The shape that the outline grows in. Options are: • Square - Useful when you don't want rounded outlines. For example on a rectangular Image use this to keep the outline rectangular. • Diamond - Pointy sharper outlines. • Circle - Useful for rounded outlines and usually the best option.
Outline
Direction	Enum		Outside	The direction the outline grows in. Options are: • Both - Grow both inside and outside. • Inside - Only grow inside. • Outside - Only grow outside.
Size	Float	[0..256]	4.0	The radius of the outline in pixels.
Softness	Float	[0..128]	2.0	The radius of the falloff pixels. Best to keep this value below Size. Used to soften/anti-alias the outline. This option is only available when Method is set to DistanceMap mode.
Blur	Float	[0..4]	0.0	The radius of the blur filter in pixels. This option is only available when Method is set to Dilate mode.
Fill
Fill Mode	Enum		Color	The mode to use to fill the outline with. Options are: • Color: A single color. • Gradient: A gradient used to fill the outline.
Color	Color		Black	The color of the outline.
Gradient	Gradient			The gradient to fill the outline with in Gradient fill mode.
Angle	Float	[0..360]	0.0	The angle of the gradient.
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.

Usage

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

Usage with TextMeshPro

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

Examples

Interactive Outline

Size Adjustable

Render Outline Only

Combine Multiple Outlines

Gradient Fill

Scripting

Namespace

The namespace

using ChocDino.UIFX;

Adding the OutlineFilter Component

Add the OutlineFilter component to your GameObject

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

outline.BeginPropertyChange();
outline.Method = OutlineMethod.DistanceMap;
outline.DistanceShape = DistanceShape.Circle;
outline.Direction = OutlineDirection.Outside;
outline.Size = 4f;
outline.Softness = 2f;
outline.Blur = 0f;
outline.Color = Color.black;
outline.SourceAlpha = 1f;
outline.Strength = 1f;
outline.EndPropertyChange();