跳到正文

图块集边缘扩展

图块之间有细线?扩展图块集的边缘:每个图块都会加上一圈由自身边缘像素组成的边框,缝线在引擎里就消失了。图片绝不会离开你的设备。

在你的设备上生成。你的图片绝不会被上传。

  • 绝不上传
  • 不再有接缝
  • 免费,无需注册

工作原理

如何扩展图块集的边缘

  1. 第 1 步: 添加你的图块集

    选择、拖入或粘贴图块集。图块尺寸会自动推测;如果你的图块是其他尺寸,请修改。

  2. 第 2 步: 设置扩展量

    大多数游戏用 1 像素就够了。点击一个图块并选择“平铺”,看看它的边缘能否对上。

  3. 第 3 步: 下载并导入

    保存 PNG,并把旁边显示的图块尺寸、边距和间距填进引擎。

图块集边缘扩展

拼接处没有缝线的图块

  • 边缘向外重复

    每个图块都会加上一圈由自身边缘像素组成的边框,引擎就不会采样到旁边的图块。

  • 平铺预览

    查看任意图块三乘三平铺的效果,可显示或隐藏边缘线,找出画面本身的接缝。

  • 给引擎用的数值

    新的边距和间距会自动算好,可直接用于 Godot、Unity、Tiled 或 Phaser。

  • 绝不上传

    一切都在你的浏览器中完成,因此你的图片留在你的设备上。

详细说明

图块之间为什么会出现缝线,以及边缘扩展如何解决

图块之间为什么会出现缝线

图块地图从一张大纹理的小矩形里取出每个图块来绘制。当摄像机移动不到一个像素,或地图被缩放、过滤时,引擎会读到矩形外一点点,带进相邻图块的一丝边缘。在屏幕上,这一丝边缘就是移动时闪烁的细线。

边缘扩展会在每个图块四周加上一圈边框,重复图块自身的边缘像素。这样,引擎在图块外读到的颜色与图块边缘相同,也就什么都看不出来了。

使用扩展后的图块集

  • Godot:在 TileSet 的图集设置中,把 Margins 设为这里显示的边距,把 Separation 设为间距。纹理区域尺寸仍是你的图块尺寸。
  • Unity:在 Sprite Editor 中按单元格尺寸切片,Offset 填边距,Padding 填间距。
  • Tiled:添加图块集时,填入相同的 Margin 和 Spacing。
  • Phaser:把边距和间距作为 addTilesetImage 的最后两个参数传入。

检查图块本身

边缘扩展解决的是引擎造成的缝线。画面本身造成的缝线是另一回事:左边缘和右边缘对不上的草地图块,无论怎么打包都会露出接缝。

点击一个图块并选择“平铺”,就能看到它像地图那样三乘三重复的效果。打开“显示图块边缘”,可以清楚看到一个副本在哪里结束、下一个在哪里开始。

图块集边缘扩展

常见问题

我的图片会被上传到哪里吗?

不会。一切都在你的浏览器中、在你自己的设备上运行。你的图片绝不会发送给 Moriqa 或其他任何人,关闭页面后也不会保留任何内容。

应该扩展多少像素?

大多数 2D 游戏用一个像素就够了。如果纹理使用 mipmap、摄像机会拉得很远,或者缝线仍然可见,就用两个或更多。

边缘扩展会改变我的图块吗?

不会。图块保持原有尺寸和每一个像素。改变的只是它们周围的空间,所以图块集会变大,并且需要在引擎里设置边距和间距。

额外间隙有什么用?

它会在扩展后的图块之间加入空白像素。大多数引擎用不到;当某个工具还要求图块之间留有空白时,它就派上用场了。

我的图块集已经有间距了,还能用吗?

可以。打开“你现有的图块集”,填入它的边距和间距。图块会从那里读取,并带着扩展重新排列。

如何检查一个图块是否无缝?

点击该图块,然后选择“平铺”。如果各个副本相接处看不到线,这个图块就能干净地重复。

图块也是你自己画的吗?

Moriqa 的像素画编辑器在像素网格上绘制图块和精灵,并导出给你的引擎,在浏览器中免费使用。