{"id":13598207,"url":"https://github.com/mob-sakai/UIEffect","last_synced_at":"2025-04-10T06:31:31.487Z","repository":{"id":39829618,"uuid":"83315270","full_name":"mob-sakai/UIEffect","owner":"mob-sakai","description":"UIEffect is an open-source package that allows you to intuitively apply rich 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!","archived":false,"fork":false,"pushed_at":"2025-04-04T05:30:13.000Z","size":40961,"stargazers_count":6207,"open_issues_count":6,"forks_count":824,"subscribers_count":208,"default_branch":"main","last_synced_at":"2025-04-04T09:03:52.249Z","etag":null,"topics":["blur","burn","component","contrast","edge-detection","effect","grayscale","hsv-color","melt","pixelation","posterize","retro","rgb-shift","sepia","shader","tweener","ugui","ui","unity","unity3d"],"latest_commit_sha":null,"homepage":"https://mob-sakai.github.io/UIEffect/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mob-sakai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"mob-sakai","patreon":"mob_sakai","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-02-27T13:49:29.000Z","updated_at":"2025-04-03T07:47:08.000Z","dependencies_parsed_at":"2024-01-17T05:13:59.288Z","dependency_job_id":"f428286b-7515-487f-995e-a14bb3adbc7c","html_url":"https://github.com/mob-sakai/UIEffect","commit_stats":{"total_commits":29,"total_committers":3,"mean_commits":9.666666666666666,"dds":"0.13793103448275867","last_synced_commit":"476a0ba23d851bfc2499fe169d2ea8a7b1c29e0e"},"previous_names":[],"tags_count":79,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mob-sakai%2FUIEffect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mob-sakai%2FUIEffect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mob-sakai%2FUIEffect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mob-sakai%2FUIEffect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mob-sakai","download_url":"https://codeload.github.com/mob-sakai/UIEffect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248168234,"owners_count":21058793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blur","burn","component","contrast","edge-detection","effect","grayscale","hsv-color","melt","pixelation","posterize","retro","rgb-shift","sepia","shader","tweener","ugui","ui","unity","unity3d"],"created_at":"2024-08-01T17:00:50.183Z","updated_at":"2025-04-10T06:31:26.453Z","avatar_url":"https://github.com/mob-sakai.png","language":"C#","funding_links":["https://github.com/sponsors/mob-sakai","https://patreon.com/mob_sakai","https://www.patreon.com/join/2343451?"],"categories":["Open Source Repositories","GamePlay","C#","Shader Collection","Canvas and Graphical User Interfaces","C# #","Open Source Packages","三 开源库"],"sub_categories":["UI","Skill"],"readme":"UIEffect\n===\n\nUIEffect provides visual effect components for Unity UI.\n\n[![](https://img.shields.io/npm/v/com.coffee.ui-effect?label=openupm\u0026registry_uri=https://package.openupm.com)](https://openupm.com/packages/com.coffee.ui-effect/)\n[![](https://img.shields.io/github/v/release/mob-sakai/UIEffect?include_prereleases)](https://github.com/mob-sakai/UIEffect/releases)\n[![](https://img.shields.io/github/release-date/mob-sakai/UIEffect.svg)](https://github.com/mob-sakai/UIEffect/releases)  \n![](https://img.shields.io/badge/unity-2017.1%20or%20later-green.svg)\n[![](https://img.shields.io/github/license/mob-sakai/UIEffect.svg)](https://github.com/mob-sakai/UIEffect/blob/master/LICENSE.txt)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-orange.svg)](http://makeapullrequest.com)\n[![](https://img.shields.io/github/watchers/mob-sakai/UIEffect.svg?style=social\u0026label=Watch)](https://github.com/mob-sakai/UIEffect/subscription)\n[![](https://img.shields.io/twitter/follow/mob_sakai.svg?label=Follow\u0026style=social)](https://twitter.com/intent/follow?screen_name=mob_sakai)\n\n\u003c\u003c [Description](#Description) | [WebGL Demo](#demo) | [Installation](#installation) | [Usage](#usage) | [Example of using](#example-of-using) | [Change log](https://github.com/mob-sakai/UIEffect/blob/upm/CHANGELOG.md) | [Support](#support) \u003e\u003e\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## Description\n\nLet's decorate your UI with effects! \nYou can control parameters as you like from the script as well as inspector. \nAnimationClip is supported as a matter of course!\n\n![thumbnail](https://user-images.githubusercontent.com/12690315/41398364-155cf5a6-6ff2-11e8-8124-9d16ef6ca267.gif)  \n![image](https://user-images.githubusercontent.com/12690315/38594668-636dd3ac-3d82-11e8-9951-820964a6a95f.gif)\n\n\u003cbr\u003e\u003cbr\u003e\n#### Available effects\n\n| Component | Features | Screenshot |\n| -- | -- | -- |\n| **UIEffect** | Combine some visual effects.\u003cbr\u003e\u003cbr\u003e**Effect Mode:** Grayscale, Sepia, Nega, Pixelation\u003cbr\u003e**Color Mode:** Multiply, Fill, Additive, Subtract\u003cbr\u003e**Blur Mode:** Fast, Medium, Detail\u003cbr\u003e**Advanced Blur:** Enable more beautiful blurring. | ![][eff1] |\n| **UIShiny** | Apply shining effect to a graphic.\u003cbr\u003eThe effect does not require Mask component or normal map.\u003cbr\u003e\u003cbr\u003e**Parameters:** Effect factor, Width, Rotation, Softness, Brightness, Gloss | ![][eff2] |\n| **UIDissolve** | Apply dissolve effect to a graphic.\u003cbr\u003e\u003cbr\u003e**Color Mode for edge:** Multiply, Fill, Additive, Subtract\u003cbr\u003e**Parameters:** Effect factor, Width, Rotation, Softness, Edge color\u003cbr\u003e**Options:** Effect area, Keep effect aspect ratio | ![][eff3] |\n| **UIHsvModifier** | Modify HSV for graphic.\u003cbr\u003e\u003cbr\u003e**Target:** Color, Range\u003cbr\u003e**Adjustment:** Hue, Saturation, Value | ![][eff4] |\n| **UITransition Effect** | Apply transition effect with a single channel texture.\u003cbr\u003e\u003cbr\u003e**Effect Mode:** Cutoff, Fade, Dissolve\u003cbr\u003e**Options:** Effect area, Keep effect aspect ratio, transition texture\u003cbr\u003e**Pass Ray On Hidden:** Disable the graphic's raycastTarget on hidden. | ![][eff5] |\n\n[eff1]:https://user-images.githubusercontent.com/12690315/46639603-258df180-cba2-11e8-8f50-9e93bdc4c96e.png\n[eff2]:https://user-images.githubusercontent.com/12690315/46639689-b1078280-cba2-11e8-8716-cbc634af7293.gif\n[eff3]:https://user-images.githubusercontent.com/12690315/46639690-b1078280-cba2-11e8-8aa9-1d2650fe9a62.gif\n[eff4]:https://user-images.githubusercontent.com/12690315/43200006-d6e2bf54-904e-11e8-9f22-0c0f9ce5912f.gif\n[eff5]:https://user-images.githubusercontent.com/12690315/46639688-b1078280-cba2-11e8-8bbb-16b8498bca5f.gif\n\n\u003cbr\u003e\u003cbr\u003e\n##### The following effects can be used with the above components.\n\n| Component | Features | Screenshot |\n| -- | -- | -- |\n| **UIShadow** | Add shadow/outline to a graphic.\u003cbr\u003eThe performance is better than the default Shadow/Outline component.\u003cbr\u003e\u003cbr\u003e**ShadowStyle:** Shadow, Shadow3, Outline, Outline8 | ![][meff1] |\n| **UIGradient** | Change vertex color as gradient with angle and offset.\u003cbr\u003e\u003cbr\u003e**Direction:** Horizontal, Vertical, Angle, Diagonal\u003cbr\u003e**Options:** Offset, Color space | ![][meff2] |\n| **UIFlip** | Flip a graphic.\u003cbr\u003e\u003cbr\u003e**Direction:** Horizontal, Vertical, Both | ![][meff3] |\n\n[meff1]:https://user-images.githubusercontent.com/12690315/46639604-258df180-cba2-11e8-98a9-aa31f04c695d.png\n[meff2]:https://user-images.githubusercontent.com/12690315/40716995-ca87665e-6445-11e8-8233-ec2e21fefd6b.png\n[meff3]:https://user-images.githubusercontent.com/12690315/40716996-cab1fd7e-6445-11e8-9753-962d23991d86.png\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## Demo\n\n[WebGL Demo](http://mob-sakai.github.io/UIEffect)\n\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## Installation\n\n#### Requirement\n\n* Unity 2017.1 or later\n* No other SDK are required\n\n#### Using OpenUPM (for Unity 2018.3 or later)\n\nThis package is available on [OpenUPM](https://openupm.com). \nYou can install it via [openupm-cli](https://github.com/openupm/openupm-cli).\n```\nopenupm add com.coffee.ui-effect\n```\n\n#### Using Git (for Unity 2018.3 or later)\n\nFind the manifest.json file in the Packages folder of your project and edit it to look like this:\n```js\n{\n \"dependencies\": {\n \"com.coffee.ui-effect\": \"https://github.com/mob-sakai/UIEffect.git\",\n ...\n },\n}\n```\n\nTo update the package, change suffix `#{version}` to the target version.\n\n* e.g. `\"com.coffee.ui-effect\": \"https://github.com/mob-sakai/UIEffect.git#4.0.0\",`\n\nOr, use [UpmGitExtension](https://github.com/mob-sakai/UpmGitExtension) to install and update the package.\n\n#### For Unity 2018.2 or earlier\n\n1. Download a source code zip file from [Releases](https://github.com/mob-sakai/UIEffect/releases) page\n2. Extract it\n3. Import it into the following directory in your Unity project\n   - `Packages` (It works as an embedded package. For Unity 2018.1 or later)\n   - `Assets` (Legacy way. For Unity 2017.1 or later)\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## How to play demo\n\n- For Unity 2019.1 or later\n  - Open `Package Manager` window and select `UI Effect` package in package list and click `Demo \u003e Import in project` button\n- For Unity 2018.4 or earlier\n  - Click `Assets/Samples/UIEffect/Import Demo` from menu\n\nThe assets will be imported into `Assets/Samples/UI Effect/{version}/Demo`.  \nOpen `\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## Usage\n\n1. Add any effect component to UI element (Image, RawImage, Text, etc...) from `Add Component` in inspector or `Component \u003e UI \u003e UIEffect \u003e ...` menu.  \n![](https://user-images.githubusercontent.com/12690315/78853708-811c9200-7a5a-11ea-9826-0606046525b6.png)\n2. Adjust the parameters of the effect as you like, in inspector.  \n![](https://user-images.githubusercontent.com/12690315/38594668-636dd3ac-3d82-11e8-9951-820964a6a95f.gif)\n3. You can add or modify effects from the script.  \n```cs\nvar uieffect = gameObject.AddComponent\u003cUIEffect\u003e();\nuieffect.effectMode = EffectMode.Grayscale;\nuieffect.effectFactor = 0.85f;\nuieffect.colorMode = ColorMode.Add;\nuieffect.effectColor = Color.white;\nuieffect.colorFactor = 0.1f;\nuieffect.blurMode = BlurMode.FastBlur;\nuieffect.blurFactor = 1;\n```\n![](https://user-images.githubusercontent.com/12690315/78853467-e4f28b00-7a59-11ea-82fa-3235aa95e993.png)\n\n4. Enjoy!\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## Example of using\n\nUIEffect can easily be used in a variety of cases in the game.\n\n| Case | Description | Screenshot |\n| -- | -- | -- |\n| Lock/unlock contents | Use UIEffect to apply grayscale.\u003cbr\u003eIndicate to user that the content is unavailable. | ![][ex1] |\n| Silhouette | Use UIEffect for filling color. | ![][ex2] |\n| Soft shadow/\u003cbr\u003eOuter glow | Use UIEffect and UIShadow to blur the shadow. | ![][ex3] |\n| Colored shadow | Use UIEffect and UIShadow to fill shadow with color. | ![][ex4] |\n| Blurred dynamic font | Use UIEffect to blur text.\u003cbr\u003eTo blur dynamic font cleanly, enable `Advanced Blur` option. | ![][ex5] |\n| Text with outline \u0026 shadow | Use two UIShadows to add outline and shadow.\u003cbr\u003eThere is less overdraw than default Outline/Shadow. | ![][ex6] |\n| Shining button | Use UIShiny for shining button.\u003cbr\u003eIndicate to user that you can press the button. | ![][ex7] |\n| Screen transition | Use UITransitionEffect to transition the screen with any transition texture. | ![][ex8] |\n\n[ex1]:https://user-images.githubusercontent.com/12690315/46563469-aba8fe80-c93c-11e8-850f-949f6f8da742.png\n[ex2]:https://user-images.githubusercontent.com/12690315/46563576-3db10700-c93d-11e8-960e-4336ff3ce481.png\n[ex3]:https://user-images.githubusercontent.com/12690315/46566001-452edb00-c952-11e8-9cc4-6098a9eb67f3.png\n[ex4]:https://user-images.githubusercontent.com/12690315/46566000-452edb00-c952-11e8-8d20-6ccc3fa92ae4.png\n[ex5]:https://user-images.githubusercontent.com/12690315/46566002-45c77180-c952-11e8-87cb-4d915e0614be.png\n[ex6]:https://user-images.githubusercontent.com/12690315/46566003-45c77180-c952-11e8-9b47-7bf563ffbaa7.png\n[ex7]:https://user-images.githubusercontent.com/12690315/46563539-fb87c580-c93c-11e8-8c08-0f21872c47d4.gif\n[ex8]:https://user-images.githubusercontent.com/12690315/46565182-dfd5ec80-c947-11e8-834f-a2ef67ad0d95.gif\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## License\n\n* MIT\n* © UTJ/UCL\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n## Support\n\nThis is an open-source project that I am developing in my free time. \nIf you like it, you can support me. \nBy supporting, you let me spend more time working on better tools that you can use for free. :)\n\n[![become_a_patron_on_patreon](https://user-images.githubusercontent.com/12690315/50731629-3b18b480-11ad-11e9-8fad-4b13f27969c1.png)](https://www.patreon.com/join/2343451?)  \n[![become_a_sponsor_on_github](https://user-images.githubusercontent.com/12690315/66942881-03686280-f085-11e9-9586-fc0b6011029f.png)](https://github.com/users/mob-sakai/sponsorship)\n\n\n\n## Author\n\n[mob-sakai](https://github.com/mob-sakai)\n[![](https://img.shields.io/twitter/follow/mob_sakai.svg?label=Follow\u0026style=social)](https://twitter.com/intent/follow?screen_name=mob_sakai) \n\n\n\n## See Also\n\n* GitHub page : https://github.com/mob-sakai/UIEffect\n* Releases : https://github.com/mob-sakai/UIEffect/releases\n* Issue tracker : https://github.com/mob-sakai/UIEffect/issues\n* Change log : https://github.com/mob-sakai/UIEffect/blob/upm/CHANGELOG.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmob-sakai%2FUIEffect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmob-sakai%2FUIEffect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmob-sakai%2FUIEffect/lists"}