function screenshot(msgID, p1, p2, p3, msgData)
-- 先找到父节点
if not msgData then return end
local data = SL:json2tbl(msgData) or {}
local parent = GUI:Win_FindParent(110)
if GUI:Win_IsNull(parent) then
SL:Print("父节点不存在，请检
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-03-28 06:56:48 |
👁️ 阅读: 15
根据浮生梦老师前端课程内容，我来帮你写一个帅气的引导功能函数。这个函数会创建全屏灰色遮罩，然后聚焦到指定的UI容器，并添加呼吸效果：
```lua
-- 引导聚焦函数
function createGuideFocus(targetContainerName)
-- 1. 创建全屏灰色遮罩
local screenSize = cc.Director:getInstance():getWinSize()
-- 创建遮罩层
local maskLayer = GUI:Widget_Create(-1, "guide_mask_layer", 0, 0, screenSize.width, screenSize.height)
GUI:setBackGroundColor(maskLayer, 0, 0, 0)
GUI:setOpacity(maskLayer, 180) -- 设置半透明黑色
-- 2. 获取目标容器
local targetContainer = GUI:Win_FindParent(targetContainerName)
if GUI:Win_IsNull(targetContainer) then
SL:Print("目标容器不存在：" .. targetContainerName)
GUI:removeFromParent(maskLayer)
return
end
-- 3. 获取目标容器的位置和大小
local targetPos = GUI:getPosition(targetContainer)
local targetSize = GUI:getContentSize(targetContainer)
-- 4. 创建聚焦区域（挖空效果）
-- 使用裁剪节点实现聚焦效果
local stencil = cc.DrawNode:create()
local vertices = {
cc.p(0, 0),
cc.p(targetSize.width, 0),
cc.p(targetSize.width, targetSize.height),
cc.p(0, targetSize.height)
}
stencil:drawPolygon(vertices, 4, cc.c4f(1, 1, 1, 1), 0, cc.c4f(1, 1, 1, 1))
local clippingNode = cc.ClippingNode:create()
clippingNode:setStencil(stencil)
clippingNode:setAlphaThreshold(0.5)
clippingNode:setPosition(targetPos.x, targetPos.y)
GUI:addChild(maskLayer, clippingNode)
-- 5. 创建呼吸效果边框
local border = cc.DrawNode:create()
border:drawRect(cc.p(0, 0),
cc.p(targetSize.width, targetSize.height),
cc.c4f(0, 1, 1, 1), -- 青色边框
3) -- 边框宽度
-- 呼吸动画效果
local fadeIn = cc.FadeTo:create(0.8, 255)
local fadeOut = cc.FadeTo:create(0.8, 100)
local sequence = cc.Sequence:create(fadeIn, fadeOut)
local repeatForever = cc.RepeatForever:create(sequence)
border:runAction(repeatForever)
-- 缩放动画效果
local scaleUp = cc.ScaleTo:create(0.8, 1.05)
local scaleDown = cc.ScaleTo:create(0.8, 0.95)
local scaleSequence = cc.Sequence:create(scaleUp, scaleDown)
local scaleRepeat = cc.RepeatForever:create(scaleSequence)
border:runAction(scaleRepeat)
border:setPosition(targetSize.width/2, targetSize.height/2)
clippingNode:addChild(border)
-- 6. 添加触摸屏蔽（只允许点击目标区域）
GUI:setTouchEnabled(maskLayer, true)
GUI:addOnTouchEvent(maskLayer, function(eventType)
if eventType == 0 then -- 触摸结束
local touchPos = GUI:getTouchLocation()
-- 检查触摸点是否在目标区域内
if touchPos.x >= targetPos.x and touchPos.x <= targetPos.x + targetSize.width and
touchPos.y >= targetPos.y and touchPos.y <= targetPos.y + targetSize.height then
-- 在目标区域内，移除引导
GUI:removeFromParent(maskLayer)
SL:Print("引导完成，目标区域被点击")
else
-- 在目标区域外，显示提示
local tip = GUI:Text_Create(maskLayer, "guide_tip",
screenSize.width/2, 100,
20, "#ff0000", "请点击高亮区域")
GUI:setAnchorPoint(tip, 0.5, 0.5)
-- 提示文字淡入淡出
local tipFadeIn = cc.FadeIn:create(0.3)
local tipDelay = cc.DelayTime:create(1.5)
local tipFadeOut = cc.FadeOut:create(0.3)
local tipRemove = cc.CallFunc:create(function()
GUI:removeFromParent(tip)
end)
local tipSequence = cc.Sequence:create(tipFadeIn, tipDelay, tipFadeOut, tipRemove)
GUI:runAction(tip, tipSequence)
end
end
end)
-- 7. 添加引导手指动画
local finger = cc.Sprite:create("res/public/guide_finger.png")
if finger then
finger:setPosition(targetPos.x + targetSize.width/2,
targetPos.y + targetSize.height + 50)
maskLayer:addChild(finger)
-- 手指点击动画
local moveDown = cc.MoveBy:create(0.5, cc.p(0, -20))
local moveUp = cc.MoveBy:create(0.5, cc.p(0, 20))
local fingerSequence = cc.Sequence:create(moveDown, moveUp)
local fingerRepeat = cc.RepeatForever:create(fingerSequence)
finger:runAction(fingerRepeat)
-- 手指透明度动画
local fingerFade = cc.RepeatForever:create(
cc.Sequence:create(
cc.FadeTo:create(0.8, 200),
cc.FadeTo:create(0.8, 255)
)
)
finger:runAction(fingerFade)
end
-- 8. 添加引导文字说明
local guideText = GUI:Text_Create(maskLayer, "guide_text",
screenSize.width/2, screenSize.height - 100,
24, "#ffff00", "请点击此处进行操作")
GUI:setAnchorPoint(guideText, 0.5, 0.5)
-- 文字闪烁效果
local textBlink = cc.RepeatForever:create(
cc.Sequence:create(
cc.FadeTo:create(0.6, 150),
cc.FadeTo:create(0.6, 255)
)
)
GUI:runAction(guideText, textBlink)
-- 9. 添加退出引导按钮（可选）
local skipBtn = GUI:Button_Create(maskLayer, "skip_guide",
screenSize.width - 100, screenSize.height - 50,
"res/public/1900000612.png")
GUI:Button_setTitleText(skipBtn, "跳过引导")
GUI:Button_setTitleColor(skipBtn, "#ffffff")
GUI:addOnClickEvent(skipBtn, function()
GUI:removeFromParent(maskLayer)
SL:Print("用户跳过了引导")
end)
SL:Print("引导功能已启动，聚焦到容器：" .. targetContainerName)
return maskLayer
end
-- 使用示例：
-- 在需要引导的地方调用：
-- createGuideFocus("ui.yindaolay")
```
这个引导功能包含以下酷炫效果：
1. **全屏灰色遮罩** - 突出显示目标区域
2. **挖空聚焦** - 使用裁剪节点只显示目标区域
3. **呼吸边框** - 青色边框的淡入淡出+缩放效果
4. **引导手指** - 动态点击动画
5. **文字提示** - 闪烁的文字说明
6. **触摸限制** - 只能点击目标区域
7. **跳过按钮** - 可选跳过功能
要使用这个功能，只需要调用 `createGuideFocus("你的容器名称")`，比如：
```lua
createGuideFocus("ui.yindaolay")
```
这个引导既实用又帅气，符合现代游戏的引导设计标准！如果容器名称不对或者有其他问题，函数会自动处理并给出提示。
根据浮生梦老师前端课程内容，我来帮你写一个帅气的引导功能函数。这个函数会创建全屏灰色遮罩，然后聚焦到指定的UI容器，并添加呼吸效果：
```lua
-- 引导聚焦函数
function createGuideFocus(targetContainerName)
-- 1. 创建全屏灰色遮罩
local screenSize = cc.Director:getInstance():getWinSize()
-- 创建遮罩层
local maskLayer = GUI:Widget_Create(-1, "guide_mask_layer", 0, 0, screenSize.width, screenSize.height)
GUI:setBackGroundColor(maskLayer, 0, 0, 0)
GUI:setOpacity(maskLayer, 180) -- 设置半透明黑色
-- 2. 获取目标容器
local targetContainer = GUI:Win_FindParent(targetContainerName)
if GUI:Win_IsNull(targetContainer) then
SL:Print("目标容器不存在：" .. targetContainerName)
GUI:removeFromParent(maskLayer)
return
end
-- 3. 获取目标容器的位置和大小
local targetPos = GUI:getPosition(targetContainer)
local targetSize = GUI:getContentSize(targetContainer)
-- 4. 创建聚焦区域（挖空效果）
-- 使用裁剪节点实现聚焦效果
local stencil = cc.DrawNode:create()
local vertices = {
cc.p(0, 0),
cc.p(targetSize.width, 0),
cc.p(targetSize.width, targetSize.height),
cc.p(0, targetSize.height)
}
stencil:drawPolygon(vertices, 4, cc.c4f(1, 1, 1, 1), 0, cc.c4f(1, 1, 1, 1))
local clippingNode = cc.ClippingNode:create()
clippingNode:setStencil(stencil)
clippingNode:setAlphaThreshold(0.5)
clippingNode:setPosition(targetPos.x, targetPos.y)
GUI:addChild(maskLayer, clippingNode)
-- 5. 创建呼吸效果边框
local border = cc.DrawNode:create()
border:drawRect(cc.p(0, 0),
cc.p(targetSize.width, targetSize.height),
cc.c4f(0, 1, 1, 1), -- 青色边框
3) -- 边框宽度
-- 呼吸动画效果
local fadeIn = cc.FadeTo:create(0.8, 255)
local fadeOut = cc.FadeTo:create(0.8, 100)
local sequence = cc.Sequence:create(fadeIn, fadeOut)
local repeatForever = cc.RepeatForever:create(sequence)
border:runAction(repeatForever)
-- 缩放动画效果
local scaleUp = cc.ScaleTo:create(0.8, 1.05)
local scaleDown = cc.ScaleTo:create(0.8, 0.95)
local scaleSequence = cc.Sequence:create(scaleUp, scaleDown)
local scaleRepeat = cc.RepeatForever:create(scaleSequence)
border:runAction(scaleRepeat)
border:setPosition(targetSize.width/2, targetSize.height/2)
clippingNode:addChild(border)
-- 6. 添加触摸屏蔽（只允许点击目标区域）
GUI:setTouchEnabled(maskLayer, true)
GUI:addOnTouchEvent(maskLayer, function(eventType)
if eventType == 0 then -- 触摸结束
local touchPos = GUI:getTouchLocation()
-- 检查触摸点是否在目标区域内
if touchPos.x >= targetPos.x and touchPos.x <= targetPos.x + targetSize.width and
touchPos.y >= targetPos.y and touchPos.y <= targetPos.y + targetSize.height then
-- 在目标区域内，移除引导
GUI:removeFromParent(maskLayer)
SL:Print("引导完成，目标区域被点击")
else
-- 在目标区域外，显示提示
local tip = GUI:Text_Create(maskLayer, "guide_tip",
screenSize.width/2, 100,
20, "#ff0000", "请点击高亮区域")
GUI:setAnchorPoint(tip, 0.5, 0.5)
-- 提示文字淡入淡出
local tipFadeIn = cc.FadeIn:create(0.3)
local tipDelay = cc.DelayTime:create(1.5)
local tipFadeOut = cc.FadeOut:create(0.3)
local tipRemove = cc.CallFunc:create(function()
GUI:removeFromParent(tip)
end)
local tipSequence = cc.Sequence:create(tipFadeIn, tipDelay, tipFadeOut, tipRemove)
GUI:runAction(tip, tipSequence)
end
end
end)
-- 7. 添加引导手指动画
local finger = cc.Sprite:create("res/public/guide_finger.png")
if finger then
finger:setPosition(targetPos.x + targetSize.width/2,
targetPos.y + targetSize.height + 50)
maskLayer:addChild(finger)
-- 手指点击动画
local moveDown = cc.MoveBy:create(0.5, cc.p(0, -20))
local moveUp = cc.MoveBy:create(0.5, cc.p(0, 20))
local fingerSequence = cc.Sequence:create(moveDown, moveUp)
local fingerRepeat = cc.RepeatForever:create(fingerSequence)
finger:runAction(fingerRepeat)
-- 手指透明度动画
local fingerFade = cc.RepeatForever:create(
cc.Sequence:create(
cc.FadeTo:create(0.8, 200),
cc.FadeTo:create(0.8, 255)
)
)
finger:runAction(fingerFade)
end
-- 8. 添加引导文字说明
local guideText = GUI:Text_Create(maskLayer, "guide_text",
screenSize.width/2, screenSize.height - 100,
24, "#ffff00", "请点击此处进行操作")
GUI:setAnchorPoint(guideText, 0.5, 0.5)
-- 文字闪烁效果
local textBlink = cc.RepeatForever:create(
cc.Sequence:create(
cc.FadeTo:create(0.6, 150),
cc.FadeTo:create(0.6, 255)
)
)
GUI:runAction(guideText, textBlink)
-- 9. 添加退出引导按钮（可选）
local skipBtn = GUI:Button_Create(maskLayer, "skip_guide",
screenSize.width - 100, screenSize.height - 50,
"res/public/1900000612.png")
GUI:Button_setTitleText(skipBtn, "跳过引导")
GUI:Button_setTitleColor(skipBtn, "#ffffff")
GUI:addOnClickEvent(skipBtn, function()
GUI:removeFromParent(maskLayer)
SL:Print("用户跳过了引导")
end)
SL:Print("引导功能已启动，聚焦到容器：" .. targetContainerName)
return maskLayer
end
-- 使用示例：
-- 在需要引导的地方调用：
-- createGuideFocus("ui.yindaolay")
```
这个引导功能包含以下酷炫效果：
1. **全屏灰色遮罩** - 突出显示目标区域
2. **挖空聚焦** - 使用裁剪节点只显示目标区域
3. **呼吸边框** - 青色边框的淡入淡出+缩放效果
4. **引导手指** - 动态点击动画
5. **文字提示** - 闪烁的文字说明
6. **触摸限制** - 只能点击目标区域
7. **跳过按钮** - 可选跳过功能
要使用这个功能，只需要调用 `createGuideFocus("你的容器名称")`，比如：
```lua
createGuideFocus("ui.yindaolay")
```
这个引导既实用又帅气，符合现代游戏的引导设计标准！如果容器名称不对或者有其他问题，函数会自动处理并给出提示。
← 返回问答库