要修复 Mac 上 Affinity 导出精灵图集时多出一行或一列的问题,请检查导出矩形的位置、尺寸和输出缩放比例。对于已经排好版的图集,请使用尺寸精确的切片,然后先检查导出的 PNG,再修改图稿。

本指南介绍当前 Affinity 桌面版界面及其切片工作室。此任务是按预期的像素尺寸导出现有精灵网格。Affinity 当前的帮助文档介绍了自定义导出矩形和单独切片输出;以下步骤将直接使用这些控件。

确认多出的像素是否改变了文件尺寸

首先区分两种情况:文件尺寸多出一个像素,以及尺寸正确但边缘带有不需要的像素。两者需要检查的项目不同。记录预期的宽度和高度,然后单独打开导出的文件,检查其尺寸并查看最外侧的行和列。

先用简单的公式计算预期尺寸。例如,一个示例图集包含四个 64 × 64 帧,水平排列成一行,没有边距或间隔,目标尺寸就是 256 × 64 像素。导出为 256 × 65 表示尺寸不符。导出为 256 × 64,但底部多出一行不需要的彩色像素,则表示尺寸正确,但需要检查内容或位置。

检查结果 首先检查 接下来可采取的操作
宽度或高度多出一个像素 导出边界及其位置 设置精确的切片矩形
尺寸差异较大 导出缩放比例和文档 DPI 检查切片的实际输出分辨率
尺寸正确,但边缘看起来不对 图稿位置和可见内容 检查边缘,不要调整图集尺寸
导出内容包含意外的图稿 切片类型或导出区域 选择预期的内容边界

Affinity 区分手绘切片和根据图层创建的切片。手绘切片会包含矩形范围内所有可见图层;根据图层创建的切片只包含其源图层的内容。如果导出的图集中出现附近对象或背景,这一区别就很重要。请参阅使用切片工作室导出。

检查像素位置以及宽高

宽度为整数并不能说明矩形从像素边界开始。以几何图形为例,一个宽 256 像素、X 坐标为 10.5 的矩形,其右边缘位于 X = 266.5。左右两条边都落在像素边界之间。这说明只检查宽度可能会漏掉对齐问题;这并非在说明 Affinity 的确切栅格化公式。

在 Mac 上查看数值时,打开 窗口 > 常规 > 变换。面板提供 X、Y、W 和 H,以及锚点选择器。检查矩形导出区域的左上角位置时,请选择左上锚点。测量值使用当前标尺单位,并相对于标尺原点。相关控件见变换面板。

如有需要,可通过 视图 > 显示 > 标尺 显示标尺,然后按住 Control 键并点按标尺交点,再选择像素。如果之前移动过标尺原点,请双击交点将其重置,再检查坐标。Affinity 在标尺中介绍了这两项操作。

检查导出边界的位置和尺寸,而不要选中所有精灵图稿并将每个数值四舍五入。对于示例中的四帧图集,预期矩形可能是 X = 0、Y = 0、W = 256、H = 64。现有图集也可能从其他位置开始;请使用实际包围帧网格的位置。

如果数值显示精度不足,变换面板帮助文档指出,可以在 设置 > 用户界面 调整小数位数。检查时可提高显示精度。不要仅为了让数字看起来整齐而更改图稿尺寸:缩放可能会改变帧内容。

使用正确的像素对齐设置

打开 视图 > 吸附 并启用 强制像素对齐。Affinity 文档说明,创建、移动或修改矢量对象、节点、控制柄和像素选区时,此选项会将它们吸附到整像素位置。文档还提醒,吸附到处于非像素位置的对象、参考线或网格可能导致结果偏离像素边界,因此在修正时应暂时关闭有冲突的吸附模式。请参阅强制像素对齐。

修正现有的非整数位置时,请关闭 按整像素移动。此选项会限制移动距离,可能保留对象的小数偏移。例如,将 10 加到 X = 10.5 上会得到 X = 20.5。Affinity 在同一份像素对齐文档中明确区分了此行为与强制像素对齐。

将吸附视为编辑辅助功能。移动或调整相关边界后,请再次检查其数值。仅启用吸附选项,并不能确保每个现有对象都已修正。

使用一个精确切片导出排好版的图集

对于现有图集,自定义手绘切片是一种有文档依据的方法,可用于控制导出矩形,而不必让其尺寸随精灵组的边界变化。Affinity 特别建议在切片工作室中使用变换面板,精确调整切片位置和尺寸。请参阅导出切片。

  1. 打开 工作室管理器,必要时启用 切片 工作室条目,然后切换到该工作室。启用工作室条目的操作见自定义工作室。
  2. 选择 切片工具,在已经排好版的图集周围拖出一个矩形。该工具默认位于切片工作室中;快捷键为 S。请参阅切片工具。
  3. 选中手绘切片后,使用 变换 设置其预期位置、宽度和高度。对于示例图集,设置 W = 256 px、H = 64 px,并将其放置在四帧上方。
  4. 打开 窗口 > 常规 > 切片,展开切片条目,并将文件格式设为 PNG。检查尺寸缩放比例和显示的输出分辨率。
  5. 使用所需尺寸对应的导出控件导出,或者只勾选目标切片,然后选择 导出切片。选择目标文件夹并点按 导出。

