Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Using UI mask on element not nested, or anchoring child to screen.

Discussion in 'UI Toolkit' started by me_unity550, Apr 30, 2020.

  1. me_unity550

    me_unity550

    Joined:
    Apr 7, 2020
    Posts:
    2
    I have a "health bar" like slider, using two shapes a background and a fill and a slider to control it. I now want to add an image to the center of the screen that is masked by the fill, so that the image is only visible when the health bar fill is behind it. To accomplish this I added a Mask to the health bar fill element, and nested the maskable image. Here you can see an almost working example:
    https://imgur.com/a/SclQnwx

    As you can see the mask is working correctly, however, because the image is nested under the health bar fill it is moving with it instead of staying in the center of the bar. I can move the image up a layer to anchor it to the whole bar, but then the mask is below it and doesn't hide the image.

    What would be the best way to fix this? Is there a way to mask an image above a mask in the hierarchy, or is it possible to anchor a nested element to a grandparent instead of relative to the parent?
     
    RaptusRites and graybear209 like this.