/UnmaskForUGUI

Reverse mask for uGUI element in Unity.

Primary LanguageC#MIT LicenseMIT

Unmask For UGUI

Reverse mask for uGUI element in Unity.

PRs Welcome

<< Description | WebGL Demo | Installation | Usage | Contributing >>





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





Installation

Requirement

  • Unity 5.5 or later
    • Support 2017.x, 2018.x, 2019.x and 2020.x.

Using OpenUPM

This package is available on OpenUPM.
You can install it via openupm-cli.

openupm add com.coffee.unmask

Using Git

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",
    ...
  },
}

To update the package, change suffix #{version} to the target version.

  • e.g. "com.coffee.unmask": "https://github.com/mob-sakai/UnmaskForUGUI.git#2.0.0",

Or, use UpmGitExtension to install and update the package.

For Unity 2018.2 or earlier

  1. Download a source code zip file from 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)





How to play demo

  • For Unity 2019.1 or later
    • Open Package Manager window and select UI Unmask package in package list and click Demo > Import in project button
  • For Unity 2018.4 or earlier
    • Click Assets/Samples/UI Unmask/Import Demo from menu

The assets will be imported into Assets/Samples/UI Unmask/{version}/Demo.
Open UIUnmask_Demo scene and play it.





Usage

Unmask

UnmaskRaycastFilter

  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!





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.





Contributing

Issues

Issues are very valuable to this project.

  • Ideas are a valuable source of contributions others can make
  • Problems show where this project is lacking
  • With a question you show where contributors can improve the user experience

Pull Requests

Pull requests are, a great way to get your ideas into this repository.
See CONTRIBUTING.md and develop branch..

Support

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. :)






License

  • MIT
  • © UTJ/UCL

Author

mob-sakai

See Also