GUI

Unmask For UGUI

UnmaskForUGUI

Reverse mask for uGUI element in Unity.

PRs Welcome

<< Description | WebGL Demo | Download | 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.

Auto Fit Target: Fit graphic’s transform to target transform on LateUpdate.
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





Usage

  1. Download *.unitypackage from Releases.
  2. Import the package into your Unity project. Select Import Package > Custom Package from the Assets menu.
  3. Add Unmask component to the UI element (Image, RawImage, Text, etc…) under Mask, from Add Component in inspector or Component > UI > Unmask > Unmask menu.
  4. 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.
  5. 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