[Quick-x]製做新手引導高亮區域方法之一：混合模式

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

一、混合模式

（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