CHUAN2 DEV ENGINE
996 正版授权研发中心 · 360 授权合作教学中心 · 抖音传奇直播合作授权 · 快手推广运营商授权
OFFICIAL LICENSED ACADEMY 查验官方授权证书 →
// 威海旷世互娱教学基地 · 技术文章
前端接口技能悬浮卡片说明

【前端接口】技能说明悬浮:技能详情卡片的前端实现

2026-09-23 15:44 作者:996 技术组 996引擎Lua教程传奇脚本前端接口技能悬浮卡片说明

实战应用:用在哪里

烈火剑法的伤害加成、冷却时间、下一级提升,全靠玩家记忆或去官网查。技能说明悬浮卡片在鼠标悬停技能图标零点三秒后弹出详情卡:当前等级数据、下一级预览、技能描述三段式呈现,移开即收。前端重点在悬停延迟判定与卡片定位不遮挡不越界。

悬停判定:延迟弹出与移开收回

悬停超过三百毫秒才弹卡,避免划过即弹的干扰;移出图标立即收回卡片,弹卡期间点击图标正常触发技能不阻塞操作。示例代码如下:

lua
-- 技能悬浮:延迟弹出
local panel = GUI:GetParent("MainTop")
local hoverTimer, card
local function onSkillHover(idx, name)
    if hoverTimer then SL:UnSchedule(hoverTimer) end
    hoverTimer = SL:Schedule(function()
        card = GUI:Text_Create(panel, "SkillCard" .. idx, 0, 0,
            name .. " Lv3|伤害 +45%|冷却 8 秒\n下一级:伤害 +60%",
            260, 60)
        GUI:Attach_MainTop(card)
    end, 300)
end
local function onSkillLeave()
    if hoverTimer then SL:UnSchedule(hoverTimer) end
    if card then card:SetVisible(false) end
end

卡片定位:跟随锚点与边界回退

卡片默认出现在图标右上角,越出屏幕边界时自动翻转到左侧或下方;定位每次弹出时实时计算,适配不同分辨率与技能栏换位后的图标位置。示例代码如下:

lua
-- 卡片定位:边界回退
local player = class(actor)
local SCREEN_W = 1920
local CARD_W = 260
local function cardX(iconX)
    if iconX + CARD_W > SCREEN_W then
        return math.max(0, iconX - CARD_W)
    end
    return iconX + 20
end

验证与监控

验证三条路径:悬停三百毫秒弹卡、移开即收、卡片在屏幕右侧图标上自动左翻;技能栏拖拽换位后卡片跟随新位置。低端机弹卡延迟低于五十毫秒,不引起帧率波动。上线后看悬停弹卡率与详情页跳转率,悬停弹卡率高说明卡片替代了详情页价值;玩家反馈看不到卡片时优先检查遮罩层级与弹出时序。

踩坑记录

卡片曾绑定图标创建时的坐标,技能栏换位后卡片弹在旧位置,定位实时计算后才正确。移开事件曾漏注册,卡片常驻不消失叠了十几层,悬停与移出必须成对注册。数据曾前端写死,版本更新后伤害数值与实际不符被玩家截图对比,卡片数据随版本由服务端下发,展示层的每个数字都要有出处。

作者履历与出处

本文由 996 技术组基于 996 引擎官方知识库与浮生梦老师课程体系整理。团队长期从事传奇类引擎 Lua 后端逻辑、客户端界面与商业版本交付,内容以官方知识库与真实项目为出处,按版本持续修订。

← 返回文章地图返回研学路径

最新技术文章 · 实战干货

LATEST ARTICLES

全站技术干货持续更新:996 引擎 / Lua 实战帖,语法、参数与示例一篇讲透。进入文章地图 · 查看全部 →

引擎触发烈火剑法连击战士

【引擎触发】疾风烈火斩:烈火剑法连击的判定触发设计

实战应用:用在哪里 战士的烈火剑法一击熄火后要等八秒冷却,连招断档感强烈。疾风烈火斩在烈火剑法命中后给一次连击窗口:三秒内再…

2026-09-23 15:45 996 技术组
玩法策划阵营声望声望压制

【玩法策划】阵营声望:声望等级与敌对压制设计

实战应用:用在哪里 阵营对抗打到中期容易疲软:打赢没有额外好处,输掉也没有代价。阵营声望体系给阵营战装上荣誉刻度:个人与阵营…

2026-09-23 15:45 996 技术组
玩法策划城主施政市政建设

【玩法策划】城主施政:市政令牌与城市建设玩法

实战应用:用在哪里 拿下沙巴克之后呢?城主除了名字挂在城墙上,对城市毫无影响。城主施政玩法让占领变成治理:城主每周获得市政令…

2026-09-23 15:45 996 技术组
运维发布备用线路切换演练

【运维发布】备用线路:主线路故障的自动切换演练

实战应用:用在哪里 主线路光缆被挖断的深夜,全服掉线 20 分钟,玩家以为游戏倒闭。备用线路方案给接入层配第二条出口:主线路…

2026-09-23 15:44 996 技术组
后端接口行会选举换届

【后端接口】行会选举:官员换届的投票与任期接口

实战应用:用在哪里 行会官员由帮主任命的老模式弊端明显:任人唯亲、能上不能下。行会选举接口把官员换届做成投票制:每两个月一次…

2026-09-23 15:44 996 技术组
前端接口技能悬浮卡片说明

【前端接口】技能说明悬浮:技能详情卡片的前端实现

实战应用:用在哪里 烈火剑法的伤害加成、冷却时间、下一级提升,全靠玩家记忆或去官网查。技能说明悬浮卡片在鼠标悬停技能图标零点…

2026-09-23 15:44 996 技术组