Masking or stenciling using cc.Graphics

[TheChuckster]

I need to use a cc.Graphics contour “path” to mask or stencil another sprite or group or sprites like so:

syuhari/CCMask

How can I do this within Cocos Creator?

[jake72]

I’ve done similar stuff to get a rounded corner mask. It was done by extending the stock CC.Mask and adding my custom code in it. Here’s a quick how-to:

Extended class header:

let MaskExtended = cc.Class({
extends: cc.Mask,

Exporting it:

module.exports = MaskExtended;

You most probably only need to add more code in the function _refreshStencil() and of course a new option to the type property.

[TheChuckster]

Thanks @jake72, I’ll let you know how it goes.

[TheChuckster]

It looks like I can just call setStencil() directly inside my overloaded _refreshStencil() passing in the cc.Graphics object, but I’m still checking the type hierarchy. Will keep you posted.

[jyinkailej]

This example use stencil with cc.Graphics, but extends cc.Mask is also a good way.

2youyou2/graphics-tutorials/blob/master/assets/bacteria/bacteria.js

[TheChuckster]

Thanks, @jyinkailej !!