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

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

1、混合模式

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

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

1 2 3 4

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

（2）设置混合模式

具体原理可以参考 http://blog.csdn.net/yang3wei/article/details/7795764

1 2 3

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

(3) "刷"出高亮区域

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

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

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

 

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

1 2 3 4

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

使用的圆形图片

具体效果