一个类LOL带有合成树的装备商店系统文档

精华03/2791 浏览开发交流

可复用于其他需要类似功能的项目，减少沟通的积分消耗，分享给大家：

1. 整体架构equip_defs.lua 数据层 — 装备定义、合成配方、价格、属性、工具函数

equip_shop.lua UI 层 — NanoVG 渲染、交互逻辑、合成树可视化

2.2 装备分类类型值名称说明1武器—2衣甲—3头盔—4腰带—5靴子—6项链—7戒指—8饰品—2.3 阶级体系阶级颜色说明T1灰白 (180,180,180)基础装备，无配方，直接购买T2蓝色 (80,140,255)由 T1 合成，有配方T3金色 (255,180,30)由 T1+T2 合成，有被动效果T0红色 (200,50,50)特殊装备

2.5 工具函数函数参数返回说明GetRecipeCost(equipId)装备IDnumber递归计算合成总价（所有基础材料价格之和）CanCraft(equipId, ownedItems)装备ID, 背包物品数组boolean检查背包中是否有足够的配方材料

3. UI 层功能拆解（equip_shop.lua）3.1 分类标签栏（左侧）

9 个标签：全部 + 8 种装备类型
选中标签左边有紫色竖线指示器
切换标签时重置滚动位置和选中状态
按类型过滤商品网格
布局：4 列网格，单元格高 42px，间距 3px
每个单元格显示：
选中态：金色边框 + 深色背景
滚动：
布局：4 列网格，单元格高 42px，间距 3px
每个单元格显示：
选中态：金色边框 + 深色背景
滚动：
递归树形结构：从选中装备向下展开到所有基础材料
布局算法：
连接线：父节点底部 → 中间折线 → 子节点顶部
节点显示：
所有权标记：
布局：4 列网格，单元格高 42px，间距 3px
每个单元格显示：
选中态：金色边框 + 深色背景
滚动：
递归树形结构：从选中装备向下展开到所有基础材料
布局算法：
连接线：父节点底部 → 中间折线 → 子节点顶部
节点显示：
所有权标记：
递归树形结构：从选中装备向下展开到所有基础材料
布局算法：
连接线：父节点底部 → 中间折线 → 子节点顶部
节点显示：
所有权标记：
当选中的装备有 upgradesTo 字段时，在合成树上方显示
点击目标装备名可跳转到该装备的合成树
实现了从低阶到高阶的反向浏览
递归树形结构：从选中装备向下展开到所有基础材料
布局算法：
连接线：父节点底部 → 中间折线 → 子节点顶部
节点显示：
所有权标记：
当选中的装备有 upgradesTo 字段时，在合成树上方显示
点击目标装备名可跳转到该装备的合成树
实现了从低阶到高阶的反向浏览
当选中的装备有 upgradesTo 字段时，在合成树上方显示
点击目标装备名可跳转到该装备的合成树
实现了从低阶到高阶的反向浏览
装备名 + 阶级（阶级颜色）
属性行：横排显示所有属性加成
被动效果（橙色，支持自动换行）
价格信息：

设计模式总结（可复用）模式说明点击矩形注册绘制时 addClick() 注册可点击区域，点击时反向遍历命中测试，解耦渲染和交互递归合成树buildTree() → calcTreeWidth() → layoutTree() 三步完成任意深度树形布局消耗式所有权匹配自底向上遍历树，每匹配一个背包物品就减少计数，避免重复标记剩余费用计算复制所有权计数，递归扣除已拥有材料，得出实际还需金额分类过滤 + 滚动按类型过滤 → 重建 ID 列表 → 网格渲染 + 裁剪不可见单元格暗黑奇幻配色方案深紫背景 + 阶级色系（灰/蓝/金）+ 金色金币 + 绿色拥有标记

猜你想搜

taptap 制造装备商店系统

TapTap 制造应用

9.8

前往论坛