Filter Stack (TextMeshPro) Component

Overview

This component allows the TextMeshPro - Text (UI) component to be rendered with multiple filter effects (eg Drop Shadow, Outline etc).

WebGL Demo

Properties

Property	Type	Range	Default	Description
Apply To Sprites	Bool		True	Whether to apply the filters to sprites.
Relative To Transform Scale	Bool		False	Whether to scale the filters relative to the transform scale. This only uses the the X component of the transform scale and so is only useful for scale that affects all 3 axes. When this is disabled the size values for filters (eg Size in the blur filter) will be in pixels, but with this enabled the pixel sizes will be scaled too.
Relative Font Size	Float		0.0	The font size to use as a reference when applying scaling to pixel effects relative to the font size. Setting this to zero will disable scaling based on font size.
Update On Transform	Bool		False	When this is disabled any transformation (translation, rotation, scaling) will not cause the filter to re-render. This can improve performance as in many cases re-rendering is not necessary.
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.
Filters	List			A list of image filters to apply, all deriving from the FilterBase class. The order can be changed by dragging the filters.

Usage

Add this component to any GameObject that contains a UI TextMeshPro - Text (UI) component, then add your filter components (eg Drop Shadow, Outline) and assign them to the Filters list property.

Reordering

Filters can be reordered by dragging the left side of the filter in the list. The filters are applied in top-down order.

Scripting

Namespace

The namespace

using ChocDino.UIFX.TMP;

Adding Component

Add the FilterStackTextMeshPro component to your GameObject

// Add the component to your GameObject and set default properties
var filterStack = AddComponent<FilterStackTextMeshPro>();
filterStack.ApplyToSprites = true;
filterStack.UpdateOnTransform = true;
filterStack.RelativeToTransformScale = false;
filterStack.RelativeFontSize = 0f;
filterStack.Filters = new FilterBase[0];
filterStack.RenderSpace = FilterRenderSpace.Canvas;

Adding Filters

Adding filters to FilterStackTextMeshPro

// Adding filters (NOTE: you have to reassign the Filters property)
var filterStack = GetComponent<FilterStackTextMeshPro>();
var filters = filterStack.Filters;
filters.Add(myFilter);
filterStack.Filters = filters;