Creating a custom multi-shaped mask

Hey everyone,

I’m attempting to create a basic game involving stickmen fighting together
Each of them can be drawn by simply using the lineTo function of cc.Graphics
The thing is, I dont want them to be in a single color

Every single character and platform rendered in the scene should be using the same sprite, wich is by default not visible to the player, not moving whatsoever, and screen-sized
The effect that I want to create is like all the stuff rendered by cc.Graphics(characters/platform) would simply act like a mask for the screen-wide sprite

But masks only work with rectangles/circles/sprites, and only one of them…
So the only thing i can do is like :

  • Instead of cc.Graphics, use sprites of lines for everything
  • Use these srpties as masks
  • Put my screen-widde sprite as a child node to EVERY single limbs of my characters/platforms, wich may kill performance
    OR :
  • Creating an image out of everything rendered in the scene
  • Using this image as a mask
  • Then just apply the screen-sized texture
    But obviously, creating an image every frame will be terrible

Is there another way around ?

TL;DR, in summary :

  • I’ve got a screen-sized sprite, wich is not visible by default
  • I’m drawing multiple basic shapes, wich can all be made with cc.Graphics
  • All these shapes should act like they are part of a mask applied to the screen-sized sprite
  • Most of these shapes move
  • Is there a "correct way to do that ?

Wondering how to achieve this too.
Waiting for a correct answer.

ClippingNode

Stencil = create a node/layer that will hold all the stick characters.
child of clippingNode = the screen-sized sprite