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 条命令拉取源码git clone https://gitcode.com/gh_mirrors/fr/free-tex-packer装依赖cd free-tex-packer npm install启动 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 逻辑两者共用。这也是网页版和桌面版行为几乎一致的原因。同一批参数在三个场景里结果不一样场景之前用了之后2D 网页游戏Phaser86 个精灵 PNG 逐张加载86 次请求加载条爬得慢合成 2 张 1024² 图集 2 个 json请求 86 → 4换帧不再重新传图电商 H5 活动页40 个图标各 20~80KB还带透明边距修剪 压缩后整页图片体积约缩到 1/3请求 40 → 1Godot 桌面游戏UI 元素各自独立贴图显存浪费明显直接导出 Godot atlas.tpsheet拖进工程即识别旋转开启后空隙明显变少共同点就一条图越少请求越少排得越紧GPU 内存越省。 进阶 避坑动手前先看这三条旋转不是万能的。导出清单里 UIKit、Unity3D、Egret2D 等格式明确不支持旋转对照格式列表里的 allowRotation 字段。开旋转后引擎又不认精灵会以歪掉的角度摆放用之前先查引擎文档。依赖偏老注意 Node 版本。项目工具链是 webpack 4 时代的最新版 Node 上npm install可能报错建议 Node 16 试试别在升级依赖上浪费时间。写模板前先认清三个对象。模板只能访问 rects、config、appInfo引用别的变量会输出空。照抄 README 里的示例模板再改十分钟就能出活。还有一条坦诚的提示作者在 README 开头声明只修关键 bug、不再大改。生产使用建议固定到某个版本别追着 master 走。下一步你可以别急着谈架构先拿一个真实项目里的图片目录拖进去用 4 种打包策略Smart × 边/面积各跑一遍对比 sheet 利用率。然后按顺序做三件事用引擎官方格式导出一次接进工程验证坐标和旋转正确格式不满足时照着 README 的三个对象写一个自定义模板图集过大要分包时用拆图工具按网格切开再抽查几张确认没拆错。纹理图集只是渲染优化里的一小步但通常是投入产出比最高的一步——从它做起。【免费下载链接】free-tex-packerFree texture packer项目地址: https://gitcode.com/gh_mirrors/fr/free-tex-packer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 100 张小图合成 1 张纹理：Free Texture Packer 免费纹理打包完整指南
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 条命令拉取源码git clone https://gitcode.com/gh_mirrors/fr/free-tex-packer装依赖cd free-tex-packer npm install启动 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 逻辑两者共用。这也是网页版和桌面版行为几乎一致的原因。同一批参数在三个场景里结果不一样场景之前用了之后2D 网页游戏Phaser86 个精灵 PNG 逐张加载86 次请求加载条爬得慢合成 2 张 1024² 图集 2 个 json请求 86 → 4换帧不再重新传图电商 H5 活动页40 个图标各 20~80KB还带透明边距修剪 压缩后整页图片体积约缩到 1/3请求 40 → 1Godot 桌面游戏UI 元素各自独立贴图显存浪费明显直接导出 Godot atlas.tpsheet拖进工程即识别旋转开启后空隙明显变少共同点就一条图越少请求越少排得越紧GPU 内存越省。 进阶 避坑动手前先看这三条旋转不是万能的。导出清单里 UIKit、Unity3D、Egret2D 等格式明确不支持旋转对照格式列表里的 allowRotation 字段。开旋转后引擎又不认精灵会以歪掉的角度摆放用之前先查引擎文档。依赖偏老注意 Node 版本。项目工具链是 webpack 4 时代的最新版 Node 上npm install可能报错建议 Node 16 试试别在升级依赖上浪费时间。写模板前先认清三个对象。模板只能访问 rects、config、appInfo引用别的变量会输出空。照抄 README 里的示例模板再改十分钟就能出活。还有一条坦诚的提示作者在 README 开头声明只修关键 bug、不再大改。生产使用建议固定到某个版本别追着 master 走。下一步你可以别急着谈架构先拿一个真实项目里的图片目录拖进去用 4 种打包策略Smart × 边/面积各跑一遍对比 sheet 利用率。然后按顺序做三件事用引擎官方格式导出一次接进工程验证坐标和旋转正确格式不满足时照着 README 的三个对象写一个自定义模板图集过大要分包时用拆图工具按网格切开再抽查几张确认没拆错。纹理图集只是渲染优化里的一小步但通常是投入产出比最高的一步——从它做起。【免费下载链接】free-tex-packerFree texture packer项目地址: https://gitcode.com/gh_mirrors/fr/free-tex-packer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考