20 - 俯视角图块 - 1
引言
和大多数像素艺术发明一样,图块也是受限于技术而诞生的产物。在计算机内存非常有限的年代,开发者巧妙地将所有画面分割成可以重复排列、无缝拼接的小方块图像,从而有效地填充屏幕。这些小方块以网格形式排列,因此被称为图块,原因显而易见。图块不仅能大幅降低内存占用,还能显著缩短关卡美术的制作时间。此外,基于图块的环境结构严谨,为游戏玩法提供了合理的基础。如果运用得当,图块可以创造出与像素艺术完美契合的统一美感。即使在如今计算机和美术创作工具如此强大的时代,基于图块的图形技术依然经久不衰。
这是我为构建一个连贯的俯视游戏世界而制作的系列课程的第一课,这些课程环环相扣,循序渐进。本课我将重点讲解几种不同的 16x16 像素图块,并采用俯视 3/4 投影方式。我认为这是一个学习制作图块的好起点,因为小图块很容易编辑,而且无需背景图块即可制作完整的场景。

虽然基于图块的图形设计可以被视为一种经济实惠的方法,但千万别因此就认为制作图块很容易。图块制作是一门精细的艺术,需要对细节一丝不苟。尽管重复是其魅力的一部分,但你也不希望图块过于显眼。诀窍在于将图案巧妙地隐藏在一致且不分散注意力的纹理之中。
草地图块
经典的草地图块。精彩的旅程就此开始。它看似简单,但要在如此少的像素范围内,制作出能够完美平衡、铺满大面积且美观的草地图案,却并非易事。

最终,即使纹理图块再精美,单一的草地纹理也会显得单调乏味。我发现,将平坦的绿色区域与不同植被密度的纹理区域混合使用效果很好,这样可以创造出赏心悦目的渐变效果。这种变化感觉很自然,而留白则有助于减少视觉干扰,让环境更加通透。别忘了偶尔添加一些花卉,为画面增添一抹生机。

泥土砖
有草的地方肯定有泥土。让我们开始挖掘吧!

您很可能想要将草地和泥土砖块组合在一起。在这种情况下,重要的是要考虑哪种风格能与草地砖块完美搭配。干燥龟裂的泥土、泥泞的泥浆、平坦的黏土;泥土的质地和颜色多种多样。考虑一下您周围环境的地质情况也很有帮助。
连接砖块
现在,我们将把草地和泥土砖块巧妙地连接成一组连接砖块。我猜您一定迫不及待了吧!

我决定将干燥的泥土纹理与简单的绿色草地结合起来,因为纹理丰富的泥土图案与轻盈的草地纹理形成了鲜明的对比。不过,并没有绝对的对错之分。您可以尝试不同的纹理组合和草地边缘样式。一旦您拥有了草地图块、泥土图块和一套连接图块,就可以开始真正享受将这些图块排列成关卡地图的乐趣了!当然,对于游戏关卡来说,这仍然有点简单,但至少您可以创建一个有趣的基础地形,以此为基础构建您的世界。更多内容将在下一课中介绍!
要点
平衡 - 力求使图块内的视觉重量分布均匀。如果图块的任何区域视觉上过于突出,图案就会显得过于明显。添加一些与边缘重叠并环绕图块的图案簇,以帮助隐藏接缝。
一致性 - 定义关键的图案簇和形状,并在多个位置重复使用,以创造令人愉悦的一致性。避免关键图案簇与其他关键图案簇接触,因为它们会聚集形成不规则的图案簇,从而产生杂乱感。角对角拼接是可以的。
限制颜色 - 只需几种颜色就能做出丰富的纹理。颜色过多会导致纹理模糊。此外,纹理图案中强烈的对比色可能会产生令人不悦的噪点。
对比度 - 在同一场景中组合不同的纹理时,要考虑对比度。一个纹理繁复的纹理旁边紧挨着另一个纹理繁复的纹理,可能会因为过多的噪点而使眼睛疲劳。留白是你的好帮手。
镜像 - 通常,只需镜像图块即可创建不同方向的图块。这可以节省时间,而且对称性可以营造出令人愉悦的统一视觉效果。
分辨率 - 你可以制作任意大小的图块,但越大越费力。对于像素画来说,超过 32x32 像素的尺寸似乎有点过大。16x16 像素可能是最常见的尺寸,并且能够充分展现像素的魅力。
软件
为了熟练地制作图块,能够实时查看接缝的连接方式至关重要。有些软件缺少这项功能,而有些软件在这方面做得更好。以下是我熟悉的几款软件中制作图块的一些信息。
Pyxel Edit
我购买这款软件就是为了制作图块,因为它专门设计用来简化这个过程。它主要通过允许您创建图块并将其保存到图集中来实现这一点,然后可以将图块添加到图块地图上。您可以编辑任何已放置的图块,它会实时更新所有图块,使您能够在构建场景时轻松地调整图块。

