CHUAN2 DEV ENGINE
996 正版授权研发中心 · 360 授权合作教学中心 · 抖音传奇直播合作授权 · 快手推广运营商授权
OFFICIAL LICENSED ACADEMY 查验官方授权证书 →
// 威海旷世互娱教学基地 · 技术文章
界面UI聊天系统

【界面UI】图文混排:聊天里的道具链接与表情

2026-09-22 04:11 作者:996 技术组 996引擎Lua教程传奇脚本界面UI聊天系统

实战应用:用在哪里

聊天里的「[裁决之杖]」不是纯文本:点击弹出道具详情、鼠标悬停显示属性——图文混排让聊天里的道具名变成可交互的链接。图文混排的实现要点是标记的解析、图标与文字的混合渲染与点击的命中判定。

混排的解析

lua
---图文混排:标记解析为富文本段
function RichText.parse(text)
    local segments = {}
    local pos = 1
    while pos <= #text do
        local s, e = text:find('%[item:(%d+)%]', pos)
        if s then
            if s > pos then
                segments[#segments + 1] =
                    { type = 'text', content = text:sub(pos, s - 1) }
            end
            local itemId = tonumber(text:match('%[item:(%d+)%]', pos))
            segments[#segments + 1] =
                { type = 'item', id = itemId }
            pos = e + 1
        else
            segments[#segments + 1] =
                { type = 'text', content = text:sub(pos) }
            break
        end
    end
    return segments
end

混排的解析把文本拆成段落:纯文本段与道具段交替排列——道具段的标记格式 [item:ID],ID 对应道具的模板表。解析的结果驱动渲染:文本段用纯文本渲染、道具段用图标加名字的可点击链接渲染,混排的视觉让道具在聊天里一眼可辨。

渲染与交互

lua
---混排的渲染:文本与图标的混合
function RichText.render(win, segments)
    local x = 0
    for _, seg in ipairs(segments) do
        if seg.type == 'text' then
            local t = GUI:Text_Create(win, nil, x, 0,
                12, "#FFFFFF", seg.content)
            x = x + GUI:Text_GetWidth(t)
        elseif seg.type == 'item' then
            local icon = GUI:Image_Create(win, nil,
                x, -2, IconAtlas.get(Item.iconOf(seg.id)))
            GUI:addOnClickEvent(icon, function()
                ItemPopup.show(seg.id)
            end)
            x = x + 34
        end
    end
end

渲染的混合将文本与图标在行内交替排布:文本段按宽度排布、图标段固定 34 像素的宽度——图标与文字的基线对齐让混排的视觉不突兀。道具链接的点击弹出详情浮窗:名字、品质、属性、获取途径——点击的交互让聊天里的道具名变成商店橱窗。表情的嵌入走同一段的解析逻辑:表情以 {f:ID} 的占位符嵌入,渲染时替换为表情图,表情与道具的混排在同一行共存。

验证与监控

混排的渲染一致性测试:解析的段落数与渲染的控件数一致,文本与图标的交替不错位;混排行的高度自适应测试:图标的高度不撑破行高。

踩坑记录

解析的正则曾经贪婪匹配,两个道具链接之间的文本被吞掉,非贪婪的匹配修复。图标的点击热区曾经偏移,点击区域与图标的视觉边界错位,热区的校准用标记框辅助调试。混排的行高曾经不统一,图标行比纯文本行高出几像素,行高按最大子元素的高度统一。

上线要点

道具链接的格式进协议文档:发送端怎么标记、接收端怎么解析。表情的图集与道具的图集分离加载,聊天的打开不依赖全量图标的就绪。混排的渲染支持多行折叠:超长的消息折叠为「展开查看」,交互的体验不因长文本破坏。

作者履历与出处

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

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

幂尔框架 · 实战干货 · 接口调用

LATEST ARTICLES

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

玩法策划悬赏赏金防刷

【玩法策划】悬赏捕杀:悬赏发布与赏金结算

实战应用:用在哪里 悬赏捕杀把玩家之间的恩怨变成可托付的系统行为:仇家难以亲自复仇时,花费金条发布悬赏,全服玩家接单击杀目标…

2026-09-23 10:18 996 技术组
工具链配表校验引用

【工具链】配表校验器:数值边界与引用完整性

实战应用:用在哪里 策划改表是日常动作,漏填字段、引用了不存在的编号、数值越界这三类问题占了配表故障的绝大多数。等玩家报错再…

2026-09-23 10:18 996 技术组
后端接口行会擂台结算

【后端接口】行会擂台:守擂判定的接口实现

实战应用:用在哪里 行会擂台给中小行会提供了固定的对抗出口:挑战方击败守擂方后接管擂台,连胜次数决定每日结算奖励档位。接口层…

2026-09-23 10:18 996 技术组
Lua实战二叉堆排行榜伤害

【Lua实战】二叉堆:伤害排行榜的有序插入

实战应用:用在哪里 世界首领战里玩家最关心的是伤害前十名:榜单要求随时插入、随时能按序取出,每来一条伤害记录都重新排序一次太…

2026-09-23 10:18 996 技术组
网络通信九宫格视野广播

【网络通信】九宫格视野:同屏广播的范围控制

实战应用:用在哪里 百人同屏的攻城战里,把每条移动、施法消息广播给全地图是最常见的性能失误。九宫格视野的做法是把地图切成等大…

2026-09-23 10:18 996 技术组
安全加密输入校验注入拦截

【安全加密】入库防护:玩家输入的参数校验与拦截

实战应用:用在哪里 留言板、行会招募语、邮件标题这类字段会被玩家自由填写,并写入角色变量或转发给持久层。拼接式的写法一旦遇到…

2026-09-23 10:18 996 技术组