Home

Awesome

UIEffect

UIEffect provide visual effect components for uGUI element in Unity.

PRs Welcome

<< Description | WebGL Demo | Download | Usage | Example of using | Development Note >>

What's new? See changelog

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

Support me on Patreon! become_a_patron

<br><br><br><br>

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

<br><br>

Available effects

ComponentFeaturesScreenshot
UIEffectCombine some visual effects.<br><br>Effect Mode: Grayscale, Sepia, Nega, Pixelation<br>Color Mode: Multiply, Fill, Additive, Subtract<br>Blur Mode: Fast, Medium, Detail<br>Advanced Blur: Enable more beautiful blurring.<img src="https://user-images.githubusercontent.com/12690315/46639603-258df180-cba2-11e8-8f50-9e93bdc4c96e.png" width="600px">
UICaptured EffectImageCapture a screenshot of a specific frame with effect, and display it.<br>This effect is non-realtime, light-weight, less-camera, but be effective enough.<br><br>Effect Mode: Grayscale, Sepia, Nega, Pixelation<br>Color Mode: Multiply, Fill, Additive, Subtract<br>Blur Mode: Fast, Medium, Detail<br>Quality Mode: Fast, Medium, Detail, Custom<br>Capture On Enable: When the component is enable, capture screen automatically.<br>Blur iterations: Number of blur iterations.<br>Reduction/Downsampling Rate: None, x1, x2, x4, x8<br>Fit size to screen: Fit RectTransform to the screen on captured.<br>Immediate Capturing:<br><br>NOTE: This component can be used with UIEffect, UITransition etc.<br>NOTE: Immediate capturing does not support LWRP, WebGL and Unity 5.x for iOS/Mac.<img src="https://user-images.githubusercontent.com/12690315/44078752-4c2e4114-9fe2-11e8-97f0-54d3a36a562e.gif" width="600px">
UIShinyApply shining effect to a graphic.<br>The effect does not require Mask component or normal map.<br><br>Parameters: Effect factor, Width, Rotation, Softness, Brightness, Gloss<br>Effect Player: To play shining, enable Play in inspector or call Play() from script.<img src="https://user-images.githubusercontent.com/12690315/46639689-b1078280-cba2-11e8-8716-cbc634af7293.gif" width="600px">
UIDissolveApply dissolve effect to a graphic.<br><br>Color Mode for edge: Multiply, Fill, Additive, Subtract<br>Parameters: Effect factor, Width, Rotation, Softness, Edge color<br>Options: Effect area, Keep effect aspect ratio<br>Effect Player: To play dissolving, call Play() from script.<img src="https://user-images.githubusercontent.com/12690315/46639690-b1078280-cba2-11e8-8aa9-1d2650fe9a62.gif" width="600px">
UIHsvModifierModify HSV for graphic.<br><br>Target: Color, Range<br>Adjustment: Hue, Saturation, Value<img src="https://user-images.githubusercontent.com/12690315/43200006-d6e2bf54-904e-11e8-9f22-0c0f9ce5912f.gif" width="600px">
UITransition EffectApply transition effect with a single channel texture.<br><br>Effect Mode: Cutoff, Fade, Dissolve<br>Options: Effect area, Keep effect aspect ratio, transition texture<br>Pass Ray On Hidden: Disable the graphic's raycastTarget on hidden.<br>Effect Player: To show/hide transition, call Show()/Hide() from script.<img src="https://user-images.githubusercontent.com/12690315/46639688-b1078280-cba2-11e8-8bbb-16b8498bca5f.gif" width="600px">

<br><br>

The following effects can be used with the above components.
ComponentFeaturesScreenshot
UIShadowAdd shadow/outline to a graphic.<br>The performance is better than the default Shadow/Outline component.<br><br>ShadowStyle: Shadow, Shadow3, Outline, Outline8<img src="https://user-images.githubusercontent.com/12690315/46639604-258df180-cba2-11e8-98a9-aa31f04c695d.png" width="600px">
UIGradientChange vertex color as gradient with angle and offset.<br><br>Direction: Horizontal, Vertical, Angle, Diagonal<br>Options: Offset, Color space<img src="https://user-images.githubusercontent.com/12690315/40716995-ca87665e-6445-11e8-8233-ec2e21fefd6b.png" width="600px">
UIFlipFlip a graphic.<br><br>Direction: Horizontal, Vertical, Both<img src="https://user-images.githubusercontent.com/12690315/40716996-cab1fd7e-6445-11e8-9753-962d23991d86.png" width="600px">

<br><br><br><br>

Demo

WebGL Demo

<br><br><br><br>

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 or Component > UI > UIEffect > ... menu.
  5. Adjust the parameters of the effect as you like, in inspector.
    image
  6. Enjoy!

Usage with TextMeshPro

  1. Add a symbol TMP_PRESENT to scripting define symbols.
  2. If the material does not support the effect component, the following warning will be displayed. When you press the Fix button, new material is automatically generated and set.
  3. If you want to use material variants, select Create Material Preset from the context menu to duplicate the material.
  4. Effect mode, color mode, blur mode and etc. can not be changed from the component editor. Change them from the material editor.
  5. If you want to enable "Advanced Blur", enable TexCoord2 channel of canvas.

Usage without TextMeshPro

  1. When you uninstalled TextMeshPro from the project, remove a symbol TMP_PRESENT to scripting define symbols.
Requirement

<br><br><br><br>

Example of using

CaseDescriptionScreenshot
Lock/unlock contentsUse UIEffect to apply grayscale.<br>Indicate to user that the content is unavailable.
SilhouetteUse UIEffect for filling color.
Soft shadow/<br>Outer glowUse UIEffect and UIShadow to blur the shadow.<br>To blur only shadow, set Blur Factor in UIEffect to 0.
Colored shadowUse UIEffect and UIShadow to fill shadow with color.<br>To fill only shadow, set Color Factor in UIEffect to 0.
Blurred dynamic fontUse UIEffect to blur text.<br>To blur dynamic font cleanly, enable Advanced Blur option.
Text with outline & shadowUse two UIShadows to add outline and shadow.<br>There is less overdraw than default Outline/Shadow (Default: 1 x 5 x 2 = 10 overdraws, UIShadow: 1 + 4 + 1 = 6 overdraws).
Shining buttonUse UIShiny for shining button.<br>Shine the button and indicate to user that you can press the button.<br>Enable Play and Loop option to shine it without any AnimationClip.
Blurring the background of a menuUse UIEffectCapturedImage to blur the background of a menu.<br>UIEffectCapturedImage applies an effect to the screen of the previous frame, without adding a camera or layer.<br>It's not a real-time post effect, so it's good performance and works well on mobile.
Screen transitionUse UITransitionEffect to add screen transition.<br>You can change transition texture (single channel texture).<br>Enable Pass Ray On Hidden option and use Show()/Hide() method to play transition without AnimationClip.

<br><br><br><br>

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.

Why is UIEffect lightweight?

How to control effect parameters for uGUI element WITHOUT MaterialPropertyBlock?

uv16-bit [0-1]6-bit [0-1]6-bit [0-1]6-bit [0-1]
x(32bit float)Tone levelEmptyBlur levelEmpty
y(32bit float)Red channelGreen channelBlue channelAlpha 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 buildOnly used variantsOnly used variants
Included in AssetBundleAll variants (Heavy!)Only used variants
Look in editorcombsep

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.

<br><br><br><br>

License

Author

mob-sakai
become_a_patron

See Also