Skip to main content

Dissolve Filter (beta) 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

Component Screenshot

Property                            Type    Range    DefaultDescription
Dissolve
    DissolveFloat[0..1]0.25The amount to dissolve by.
    TextureTextureThe texture that controls the pixel dissolve order. RGB channel is used. Darker pixels are dissolved first.
    Scale ModeEnumScaleAndCropHow 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.
    ScaleFloat[-∞..∞]1.0An additional scale value to increase/decrease the scale of the texture
    InvertBoolFalseInverts the texture dissolve pixel order to use brightest pixels first.
Edge
    LengthFloat[0..1]0.1The length of the edge used to fade the dissolve effect or add a color/texture ramp.
    Color ModeEnumNoneHow 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.
    ColorColorBlackThe color to fill the edge with.
    RampTextureWhiteThe horizontal gradient texture to fill the edge with.
    EmissiveFloat[0..10]0.0Values above zero will increase the brightness of the edge color/texture allowing the edge to glow when using a Bloom filter.
Apply
    StrengthFloat[0..1]1.0Strength of the effect.

Setup

To use this BETA component with you first need to enable support for Beta features:

  1. Go to the Edit > Project Preferences window and open the UIFX options, enabled Beta Features and press the Apply Changes button.

    screenshot
  2. Wait for the scripts to reload
  3. Close the Preferences window

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 use the Filter Stack (TextMeshPro) component.