three irregular area
There are a number of ways to do it, such as clipping nodes and shaders.
Not sure what this actually looks like in action, but if the lines and background are static, I would say the easiest way to do it would be to have the background behind the top 2 characters be 1 image and the background behind the bottom character be another image and just place the bottom background with a higher Z-order than the top background. That way, the top 2 characters will appear to be clipped to their area.
If the characters move and the bottom character crosses its lines or the top characters cross the middle line, then I would say giving each character a clipping node would be the easiest. Have each coloured background be its own sprite, add them as the background and use them as the stencil for the clipping node.
1 Like