Giter Club home page Giter Club logo

unmaskforugui's Introduction

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

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

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

Menu Screenshot
Tutorial Button
Iris Shot





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.
Iris in/out Transition effect with iris in/out.





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

unmaskforugui's People

Contributors

haruma-k avatar mob-sakai avatar semantic-release-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

unmaskforugui's Issues

1.1.0 Release Summary

Install UnmaskForUGUI with Unity Package Manager!

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

To update the package, change #1.1.0 to the target version.

UnmaskRaycastFilter not working anymore

It seems that the UnmaskRaycastFilter is no longer working. The Button receives no events even though the IsRaycastLocationValid function behaves correctly.

To Reproduce
Steps to reproduce the behavior:

  1. Unity 2022.3.2f1
  2. Create a new scene
  3. Add the UI > Unmask > Tutorial Button
  4. Try to click the button with the default settings => Does not work

Expected behavior
The button should receive the events

Screenshots
image
It is not possible to provide a screenshot of it not working

Environment (please complete the following information):

  1. Unity 2022.3.2f1
  2. Unmask 1.4.1
  3. URP
  4. InputSystem/EventSystem

Not sure what I'm doing wrong. I already checked the IsRaycastLocationValid and this is working correctly. I also tried different camera settings. The "area" is detected correctly, but the ray is not passing through. Any help is welcome.

Only for children option inside a scrollview

Hello,

I want to use Unmask with the option "only for children" inside a scrollview (the viewport use the default UI mask).
When I do this, the mask of the viewport do not affect anymore the children that are ordered after the Unmask gameobject.
image

My hierarchy:
image

ShadowMask use Unmask with "only for children" option
and Viewport use default UI mask

Am I doing something wrong? or this is a bug?
(in this example I could manage to avoid using "only for children" but in my project I can't)

Can't install package using UPM

The package can't be installed using Unity package manager (UPM)

'5.5' is not valid 'unity' attribute value. Expected '<year>.<version>'

To Reproduce
Steps to reproduce the behavior:

  1. Go to Packages/manifest.json
  2. Add the following line:
    "com.coffee.unmask": "https://github.com/mob-sakai/UnmaskForUGUI.git#1.1.1",

Environment:

  • Platform: Editor Windows
  • Unity: 2019.1.4f1
  • UnmaskForUGUI: 1.1.1

It's really perfect if support soft mask effect like "SoftMaskForUGUI"

I also use the "SoftMaskForUGUI" plugin. That's perfect effect except Inverse SoftMaskable must be the child of SoftMask in Hierarchy. I cannot make multiple holes on one background.
Then I found this plugin "UnmaskForUGUI". It allows me to make multiple holes on one background, but without soft mask effect. Is it possible to use soft mask to make multiple holes on one background?
Thanks for sharing your plugins! Both of them are very useful for me.

Not working on Android devices

Describe the bug
When used on the built player (.apk) for Android device, the mask doesn't work at all.

To Reproduce
Steps to reproduce the behavior:

  1. Import Unmask
  2. Import Demo and build demo scene
  3. Deploy to "any" Android device
  4. Unmask is not working

Environment (please complete the following information):

  • Platform: Android (tested on Nexus 5 with Android 6.0.1 and on Samsung Galaxy S10 with Android 9 I think)
  • Unity: 2019.2.18
  • UnmaskForUGUI: 1.1.3

Additional context
Add any other context, screenshots or gif animations about the bug here.

UnmaskRaycastFilter is not reliable

UnmaskRaycastFilter is not reliable?

So for our project, since our camera is using perspective projection, the funciton

camera.WorldToScreenPoint() is not reliable when converting from world position to screen point, therefore the UnmaskRaycastFilter's function IsRaycastLocationValid() is always returning false no matter what.

However I have found a solution for this: instead of using camera.WorldToScreenPoint(), unity has a build in function RectTransformUtility.RectangleContainsScreenPoint() to check whether a screen point is inside the rect transform. So maybe this is better? At least it worked for me 😄

Here is the modified version of IsRaycastLocationValid() function:

public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera)
{
  // Skip if deactived.
  if (!isActiveAndEnabled || !m_TargetUnmask || !m_TargetUnmask.isActiveAndEnabled){
   return true;
  }
    // check inside
  return !RectTransformUtility.RectangleContainsScreenPoint((m_TargetUnmask.transform as RectTransform), sp);
}

Tutorial Button can't be instantiated in Unity 2021 LTS

Description
Errors in Unity 2021 LTS when trying to instantiate a Tutorial Button through the menu.

To Reproduce
Steps to reproduce the behavior:

  1. GameObject > UI > Unmask > Tutorial Button
  2. See errors

Environment:

  • Unity 2021 LTS

Problem
In 2021 LTS, Unity has changed the path from "GameObject/UI/Button" to "GameObject/UI/Button - TextMeshPro". Changing it manually fixes the problem, however it would be broken on any older version. A Unity version check with scripting symbols should do the trick.

Softmask with alpha support?

I've been using your library and it's great.
But I notice that the mask's border will be pixelated when using sprite with alpha color. Could it support soft mask like SoftMaskForUGUI?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.