1.GameLayer.lua

GameLayer = class("GameLayer",function()
    return cc.Layer:create()
end)

function GameLayer:create()
    local view = GameLayer.new()
    view:__init()
    return view
end

function GameLayer:__init()
    local whiteColor = cc.c3b(255,255,255)
 
    
    local layerColor = cc.LayerColor:create(whiteColor)
    self:addChild(layerColor)

    local btn1 =  ButtonEx:create("按鈕1", function() end)
    btn1:setPosition(winSizeWidth/2 - 100,winSizeHeight/2)
    self:addChild(btn1)
    
    local btn2 =  ButtonEx:create("按鈕2", function() end)
    btn2:setPosition(winSizeWidth/2,winSizeHeight/2)
    self:addChild(btn2)
    
    
    local btn3 =  ButtonEx:create("按鈕3", function() end)
    btn3:setPosition(winSizeWidth/2 + 100,winSizeHeight/2)
    self:addChild(btn3)
    
    local callback = function()
        local scene = cc.Scene:create()
        scene:addChild(SecondLayer:create())
        cc.Director:getInstance():replaceScene(scene)
    end
    
    self:addChild(GuideLayer:create({btn2}, callback))
end
 

require "src/GameLayer"
require "src/GuideLayer"
require "src/Constant"
require "src/ButtonEx"
require "src/SecondLayer"

winSizeWidth = cc.Director:getInstance():getWinSize().width
winSizeHeight = cc.Director:getInstance():getWinSize().height


grayColor = cc.c3b(0,0,128)

ButtonEx = class("ButtonEx", function()
    return cc.Node:create()
end) 

function ButtonEx:create(btnName, callback)
    local view = ButtonEx:new()
    view:__init(btnName, callback)
    return view
end

function ButtonEx:__init(btnName, callback)
    local btn = ccui.Button:create("btnBg.png")
    self:addChild(btn)
    
    local lblDesp = cc.Label:createWithSystemFont(btnName,"Arial", 10)
    lblDesp:setColor(cc.c3b(255,0,255))
    self:addChild(lblDesp)
    
    btn:addTouchEventListener(function(sender, type) 
                                   if type == ccui.TouchEventType.ended then
                                        callback()
                                   end 
                              end)
                              
    self.contentSize = btn:getContentSize()
end

function ButtonEx:getContentSize()
    return self.contentSize
end
 

GuideLayer = class("GuideLayer",function()
    return cc.Layer:create()
end)

function GuideLayer:create(nodeList, callback)
    local view = GuideLayer.new()
    view:__init(nodeList, callback)
    return view
end

local function onTouchBegan(touch, event)
    local gameLayer = event:getCurrentTarget()

    local locationInNode = touch:getLocation()
    gameLayer.touchListener:setSwallowTouches(false)
    
    for i, v in ipairs(gameLayer.nodeList) do
        local node = gameLayer.nodeList[i]
        local s = node:getContentSize()
        local rect = cc.rect(node:getPositionX() - s.width/2, node:getPositionY() - s.height/2, s.width, s.height)  
        if cc.rectContainsPoint(rect, locationInNode) then
            if gameLayer.callback then
                gameLayer.callback()
            end
            return false
        end
    end
    gameLayer.touchListener:setSwallowTouches(true)
    return true
end

function GuideLayer:__init(nodeList, callback)
    
    self.nodeList = nodeList
    self.callback = callback
    --1.
    local clippingNode = cc.ClippingNode:create()
    self:addChild(clippingNode)
    
    --2.被裁剪的層
    local grayLayer = cc.LayerColor:create(grayColor)
    grayLayer:setOpacity(150)
    clippingNode:addChild(grayLayer)
    
    --3.鏤空模型
    local stencil = cc.Node:create()
    clippingNode:setStencil(stencil)
    
    clippingNode:setInverted(true)
    clippingNode:setAlphaThreshold(0.05)
    
    --鏤空具體的區域
    for i, v in ipairs(nodeList) do
        local node = nodeList[i]
        local layer = cc.LayerColor:create(grayColor, node:getContentSize().width, node:getContentSize().height)
        layer:setPosition(node:getPositionX() -node:getContentSize().width/2,  node:getPositionY() -node:getContentSize().height/2)
        stencil:addChild(layer)
    end
    
    --事件觸控
    local touchListener = cc.EventListenerTouchOneByOne:create()
    touchListener:registerScriptHandler(onTouchBegan,cc.Handler.EVENT_TOUCH_BEGAN)
    cc.Director:getInstance():getEventDispatcher():addEventListenerWithSceneGraphPriority(touchListener, self)
    self.touchListener = touchListener
end
 

SecondLayer = class("SecondLayer",function()
    return cc.Layer:create()
end)

function SecondLayer:create()
    local view = SecondLayer.new()
    view:__init()
    return view
end

function SecondLayer:__init()
    local lbl = cc.Label:createWithSystemFont("第二個場景","arial",30)
    lbl:setPosition(winSizeWidth/2, winSizeHeight/2)
    self:addChild(lbl)
end

點選指定區域後