企业官网建设流程全解析

100 张小图合成 1 张纹理：Free Texture Packer 免费纹理打包完整指南

【免费下载链接】free-tex-packerFree texture packer项目地址: https://gitcode.com/gh_mirrors/fr/free-tex-packer

游戏跑在真机上，Profiler 指向渲染：屏幕里散落着 120 张小图，每张都自己发起一次 draw call，中端手机帧率从 60 直接掉到 30。Free Texture Packer（免费纹理打包工具）就是冲着这类问题来的——它用纹理图集（把一堆小图拼成一张大图的技术）把 120 张图收进 1~2 张大图，一次 draw call 就能画完整个屏幕。

它完全免费开源，没有授权费，也不挑环境：浏览器里当网页工具用，或者起一个桌面应用读本地文件夹，两种形态都支持。

🚀 3 步完成首次打包

本地跑起来只需要 3 条命令：

1. 拉取源码：git clone https://gitcode.com/gh_mirrors/fr/free-tex-packer
2. 装依赖：cd free-tex-packer && npm install
3. 启动 web 版：npm run start，浏览器打开 http://127.0.0.1:4000

首次使用就是三步走：拖入一批 PNG（直接丢 zip 压缩包也行）→ 在面板里调纹理尺寸、边距、旋转 → 点打包，下载大图和描述文件。需要读写本地目录？换桌面版npm run start-electron。要部署产物？npm run build-web一条命令出 web 构建。

哪些功能真正用得上

自动布局、旋转、修剪。这是核心。你只交出图片文件，它负责把每张图四周的透明边裁掉，必要时再转 90° 塞进空隙。得到的是更高的空间利用率：同样 1024×1024 的图集，原来塞 30 个精灵，现在可能塞下 40 个，sheet 数量直接少一张。

18 种导出格式一键切换。JSON、XML、CSS，加上 Phaser、Godot、Spine、cocos2d、Unity、Unreal Paper2D 的专用模板，完整清单见导出格式列表。与其手工对照坐标写映射文件，不如直接拿引擎认得的那份，拖进工程就能用。

自定义模板，格式不够就自己写。所有导出走 Mustache 模板，模板里能取到精灵列表、导出配置、应用信息三个对象（字段说明在README里）。自家格式不在清单里？改一个模板文件就行，不用动源码。

反向拆图。拿到别人给的图集却找不到原始素材时，内置的拆图工具支持网格、Spine atlas、JSON、XML 等格式反解回小图，入口在拆图面板。老项目抢救、排查他人资源时很救命。

另外它自带 TinyPNG 压缩支持，服务端 PHP 代理在server/tinify.php，打包完顺手压一遍，图片体积能再降一截。

⚙️ 原理一瞥：为什么它排得这么满

布局核心是 MaxRects 算法（最大矩形装箱的一种变体）。思路很直白：在画布上维护一批"空闲矩形"，图片从大到小逐个入场，每张都挑一个最优落点。算法封装里提供 Smart/Square 四种策略：Smart 看谁剩余边短，Square 尽量往正方形填，不同策略适合不同图集。剩余空隙是条细缝时，长条精灵正好能插进去——利用率大头就来自这种缝隙填补。

导出侧则是"模板驱动"：布局结果只是一份矩形坐标数组，模板决定写成什么样子。所以新增一种格式就是一个 .mst 文件，主流程一行不改。

整个应用还拆成了两层：平台层为 web 和 electron 各实现一套文件读写与下载（见平台适配目录），打包、导出、UI 逻辑两者共用。这也是网页版和桌面版行为几乎一致的原因。

同一批参数，在三个场景里结果不一样

共同点就一条：图越少，请求越少；排得越紧，GPU 内存越省。

🛠 进阶 & 避坑：动手前先看这三条

• 旋转不是万能的。导出清单里 UIKit、Unity3D、Egret2D 等格式明确不支持旋转（对照格式列表里的 allowRotation 字段）。开旋转后引擎又不认，精灵会以歪掉的角度摆放，用之前先查引擎文档。
• 依赖偏老，注意 Node 版本。项目工具链是 webpack 4 时代的，最新版 Node 上npm install可能报错，建议 Node 16 试试，别在升级依赖上浪费时间。
• 写模板前先认清三个对象。模板只能访问 rects、config、appInfo，引用别的变量会输出空。照抄 README 里的示例模板再改，十分钟就能出活。

还有一条坦诚的提示：作者在 README 开头声明只修关键 bug、不再大改。生产使用建议固定到某个版本，别追着 master 走。

下一步，你可以

别急着谈架构，先拿一个真实项目里的图片目录拖进去，用 4 种打包策略（Smart × 边/面积）各跑一遍，对比 sheet 利用率。然后按顺序做三件事：

1. 用引擎官方格式导出一次，接进工程验证坐标和旋转正确；
2. 格式不满足时，照着 README 的三个对象写一个自定义模板；
3. 图集过大要分包时，用拆图工具按网格切开，再抽查几张确认没拆错。

纹理图集只是渲染优化里的一小步，但通常是投入产出比最高的一步——从它做起。

【免费下载链接】free-tex-packerFree texture packer项目地址: https://gitcode.com/gh_mirrors/fr/free-tex-packer