翻译自《蔚蓝》游戏美术Pedro Medeiros专栏

本文是《如何开始制作像素画》系列教程的第八课，这里主要介绍一些图片格式知识和软件文件导出等技术性问题，你可以挑选自己感兴趣的部分阅读。

1.位图和矢量图

计算机保存2D图像的方式主要有两种：位图和矢量图。

矢量图是记录点、线坐标和颜色信息的集合，这使得它任意缩放大小，而不影响图像的清晰度。矢量图主要的缺点是很难描述细节，虽然也可以在矢量图上创建类似于像素画的作品，或者将像素画导出为矢量图格式，但很少这样做。除非，你要把像素画打印到一个特别大的广告牌上。

<circle cx=“50”cy=“50”r=“40”stroke=“black”stroke width=“3”fill=“red”/>

上图粗体字部分记录了红色球图像的信息，是标准的矢量图

有了位图，所以诞生了像素画。位图将图像分解成一个个像素点打印在屏幕上，每个像素点单独保存。

位图的保存方式示例

以这种方式保存文件，有时会非常大。1080 x 1920图像意味着需要存储2.073.600个单独的像素，因此有时需要使用图像压缩的手段来保存位图。

2.图像压缩

图像压缩是为了减小图像文件的大小，但它也可能会损坏文件。压缩一般可以分为有损和无损两种。有损压缩通常在处理照片或大型插图时很好，但在保存像素画时效果并不好。将一个像素画保存为JPG，会导致图像的随机颜色变化和奇怪的图像伪影。因此，压缩像素画时，我们应该经常检查是否使用无损压缩，如png。

PNG（无损）与JPEG（无损）

通常情况下，您使用的编辑器支持的图像格式（如aseprite的.aseprite或graphicsgale的.gal）都能保持文件的所有层和元数据。

3.在Aseprite中保存

在Aseprite中，可以使用“保存”对话框保存文件（保存到新文件时使用ctrl+s或ctrl+shit+s）。

Aseprite保存对话框

很直观，对吧？使用此选项可将文件保存为.aseprite格式并保留所有文件信息，以便以后如需要进行更改。

4.导出预览

当你画完像素图后，您可能希望将其发布到网上。但如果您只是将其另存为.png，则会发生两件不好的事情：一是将图像保存在扁平文件中，这意味着没有图层或元数据；二是，您的png可能如下所示：

这块石头太小了，看不到任何细节

保存图像的正确方法是使用“导出”对话框，可以在“文件>导出”菜单中访问该对话框。 

Aseprite导出文件菜单

这个对话框很棒，有很多有用的选项。让我们挨个介绍：

（Output File）输出文件：文件名。您可以简单地键入您想要使用的文件扩展名，Aseprite将以该格式保存它。我建议静态图像使用“.png”，动画使用“.gif”。

（Resize）调整大小：像素图片对于今天的显示器来说通常太小，所以我们需要调整它的大小。Aseprite通过给你多个分辨率以适应不同屏幕的需求。

整数倍缩放与非整数倍缩放

您可能注意到，您只能将图像的比例增加100%，但不能增加分数，例如250%。这是因为如果你将它缩放到一个不完整的数字，你的像素艺术就会显得破碎和怪异。这是像素艺术媒介的一个很强的局限性，始终使用整数（200%、300%等）调整艺术效果，而不使用分数（130%、250%）。

（Layers）图层：当你导出一个文件时，你会将它展平，这意味着它会丢失所有图层信息。这是一个方便的选项，允许您选择要保留的图层。

（Frames）帧：我将在下一节课中详细介绍，但这里是您选择要导出哪些帧的地方。如果有多个帧，可能会发生两件事： 如果以支持动画的格式（如.gif）保存，则会导出动画。如果以不支持动画的格式保存（如.png），则aseprite将把它保存在多个文件中，每个帧一个文件。（Animation Direction）动画方向：在这里，您可以看到最常见的方向，如“向前”、“向后”等，选择最适合您的动画的方向。它们应该是非常直观的，但是如果你想知道更多，请自己动手试试看。

（Apply pixel ratio）像素比：这不是很常用，用于修改最基础的像素形状，比如一个像素是正方形还是长方形。 

（Export to Twitter）导出到Twitter：勾选后会使动画的最后一帧有一半的持续时间，完美适合发布到Twitter 上！

5.为游戏引擎保存

• 游戏引擎各不相同，每一个引擎都需要你做特定的素材处理，但依然有一些通用的规则：文件格式：虽然有些引擎会兼容TIFF、GIF甚至BMP等格式，但使用PNG通常是个好主意。它轻便，解包速度较快，并且具有很好的透明度支持。不要使用JPG、MP4或任何其他有损压缩格式。
• 除非你有一个很好的理由，否则永远不要为了输出到游戏引擎而缩放你的像素画。理想情况下，图像应该由引擎进行缩放，所有文件都应该保持原有的分辨率。
• 动画应保存为图像序列或精灵表。不要尝试使用任何视频格式，除非您正在做一些非常特别的事情。

6.保存图像序列

将动画保存为PNG时，Aseprite将创建一个图像序列，如下

在Aseprite上将动画导出到PNG

有时这就足够了，但我更喜欢从零开始，我也喜欢有两个数字。幸运的是，这也很容易做到：在文件名字段中，只需键入文件名，然后键入“00”。在本例中，我将文件命名为alert00.png，结果是：

你可以试试在文件的末尾添加不同的数字

另一个非常有用的技巧是使用多个动画标签。在Aseprite中，可以选择帧组并创建标签。这样，您就可以拥有一个具有多个动画的文件。看起来是这样的：

带有多个动画标签的时间线

这对于管理和导出动画来说非常简单，只需键入boss_{tag}_{tagframe00}，将导出如下文件：

很方便吧！如果您想要更多或更少的零，只需将tagframe00更改为tagframe000或tagframe。

7.保存精灵表

一些游戏引擎喜欢使用精灵表素材而不是多个图片，我们可以使用文件>导出精灵表命令自动导出它们。

“导出精灵表”对话框

在这里，我们可以选择各种选项，其中大部分将由您使用的引擎决定。有些需要在图像中增加边距，有些需要提供JSON描述，有些支持剪裁透明度。如果您使用的是3D引擎，挤出命令可以使所有精灵的边框围绕一个额外的像素进行拉伸，以避免3D引擎上的接缝。如果不确定，不要选择任何选项。关于行和列的数量，如果您的引擎不需要任何特定的内容，我建议您选择“最适合纹理（best fit for texture）”，让Aseprite计算最佳大小。

8.切片

最后一个非常有用的技巧是切片。切片工具非常适合在一张画布上制作多个图像，尤其在制作游戏场景道具时特别有用，可以让不同物体来比较大小。 第一步是将所有的精灵图像放在一个文件中。注意，不要让它们在矩形区域重叠。

下一步，选择切片工具并把单独的图像切割开来，注意不要把其他图像的内容切割进来。之后，您可以双击其中一个（或右键单击并查看属性），然后为其选择一个名称。 

切片完成，选择一个

第9节课正在制作中，请继续关注！