Dissolve Filter Component

Overview

This component applies a filter to the Unity UI component to create an effect of the component appearing/disappearing in a variety of effects based on the texture map and parameters used.

WebGL Demo

Properties

Property	Type	Range	Default	Description
Area
Fill Space	Enum		Geometry	Options are: • Geometry: The dissolve textures position is relative to the Graphic geometry. • Screen: The dissolve texture position is relative to screen-space.
Dissolve
Texture	Texture			The texture that controls the pixel dissolve order. RGB channel is used. Darker pixels are dissolved first. If this is null then only the Direction is used.
Scale Mode	Enum		ScaleAndCrop	How the texture is scaled to the Graphic this effect is being applied to. Options are: • StretchToFill: Texture is stretched and doesn't maintain it's aspect ratio, but it does fill the entire Graphic. • ScaleAndCrop: The texture maintains aspect ratio, but part of it may be cropped to fill the entire Graphic. (DEFAULT) • ScaleToFit: The texture maintains aspect ratio, but it will not fill the entire Graphic unless it's Wrap Mode is set to Repeat/Mirror.
Scale	Float	[-∞..∞]	1.0	An additional scale value to increase/decrease the scale of the texture
Invert	Bool		False	Inverts the texture dissolve pixel order to use brightest pixels first.
Direction
Direction	Enum		None	A secondary direction for the dissolve effect to use. Options are: • None: No secondary direction. • Horizontal: Direction is across the x-axis. • Vertical: Direction is across the y-axis. • MirrorX: . Direction is across the x-axis, mirrored at the center of the graphic. • MirrorY: Direction is across the y-axis, mirrored at the center of the graphic. • Diagonal: Direction is diagonal. • Circle: Direction is circular, centered at the middle of the graphic. • Texture: Direction is driven by the texture property.
Texture	Texture			The texture that controls the secondary direction of the dissolve. Only the red channel is used.
Strength	Float		1.0	At 0.0 the direction will have no effect and the dissolve will be completely drive by the dissolve texture. At 1.0, both the dissolve and direction have equal influence over the dissolve. Greater than 1.0 means the direction will have more control over the dissolve.
Invert	Bool		False	Inverts the direction.
Edge
Length	Float	[0..1]	0.1	The length of the edge used to fade the dissolve effect or add a color/texture ramp.
Color Mode	Enum		None	How the edge length is filled. Options are: • None: The edge is faded to transparency. (DEFAULT) • Color: The edge is tinted a fixed color. • Ramp: A horizontal gradient texture is used to fill the edge.
Color	Color		Black	The color to fill the edge with.
Ramp	Texture		White	The horizontal gradient texture to fill the edge with.
Emissive	Float	[0..10]	0.0	Values above zero will increase the brightness of the edge color/texture allowing the edge to glow when using a Bloom filter.
Apply
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.

Scripting

Namespace

The namespace

using ChocDino.UIFX;

Adding Component

Add the DissolveFilter component to your GameObject

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

dissolve.BeginPropertyChange();
dissolve.FillSpace = FillSpace.Geometry;
dissolve.Texture = null;
dissolve.TextureScaleMode = ScaleMode.ScaleAndCrop;
dissolve.TextureScale = 1f;
dissolve.TextureInvert = false;
dissolve.Direction = DissolveDirection.None;
dissolve.DirectionTexture = null;
dissolve.DirectionStrength = 1f;
dissolve.DirectionInvert = false;
dissolve.EdgeColorMode = DissolveEdgeColorMode.None;
dissolve.EdgeLength = 0.1f;
dissolve.EdgeColor = Color.black;
dissolve.EdgeTExture = null;
dissolve.EdgeEmissive = 1f;
dissolve.REnderSpace = FilterRenderSpace.Canvas;
dissolve.Strength = 1f;
dissolve.EndPropertyChange();