2019-01-12 12:48:59 +08:00
SoftMaskForUGUI
===
2020-05-01 17:38:37 +08:00
UI Soft Mask is a smooth masking component for Unity UI (uGUI) elements.
2019-01-12 12:48:59 +08:00
2020-05-01 17:38:37 +08:00
[](https://openupm.com/packages/com.coffee.softmask-for-ugui/)
[](https://github.com/mob-sakai/SoftMaskForUGUI/releases)
[](https://github.com/mob-sakai/SoftMaskForUGUI/releases)
2019-02-01 17:35:47 +08:00
[](https://github.com/mob-sakai/SoftMaskForUGUI/blob/upm/LICENSE.txt)
2019-01-12 12:48:59 +08:00
[](http://makeapullrequest.com)
2020-05-01 17:38:37 +08:00
[](https://github.com/mob-sakai/SoftMaskForUGUI/subscription)
2019-01-12 14:37:17 +08:00
[](https://twitter.com/intent/follow?screen_name=mob_sakai)
2019-01-12 12:48:59 +08:00
2020-05-01 17:38:37 +08:00
<< [Description ](#Description ) | [WebGL Demo ](#demo ) | [Installation ](#installation ) | [Usage ](#usage ) | [For Your Custom Shader ](#support-soft-masks-with-your-custom-shaders ) >>
2019-01-12 12:48:59 +08:00
< br > < br > < br > < br >
## Description
2020-05-03 19:38:06 +08:00
By using SoftMask instead of the default Mask component, you can beautifully represent the rounded edges of UI elements.
2019-01-12 12:48:59 +08:00
#### Features
* SoftMask is compatible with Mask.
* You can adjust the visible part.
* Text, Image, RawImage can be used as a masking.
* Support multiple-sprites and SpriteAtlas.
* Support up to 4 nested soft masks.
* Support scroll view.
* Support inversed soft mask.
* Support overlay, camera space and world space.
2020-05-01 17:38:37 +08:00
* (Option) Raycast is filtered only for the visible part.
2019-01-12 12:48:59 +08:00
* Contain soft maskable UI shader.
* Support soft masks in your custom shaders by adding just 3 lines. For details, please see [Development Note ](#support-soft-masks-in-your-custom-shaders ).
* Adjust soft mask buffer size to improve performance.
* Convert existing Mask to SoftMask from context menu.
* Render the soft mask buffer only when needed to improve performance.
* Add a SoftMaskable component to the child UI elements of SoftMask from the inspector.
* Preview soft mask buffer in inspector.
2019-05-01 20:39:04 +08:00
* Make multiple holes on one background by 'Parts of parent' option.
2019-03-11 15:38:56 +08:00
2020-05-01 17:38:37 +08:00
2019-01-12 12:48:59 +08:00
#### Components
|Component|Description|Screenshot|
|-|-|-|
2019-03-11 15:38:56 +08:00
|SoftMask|Use instead of Mask for smooth masking.< br > < br > **Show Mask Graphic:** Show the graphic that is associated with the Mask render area.< br > **Desampling Rate:** The desampling rate for soft mask buffer. The larger the value, the better the performance but the lower the quality.< br > **Softness:** The value used by the soft mask to select the area of influence defined over the soft mask's graphic.< br > **Ignore Parent:** Should the soft mask ignore parent soft masks?< br > **Part Of Parent:** Is the soft mask a part of parent soft mask?|< img src = "https://user-images.githubusercontent.com/12690315/50319746-377a0200-050c-11e9-96ae-a3a0ec81765f.png" width = "600px" > |
2019-01-12 12:48:59 +08:00
|SoftMaskable|Add this component to Graphic under SoftMask for smooth masking.< br > < br > **Inverse:** The graphic will be visible only in areas where no mask is present.|< img src = "https://user-images.githubusercontent.com/12690315/50319747-39dc5c00-050c-11e9-85fa-dd6ea9065daf.png" width = "600px" > |
< br > < br > < br > < br >
## Demo
[WebGL Demo ](http://mob-sakai.github.io/SoftMaskForUGUI )
< br > < br > < br > < br >
2020-05-03 19:38:06 +08:00
## Installation
2019-01-12 14:37:17 +08:00
2020-05-01 17:38:37 +08:00
#### 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 ](https://openupm.com ).
You can install it via [openupm-cli ](https://github.com/openupm/openupm-cli ).
```
openupm add com.coffee.softmask-for-ugui
```
#### Using Git (for Unity 2018.3 or later)
2019-01-12 14:37:17 +08:00
Find the manifest.json file in the Packages folder of your project and edit it to look like this:
```js
{
"dependencies": {
2020-05-01 17:38:37 +08:00
"com.coffee.softmask-for-ugui": "https://github.com/mob-sakai/SoftMaskForUGUI.git",
2019-01-12 14:37:17 +08:00
...
},
}
```
2020-05-01 17:38:37 +08:00
To update the package, change suffix `#{version}` to the target version.
* e.g. `"com.coffee.softmask-for-ugui": "https://github.com/mob-sakai/SoftMaskForUGUI.git#1.0.0",`
Or, use [UpmGitExtension ](https://github.com/mob-sakai/UpmGitExtension ) to install and update the package.
2019-01-12 12:48:59 +08:00
2020-05-01 17:38:37 +08:00
#### For Unity 2018.2 or earlier
1. Download a source code zip file from [Releases ](https://github.com/mob-sakai/SoftMaskForUGUI/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)
2019-01-12 14:37:17 +08:00
2019-01-13 09:55:34 +08:00
< br > < br > < br > < br >
## How to play demo
2020-05-01 17:38:37 +08:00
#### For Unity 2019.1 or later
1. Open `Package Manager` window and select `UI Soft Mask` package in package list
2. Click `Import in project` button
2020-05-03 19:38:06 +08:00
3. The demo will be imported into `Assets/Samples/UI Soft Mask/{version}/Demo` ｡
Open `UISoftMask_Demo` scene and play it
2019-01-13 09:55:34 +08:00
2020-05-01 17:38:37 +08:00
#### For Unity 2018.4 or earlier
1. Select `Assets/Samples/UI Soft Mask Demo` from menu
2020-05-03 19:38:06 +08:00
2. The demo will be imported into `Assets/Samples/UI Soft Mask/{version}/Demo` .
Open `UISoftMask_Demo` scene and play it
2019-01-13 09:55:34 +08:00
2019-01-12 14:37:17 +08:00
< br > < br > < br > < br >
## Usage
2020-05-01 17:38:37 +08:00
1. Add a SoftMask component instead of Mask component.
Or, convert an existing Mask component to SoftMask component from the context menu.
2019-01-12 12:48:59 +08:00
2020-05-01 17:38:37 +08:00
2. Add a SoftMaskable components to the child UI elements of the SoftMask component.
2019-01-12 12:48:59 +08:00
2020-05-01 17:38:37 +08:00
Or, add a SoftMaskable components from the inspector of the SoftMask component.
2019-01-12 12:48:59 +08:00
2020-05-01 17:38:37 +08:00
3. Adjust softness setting of SoftMask.
2019-01-12 12:48:59 +08:00
2019-01-12 14:37:17 +08:00
4. Enjoy!
2019-01-12 12:48:59 +08:00
< br > < br > < br > < br >
2020-05-01 17:38:37 +08:00
## Support soft masks with your custom shaders
2019-01-12 12:48:59 +08:00
2020-05-01 17:38:37 +08:00
< b > With just three additional lines,< / b > you can now support softmasks in your custom shaders!
2019-01-12 12:48:59 +08:00
2020-05-01 17:38:37 +08:00
1. Add `#pragma` and `#include` directives, where `SOFTMASK_EDITOR` is an editor-only keyword and is not included in the build.
If you didn't use package manager to install, include `SoftMask.cginc` in the appropriate path instead.
2019-01-12 12:48:59 +08:00
```
2020-05-01 17:38:37 +08:00
#include "Packages/com.coffee.softmask-for-ugui/Shaders/SoftMask.cginc"
2019-01-12 12:48:59 +08:00
#pragma shader_feature __ SOFTMASK_EDITOR
```
2020-05-01 17:38:37 +08:00
2. Apply a soft mask in the fragment shader.
This operation determines the final alpha according to the soft mask buffer.
- `IN.vertex` : the clip position
- `IN.worldPosition` : the world position
2019-01-12 12:48:59 +08:00
```
2019-08-27 10:43:43 +08:00
color.a *= SoftMask(IN.vertex, IN.worldPosition);
2019-01-12 12:48:59 +08:00
```
2019-02-01 17:35:47 +08:00
As an example of implementation, please see [UI-Default-SoftMask.shader ](https://raw.githubusercontent.com/mob-sakai/SoftMaskForUGUI/upm/Shaders/Resources/UI-Default-SoftMask.shader ).
2019-01-12 12:48:59 +08:00
2020-05-01 17:38:37 +08:00
< br > < br > < br > < br >
## License
2019-01-12 12:48:59 +08:00
2020-05-01 17:38:37 +08:00
* MIT
* © UTJ/UCL
2019-01-12 12:48:59 +08:00
< br > < br > < br > < br >
2020-05-01 17:38:37 +08:00
## Support
2019-01-12 12:48:59 +08:00
2020-05-01 17:38:37 +08:00
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. :)
[](https://www.patreon.com/join/2343451?)
[](https://github.com/users/mob-sakai/sponsorship)
2019-01-12 12:48:59 +08:00
## Author
[mob-sakai ](https://github.com/mob-sakai )
2020-05-01 17:38:37 +08:00
[](https://twitter.com/intent/follow?screen_name=mob_sakai)
2019-01-12 12:48:59 +08:00
## See Also
* GitHub page : https://github.com/mob-sakai/SoftMaskForUGUI
* Releases : https://github.com/mob-sakai/SoftMaskForUGUI/releases
* Issue tracker : https://github.com/mob-sakai/SoftMaskForUGUI/issues
2019-02-01 17:35:47 +08:00
* Change log : https://github.com/mob-sakai/SoftMaskForUGUI/blob/upm/CHANGELOG.md
