quick-x 新手引导

大部分游戏都有新手引导，而新手引导很多表现都是 其他地方压黑，新手引导的按钮等高亮可点。针对这种情况，用ClippingNode写了一个简单方便的遮罩层。

 1 --[[
 2     touchRect:
 3         1. CCRect 高亮区域
 4         2.  {
 5                 imagePath 高亮图片路径
 6                 imagePos  高亮精灵位置
 7                 scale， rotation 可选
 8             }
 9     canTouch: 高亮区域是否可点击
10     callback: 点击遮罩后的回调（比如点击后进行下一个引导）
11 ]]
12 function G_createGuideLayer(touchRect, canTouch, callback)
13     local highLightNode = nil
14     if type(touchRect) == "table" then      --图片
15         highLightNode = display.newSprite(touchRect.imagePath)
16         highLightNode:setPosition(touchRect.imagePos)
17         highLightNode:setScale(touchRect.scale or 1)
18         highLightNode:setRotation(touchRect.rotation or 0)
19     else                                    --CCRect 目前是矩形，可相应换成椭圆或固定图片
20         local midX = touchRect:getMidX()
21         local midY = touchRect:getMidY()
22         highLightNode = CCSprite:createWithTexture(nil, touchRect)
23         highLightNode:setPosition(midX, midY)
24     end
25
26     local layer = display.newLayer()
27
28     --压黑
29     local layerColor = CCLayerColor:create(ccc4(0, 0, 0, 200), display.width, display.height)
30
31     --高亮
32     local clipNode = CCClippingNode:create()
33     clipNode:setInverted(true)
34     clipNode:addChild(layerColor)
35     local stencilNode = CCNode:create()
36     stencilNode:addChild(node)
37     stencilNode:addChild(highLightNode)
38     clipNode:setStencil(stencilNode)
39     clipNode:setAlphaThreshold(0)
40
41     layer:addChild(clipNode)
42
43     layer:setTouchEnabled(true)
44     layer:registerScriptTouchHandler(function ( eventType,x,y )
45         local point = highLightNode:getParent():convertToNodeSpace(ccp(x, y))
46         if eventType == "began" then
47             if layer:isVisible() == false then
48                 return false
49             end
50             if canTouch == false then
51                 return true
52             --可点并且在高亮区域时不吞噬触摸，这样高亮区域的按钮就可以响应
53             elseif highLightNode:getBoundingBox():containsPoint(point) then
54                 return false
55             else
56                 return true
57             end
58         elseif eventType == "ended" then
59             if canTouch == false then
60                 if callback then
61                     callback()
62                 end
63             end
64         end
65     end, false, -10000, true)
66
67     return layer
68 end

有几种常用的用法：

local button = display.newSprite(ImagePath)
                     :addTo(self)
button:setTouchEnable(true)
button:registerScriptTouchHandler( .... )

1.  按钮区域矩形高亮，点击屏幕任何一处移除遮罩，点击高亮区域按钮不响应

local rect = button:boundingBox()
local layer = G_createGuideLayer(rect, false, function()
    layer:removeFromParentAndCleanUp(true)
end)

2. 按钮高亮（高亮区域跟按钮一模一样），点击屏幕任何一处移除遮罩，点击高亮区域按钮不响应

local tab = {
    imagePath = imagePath,
    imagePos = button:getParent():convertToWordSpace(button:getPositionInCCPoint()),}
local layer = G_createGuideLayer(rect, false, function()
    layer:removeFromParentAndCleanUp(true)
end)

3. 按钮高亮（高亮区域跟按钮一模一样）,点击高亮区域按钮响应，非高亮区域没反应

local tab = {
    imagePath = imagePath,
    imagePos = button:getParent():convertToWordSpace(button:getPositionInCCPoint()),
}
local layer = G_createGuideLayer(rect, true, function()
    layer:removeFromParentAndCleanUp(true)
end)