mob-sakai / uieffect

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

UIEffect

UIEffect provides visual effect components for Unity UI.

<< Description | WebGL Demo | Installation | Usage | Example of using | Change log | Support >>

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!

Available effects

Component	Features	Screenshot
UIEffect	Combine some visual effects. Effect Mode: Grayscale, Sepia, Nega, Pixelation Color Mode: Multiply, Fill, Additive, Subtract Blur Mode: Fast, Medium, Detail Advanced Blur: Enable more beautiful blurring.
UIShiny	Apply shining effect to a graphic. The effect does not require Mask component or normal map. Parameters: Effect factor, Width, Rotation, Softness, Brightness, Gloss
UIDissolve	Apply dissolve effect to a graphic. Color Mode for edge: Multiply, Fill, Additive, Subtract Parameters: Effect factor, Width, Rotation, Softness, Edge color Options: Effect area, Keep effect aspect ratio
UIHsvModifier	Modify HSV for graphic. Target: Color, Range Adjustment: Hue, Saturation, Value
UITransition Effect	Apply transition effect with a single channel texture. Effect Mode: Cutoff, Fade, Dissolve Options: Effect area, Keep effect aspect ratio, transition texture Pass Ray On Hidden: Disable the graphic's raycastTarget on hidden.

The following effects can be used with the above components.

Component	Features	Screenshot
UIShadow	Add shadow/outline to a graphic. The performance is better than the default Shadow/Outline component. ShadowStyle: Shadow, Shadow3, Outline, Outline8
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

Installation

Requirement

• Unity 2017.1 or later
• No other SDK are required

Using OpenUPM (for Unity 2018.3 or later)

This package is available on OpenUPM. You can install it via openupm-cli.

openupm add com.coffee.ui-effect

Using Git (for Unity 2018.3 or later)

Find the manifest.json file in the Packages folder of your project and edit it to look like this:

{
 "dependencies": {
 "com.coffee.ui-effect": "https://github.com/mob-sakai/UIEffect.git",
 ...
 },
}

To update the package, change suffix #{version} to the target version.

• e.g. "com.coffee.ui-effect": "https://github.com/mob-sakai/UIEffect.git#4.0.0",

Or, use UpmGitExtension to install and update the package.

For Unity 2018.2 or earlier

1. Download a source code zip file from Releases page
2. Extract it
3. Import it into the following directory in your Unity project
   • Packages (It works as an embedded package. For Unity 2018.1 or later)
   • Assets (Legacy way. For Unity 2017.1 or later)

How to play demo

• For Unity 2019.1 or later
  • Open Package Manager window and select UI Effect package in package list and click Demo > Import in project button
• For Unity 2018.4 or earlier
  • Click Assets/Samples/UIEffect/Import Demo from menu

