-
-
Notifications
You must be signed in to change notification settings - Fork 807
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
68 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,7 +2,8 @@ | |
|
|
||
| [](https://openupm.com/packages/com.coffee.ui-effect/) | ||
| [](https://github.com/mob-sakai/UIEffect/releases) | ||
| [](https://github.com/mob-sakai/UIEffect/releases) | ||
| [](https://github.com/mob-sakai/UIEffect/releases) | ||
| [](https://openupm.com/packages/com.coffee.ui-effect/) | ||
|  | ||
|  | ||
|  | ||
|
|
@@ -56,7 +57,7 @@ Combine various filters, such as grayscale, blur, and dissolve, to decorate your | |
|
|
||
| ## 📌 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. | ||
|
|
@@ -73,7 +74,7 @@ Combine various filters, such as grayscale, blur, and dissolve, to decorate your | |
|
|
||
| ## 🎮 Demo | ||
|
|
||
|  | ||
|  | ||
|  | ||
|
|
||
| [WebGL Demo](https://mob-sakai.github.io/UIEffect/) | ||
|
|
@@ -86,7 +87,7 @@ _This package requires **Unity 2020.3 or later**._ | |
|
|
||
| ### Install via OpenUPM | ||
|
|
||
| - This package is available on [OpenUPM](https://openupm.com) package registry. | ||
| - This package is available on [OpenUPM](https://openupm.com/packages/com.coffee.ui-effect/) package registry. | ||
| - This is the preferred method of installation, as you can easily receive updates as they're released. | ||
| - If you have [openupm-cli](https://github.com/openupm/openupm-cli) installed, then run the following command in your project's directory: | ||
| ``` | ||
|
|
@@ -183,71 +184,119 @@ If upgrading from UIEffect v4 to v5, note the following breaking changes: | |
|
|
||
| ### Component: UIEffect | ||
|
|
||
|  | ||
|  | ||
|
|
||
| The `UIEffect` component applies visual effects to UI elements, allowing various effects to be achieved by combining multiple filters. | ||
|
|
||
| #### Tone Filter | ||
|
|
||
| - **Tone Filter**: `None`, `Grayscale`, `Sepia`, `Nega`, `Retro`, `Posterize` | ||
| - **Tone Intensity**: 0.0 (no effect) - 1.0 (full effect). | ||
|
|
||
| #### Color Filter | ||
|
|
||
| - **Color Filter**: `None`, `Multiply`, `Additive`, `Subtractive`, `Replace`, `Multiply Luminance`, `Multiply Additive`, `Hsv Modifier`, `Contrast` | ||
| - **Color Intensity**: 0.0 (no effect) - 1.0 (full effect). | ||
| - **Color Glow**: Set the color to glow. | ||
|
|
||
| #### Sampling Filter | ||
|
|
||
| - **Sampling Filter**: `None`, `Blur Fast`, `Blur Medium`, `Blur Detail`, `Pixelation`, `Rgb Shift`, `Edge Luminescence`, `Edge Alpha` | ||
| - **Sampling Intensity**: 0.0 (no effect) - 1.0 (full effect). | ||
| - **Sampling Scale**: The referencing scale during sampling. | ||
| - Larger values are suitable for high-resolution textures. | ||
| - Set the reference resolution for the entire project in [Project Settings](#project-settings). | ||
|
|
||
| #### Transition Filter | ||
|
|
||
| - **Transition Filter**: `None`, `Fade`, `Cutoff`, `Dissolve`, `Shiny`, `Mask`, `Melt`, `Burn` | ||
| - **Transition Rate**: 0.0 (no effect) - 1.0 (full effect). | ||
| - **Transition Tex**: The texture used for the transition filter.- **Transition Width**: The width where the transition color is applied. | ||
| - **Transition Softness**: The softness of the boundary for the transition color. | ||
| - **Transition Color Filter/Transition Color**: Specifies the transition color. | ||
| - **Transition Color Filter**: Specifies the transition color. | ||
| - **Transition Color**: The color of the transition. | ||
| - **Transition Color Glow**: Set the transition color to glow. | ||
|
|
||
| #### Target Mode | ||
|
|
||
| - **Target Mode**: `None`, `Hue`, `Luminance` | ||
| - Restricts the effect application area based on hue or luminance. | ||
| - **Target Range**: The range of target hue or luminance. | ||
| - **Target Softness**: The softness of the target boundary. | ||
| - **Blend Type**: `Alpha Blend`, `Multiply`, `Additive`, `Soft Additive`, `Multiply Additive`, `Custom (SrcBlend, DstBlend)` | ||
|
|
||
| #### Blend Type | ||
|
|
||
| - **Blend Type**: `Alpha Blend`, `Multiply`, `Additive`, `Soft Additive`, `Multiply Additive`, `Custom` | ||
| - `Custom` blend type can be set using the `SrcBlend` and `DstBlend` properties. | ||
|
|
||
| #### Shadow Mode | ||
|
|
||
| - **Shadow Mode**: `None`, `Shadow`, `Shadow3`, `Outline`, `Outline8`, `Mirror` | ||
| - **Shadow Distance**: Distance of the shadow or outline. | ||
| - **Shadow Iteration**: Number of times the shadow or outline is applied. | ||
| - **Shadow Color Filter**: Specifies the shadow color. | ||
| - **Shadow Color**: The color of the shadow. | ||
| - **Shadow Color Glow**: Set the shadow color to glow. | ||
| - **Shadow Fade**: Alpha value of the shadow or outline. | ||
| - **Shadow Effect On Origin**: Applies effects to meshes other than shadows. | ||
| - **Shadow Blur Intensity**: Intensity of the shadow or outline blur. | ||
| - **Mirror Reflection**: Distance of the mirrored image. | ||
| - **Mirror Offset**: Offset for the mirrored image. | ||
| - **Mirror Scale**: Scale of the mirrored image. | ||
|
|
||
| #### Gradation Mode | ||
|
|
||
| - **Gradation Mode**: `None`, `Horizontal Gradient`, `Horizontal`, `Vertical Gradient`, `Vertical`, `Radial Fast`, `Radial Detail`, `Diagonal To Right Bottom`, `Diagonal To Right Top`, `Diagonal To Left Bottom` | ||
| - **Gradation Gradient**: The gradient of the gradation. | ||
| - **Gradation Color 1**: The first color of the gradation. | ||
| - **Gradation Color 2**: The second color of the gradation. | ||
| - **Gradation Offset**: The offset of the gradation range. | ||
| - **Gradation Scale**: The scale of the gradation range. | ||
|
|
||
| <br><br> | ||
|
|
||
| ### Component: UIEffectTweener | ||
|
|
||
|  | ||
|  | ||
|
|
||
| The `UIEffectTweener` component animates the effect, enabling easy control over effect animations without the need for an `AnimationClip`. | ||
|
|
||
| - **Culling Mask**: `Tone`, `Color`, `Sampling`, `Transition` | ||
| - **Direction**: `Forward (0.0 -> 1.0)`, `Backward (1.0 -> 0.0)` | ||
| - **Curve**: The curve of the animation. | ||
| - **Delay**: The delay time before starting the animation. | ||
| - **Duration**: The duration of the animation. | ||
| - **Interval**: The interval time between the animation. | ||
| - **Curve**: The curve of the animation. | ||
| - **Restart On Enable**: Play the animation automatically when the component is enabled. | ||
| - **Play On Enable**: `None`, `Forward`, `Reverse`, `Keep Direction` | ||
| - Play the animation automatically when the component is enabled. | ||
| - **Wrap Mode**: `Once`, `Loop`, `PingPongOnce`, `PingPongLoop` | ||
| - **Update Mode**: `Normal`, `UnscaledTime`, `Manual` | ||
|
|
||
| You can preview the animation using the seek bar and play button. | ||
|
|
||
| <br><br> | ||
|
|
||
| ### Component: UIEffectReplica | ||
|
|
||
|  | ||
|  | ||
|
|
||
| The `UIEffectReplica` component applies visual effects to UI elements by replicating the settings of another `UIEffect` component. This allows the same effect to be applied across multiple UI elements simultaneously. | ||
|
|
||
| - **Target**: The target `UIEffect` component to replicate. | ||
| - **Use Target Transform**: Use the target's transform for some effects. | ||
| - **Use Target Transform**: Use the target's transform for some effects. | ||
| - **Sampling Scale**: Override the sampling scale. | ||
|  | ||
|
|
||
| <br><br> | ||
|
|
||
| ### Usage with TextMeshPro | ||
|
|
||
|  | ||
| To use UIEffect with TextMeshPro, you need to import additional resources. | ||
| When a shader included in the samples is requested, an import dialog will automatically appear. | ||
| Click the `Import` button. | ||
|
|
||
|  | ||
|
|
||
| UIEffect supports TextMeshProUGUI elements. To use UIEffect with TextMeshPro, follow these steps: | ||
| Alternatively, you can manually import the resources by following these steps: | ||
|
|
||
| 1. First, you must import [TMP Essential Resources](https://docs.unity3d.com/Packages/[email protected]/manual/index.html#installation) before using. | ||
|  | ||
|
|
@@ -302,12 +351,15 @@ UIEffectProjectSettings.shaderVariantCollection.WarmUp(); | |
|
|
||
| ### Project Settings | ||
|
|
||
|  | ||
|  | ||
|
|
||
| You can adjust the project-wide settings for UIEffect. (`Edit > Project Settings > UI > UIEffect`) | ||
|
|
||
| - **Transform Sensitivity**: `Low`, `Medium`, `High` | ||
| - Set the sensitivity of the transformation when `Use Target Transform` is enabled in `UIEffectReplica` component. | ||
| - **Prefer Sampling Size**: `None`, `x512`, `x1024`, `x2048` | ||
| - Set the preferred sampling size for the sampling filter. | ||
| - The sampling scale is calculated based on this size, reducing the difference in effects due to differences in texture size. | ||
| - **Runtime Presets**: A list of presets that can be loaded at runtime. Load them using `UIEffect.LoadPreset(presetName)` method. | ||
| - **Optional Shaders (UIEffect)**: A list of shaders that will be prioritized when a ui-effect shader is | ||
| requested. | ||
|
|
||