quick-cocos2d-x 實現遮罩并實踐運用

實現遮罩的最經常使用的兩個方式：CCRenderTexture、CCClippingNode，下面先簡單的介紹下這兩種方式：

1、CCRenderTexture：經常用到的是對精靈進行遮罩處理，在處理之前要先設置ccBlendFunc參數：

	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底板，指定大小及位置：

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

接下來進行遮罩處理：

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

到此就完成了遮罩，這是最基本最簡單的用法。

2、CCClippingNode：

首先我們需要創建一個裁剪節點CCClippingNode：

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

然後創建模板，這裡使用CCDrawNode來創建一個200X200範圍的模板範圍：

	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當中：

	clipOuter:setStencil(stencil)

到此CCClippingNode創建的遮罩已經完成，所有加入到clipOuter中的子節點只會顯示模板範圍內的內容，超出的部分則會被裁掉，例如：

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

另外：CCClippingNode創建的對象實例的中心點坐標為(0,0)。

一、子彈穿孔效果：

把所有子彈的彈孔集合作為模板并設置setInverted(true)那麼彈孔所在的位置則成為一個個空洞

	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做好了蒙版，下面點擊生成子彈：

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實例并設置模板，然後把要滾動的字幕文本加入到其子節點，設置文本的滾動動作后即可以實現滾動字幕效果。具體代碼如下：

	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)

其餘內容，後續補充