Quick-Cocos2d-x 实现屏蔽并实践运用(待续)

前端之家收集整理的这篇文章主要介绍了Quick-Cocos2d-x 实现屏蔽并实践运用(待续)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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


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

1
2
3
4
5
6
localsprSrc=display.newSprite( "hole_effect.png" ):addTo(self)
:align(display.CENTER,x,y)
localccbf=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
localrt=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
localclipOuter=CCClippingNode:create()
clipOuter:setPosition(ccp(display.cx,display.cy))


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

1
2
3
4
localstencil=CCDrawNode:create()
localpn={{-100,-100},{-100,100},{100,-100}}
localclr=ccc4f(255,255)
stencil:drawPolygon(pn,clr,1,clr)


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

1
clipOuter:setStencil(stencil)


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

1
2
localtarget=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
localclipOuter=CCClippingNode:create() --用作切出底板
clipOuter:setPosition(ccp(display.cx,display.cy))
localtarget=CCSprite:create( "bug886.jpg" )
clipOuter:setStencil(target)
localcliphole=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
functionLLShadeView:addShot1(x,y)
localhole=CCSprite:create( "hole_effect.png" )
hole:setPosition(ccp(x,y))
self.holes:addChild(hole)
localstencil=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
localclipOuter=CCClippingNode:create() --用作切出底板
clipOuter:setPosition(ccp(display.cx,display.cy))
localtarget=CCSprite:create( "bug886.jpg" )
clipOuter:setStencil(target)
clipOuter:setAlphaThreshold(0.05)
self:addChild(clipOuter)
locallabel=ui.newTTFLabel({
text= "Thisisscrollingmarquee,alineofwords,onlyinalimitedrange,beyondthecutoff(thissentenceisyoudaotranslationdictionaries:-d)" ,
font= "Arial" ,
size=20,
color=ccc3(243,74,7)
}):addTo(clipOuter)
:align(display.LEFT_BOTTOM,200,50)
localoffsetx=label:getContentSize().width
localseq=transition.sequence({
CCMoveBy:create(10.0,ccp(-offsetx,0)),
CCCallFunc:create(function()
label:setPosition(ccp(200,50))
end)
})
localac=CCRepeatForever:create(seq)
label:runAction(ac)

其余内容,后续补充。


来源网址:http://www.jb51.cc/article/p-tdpblvaa-no.html

猜你在找的Cocos2d-x相关文章