<img alt="logo" height="26" src="https://github.com/mob-sakai/mob-sakai/releases/download/docs/uieffect5.7.0-logo.png"/> UIEffect v5

⚠️ This README is for v5. For v4, please visit here.

📝 Description

"Decorate your UI, simply and powerfully."

UIEffect is a powerful, open-source Unity package that transforms your UI with stunning visual effects.
Apply professional-grade filters like grayscale, blur, and dissolve directly from the Inspector—no coding required!

✨ Perfect for: Game developers, UI designers, and anyone looking to enhance their Unity UI with minimal effort

📌 Key Features
🎮 Demo
⚙ Installation
🔄 Upgrading from v4 to v5
🚀 Usage
🤝 Contributing
License
Author
See Also

📌 Key Features

UIEffect is out-of-the-box!: Easily apply effects by adjusting parameters directly in the inspector.
Rich effect combinations: Decorate your UI with a variety of effects, such as grayscale, blur, and dissolve, by combining multiple filters and parameters.
Efficient shader builds: Only the shader variants in use are built, resulting in shorter build times.
URP/HDRP/VR support: Compatible with URP, HDRP, and VR environments.
Runtime and editor presets: Presets are available both at runtime and in the editor.
TextMeshPro support: Supports TextMeshPro, including  and <sprite> tags.
UIEffectReplica Component: Duplicate effects and apply them to multiple UI elements at once.
UIEffectTweener Component: A simple tweener component to play, stop, pause, and resume effects.
AnimationClip support: Allows control of effect animations using AnimationClips.
v4 compatible components (optional): For easy upgrading with minimal changes, compatible v4 components are available optionally.
SoftMaskForUGUI support (optional): Compatible with SoftMaskForUGUI for creating soft masks for UI elements. See for more details here.
ShaderGraph support (optional): Add Canvas (UIEffect) sub target (material) for UIEffect shaders. See for more details here.
Timeline support: Control UIEffect using Timeline with ControlTrack and UIEffect Tracks. See for more details here.

🎮 Demo

Try the WebGL Demo

⚙ Installation

This package requires Unity 2020.3 or later.

Install via OpenUPM

This package is available on OpenUPM package registry.
This is the preferred method of installation, as you can easily receive updates as they're released.
If you have openupm-cli installed, then run the following command in your project's directory:
```
openupm add com.coffee.ui-effect
```
To update the package, use Package Manager UI (Window > Package Manager) or run the following command with @{version}:
```
openupm add com.coffee.ui-effect@5.9.0
```

Install via UPM (with Package Manager UI)

Click Window > Package Manager to open Package Manager UI.
Click + > Add package from git URL... and input the repository URL: https://github.com/mob-sakai/UIEffect.git?path=Packages/src
To update the package, change suffix #{version} to the target version.
- e.g. https://github.com/mob-sakai/UIEffect.git?path=Packages/src#5.9.0

Install via UPM (Manually)

Open the Packages/manifest.json file in your project. Then add this package somewhere in the dependencies block:

{
  "dependencies": {
    "com.coffee.ui-effect": "https://github.com/mob-sakai/UIEffect.git?path=Packages/src",
    ...
  }
}

To update the package, change suffix #{version} to the target version.
- e.g. "com.coffee.ui-effect": "https://github.com/mob-sakai/UIEffect.git?path=Packages/src#5.9.0",

Install as Embedded Package

Download the Source code (zip) file from Releases and extract it.
Move the <extracted_dir>/Packages/src directory into your project's Packages directory.
- You can rename the src directory if needed.
- If you intend to fix bugs or add features, installing it as an embedded package is recommended.
- To update the package, re-download it and replace the existing contents.

Import Additional Resources

Additional resources can be imported to extend functionality.

🔄 Upgrading from v4 to v5
Usage with TextMeshPro
Usage with ShaderGraph

🔄 Upgrading from v4 to v5

If upgrading from UIEffect v4 to v5, note the following breaking changes:

If you are installing via git URL, add ?path=Packages/src. The default branch is changed upm to main.

// v4
"com.coffee.ui-effect": "https://github.com/mob-sakai/UIEffect.git",
"com.coffee.ui-effect": "https://github.com/mob-sakai/UIEffect.git#upm",

// v5
"com.coffee.ui-effect": "https://github.com/mob-sakai/UIEffect.git?path=Packages/src",
"com.coffee.ui-effect": "https://github.com/mob-sakai/UIEffect.git?path=Packages/src#main",

Import the v4 Compatible Components sample from the Package Manager window.
All v4 components are obsolete.

v4 UIEffect component is now UIEffectV4 component. Change the reference in the code.
The effectArea property in some components are not supported in v5.
UIShadow, UIGradient components are not supported in v5.
v4 components can be converted to v5 UIEffect component by selecting `

UIEffect

Install / Use

README