Create UI Mask from Childrens images

Questions & Answers
1

I think the title kind of nails it already.
Is it possible to set the image of an UI Mask to the images of the children?

I have made a couple of sprites for some buttons and windows, so they get placed nicely when re-sizing the buttons of windows without stretching like so:

50566-button-example.jpg

every color is a different piece of sprite, and only the red, green, blue and yellow pieces are able to stretch. pretty simple. for every piece I have an invisible background which i want to use as a mask, so the mask would scale dynamically with the rest of the window. but i cant seem to find a way to apply the child images to the mask! anyone with a salution or work around?

2

The mask component takes the image directly from the Image component on the same gameObject. So, to change the image of the mask, all you have to do is set the sprite of the Image component on the parent to the sprite being used by the image component of the child.

transform.parent.GetComponent<Image>().sprite = GetComponent<Image>().sprite;
3
  • Add them to a Panel.
  • Add a Content Size Filter to the Panel
  • Adjust the Content Size Filter to resize itself.
  • Add a Mask to the Panel.