撰写了文章 发布于 2019-07-01 21:50:20
如何开始制作像素画#8——保存与导出
翻译自《蔚蓝》游戏美术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节课正在制作中,请继续关注!

Yoge 1年前
发布