【界面UI】UI 合图自动化：纹理打包流水线与命名规范

完整课程入口：996 全套课程体系 ｜ Lua 学习路径 ｜ 幂尔框架 mirs.cn

实战应用：用在哪里

UI 合图（把零散小图打包成图集）是 DrawCall 合批的前提（合批原理参考前篇）。手工打包的问题：图集更新后忘记重打、重复图散落在多个图集、单图集超限被静默放大。自动化合图流水线把"加图、打包、生成映射"变成一条命令。适用于：全部 UI 图集的管理。

流水线结构

三个环节串成构建脚本：输入清单 → 打包器 → 映射输出。

ui_assets/
  ├─ common/          公共件（按钮、边框、货币图标）→ common.png
  ├─ panels/
  │    ├─ bag/        背包面板专属图            → bag.png
  │    └─ shop/       商城面板专属图            → shop.png
  └─ mapping.json     逻辑名 → 图集+坐标 的映射（构建期生成）

打包器用 TexturePacker 命令行或开源工具（如 free-tex-packer-cli）驱动，每个面板目录产出一个图集，公共目录独立产出。映射文件记录每个逻辑名所在的图集与区域坐标，加载端按映射取图。

命名规范四条

公共图集的资源以 c_ 前缀命名；面板专属资源以面板名前缀（bag_）；同一图集内的图片尺寸差异不宜过大（避免大图挤占空间）；图标类统一尺寸（64x64 或 48x48），异形图单独处理。规范的价值在打包器的分组逻辑可以完全自动化，人工只负责把新图放进正确目录。

流水线接入与验证

打包步骤挂进构建脚本（CI 篇的流水线），图集产出后自动输出两份报告：每个图集的占用率（低于 60% 说明分组合并优化空间）与跨图集引用检测（同一面板引用了两个以上图集即警告）。某项目接入后 UI 图集从 17 张合并到 9 张，主界面 DrawCall 从 88 降到 41。验收以实测为准：合图前后各跑一次主界面帧耗时统计，数字说话。

图集占用的复核周期为每月一次：九张图集里有三张占用率低于 40% 时，说明对应面板的图已经下线或合并，重新打包可以腾出空间。占用户报告进构建输出，图集治理就有了持续的数据依据。