lua版本ClippingNode实现新手引导

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
2.Lib.lua

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

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

grayColor = cc.c3b(0,0,128)4.ButtonEx.lua
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
end5.GuideLayer.lua
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
end6.SecondLayer.lua

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

加入引导层



点击指定区域后