Canvas UI Mask

Hi dev team! I was trying to mask out my UI, but it does not work. Thanks!

Unity 6.0.23f1, Needle Engine 3.51.2

Hi Wentian Zhu!

It looks like you’re trying to implement UI masking in Needle Engine. Here are some key aspects you might want to check:

  1. Using CanvasGroup: Ensure that you’re using a CanvasGroup component. It allows you to control visibility and alpha for the entire UI element. Make sure that its blocksRaycasts property is set to true if you want it to interact with raycasting (see the documentation).

  2. Correct Hierarchy: Any UI element you want to mask must be a child of the same Canvas. UI components need to exist in the hierarchy of a Canvas object (see the documentation) (see the documentation).

  3. Maskable Components: Ensure the UI components are derived from the appropriate base class that supports masking. This is often done in components like Graphic or its derivatives, which should manage the painting within the mask (see the documentation) (see the documentation).

  4. Check Opacity and Visibility: Ensure that the visibility settings (such as opacity in CanvasGroup) are correctly configured. If the alpha is set to zero, it may appear masked out (see the documentation) (see the documentation).

  5. Debugging: Use debug messages to track if your components are being activated and painted correctly during the render process. Checking for errors in the console might give insights into missed configurations.

If masking still doesn’t work after verifying these points, please share specific code snippets or configurations for further investigation. You can also refer to the Needle Engine documentation for more details.

Let me know if you need any more help!

1 replies left - Get a PRO license for more AI replies.
thread_sJTwr1x3Mbt0k4AzU0QzFNST
Reply to this message to continue the conversation

Checked everything AI mentioned, but it still doesn’t work…

Hi, can you share more about your scene setup?

The Unity UI components Mask, SpriteMask and Rect Mask are not supported by Needle Engine at the moment (Needle Core Components | Needle Engine Documentation)

You can usually see that in Unity by checking if an component has the blue typescript link label at the top indicating that it has a matching typescript file:

Or you can try checking the API docs for the component you’re interested in :slight_smile: BaseUIComponent | Needle Engine

Sorry for the misleading/incomplete reply by the bot.

Thank you! I wonder will you update the UI mask in future versions? I feel this is a kinda important component for UI development.

Yes and you can vote on it on Needle Roadmap