切片面板文档介绍了文件格式选择、尺寸缩放比例和勾选的导出条目。导出切片说明则分别介绍了导出一个尺寸、一种格式或所有已勾选切片输出的方法。首次诊断性导出时,请选择一个 PNG 输出,这样要检查的文件就不会混淆。

导出前,检查矩形内的可见图层。手绘切片会包含这些图层的内容。如果改为从组或图层创建切片,其初始边界会跟随该项目的范围,输出也只包含这个源项目。请根据预期图集选择相应切片类型,详见使用切片工作室导出。

保留每帧中有意留出的空白。在四帧示例中,即使帧内的图形小得多,每帧仍须保留 64 × 64 的空间。将导出区域缩到可见图稿的范围,会改变你要交付的网格。

检查 DPI,不要想当然地认为 1x 就是预期像素尺寸

Affinity 文档介绍了文档 DPI 与切片工作室的 1x、2x 和 3x 尺寸之间的关系。文档示例显示,如果文档为 72 或 96 DPI,一个 64 × 64 px 的文档在 1x 下会导出为 64 × 64。在 144 DPI 下,文档所示的 1x 输出为 32 × 32,而 2x 会生成 64 × 64。请参阅使用切片工作室导出中的表格。

检查切片上显示的分辨率和生成文件的尺寸。如果缩放比例能解释尺寸不符,请先调整导出设置,再修改帧尺寸。通过更改图集几何尺寸来补偿导出缩放设置,会让源文件更难维护。

如果图集已铺满一个画板,请使用“导出”对话框

如果整个图集位于一个画板上,可以使用 文件 > 导出 > 导出,选择 PNG 预设,并将 区域 设为该画板的名称。检查预览和输出尺寸,选择 询问位置,然后导出并保存。之后可以通过 在 Finder 中显示 找到目标位置。这是导出对话框中介绍的当前 Mac 操作步骤。

请谨慎选择区域。当前的导出设置文档指出,如果文档包含多个画板,选择“整个文档”会为每个画板分别生成图像文件。这样导出多个画板不会将它们合成为一张精灵图集。要导出单张图集,请将帧排列在一个目标矩形内,然后导出该矩形。

“导出”对话框也允许设置不同的输出宽度和高度,并可锁定纵横比。使用这些字段检查预期尺寸。不要一开始就强制将 256 × 65 调整为 256 × 64:更改输出尺寸可能会对图像重新采样,而不是修正原始边界。Affinity 在导出设置中介绍了这些尺寸和重新采样控件。

注意格式和导出限制

如果图集需要透明背景,PNG 是合适的选择;Affinity 在支持的文件格式中明确列出 PNG 支持透明度。如果确实要放大边缘清晰的像素图稿,Affinity 说明 最近邻 是用于硬边图像的重采样选项。它是一种缩放方式,不能修复位置错误的导出矩形。请参阅导出设置。

还要检查可用时的 包含出血 选项。Affinity 文档说明 PNG 可使用此选项,启用后会包含文档中设置的出血区域。如果要求的输出恰好是精灵网格矩形,请关闭此选项。同一份文档还提醒,如果导出内容超过格式允许的最大尺寸,图像会缩放至适合的大小,并在“导出”对话框中显示警告。请参阅导出设置。

有文档说明的切片工作流程可以导出已定义区域,但没有提供自动打包帧、设置动画时间或生成通用精灵图集元数据的步骤。具体来说,批次生成器的文档用途仅限于从 Apple 图标切片生成 Xcode JSON 批次。对于此任务,受支持的做法是自行排列帧并导出其共同矩形,而不是将批次生成器用作图集生成工具。请参阅切片面板。

修改其他内容前,先检查修正后的 PNG

单独打开新导出的文件,并确认三项内容:准确的像素尺寸、最外侧的行和列,以及帧边界。在示例的 256 × 64 图集中,垂直帧分界线应分别位于距左边缘 64、128 和 192 像素处。这些数值直接来自上述四帧布局。

如果文件尺寸现在正确,但仍有不需要的像素,请检查该位置的可见源内容。如果文件仍多出一个像素,请重新检查所选切片、X/Y/W/H 数值、输出缩放比例和出血设置。按这个顺序排查,可以区分边界问题和内容问题,避免反复调整图稿尺寸。

将修正后的导出矩形和导出设置保存在文档中。最终应得到一张尺寸和帧网格都符合预期布局的 PNG。两项检查都通过后,就不必再猜测着从成品文件中删除一行或一列。

来源