制作新手引导高亮区域方法之一：混合模式

demo下载：Quick-x-HighlightArea-master.zip

1、混合模式

（1）首先创建一个全屏的CCRenderTexture实例

这里使用的黑色 0.6的透明度，看起来的效果就是一层黑色半透明的遮罩叠在游戏界面上面：

1 2 3 4

localpRt=CCRenderTexture:create(size.width,size.height) localcolor=ccc3(0,0)--黑色 localopacity=0.6--透明度 pRt:clear(color.r,color.g,color.b,opacity)

（2）设置混合模式

具体原理可以参考http://www.jb51.cc/article/p-xfoespbu-xd.html

3

localblend=ccBlendFunc() blend.src=GL_ZERO blend.dst=GL_ONE_MINUS_SRC_ALPHA

(3) "刷"出高亮区域

这里是把一个黑色的圆形通过拉伸来实现椭圆效果（CCRenderTexture有个坑，注意不要在begin和endToLua之间创建精灵，安卓下会发生偏移，以后还会提到）：

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

localcircleSpr=CCSprite:create( "Images/circle.png" ) localcircleSize=circleSpr:getContentSize() circleSpr:setBlendFunc(blend)--把贴图“刷”掉，高亮效果的关键 --宽度和高度参数，1.4142为根号2，矩形的外接椭圆的长轴与短轴长度 localwidthPara=1.4142/circleSize.width localheightPara=1.4142/circleSize.height localrectArray={[1]=CCRect(100,100,100), [2]=CCRect(200,150), [3]=CCRect(450,35,150, [4]=CCRect(300,300, } pRt:begin() for i,rectinipairs(rectArray) do localfScaleX=widthPara*rect.size.width localfScaleY=heightPara*rect.size.height circleSpr:setScaleX(fScaleX) circleSpr:setScaleY(fScaleY) circleSpr:setPosition(rect:getMidX(),rect:getMidY()) circleSpr:visit() end pRt:endToLua()

(4)获得贴图然后创建精灵即可，注意要翻转一下y轴

4

localnewSprite=CCSprite:createWithTexture(pRt:getSprite():getTexture()) newSprite:setFlipY( true )--翻转 newSprite:setPosition(display.cx,display.cy) self:addChild(newSprite)

使用的圆形图片

具体效果