|
| 1 | +UnmaskForUGUI |
| 2 | +=== |
| 3 | + |
| 4 | +Reverse mask for uGUI element in Unity. |
| 5 | + |
| 6 | + |
| 7 | + |
| 8 | +[](https://github.com/mob-sakai/UnmaskForUGUI/releases) |
| 9 | +[](https://github.com/mob-sakai/UnmaskForUGUI/releases) |
| 10 | + |
| 11 | +[](https://github.com/mob-sakai/UnmaskForUGUI/blob/upm/LICENSE.txt) |
| 12 | +[](http://makeapullrequest.com) |
| 13 | + |
| 14 | +<< [Description](#Description) | [WebGL Demo](#demo) | [Download](https://github.com/mob-sakai/UnmaskForUGUI/releases) | [Install](#install) | [Usage](#usage) >> |
| 15 | + |
| 16 | +### What's new? [See changelog ](https://github.com/mob-sakai/UnmaskForUGUI/blob/upm/CHANGELOG.md) |
| 17 | +### Do you want to receive notifications for new releases? [Watch this repo ](https://github.com/mob-sakai/UnmaskForUGUI/subscription) |
| 18 | + |
| 19 | + |
| 20 | + |
| 21 | +<br><br><br><br> |
| 22 | +## Description |
| 23 | + |
| 24 | +Unmask provides the following features: |
| 25 | +1. Reverse mask |
| 26 | +2. Ray through the unmasked rectangle |
| 27 | +3. Following another object |
| 28 | +4. Support nesting |
| 29 | + |
| 30 | +| Component | Features | Screenshot | |
| 31 | +|-|-|-| |
| 32 | +|**Unmask**|Reverse 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">| |
| 33 | +|**UnmaskRaycastFilter**|The 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">| |
| 34 | + |
| 35 | + |
| 36 | + |
| 37 | +<br><br><br><br> |
| 38 | +## Demo |
| 39 | + |
| 40 | +[WebGL Demo](http://mob-sakai.github.io/UnmaskForUGUI) |
| 41 | + |
| 42 | + |
| 43 | + |
| 44 | + |
| 45 | + |
| 46 | +<br><br><br><br> |
| 47 | +## Install |
| 48 | + |
| 49 | +#### Using UnityPackageManager (for Unity 2018.3+) |
| 50 | + |
| 51 | +Find the manifest.json file in the Packages folder of your project and edit it to look like this: |
| 52 | +```js |
| 53 | +{ |
| 54 | + "dependencies": { |
| 55 | + "com.coffee.unmask": "https://github.com/mob-sakai/UnmaskForUGUI.git#1.1.1", |
| 56 | + ... |
| 57 | + }, |
| 58 | +} |
| 59 | +``` |
| 60 | +To update the package, change `#{version}` to the target version. |
| 61 | +Or, use [UpmGitExtension](https://github.com/mob-sakai/UpmGitExtension). |
| 62 | + |
| 63 | +#### Using .unitypackage file (for Unity 5.5+) |
| 64 | + |
| 65 | +Download `*.unitypackage` from [Releases](https://github.com/mob-sakai/UnmaskForUGUI/releases) and import the package into your Unity project. |
| 66 | +Select `Assets > Import Package > Custom Package` from the menu. |
| 67 | + |
| 68 | + |
| 69 | + |
| 70 | + |
| 71 | +<br><br><br><br> |
| 72 | +## Usage |
| 73 | + |
| 74 | +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. |
| 75 | +2. If you want to unmask the area of the button, follow the steps below: |
| 76 | + * Set the button to `Fit Target` in Unmask component. |
| 77 | + * If the button moves with animation etc., enable `Fit On LateUpdate` in Unmask component. |
| 78 | + * Add a UnmaskRaycastFilter component to UI element blocking ray. |
| 79 | + * Set the Unmask to `Unmask` in UnmaskRaycastFilter component. |
| 80 | + * Disable `RaycastTarget` of the UI elements, as necessary. |
| 81 | + |
| 82 | +3. Enjoy! |
| 83 | + |
| 84 | + |
| 85 | +##### Requirement |
| 86 | + |
| 87 | +* Unity 5.5+ *(included Unity 2018.x)* |
| 88 | +* No other SDK are required |
| 89 | + |
| 90 | + |
| 91 | + |
| 92 | +<br><br><br><br> |
| 93 | +## Example of using |
| 94 | + |
| 95 | +| Case | Description |Screenshot | |
| 96 | +|-|-|-| |
| 97 | +|Unmasked text|Black screen is cut out with unmasked text.|| |
| 98 | +|Hole|Black screen is cut out with unmasked Image.|| |
| 99 | +|Tutorial button|In tutorial, only specific button can be pressed.|| |
| 100 | +|Transition|Transition effect with silhouette.|| |
| 101 | + |
| 102 | + |
| 103 | + |
| 104 | +<br><br><br><br> |
| 105 | +## License |
| 106 | + |
| 107 | +* MIT |
| 108 | +* © UTJ/UCL |
| 109 | + |
| 110 | + |
| 111 | + |
| 112 | +## Author |
| 113 | + |
| 114 | +[mob-sakai](https://github.com/mob-sakai) |
| 115 | + |
| 116 | + |
| 117 | + |
| 118 | +## See Also |
| 119 | + |
| 120 | +* GitHub page : https://github.com/mob-sakai/UnmaskForUGUI |
| 121 | +* Releases : https://github.com/mob-sakai/UnmaskForUGUI/releases |
| 122 | +* Issue tracker : https://github.com/mob-sakai/UnmaskForUGUI/issues |
| 123 | +* Current project : https://github.com/mob-sakai/UnmaskForUGUI/projects/1 |
| 124 | +* Change log : https://github.com/mob-sakai/UnmaskForUGUI/blob/upm/CHANGELOG.md |
0 commit comments