Free Texture Packer一张纹理图集把上百张精灵的 Draw Call 压回个位数【免费下载链接】free-tex-packerFree texture packer项目地址: https://gitcode.com/gh_mirrors/fr/free-tex-packerFree Texture Packer 是一个开源的纹理图集sprite sheet打包工具把几十上百张零散小图拼进一张大图并自动输出各游戏引擎要的坐标描述文件。如果你在做 2D 游戏或图标密集的网页浏览器里拖几下就能得到一张直接进引擎的图集同屏渲染压力通常比不打包时小得多。当精灵图多到引擎开始抱怨一个典型的 2D 横版游戏武器特效帧 120 张、UI 图标 30 张共 150 张小图。不打包直接渲染引擎每帧要为它们发出约 150 次 draw call每一次都打断渲染批处理集显笔记本上帧率很容易掉到个位数。手工修这个问题是设计工具里排版—量坐标—手写 JSON三步走50 张图耗掉一个下午不稀奇改一张还得重来。Free Texture Packer 把它缩到两步图片拖进列表点打包。就这么两步。拆开内核纹理图集是怎么被排出来的整条链路集中在src/client/PackProcessor.js输入→处理→输出一次讲完。用 MaxRects 算法排布纹理图集的一条完整链路输入是图片列表加一组打包参数处理分四步去重——按 base64 逐张比对完全相同的图只在图集里占一个位置导出时把名字找回来修剪——Trimmer 扫描 alpha 通道裁掉四边透明区域原位置记进spriteSourceSize打包——调用 maxrects-packer 依赖库每张图拿到 (x, y) 坐标多页——放不下的自动开第二张 sheet循环直到全部塞进为止。输出是每个精灵的最终 frame 坐标加旋转、修剪标记交给导出层生成描述文件。它比朴素做法好在哪按尺寸顺序硬排的朴素方式边缘总会留长条空隙MaxRects 每次把剩余空间切成一组最大矩形再逐个评估候选位置默认走 MaxRectsBin 的 BestShortSideFit 策略那些缝隙能被利用起来。OptimalPacker 自动遍历打包组合按效率择优在界面里选Automatic时OptimalPacker 会把打包器 × 策略 × 是否允许旋转的所有组合都跑一遍给每组结果打分sheet 数量少的优先数量相同时空间利用率精灵总面积 ÷ sheet 总面积高的优先。真正影响结果的参数对照参数控制什么width/height图集尺寸开powerOfTwo时强制取 2 的幂padding相邻精灵之间的间隔extrude边缘向外额外扩张alphaThreshold修剪的 alpha 阈值0–255allowRotation允许 90° 旋转摆放detectIdentical相同图片去重这一步最常被忽略padding不设的话精灵边缘紧贴引擎采样时容易出现发丝白线。导出 16 种格式、导入已有纹理图集src/client/exporters/list.json里每一项对应一个 Mustache 模板pixi.js、Phaser 3、Godot、Spine、cocos2d(plist)、Unity3D、CSS、JSON hash/array 共 16 种留了一个 custom 位引擎格式特殊就自己写十几行模板。反方向也通src/client/splitters/里带着 JSON、XML、Spine、UIKit(plist)、固定网格图的识别器把旧图集拖进去能解析出精灵再重新打包。两个典型场景重排游戏图集再吃一遍旧 Spine 文件场景一2D 网页游戏pixi.js / Phaser——把 150 张特效帧和图标装进一张图集。图片拖进列表尺寸设 2048×2048勾选旋转与修剪特效图透明边通常很多选 Phaser 3 或 pixi.js 格式点打包下载 png json 一起扔进项目可量化对比这批精灵的每帧 draw call 通常可预期从约 150 次降到 1–2 次。场景二重打一份旧 Spine / plist 图集——老图集当年手打利用率低现在要换格式或压尺寸。直接拖.atlas文件Spine splitter 自动识别改导出格式顺手开上修剪重新打包替换旧文件可量化对比原 1024×1024 图集利用率若只有 60% 上下重打后通常可预期到 80% 以上同一批精灵往往能装进更小的纹理显存按面积比例下降。从 clone 到打包出第一张纹理图集的 5 步克隆仓库git clone https://gitcode.com/gh_mirrors/fr/free-tex-packer装依赖cd free-tex-packer npm install依赖是 webpack 4 / Electron 4 一代建议 Node 12–16起 Web 版npm run start浏览器打开http://127.0.0.1:4000起桌面版npm run start-electronwin / mac / linux生产构建npm run build-web或npm run build-electron跑通之后可以往哪走往src/client/exporters/丢一份 Mustache 模板UI 里就能选自己的导出格式项目配了 webpack / gulp 插件打包能直接挂进构建管线接 TinyPNG key 可顺带批量压缩走server/下的 PHP 代理作者在 README 里已声明不再有时间维护、只修关键 bug功能集基本冻结适合当作稳定的现成工具用。打包跑在浏览器里几千张大图的超大素材组建议分批处理。代码在 gitcode 的 gh_mirrors/fr/free-tex-packer 仓库可查。【免费下载链接】free-tex-packerFree texture packer项目地址: https://gitcode.com/gh_mirrors/fr/free-tex-packer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考