A collection of shader-based effects that apply different blending modes to UI elements, including additive, multiply, screen, and shine effects.
1 Overview
2 Effects
4 Usage
6 See also
The Shader Effects Suite provides a collection of shader-based visual effects for UI elements. Each effect applies a different blending mode to create various visual styles. These effects automatically apply the appropriate shader material to the target graphic component.
All shader effects in this suite share a common implementation pattern: they detect the attached graphic component and apply a specialized shader material that implements the desired blending behavior.
Menu Path: UI/Effects/Extensions/UIAdditiveEffect
Applies additive blending to UI elements. This effect adds the pixel colors together, resulting in a brightening effect. Useful for glow, light, and highlight effects.
Use Cases:
Menu Path: UI/Effects/Extensions/UISoftAdditiveEffect
Applies soft additive blending to UI elements. Similar to additive blending but with reduced intensity, resulting in a gentler brightening effect.
Use Cases:
Menu Path: UI/Effects/Extensions/UIMultiplyEffect
Applies multiply blending to UI elements. This effect darkens by multiplying pixel colors, resulting in a darkening effect. Useful for shadows and darkening overlays.
Use Cases:
Menu Path: UI/Effects/Extensions/UILinearDodgeEffect
Applies linear dodge (additive) blending to UI elements. Similar to additive blending with slightly different color mathematics.
Use Cases:
Menu Path: UI/Effects/Extensions/UIScreenEffect
Applies screen blending to UI elements. This effect inverts and multiplies pixel colors, resulting in a lightening effect that’s gentler than additive blending.
Use Cases:
Menu Path: UI/Effects/Extensions/Shining Effect
Creates a moving shine/gloss effect across UI elements. Renders an animated gradient that slides across the target graphic to simulate a glossy or polished surface.
Use Cases:
Properties:
All shader effects (except ShineEffector) share these properties:
| Property | Description |
|---|---|
| Graphic Component | The target Graphic component (Image, RawImage, Text) that the effect will be applied to. Automatically detected on the same GameObject. |
| Material | The shader material applied to the graphic. Automatically created using the appropriate shader for the effect type. |
ShineEffector-specific properties:
| Property | Description |
|---|---|
| Y Offset | Controls the vertical position of the shine effect. Range from -1 (top) to 1 (bottom). |
| Width | Controls the width/thickness of the shine effect. Range from 0.1 (thin) to 1 (wide). |
Simply add the desired effect to a GameObject with a Graphic component (Image, RawImage, or Text):
// In editor: Add Component -> UI/Effects/Extensions -> [EffectName]
// Or in code:
var image = GetComponent<Image>();
image.gameObject.AddComponent<UIAdditiveEffect>();
The effect will automatically apply its shader material to the graphic component.
public Image glowImage;
void Start()
{
// Add additive effect to create a glow
glowImage.gameObject.AddComponent<UIAdditiveEffect>();
}
public ShineEffector shineEffect;
void Update()
{
// Animate the shine effect
shineEffect.YOffset = Mathf.Sin(Time.time) * 0.5f;
}
Multiple effects can be combined for complex visual results:
var image = GetComponent<Image>();
// Add multiple effects
image.gameObject.AddComponent<UIMultiplyEffect>();
image.gameObject.AddComponent<UIAdditiveEffect>();
Note: When combining effects, be aware that the order and interaction of blending modes will affect the final result.
Coming soon…
00christian00, ömer faruk sayılır