[Quick-x]制作新手引导高亮区域方法之一：混合模式

demo下载：https://github.com/chenquanjun/Quick-x-HighlightArea

1、混合模式

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

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

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

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

 

(3) "刷"出高亮区域

这里是把一个黑色的圆形通过拉伸来实现椭圆效果

（CCRenderTexture有个坑，注意不要在begin和endToLua之间创建精灵，安卓下会发生偏移，以后还会提到）

    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轴

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

 

使用的圆形图片

具体效果

 

当然少不了的是demo了

地址：https://github.com/chenquanjun/Quick-x-HighlightArea