/UnmaskForUGUI

Reverse mask for uGUI element in Unity.

Primary LanguageC#MIT LicenseMIT

UnmaskForUGUI

Reverse mask for uGUI element in Unity.

PRs Welcome

<< Description | WebGL Demo | Download | Install | Usage >>

What's new? See changelog

Do you want to receive notifications for new releases? Watch this repo





Description

Unmask provides the following features:

  1. Reverse mask
  2. Ray through the unmasked rectangle
  3. Following another object
  4. Support nesting
Component Features Screenshot
Unmask Reverse masking for parent Mask component.

Fit Target / Fit On Late Update: Fit graphic's transform to target transform on LateUpdate.
Only For Children: Unmask affects only for children.
Show Unmask Graphic: Show the graphic that is associated with the unmask render area.
UnmaskRaycastFilter The ray Passes through the unmasked rectangle.
You can click on the unmasked button on the back side.





Demo

WebGL Demo

demo





Install

Using UnityPackageManager (for Unity 2018.3+)

Find the manifest.json file in the Packages folder of your project and edit it to look like this:

{
  "dependencies": {
    "com.coffee.unmask": "https://github.com/mob-sakai/UnmaskForUGUI.git#1.1.3",
    ...
  },
}

To update the package, change #{version} to the target version.
Or, use UpmGitExtension.

Using .unitypackage file (for Unity 5.5+)

Download *.unitypackage from Releases and import the package into your Unity project.
Select Assets > Import Package > Custom Package from the menu.





Usage

  1. Add Unmask component to the UI element (Image, RawImage, Text, etc...) under Mask, from Add Component in inspector or Component > UI > Unmask > Unmask menu.
  2. If you want to unmask the area of the button, follow the steps below:
    • Set the button to Fit Target in Unmask component.
    • If the button moves with animation etc., enable Fit On LateUpdate in Unmask component.
    • Add a UnmaskRaycastFilter component to UI element blocking ray.
    • Set the Unmask to Unmask in UnmaskRaycastFilter component.
    • Disable RaycastTarget of the UI elements, as necessary.
  3. Enjoy!
Requirement
  • Unity 5.5+ (included Unity 2018.x)
  • No other SDK are required





Example of using

Case Description Screenshot
Unmasked text Black screen is cut out with unmasked text.
Hole Black screen is cut out with unmasked Image.
Tutorial button In tutorial, only specific button can be pressed.
Transition Transition effect with silhouette.





License

  • MIT
  • © UTJ/UCL

Author

mob-sakai

See Also