跳至主要内容

Glow Filter Component

Component Screenshot

Overview

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

WebGL Demo

Properties

Component Screenshot

Property                            Type    Range    DefaultDescription
Distance
    Edge SideEnumBothThe side of the graphic edge that the glow occupies. Options are:
Both - Grow both inside and outside.
Inside - Only grow inside.
Outside - Only grow outside.
    ShapeEnumCircleThe shape of the glow. Options are:
Square - Useful when you don't want rounded glow.
Diamond - Pointy sharper glow.
Circle - Useful for rounded glow and usually the best option.
    Max DistanceFloat[0..1024]128.0The maxmimum distance the glow can travel. Higher values generate a larger glow which can be more GPU intensive.
Falloff
    ModeEnumExponentialSpecifies which options to use to control the falloff of the glow. Options are:
Exponential - A procedual exponential function is used to generate a glow with natural looking falloff.
Curve - A user controlled curve is used to control the falloff. This option is generally less realistic but can be used for more artistic control or alternative styles.
    EnergyFloat[1..16]4.0How much energy the glow has. This corresponds to how bright the glow is. This energy is dissipated using the FallOff value. Higher values generate a larger glow which can be more GPU intensive.
    PowerFloat[1..8]2.0The rate at which the energy dissipates. Lower values generate a larger glow which can be more GPU intensive.
    OffsetFloat[-inf..inf]0.0An artistic control to offset the glow.
    CurveCurveA curve that controls the falloff rate.
Fill
    ModeEnumColorSpecifies how to fill the color of the glow. Options are:
Color - A single color is used.
Texture - A texture containing a horizontal gradient is used to color the glow. Left to right corresponds to going from the edge to the outside of the glow.
Gradient - A gradient is used to color the glow. Left to right corresponds to going from the edge to the outside of the glow.
    ColorColorWhiteThe color of the glow.
    TextureTextureWhiteThe texture used to specifiy a horizontal gradient to color the glow.
    GradientGradientA gradient used to color the glow.
    OffsetFloat[-1..1]0.0In Texture and Gradient fill modes, this biases which side of the gradient to use for coloring.
    GammaFloat[0..10]1.0In Texture and Gradient fill modes, this creates exponential biasing of the gradient.
    ReverseBoolFalseIn Texture and Gradient fill modes, this creates reverses the gradient.
Blur
    BlurFloat[0..28]0.0Optionally blur the glow.
Apply
    AdditiveFloat[0..1]1.0Controls the blending mode used to blend the glow over the source graphic and background. 0.0 uses a standard alpha blend, 1.0 uses an additive blend.
    Source AlphaFloat[0..1]1.0Fades the source Graphic.
    StrengthFloat[0..1]1.0Strength of the effect.

Usage

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

Usage with TextMeshPro

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