Skip to content

Commit

Permalink
docs: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
mob-sakai committed Dec 28, 2024
1 parent 2626f36 commit dd4e0a5
Show file tree
Hide file tree
Showing 6 changed files with 120 additions and 17 deletions.
1 change: 1 addition & 0 deletions Packages/manifest.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"dependencies": {
"com.coffee.development": "https://github.com/mob-sakai/Coffee.Internal.git?path=Packages/Development",
"com.coffee.minimal-resource": "https://github.com/mob-sakai/Coffee.Internal.git?path=Packages/MinimalResource",
"com.coffee.nano-monitor": "https://github.com/mob-sakai/Coffee.Internal.git?path=Packages/NanoMonitor",
"com.unity.ide.rider": "3.0.34",
"com.unity.test-framework": "1.1.33",
Expand Down
7 changes: 7 additions & 0 deletions Packages/packages-lock.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@
"dependencies": {},
"hash": "5d0bd14be288153555f975240608e7ee1576b091"
},
"com.coffee.minimal-resource": {
"version": "https://github.com/mob-sakai/Coffee.Internal.git?path=Packages/MinimalResource",
"depth": 0,
"source": "git",
"dependencies": {},
"hash": "52987fb6e66e7fc48498d8d164c3c8808de4de6b"
},
"com.coffee.nano-monitor": {
"version": "https://github.com/mob-sakai/Coffee.Internal.git?path=Packages/NanoMonitor",
"depth": 0,
Expand Down
85 changes: 68 additions & 17 deletions Packages/src/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@

## 📝 Description <!-- omit in toc -->

**_"Decorate your uGUI, simply and powerfully."_**
UIEffect is an open-source package that allows you to intuitively apply rich UI effects directly from the Inspector or via code.
**_"Decorate your UI, simply and powerfully."_**
UIEffect is an open-source package that allows you to intuitively apply rich Unity UI effects directly from the Inspector or via code.
Combine various filters, such as grayscale, blur, and dissolve, to decorate your UI with a unique visual style!

![](https://github.com/user-attachments/assets/bce4ddb2-766f-4bed-bad2-fda91bb8133c)
Expand Down Expand Up @@ -56,7 +56,7 @@ Combine various filters, such as grayscale, blur, and dissolve, to decorate your

## 📌 Key Features

![](https://github.com/user-attachments/assets/eab596e5-6cae-4441-b02b-7fc1fb45743d)
![](https://github.com/user-attachments/assets/e5112713-166d-451f-8090-501e6ea156ca)

- **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.
Expand All @@ -73,7 +73,7 @@ Combine various filters, such as grayscale, blur, and dissolve, to decorate your

## 🎮 Demo

![](https://github.com/user-attachments/assets/17e5ee27-f7d5-43aa-942f-182e2b4c838c)
![](https://github.com/user-attachments/assets/e5894327-0f8c-4b3b-8c87-b22f89b6e8e4)
![](https://github.com/user-attachments/assets/02ab1686-03d4-4500-bd89-004b2c401441)

[WebGL Demo](https://mob-sakai.github.io/UIEffect/)
Expand All @@ -86,7 +86,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:
```
Expand Down Expand Up @@ -183,71 +183,119 @@ If upgrading from UIEffect v4 to v5, note the following breaking changes:

### Component: UIEffect

![](https://github.com/user-attachments/assets/090a71ea-81b4-4264-852c-af03f9346dd3)
![](https://github.com/user-attachments/assets/f1d0d8a3-a0cf-4595-bda2-78165527a99b)

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

![](https://github.com/user-attachments/assets/7b02f029-c9d4-4e00-aad7-240f893af775)
![](https://github.com/user-attachments/assets/6a56cec8-225b-4d2f-bd88-b9ea3661d25a)

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

![](https://github.com/user-attachments/assets/a1fad455-de60-4a18-b587-1ae138af1d37)
![](https://github.com/user-attachments/assets/27d1840f-77c2-45cd-bde8-716626479c46)

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.
![](https://github.com/user-attachments/assets/127e30fb-15c7-4002-ab65-e8f29e640330)

<br><br>

### Usage with TextMeshPro

![](https://github.com/user-attachments/assets/bd12baa3-52f7-41e9-bf05-a052d0aabc37)
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.

![](https://github.com/user-attachments/assets/78b262fc-1581-49f2-8c93-06d591b525c6)

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.
![](https://github.com/user-attachments/assets/70653ccf-0b5e-4352-ac62-76bdd49c5f92)
Expand Down Expand Up @@ -302,12 +350,15 @@ UIEffectProjectSettings.shaderVariantCollection.WarmUp();

### Project Settings

![](https://github.com/user-attachments/assets/54dd42cf-099d-4fb1-b699-cad29bf211b6)
![](https://github.com/user-attachments/assets/d9fbc959-1431-472a-b2f5-01654604668f)

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.
Expand Down
Binary file added Packages/src/Runtime/Coffee.UIEffect.R.dll
Binary file not shown.
33 changes: 33 additions & 0 deletions Packages/src/Runtime/Coffee.UIEffect.R.dll.meta

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions ProjectSettings/MinimalResourceSettings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"MonoBehaviour": {
"m_Enabled": true,
"m_EditorHideFlags": 0,
"m_Name": "",
"m_EditorClassIdentifier": "",
"m_OutputDllPaths": [
"Packages/com.coffee.ui-effect/Runtime/Coffee.UIEffect.R.dll"
]
}
}

0 comments on commit dd4e0a5

Please sign in to comment.