跳到正文
AI Sprite Maker

网格叠加工具

放大精灵图或瓦片集,并把网格画在像素之间而不是像素上。适合教程、瓦片集文档和对齐检查。

  • 免费
  • 本地运行
  • 无需注册
预览

载入一张图片开始。

所有处理都在你的浏览器中完成。文件绝不会上传,页面加载后即使离线也能使用。

网格叠加工具使用方法

  1. 拖入精灵图、图集或瓦片集。单元格尺寸会根据帧网格自动推测。
  2. 设置单元格宽度和高度(16×16 和 32×32 一键设定),如果瓦片不是从 0,0 开始,再设置偏移。
  3. 选择线条颜色、不透明度和宽度;如果想分区,每 2、4 或 8 格添加一条主网格线。
  4. 选择导出缩放倍数,网格线会位于放大后的像素之间。
  5. 下载 PNG。

你能得到什么

  • 带单元格网格的放大 PNG
  • 可选的 1px 细网格和主网格线
  • 可选的外边框

来自游戏开发实战的技巧

  • 教程请使用 8× 或更高的缩放。在 1× 下网格线只能覆盖像素,会挡住画面。
  • 选一个调色板中没有的线条颜色(通常青色或洋红就行),免得读者把线条和画面混淆。
  • 当你要说明一个由 16×16 瓦片拼成的 64×64 房间时,每 4 格一条主网格线很有帮助。
  • 在导入 Tiled 或引擎之前,可以用偏移栏检查瓦片集是否带有 1px 边距。

适用场景

  • 为团队或商店页面制作瓦片集说明
  • 制作像素画教程和分步图
  • 检查精灵图与 16 或 32 px 网格的对齐
  • 为关卡设计师准备参考图

常见问题

网格会遮住我的像素吗?
缩放 2× 及以上时,线条画在放大后像素之间的边界上。在 1× 下像素之间没有空间,线条会替代一排像素。
能用非正方形网格吗?
能。单元格宽度和高度可以分别设置,16×24 或 32×16 的网格都没问题。
像素网格选项是什么?
在单元格网格下方显示一层淡淡的 1 像素网格,缩放 4× 或以上时显示,方便逐个数像素。
导出的 PNG 有多大?
原始尺寸乘以导出缩放倍数。最终尺寸显示在下载按钮下方。
我的图片会被上传吗?
不会,所有内容都在你的浏览器中绘制。
全部免费工具 →