关于cocos2d-js中使用 ClippingNode 以及 BlendFunc 来实现遮罩

关于ClippingNode 以及 BlendFunc 来实现遮罩 

1. ClippingNode实现遮罩

首先要准备

一张png有透明度的图片 

一张想要被遮住的图片

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

cliper : function(frameName){   //创建一个遮罩的模板   var  sten =  new  cc.Sprite(frameName);   //创建一个ClippingNode 并设置一些基础属性 容器宽高与模板有关   var  clipnode =  new  cc.ClippingNode();   clipnode.attr({   stencil:sten,   anchorX:0.5,   anchorY:0.5,   alphaThreshold:0.8, //设置裁剪透明值阀值 默认值为1 等于1時 alpha = 0的部分也被裁剪   });   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 - 20,            });            bo2.runAction(cc.animate(animation).repeatForever());                 clipnode.addChild(bo2);

2. BlendFunc实现遮罩

首先要准备

一张png有透明度的图片（如果要中间显示 其他区域裁减掉 需要一张中间黑色不透明 然后周围全透明的png

一张想要被遮住的图片

两张图片需要宽高一样

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

testBlendFunc :  function (){        //创建底下的那个图片精灵        var  sp =   new  cc.Sprite( "#ui_pet_aptitude_1_1.png" )        sp.attr({        anchorX:0,        anchorY:0,        });        //创建遮罩精灵        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)        //创建一个可渲染纹理        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();   },

源(Rs, Gs, Bs, As)

目的(Rd, Gd, Bd, Ad)

源混合因子为：(Sr, Sg, Sb, Sa)

目的混合因子为：(Dr, Dg, Db, Da)

公式 Rs * Sr  +  Rd * Dr,  Gs * Sg  +  Gd * Dg,  Bs * Sb  +  Bd * Db,  As * Sa  +  Ad * Da

这里使用mask.setBlendFunc(cc.ONE_MINUS_SRC_ALPHA,cc.SRC_ALPHA)

在中间黑色区域 cc.SRC_ALPHA = 1  cc.ONE_MINUS_SRC_ALPHA = 1 - 1 = 0

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

等于目的原来的颜色（Rd,Gd,Bd,Ad）

在外面透明区域  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

等于源原来的颜色（Rs,Gs,Bs,As）即（0，0，0，0）

源引：http://www.cnblogs.com/xlzytf/p/3968819.html