/UIEffect

UIEffect is an effect component for uGUI in Unity. Let's decorate your UI with effects!

Primary LanguageC#MIT LicenseMIT

UIEffect

UIEffect is an effect component for uGUI in Unity.
Let's decorate your UI with effects!



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





Description

New feature in v2.3.0!

v2.3.0

Supports following effects!

image

  • Grayscale
  • Sepia tone
  • Nega tone
  • Pixelation
  • Hue shift
  • Cutoff (alpha-based)
  • Mono (alpha-based)
  • Color overwrite
  • Color additive
  • Color subtract
  • Blur fast(3x4)
  • Blur medium(6x4)
  • Blur detail(6x8)
  • Shadow with effect
    • Shadow
    • Shadow3
    • Outline
    • Outline8
  • Gradient vertex color
    • Horizontal
    • Vertical
    • Angle
    • Diagonal
  • Shiny
  • Dissolve
  • Flip horizontal/vertical

Easy to control effect parameters!

image

And, more features!

  • Control the effect parameters without instantiating the material
  • Control the effect parameters with AnimationClip
    image
  • Use for screen transition
    image
  • Multiple shadow effect to reduce rendering vertices
    image
  • UICapturedEffectImage: The captured image with effect, like post effect
    image
  • UICapturedEffectImage: Dialog window with the captured image effect
    image
  • UIGradient: Change vertex color as gradient, with rotation, offset, color correction
    image
  • UIShiny: Shiny effect WITHOUT Mask component. This will suppress extra draw calls and improve performance.
    Merged from ShinyEffectForUGUI.
    image
  • UIDissolve: Dissolve effect WITHOUT material instancing. This will suppress extra draw calls and improve performance.
    Merged from DissolveEffectForUGUI.
    demo
  • UIFlip: Flip horizontal/vertical.





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. Add UIEffect component to UI element (Image, RawImage, Text, etc...) from Add Component in inspector.
  4. Choose effect type and adjust values in inspector.
    image
  5. Enjoy!
Requirement
  • Unity 5.5+ (included Unity 2017.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 effective.

  • Camera for processing effect is unnecessary.
  • Process effect only once after UIEffectCapturedImage.Capture.
  • Using reduction buffer, keep used memory size small and keep 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 low 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?





License

  • MIT
  • © UTJ/UCL

Author

mob-sakai

See Also