about using Clippingnode and Blendfunc in Cocos2d-js to implement masks

About Clippingnode and Blendfunc to implement masking

1. Clippingnode Implementation Mask

First you need to prepare

A picture of PNG with transparency

A picture to be obscured

Cliper:function (framename) {//Create a mask for the template var sten = new CC. Sprite (framename);//Create a clippingnode and set some underlying properties container width height with template about var Clipnode = new CC. Clippingnode (); Clipnode.attr ({stencil:sten,anchorx:0.5,anchory:0.5,alphathreshold:0.8,//Set clipping transparency value The default value is 1 equals 1 The portion of Alpha = 0 is also cropped}); return Clipnode;},var Clipnode = This.cliper ("Res/ui_cw_xizhizi_zhezhaodi.png");  Clipnode.attr ({        X:SIZE.WIDTH/4,        y:size.height/2,        //inverted:true,        });        This.addchild (Clipnode);                var Bo2 = new CC. Sprite ("#ui_pet_aptitude_1_1. png");        Bo2.attr ({        x:clipnode.width/2,        Y:CLIPNODE.HEIGHT/2-A,        });        Bo2.runaction (Cc.animate (animation). RepeatForever ());         Clipnode.addchild (BO2);

2. Blendfunc Implementation Mask

First you need to prepare

A PNG image with transparency (if you want to show other areas in the middle to cut off need a middle black opaque then all around transparent png

A picture to be obscured

Two pictures need to be wide and high

Testblendfunc:function () {    //Create the image under the wizard    var sp =  new CC. Sprite ("#ui_pet_aptitude_1_1. png")    sp.attr ({    anchorx:0,    anchory:0,    });    Create Mask Sprite    var mask = new CC. Sprite ("Res/ui_cw_xizhizi_zhezhaodi.png");    Mask.attr ({    anchorx:0,    anchory:0,    });    Mask.setblendfunc (CC. ONE_MINUS_SRC_ALPHA,CC. Src_alpha)    //Create a render texture    var RT = cc. Rendertexture (sp.width,sp.height);    Rt.attr ({    anchorx:0,    anchory:0,    x:500,    y:300,    });    This.addchild (RT);        Rt.begin ();    Sp.visit ();    Mask.visit ();    Rt.end ();},

Source (Rs, Gs, Bs, as)

Purpose (Rd, Gd, Bd, Ad)

SOURCE Blending factor: (Sr, Sg, Sb, Sa)

Objective mixing factor: (Dr, Dg, Db, Da)

Formula Rs * Sr + Rd * Dr, Gs * Sg + Gd * Dg, Bs * Sb + Bd * Db, as * Sa + Ad * Da

Here you use Mask.setblendfunc (CC. ONE_MINUS_SRC_ALPHA,CC. Src_alpha)

In the middle black area cc. Src_alpha = 1 cc. One_minus_src_alpha = 1-1 = 0

Rs * 0 + Rd * 1, Gs * 0 + Gd * 1, Bs * 0 + Bd * *, as * 0 + Ad * 1

Equal to the original color of the destination (RD,GD,BD,AD)

Outside the transparent area cc. Src_alpha = 0 cc. One_minus_src_alpha = 1-0 = 1

Rs * 1 + Rd * 0, Gs * 1 + Gd * 0, Bs * 1 + Bd *0, as * 1 + Ad * 0

equals the original color of the source (Rs,gs,bs,as) (0,0,0,0)

about using Clippingnode and Blendfunc in Cocos2d-js to implement masks