UIEffect

UIEffect contains visual effect components for uGUI element in Unity.

<< Description | WebGL Demo | Download | Usage | Development Note >>

What’s new? See changelog

Do you want to receive notifications for new releases? Watch this repo





Description

Let’s decorate your UI with effects!
You can control parameters as you like from the script as well as inspector.
AnimationClip is supported as a matter of course!

thumbnail image



Available effects

Component Features Screenshot
UIEffect Combine some visual effects.

ToneMode: Grayscale, Sepia, Nega, Pixelation, Hue shift, Cutoff (alpha-based), Mono (alpha-based)
ColorMode: Multiply, Fill, Additive, Subtract
BlurMode: Fast, Medium, Detail

NOTE: ToneMode, ColorMode and BlurMode are changeable only in editor.
NOTE: Custom Effect feature is deprecated. Please use UICustomEffect component instead.
NOTE: Shadow feature is deprecated. Please use UIShadow component instead.
NOTE: Hue is deprecated. Please use UIHsvModifier component instead.
NOTE: Cutoff and Mono is deprecated. Please use UITransitionEffect component instead.
UICaptured EffectImage Capture a screenshot of a specific frame with effect, and display it.
This effect is non-realtime, light-weight, less-camera, but be effective enough.

ToneMode: Grayscale, Sepia, Nega, Pixelation
ColorMode: Multiply, Fill, Additive, Subtract
BlurMode: Fast, Medium, Detail
QualityMode: Fast, Medium, Detail, Custom
Options: Capture on enable, Blur iterations, Reduction rate, Target texture, Fit size to screen.

NOTE: Use this component in ‘ScreenSpace - Camera’ or ‘ScreenSpace - Overlay’ mode.
UIShiny Apply shinning effect to a graphic.
The effect does not require Mask component or normal map.

Options: Location, Width, Rotation, Softness, Brightness, Highlight
UIDissolve Apply dissolve effect to a graphic.

ColorMode: Overwrite, Additive, Subtract
Options: Location, Width, Rotation, Softness, Color
UIHsvModifier Modify HSV for graphic.

Target: Color, Range
Adjustment: Hue, Saturation, Value
UITransition Effect Apply transition effect with a single channel texture.

EffectMode: Cutoff, Fade



The following effects can be used with the above components.
Component Features Screenshot
UIShadow Add shadow/outline to a graphic.
Performance is better than the default Shadow/Outline component.
See also Development note.

ShadowStyle: Shadow, Shadow3, Outline, Outline8
Additional Shadows reduce vertices for multiple Shadows or Outlines.
NOTE: AdditionalShadow is deprecated. Please use multiple UIShadow component instead.
UIGradient Change vertex color as gradient with angle and offset.

Direction: Horizontal, Vertical, Angle, Diagonal
Options: Offset, Color space
UIFlip Flip a graphic.

Direction: Horizontal, Vertical, Both





Demo

WebGL Demo

  • Effect sample
  • Transition
  • Dialog window with blured background
  • Included in unitypackage





Usage

  1. Download UIEffect.unitypackage from Releases.
  2. Import the package into your Unity project. Select Import Package > Custom Package from the Assets menu.
  3. In Unity5.6+, enable TexCoord1 channel of canvas. See also Development Note.
  4. Add any effect component to UI element (Image, RawImage, Text, etc…) from Add Component in inspector.
  5. Enjoy!
Requirement
  • Unity 5.5+ (included Unity 2018.x)
  • No other SDK are required





Development Note

How does UIEffectCapturedImage work?

image

UIEffectCapturedImage is similar to post effect, but uses CommandBuffer to give effect only on the rendering result (= captured image) of a specific frame.
This effect is non-realtime, light-weight, less-camera, blit only once, but be effective enough.

  • Camera for processing effect is unnecessary.
  • Process effect only once after UIEffectCapturedImage.Capture.
  • Using reduction buffer, keep using memory size small and keep the rendering load are small.
  • When GameObjects with motion are on the screen, a result texture may be stirred.
  • You can overlay and display like as:
    [Screen] | [UIEffectCapturedImage] | [Dialog A] | [UIEffectCapturedImage] | [Dialog B].
    See also Demo.

Why is UIEffect lightweight?

  • UIEffect pre-generates material from a combination of effects. This has the following benefits.
    • Draw call batching If possible, draw calls will decrease.
    • Since only the required material and shader variants are included in the build, the build size will be smaller.

How to control effect parameters for uGUI element WITHOUT MaterialPropertyBlock?

  • In general, you can use MaterialPropertyBlock for renderers to control minor changes in the material without different batches.
  • However, changing the MaterialPropertyBlock of the uGUI element from the script will cause different batches and draw calls to increase.
  • So UIEffect encodes multiple effect parameters to UV1 channel with IMeshModifier.
    • Pack four 6-bit [0-1] (64 steps) parameters into one float value.
    • The parameters are lower precision, but sufficient.
uv1 6-bit [0-1] 6-bit [0-1] 6-bit [0-1] 6-bit [0-1]
x(32bit float) Tone level Empty Blur level Empty
y(32bit float) Red channel Green channel Blue channel Alpha channel

Note: Unity 5.6+

In Unity 5.6+, Canvas supports Additional Shader Channels.
Please enable TexCoord1 to use UIEffect.
image image

Note: if you include prefabs / scenes containing UIEffect in AssetBundle.

Use script define symbol UIEFFECT_SEPARATE.
Unused shader variants and materials will be excluded from AssetBundles.

Combined mode (default) Separated mode
Script define symbol - UIEFFECT_SEPARATE
Included in build Only used variants Only used variants
Included in AssetBundle All variants (Heavy!) Only used variants
Look in editor comb sep

How to improve performance?

The issue of default Outline component

Graphic with multiple outline components will generate a lot of overdraw.

image

This is an overdraw view of image with three outline components.
Because there are many overdraws, it is very bright!
For each Outline component, increase the mesh by 5 times. (In the case of the Shadow component, it doubles the mesh.)
In the image above, 1 x 5 x 5 x 5 = 125 overdraws are generated.

UIShadow’s ‘Addition Shadow’ feature solves this issue by adding only the necessary mesh, 1 + 4 + 4 + 4 = 13 overdraws are generated.





License

  • MIT
  • © UTJ/UCL

Author

mob-sakai

See Also