The assets will be imported into Assets/Samples/UI Effect/{version}/Demo.
Open `

Usage

1. Add any effect component to UI element (Image, RawImage, Text, etc...) from Add Component in inspector or Component > UI > UIEffect > ... menu.
   
2. Adjust the parameters of the effect as you like, in inspector.
   
3. You can add or modify effects from the script.

var uieffect = gameObject.AddComponent<UIEffect>();
uieffect.effectMode = EffectMode.Grayscale;
uieffect.effectFactor = 0.85f;
uieffect.colorMode = ColorMode.Add;
uieffect.effectColor = Color.white;
uieffect.colorFactor = 0.1f;
uieffect.blurMode = BlurMode.FastBlur;
uieffect.blurFactor = 1;

4. Enjoy!

Example of using

UIEffect can easily be used in a variety of cases in the game.

Case	Description	Screenshot
Lock/unlock contents	Use UIEffect to apply grayscale. Indicate to user that the content is unavailable.
Silhouette	Use UIEffect for filling color.
Soft shadow/ Outer glow	Use UIEffect and UIShadow to blur the shadow.
Colored shadow	Use UIEffect and UIShadow to fill shadow with color.
Blurred dynamic font	Use UIEffect to blur text. To blur dynamic font cleanly, enable Advanced Blur option.
Text with outline & shadow	Use two UIShadows to add outline and shadow. There is less overdraw than default Outline/Shadow.
Shining button	Use UIShiny for shining button. Indicate to user that you can press the button.
Screen transition	Use UITransitionEffect to transition the screen with any transition texture.

License

• MIT
• © UTJ/UCL

Support

This is an open-source project that I am developing in my free time. If you like it, you can support me. By supporting, you let me spend more time working on better tools that you can use for free. :)

Author

mob-sakai

See Also

• GitHub page : https://github.com/mob-sakai/UIEffect
• Releases : https://github.com/mob-sakai/UIEffect/releases
• Issue tracker : https://github.com/mob-sakai/UIEffect/issues
• Change log : https://github.com/mob-sakai/UIEffect/blob/upm/CHANGELOG.md

uieffect's Issues

Check: Unused shader variants and materials are excluded from AssetBundle.

ref #15

Change: ShadowMode -> ShadowStyle

Obsolete ShadowMode and upgrade with UnityUpgradable.

Bug: Color effect is incorrect.

Update readme, export package and release

Feature: Flip horizontal/vertical

Change: Reduce the pixelation effect when tone level = 1.

Pixelaration shifts to the lower right.

Shader should use round instead of floor.

Change: Change `ToneMode` to `EffectMode`

Change name

Change: Change namespace to Coffee.UIExtensions

• Change to Coffee.UIExtensions.

Add Custom effect as other component

For Single Responsibility Principle.

Check: Does support .Net 2.0 Subset?

Bug: Pixelization is incorrect.

Fix aspect ratio using _MainTex_TexelSize.

Feature: Hue

Bug: Error has occur on edit prefab.

Performance improvement

• UIEffectCapturedImage has cpu spike on first capturing.

Feature: UIEffectCapturedImage supports keep canvas size.

Feature: UIEffectCapturedImage supports `Quality Type` to easy setup.

UIEffectCapturedImage supports Quality Type to easy setup.

QualityMode	Desampling Rate	Reduction Rate	FilterMode	Iterations
Fast	x2	x2	Bilinear	1
Medium	x1	x1	Bilinear	1
Detail	None	x1	Bilinear	1
Custom	None - x8	None - x8	-	1 - 8

Feature: ToneMode Noise

Is this really a necessary effect?

Test: Improve effect prediction

6bit -> 8bit

https://forum.unity.com/threads/looking-for-a-way-to-pack-4-bytes-of-color-data-into-a-float-in-shader-lab.189728/
https://www.h-schmidt.net/FloatConverter/IEEE754.html

Feature: Shining effect

Feature: HSV modifier

Change: Follow the csharp coding guidelines

http://wiki.unity3d.com/index.php/Csharp_Coding_Guidelines

Change: UIEffect inherit BaseMeshEffect.

Feature: UIEffectCapturedImage fading by script

Feature: Pixelization effect

UIEffectCapturedImage: When iteration count is even. the result image is flipped vertically (on Windows)

Feature: Exclude unused shader variants from build.

• For performance.
• https://docs.unity3d.com/Manual/OptimizingShaderLoadTime.html
• Use #pragma shader_feature instead of #pragma multi_compile.
• ShaderVariantCollection or hidden materials?
  • Hidden material contains sub material.
• ToneMode, ColorMode, BlurMode can be changed only in editor.

Feature: Dissolve

Feature: Gradient

Vertex color

Feature: ShadowMode 'Shadow 3'

3 directions

Change ColorMode correctly

Before:

public enum ColorMode
{
	None = 0,
	Set= 1,
	Add = 2,
	Sub = 3,
}

After:

public enum ColorMode
{
	Multiply = 0,
	Fill = 1,
	Add = 2,
	Subtract = 3,
}

This change does not affect existing projects.

Important: Unity 5.3.x & 5.4.x are no longer supported.

To fix some issues.

Bug: Color effect on shadow is incorrect.

• ColorMode.Add on shadow look the same as ColorMode.Set.

Feature: Add custom effect shaders as example.

Change: Blur level range to [0-1]

Bug: Cannot access protected member `UnityEngine.UI.BaseMeshEffect.graphic`

In ver.1.6.0.

Bug: Error has occur OnAfterDeserialize in editor.

null exception

Supports spike effect

Feature: UIEffectCapturedImage support iterative operation

Feature: Customize shader/material. You can create a custom ui shader and control it with UIEffct.

Control your parameterized shader.

Improve: Reduce the materials. Too many effect materials are exist.

Too many effect materials are exist.
Therefore, we generate effect materials as sub-asset.

Feature: Fast multiple shadow effect.

Performance: Supports multiple shadow effect for reduce rendering vertices.

[1.4.3] Update readme, export package and release

Bug: An error occurs when no effect is specified for UICapturedImage.

NullReferenceException: Object reference not set to an instance of an object
UnityEngine.UI.UIEffectCapturedImage.Capture () (at Assets/UIEffect/UIEffectCapturedImage.cs:178)

Change directory structure

Assets/Coffee/UIExtensions/UIEffect/***

[1.5.0] Update readme

Why is UIE Effect lightweight?

UIEffectはエフェクトの組み合わせからマテリアルを事前生成します。これにより、以下のメリットがあります。

• ドローコールバッチング可能であれば、ドローコールが少なくなります。
• 必要なマテリアルとシェーダバリアントのみがビルドに含まれるので、ビルドサイズが小さくなります。

どうやってパラメータをコントロールしているの？

一般的に、レンダラーに対してMaterialPropertyBlockを利用すると、異なるバッチなしでマテリアルの僅かな変更をコントロールできます。
しかし、スクリプトからuGUI要素のMaterialPropertyBlockを変更すると、異なるバッチが発生し、ドローコールが増加します。
そこで、UIEffectはIMeshModifierで複数のエフェクトパラメータをUV1チャンネルにエンコードしています。
最大4つの0-1パラメータを、1つのfloatにパックしています。
エフェクトパラメータは低精度ですが、十分です。

uv1	-	-	-	-
x	Tone[0-1](6 bit)	None(6 bit)	Blur[0-1](12 bit)	-
y	Red[0-1](6 bit)	Green[0-1](6 bit)	Blue[0-1](6 bit)	Alpha[0-1](6 bit)

---

English version

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 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.
Up to four [0-1] parameters are packed in one float.
Effect parameters are low precision, but sufficient.

uv1	-	-	-	-
x(32bit float)	Tone[0-1] (6bit)	Empty (6bit)	Blur[0-1] (12bit)	-
y(32bit float)	Red[0-1] (6bit)	Green[0-1] (6bit)	Blue[0-1] (6bit)	Alpha[0-1] (6bit)

Separate shadow effect to other component

For Single Responsibility Principle.

Update readme for unitylist.com

Perhaps, the symbolic Readme.md will be not crawled properly.
On export unitypackage, copy Readme.md to the repository root.

Use the graphic color as effect color, to reduce parameters

Color effect use vertex color to reduce parameters and to avoid conflict with other components.
Add Multiply (default) color effect.

Feature: ColorMode `Override`