OvertakingLegend/Assets/UIFrameWork/TooLCorrelation/UnmaskForUGUI

UnmaskForUGUI

Reverse mask for uGUI element in Unity.

<< 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

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

• GitHub page : https://github.com/mob-sakai/UnmaskForUGUI
• Releases : https://github.com/mob-sakai/UnmaskForUGUI/releases
• Issue tracker : https://github.com/mob-sakai/UnmaskForUGUI/issues
• Current project : https://github.com/mob-sakai/UnmaskForUGUI/projects/1
• Change log : https://github.com/mob-sakai/UnmaskForUGUI/blob/upm/CHANGELOG.md