Hi,
I have the following frame picture:
I now want to fill the “wings” of this picture with the healthbar. The healthbar being a normal slider (The square) that is so wide, it fills the wing including the tip.
The healthbar should only be visible inside the wings (orange part), while having the outside of the frame be transparent so you can see the background (red part).
Is there an easy way, so I can set the transparency inside the frame to show UI elements, while they are invisible outside the frame?
I believe you are looking for the Mask component : Redirect to... title of new-page
A Mask is not a visible UI control but rather a way to modify the appearance of a control’s child elements. The mask restricts (ie, “masks”) the child elements to the shape of the parent. So, if the child is larger than the parent then only the part of the child that fits within the parent will be visible.
WingsBackground - + [Mask] Components // Will define the visible area of the slider
├ Health - [Slider] Component // Will represent the health, should be placed so that it "fits" the wings background, without going outside of it
├ WingsBorder - Component // To avoid aliased Health bar, by placing it **above** the slider
use ui mask
make wing the parent and add the mask o it.
Just create a mask texture for your “slider”. So just copy the image and only give the parts you want to be visible an alpha value of 100% and everything else 0%. Then just use this extra texture as alpha mask.
To apply a mask to an image you have to make the mask texture the parent of the content you want to mask. Just attach the “Mask” component to your mask image. For debugging you can enable “Show Mask Graphic”.