Simplest way to draw a polygon filled by tiled-texture?

[ancomchancanh]

I can draw a polygon using cc.Graphics, but it can only be filled with solid color.

I can have a node filled with tiled- textures but it can only be shaped in limited way. (rectangle, circle, or predefined image using mask)

Anyone know how DYNAMICALLY draw a polygon filled with tiled-textures? It would be part of my stage map.

I’ve tried to get image from a cc.Graphics polygon using camera-render-texture, but the image is not transparent in the background to use as image-stencil mask. And even if that way was feasible, it’s too complicated & resources consuming.

Thanks for any suggestion.

[tdebock]

Masking. You can use the polygon as the mask inside a ClippingNode, and then draw whatever you want inside the ClippingNode that will be clipped by the polygon. This can be very dynamic, and the mask and/or masked nodes can dynamically change and animate.

[ancomchancanh]

Code please?
You know, Creator is seriously lack of documentations and sample code!

[tdebock]

https://docs.cocos2d-x.org/api-ref/js/V2.2.2/symbols/cc.ClippingNode.html

Sorry, I code in C++ so I have no examples. But, essentially, you create the ClippingNode object, and set the stencil which is a node (as in can have subnodes, be animated etc). Then whatever you ->addChild() to the clippingNode object will be masked to the stencil based on some alpha thresholds.

ClippingNode = the base object (invisible).
the stencil = the mask (what area will be shown or cut out depending on inversion of the ClippingNode of the child node(s))
child nodes of the ClippingNode = visible on screen. Will be clipped to the stencil(mask)

[Karg]

ClippingNode doesn’t exist in the Cocos Creator API. the most “complex” thing you can currently do with masks is nest them, there an example here https://github.com/cocos-creator/example-cases

it would be cool if CC Mask would have an option to use another node as mask though

[ancomchancanh]

I’ve found a simple way my own. It’s using mask._graphics as a graphic component and draw whatever shape you want on it. Like this:

drawPolygonToMask(pointArr, node, isAppended = false){
        const g = node.getComponent(cc.Mask)._graphics;
        if(!isAppended){ g.clear(); }
        g.moveTo( pointArr[0].x, pointArr[0].y );
        pointArr.map(p=>{
            g.lineTo(p.x, p.y); 
        })
        g.close();
        g.stroke();
        g.fill();
    },

This works well with 2.0.9
To anyone who need a solution for this.