Home

Awesome

Unmask For UGUI

Reverse mask for uGUI element in Unity.

PRs Welcome

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

<br><br><br><br>

Description

Unmask provides the following features:

  1. Reverse mask
  2. Ray through the unmasked rectangle
  3. Following another object
  4. Support nesting
ComponentFeaturesScreenshot
UnmaskReverse masking for parent Mask component.<br><br>Fit Target / Fit On Late Update: Fit graphic's transform to target transform on LateUpdate.<br>Only For Children: Unmask affects only for children.<br>Show Unmask Graphic: Show the graphic that is associated with the unmask render area.<img src="https://user-images.githubusercontent.com/12690315/51745704-0e3e2a00-20e7-11e9-8da8-5abb1c5193bc.png" width="600px">
UnmaskRaycastFilterThe ray Passes through the unmasked rectangle.<br>You can click on the unmasked button on the back side.<img src="https://user-images.githubusercontent.com/12690315/51745958-ebf8dc00-20e7-11e9-8cfc-8174e6ab2b7c.png" width="600px">

<br><br><br><br>

Demo

WebGL Demo

demo

<br><br><br><br>

Installation

Requirement

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.

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)

<br><br><br><br>

How to play demo

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

<br><br><br><br>

Usage

Create Object From Menu (GameObject > UI > Unmask > ***)

MenuScreenshot
Tutorial Button
Iris Shot

<br><br><br><br>

Example of using

CaseDescriptionScreenshot
Unmasked textBlack screen is cut out with unmasked text.
HoleBlack screen is cut out with unmasked Image.
Tutorial buttonIn tutorial, only specific button can be pressed.
Iris in/outTransition effect with iris in/out.

<br><br><br><br>

Contributing

Issues

Issues are very valuable to this project.

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


<br><br><br><br>

License

Author

mob-sakai

See Also