Gooey Filter Component

Overview

This component softens the edges of the UI object it is applied to by expanding and blurring the alpha channel and then applying a cutoff. This gives the appearance of the pixels melting together. Also commonly known as "blob" effect.

WebGL Demo

Properties

Property	Type	Range	Default	Description
Gooey
Grow	Float	[0..32]	2.0	The radius size in pixels to expand the graphic.
Blur	Float	[0..12]	12.0	The radius in pixels of the blur.
Threshold	Float	[0..1]	0.35	The minimum alpha value at which to discard pixels.
Threshold Falloff	Float	[0..1]	0.5	How hard or soft the threshold value is.
Apply
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).

Examples

Liquid Effect

Create Rounded Edges

Usage with TextMeshPro

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

Scripting

Namespace

The namespace

using ChocDino.UIFX;

Adding the GooeyFilter Component

Add the GooeyFilter component to your GameObject

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

gooey.BeginPropertyChange();
gooey.Grow = 2f;
gooey.Blur = 12f;
gooey.Threshold = 0.35f;
gooey.ThresholdFalloff = 0.5f;
gooey.Strength = 1f;
gooey.EndPropertyChange();