UI Soft Mask is a smooth masking component for Unity UI (uGUI) elements.
:warning: NOTE: Do not use the obsolete tags and branches to reference the package. They will be removed in near future. :warning:
UI Soft Mask is a smooth masking component for Unity UI (uGUI) elements.
<< Description | WebGL Demo | Installation | Usage | For Your Custom Shader | Contributing >>
By using SoftMask instead of the default Mask component, you can beautifully represent the rounded edges of UI elements.
Component | Description | Screenshot |
---|---|---|
SoftMask | Use instead of Mask for smooth masking. Show Mask Graphic: Show the graphic that is associated with the Mask render area. Desampling Rate: The desampling rate for soft mask buffer. The larger the value, the better the performance but the lower the quality. Softness: The value used by the soft mask to select the area of influence defined over the soft mask's graphic. Ignore Parent: Should the soft mask ignore parent soft masks? Part Of Parent: Is the soft mask a part of parent soft mask? |
|
SoftMaskable | Add this component to Graphic under SoftMask for smooth masking. Use Stencil: Use stencil buffer to mask. If disabled, the stencil buffer is ignored. RaycastFilter: Use soft-masked raycast target. This option is expensive. Mask Interaction: The interaction for each mask layers. |
This package is available on OpenUPM. You can install it via openupm-cli.
openupm add com.coffee.softmask-for-ugui
Find the manifest.json file in the Packages folder of your project and edit it to look like this:
{
"dependencies": {
"com.coffee.softmask-for-ugui": "https://github.com/mob-sakai/SoftMaskForUGUI.git",
...
},
}
To update the package, change suffix #{version}
to the target version.
"com.coffee.softmask-for-ugui": "https://github.com/mob-sakai/SoftMaskForUGUI.git#1.0.0",
Or, use UpmGitExtension to install and update the package.
Packages
(It works as an embedded package. For Unity 2018.1 or later)Assets
(Legacy way. For Unity 2017.1 or later)Package Manager
window and select UI Soft Mask
package in package list and click Demo > Import in project
buttonAssets/Samples/UISoftMask/Import Demo
from menuThe assets will be imported into Assets/Samples/UI Soft Mask/{version}/Demo
.
Open UISoftMask_Demo
scene and play it.
To use SoftMask with TextMeshPro, import a sample asset.
Package Manager
window and select UI Soft Mask
package in package list and click TextMeshPro Support > Import in project
buttonAssets/Samples/UISoftMask/Import TextMeshPro Support
from menuThe assets will be imported into Assets/Samples/UI Soft Mask/{version}/TextMeshPro Support
.
NOTE: You must import TMP Essential Resources
before using. They include shaders, fonts, etc.
NOTE: If the shader error is not resolved, reimport the shader. Or, import the TextMeshPro Support
again.
Only a few steps are needed to support soft mask in your custom shaders!
(SoftMaskable)
suffix to the file name.Your_Custom_Shader.shader
-> Your_Custom_Shader (SoftMaskable).shader
Hidden/
prefix (SoftMaskable)
suffixShader "UI/Your_Custom_Shader"
-> Shader "Hidden/UI/Your_Custom_Shader (SoftMaskable)"
#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.#include "Packages/com.coffee.softmask-for-ugui/Shaders/SoftMask.cginc"
#pragma shader_feature __ SOFTMASK_EDITOR
IN.vertex
: the clip positionIN.worldPosition
: the world positioncolor.a *= SoftMask(IN.vertex, IN.worldPosition);
As an example of implementation, please see UI-Default-SoftMask.shader.
Issues are very valuable to this project.
Pull requests are, a great way to get your ideas into this repository.
See CONTRIBUTING.md.
This is an open source project that I am developing in my spare time.
If you like it, please support me.
With your support, I can spend more time on development. :)