这款程序界面简洁,悬停提示清晰,操作简单易上手。要创建新图块,请点击图块窗口中的“+”按钮。使用图块放置工具(a)在画布上放置任意数量的图块,然后在任意图块上绘制,即可看到它们自动填充。按下 Tab 键可以显示图块的放置位置,方便您记住空白图块的放置位置。这一点很重要,因为您也可以在不使用图块的情况下,在任何图层上自由绘制。
Aseprite
我使用这款程序创建图块的次数不多,但它似乎提供了一个合理的工作流程。据说他们正在开发一个功能齐全的图块编辑器。等它发布后,我一定会试用一下。

目前最方便的功能是“平铺模式”。首先,创建一个大小与你想要制作的图块完全相同的小画布。然后,在菜单栏的“视图”下启用“平铺模式”,并选择图像平铺的轴。


现在您可以看到图像图块以及您绘制的任何内容都会在所有单元格中实时更新。只需点击几下即可轻松制作图块!
Photoshop
我几乎所有事情都用 Photoshop 处理,除了制作图块。不过,如果您花时间自定义设置并运用一些技巧,制作图块也会变得相当容易。

对于一般的工作流程,请将每个图块制作在单独的图层上,并将完成的图块整理到一个单独的项目文件中,该文件可以用作图块图集。

图案填充功能可用于创建图块。选择要转换为图案的区域,然后在菜单栏的“编辑”下选择“定义图案”。在随后的提示中为图案命名。

保存图案后,选择画布上要用图案填充的区域,然后在菜单栏的“编辑”下选择“填充”。

在填充选项窗口中选择“图案”。

选择图案,然后点击“确定”。图案将自动平铺,填充您在画布上选择的区域。

虽然 Photoshop 没有平铺模式或实时更新功能,但智能对象提供了一个近似的替代方案。要创建智能对象,请右键单击/按住 Control 键单击图层,然后选择“转换为智能对象”。在这种情况下,图层上应该只有一个图块。您无需精确选择图块,只需选择图层并将其转换为智能对象即可。

将图块转换为智能对象后,您会在图层上看到一个小的文档图标。双击此图标,或右键单击/按住 Control 键单击图层,然后选择“编辑内容”。

将图块转换为智能对象后,它会在一个单独的文件中打开。现在您可以在此窗口中进行编辑,保存(Command + S)后,更改会立即显示在包含该智能对象的主项目中。这几乎就像实时更新一样,您只需每次想要查看更改时都保存即可。
对于任何像素艺术设计,无论您使用什么程序,打开一个预览窗口以缩小视图显示场景都非常有帮助,这样您就可以在专注于特定图块/区域的同时,查看它在正常观看距离下的效果。基本上,它省去了不断放大和缩小的麻烦。
我通常不太重视软件,但在制作图块时,软件却至关重要。就我个人而言,在开始使用 Pyxel Edit 之前,我一直苦于制作图块。不过,我只用它来制作图块,其他几乎所有工作我都更喜欢用 Photoshop。总之,要利用你现有的、你能负担得起的工具。总会有办法的。
结语
说实话,制作这个教程对我来说是最具挑战性的,但我很高兴我最终完成了它。在这个过程中,我学到了很多。我希望这些教程和技巧能帮助你成为像素画大师。我计划在下一篇像素博客中继续讲解更多俯视视角的环境物体,并最终创建一个俯视视角的动画角色。敬请期待,我会不断完善这个世界,并分享我的知识和素材。
