Best approach for handling multiple masks/ mask sections on one element?

Hey everyone,

I currently have a single graphic (overlaid on top of another) that I'd like to be affected by multiple masks. Here is a visual for clarification: Bottom image -> Top image > Masked composite



Essentially, I would like to give each "slot" it's own mask and go from there. Is there any way to attain this with the Mask UI Component, or would I better off extending it, or even practicing some dark shader magic?

I feel like the top-down (parent-to-child) masking is it bit of a limitation here, as well as for a second element I wanted to do with Masks, which is essentially just an HP bar fill.

Any suggestions would be very much appreciated!

Thanks,
Patrick

Ninja-edit: Splitting the image up into 6 different ones is really less-than-ideal, due to maintainability, iteration, as well as positioning and such. Note that there's shading in the images that would be lost when just repeating the same image, so that's out of the question as well. =)

 

Really hate doing this, but... subtle bump?

 

Thanks for the answer @superpig. I've looked at stencil buffers and some example shaders, but honestly shaders are really not my forte unfortunately. =/ I wonder if I can somehow simply "redirect" an existing/ inherited mask to mask any arbitrary graphic instead/ write to any material's stencil buffer.