【游戏客户端】实现游戏裁剪效果

【游戏客户端】实现游戏裁剪效果

 

      之前的博客中，我和大家分享了如何做：

• 商业化的充值活动 ：【商业化充值活动博客】
• 抽卡系统：【抽奖，抽卡系统博客】
• 装备系统：【装备系统博客】
• 红点系统：【红点系统博客】
• 商店&拍卖系统：【商店&拍卖系统】
• UI环绕特效：【UI环绕特效】
• 实现刮刮乐效果：【实现刮刮乐效果】
• 实现卡牌翻转效果：【实现卡牌反转效果】
• 实现剧情对话：【实现剧情对话效果】
• 实现小地图系统：【小地图系统】

      还记得以前玩毒奶粉的时候，我玩的是弹药专家，他有一个45技能是可以开狙击枪的，画面一下子就会出现一个瞄准镜，当时觉得：哇！好炫酷。其实它就是利用到了裁剪功能，今天和大家分享一下如何实现游戏里的裁剪结点clippingNode

（一）底板，模板&背景图

      为了方便理解，我们需要先明确这三个概念：底板，模板&背景图

（1）背景图

      裁剪是把想展示的画面给展示出来，那不想展示的部分就需要用背景图给填充，像上图“狙击枪”效果的背景就是黑色的底图

（2）底板

      底板就是我们需要进行裁剪的画面

（3）模板

      模板就是我们对底板进行限制的规则画面，一般会根据模板的alpha值来决定底板哪些像素显示，哪些像素不显示

 （4）模板

图A

                                                    图B

      举个栗子，我们用黑色背景作为背景图，图A作为底板，图B作为模板。模板alpha值不为0的地方进行显示，结果就会变成这样

（二）裁剪结点clippingNode

      有了上述概念之后，就可以介绍今天的主角裁剪结点clippingNode了，这是cocos给我们提供的一个裁剪结点类，它可以像普通节点一样放入Layer，Scene，Node中并有着以下的常用方法：

（1）setStencil

      可以通过setStencil(stencil)的方式给裁剪结点对象添加一个模板，可以是node，sprite

（2）setAlphaThreshold

      可以通过setAlphaThreshold来设置alpha的阈值，范围在0到1之间：

      默认为 1 ，表示alpha测试默认关闭，即模板限制下的所有内容全部绘制

      若不是1 ，表示只绘制模板中，alpha像素大于alphaThreshold的内容

      以下图片，其中小球以外的其他区域像素为透明的
      

      在不设置AlphaThreshold闸值的时候绘制出的内容为： 

       设置AlphaThreshold闸值为0.5的时候： 

 

 

（3）setInverted

      默认为false，但当调用这个接口设置为true时，原本是显示符合模板alpha阈值的像素，改为显示不符合模板alpha阈值的像素

     在setInverted设置为true时：

      

       默认状态时：

（三）原理

      clippingNode的实现原理是在其绘制（visit）的时候，先绘制模板内容，然后根据模板像素的alpha值，判断这个像素该不该显示底板像素内容，若不该显示，则会向openGL设置这个像素点的深度缓冲值，取原来的颜色缓冲进行绘制

好啦今天就到这里
点赞，关注！！！