Quick-Cocos2d-x 实现屏蔽并实践运用（待续）

实现屏蔽的最经常使用的两个方式：CCRenderTexture、CCClippingNode，下面先简单的介绍下这两种方式：

1、CCRenderTexture：经常用到的是对精灵进行屏蔽处理，在处理之前要先设置ccBlendFunc参数：

1 2 3 4 5 6

local sprSrc = display.newSprite( "hole_effect.png" ):addTo(self)      :align(display.CENTER, x, y) local ccbf = ccBlendFunc: new () ccbf.src = GL_DST_ALPHA ccbf.dst = GL_ONE sprSrc:setBlendFunc(ccbf)

比如这里创建了一个精灵sprSrc，并设置ccBlendFunc参数为{GL_DST_ALPHA,GL_ONE}，这里要理解src和dst的含义：src是源，dst为目标，设置ccBlendFunc的精灵为源，底板则为目标。

接着创建CCRenderTexture底板，指定大小及位置：

1 2	local rt = CCRenderTexture:create(display.width, display.height):addTo(self) :align(display.CENTER, display.cx, display.cy)

接下来进行屏蔽处理：

1 2 3

rt:begin()   sprSrc:visit()   rt:endToLua()

到此就完成了屏蔽，这是最基本最简单的用法。

2、CCClippingNode：

首先我们需要创建一个裁剪节点CCClippingNode：

1 2	local clipOuter = CCClippingNode:create()   clipOuter:setPosition(ccp(display.cx, display.cy))

然后创建模板，这里使用CCDrawNode来创建一个200X200范围的模板范围：

1 2 3 4

local stencil = CCDrawNode:create()   local pn = {{-100, -100}, {-100, 100}, {100, 100}, {100, -100}}   local clr = ccc4f(255, 0, 0, 255)   stencil:drawPolygon(pn, clr, 1, clr)

最后把模板stencil加入到裁剪节点clipOuter当中：

1	clipOuter:setStencil(stencil)

到此CCClippingNode创建的屏蔽已经完成，所有加入到clipOuter中的子节点只会显示模板范围内的内容，超出的部分则会被裁掉，例如：

1 2	local target = CCSprite:create( "bug886.jpg" )   clipOuter:addChild(target)

另外：CCClippingNode创建的对象实例的中心点坐标为(0,0)。

一、子弹穿孔效果

把所有子弹的弹孔集合作为模板并设置setInverted(true)那么弹孔所在的位置则成为一个个空洞：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

local clipOuter = CCClippingNode:create()   -- 用作切出底板 clipOuter:setPosition(ccp(display.cx, display.cy)) local target = CCSprite:create( "bug886.jpg" ) clipOuter:setStencil(target)   local cliphole = CCClippingNode:create() -- 用作切割出弹孔 cliphole:setInverted( true )          --  true 切掉的部分可见 cliphole:setAlphaThreshold(0.05)   -- 阈值，alpha大于此值才显示 cliphole:addChild(target)   self.holes = CCNode:create()     -- 子弹集合 self.holes:retain() cliphole:addChild(self.holes)   self.stencilholes = CCNode:create() -- 弹孔集合 self.stencilholes:retain() cliphole:setStencil(self.stencilholes) -- 把cliphole用作clipOuter的子节点，那么clipOuter与cliphole重合的部分都将不可见 clipOuter:addChild(cliphole) self:addChild(clipOuter)

通过上面的代码则对目标target做好了蒙版，下面点击生成子弹：

1 2 3 4 5 6 7 8

function LLShadeView:addShot1(x, y)      local hole = CCSprite:create( "hole_effect.png" )      hole:setPosition(ccp(x, y))      self.holes:addChild(hole)      local stencil = CCSprite:create( "hole_stencil.png" )      stencil:setPosition(ccp(x, y))      self.stencilholes:addChild(stencil) end

效果截图如下：

二、滚动字幕的实现

创建CCClipingNode实例并设置模板，然后把要滚动的字幕文本加入到其子节点，设置文本的滚动动作后即可以实现滚动字幕效果。具体代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

local clipOuter = CCClippingNode:create()   -- 用作切出底板 clipOuter:setPosition(ccp(display.cx, display.cy)) local target = CCSprite:create( "bug886.jpg" ) clipOuter:setStencil(target) clipOuter:setAlphaThreshold(0.05) self:addChild(clipOuter) local label = ui.newTTFLabel({          text =  "This is scrolling marquee, a line of words, only in a limited range, beyond the cut off (this sentence is youdao translation dictionaries: -d)" ,          font =  "Arial" ,          size = 20,          color= ccc3(243, 74, 7)      }):addTo(clipOuter)      :align(display.LEFT_BOTTOM, 200, 50) local offsetx = label:getContentSize().width local seq = transition.sequence({          CCMoveBy:create(10.0, ccp(-offsetx, 0)),          CCCallFunc:create(function()              label:setPosition(ccp(200, 50))          end)      }) local ac = CCRepeatForever:create(seq) label:runAction(ac)

其余内容，后续补充。

来源网址：http://blog.csdn.net/longolder/article/details/37775705