跳到主要内容

43 - 俯视角图块 2

原文地址

img

引言

我们之前已走过这条路,通往充满奇趣像素艺术的绿色牧场。当然,我指的是图块设计的乐趣。最初,图块是为了节省20世纪性能羸弱的电脑的宝贵内存而使用的。在现代,没有了这些限制,有些人可能会质疑图块的用途。诚然,从技术上讲,创建大型自定义素材是可行的,但从制作的角度来看,这有多大可行性呢?素材越大,制作所需的时间就越多。此外,还要考虑修改已经拼接在一起的大型图像布局的难度。更重要的是,使用图块进行设计本身就带有我们如此钟爱的像素艺术游戏的复古美感。无论你喜欢还是讨厌,都不可否认使用图块创建环境的经济性。虽然用图块布局环境轻而易举,但真正的挑战在于设计一套美观且易于使用的图块集。在本课中,我们将通过将各种环境纹理融入到一组统一的俯视角的图块中来应对这一挑战。

草地与泥土

img

回到正题,这并非我第一次讲解草地和泥土图块的制作。不过,这次我采用了分层方法,图块种类比我在 Pixelblog 20 中的作品更多。通过移除一些未填满整个图块空间的纹理的背景(如草地和岩石泥土示例所示),可以将某些图块分层,从而实现不同的纹理组合。这样就无需将纹理烘焙到各自的图块变体中。我认为,虽然需要管理更多图层,但这样的权衡是值得的。

任何图块集的第一步都是创建基础重复纹理,该纹理必须在所有四个边上都能很好地循环。之后,可以通过从基础纹理中截取部分区域来创建所有边角变体。创建基础重复纹理图块时,应格外注意视觉平衡。目标是在尽可能隐藏图块图案的同时,创造出逼真的纹理效果。视觉平衡和集群工作的一致性是设计中的关键要素。此外,软件也会影响设计的难度。使用能够实时查看图块连接的程序至关重要,例如 Pyxel Edit 或 Aseprite 的图块模式。如需更多图块设计基础技巧,我建议参考 Pixelblog 20 中的关键点。

岩壁

img

我喜欢先从正面墙面纹理开始制作墙面贴图。和地面纹理一样,目标是让它在所有四个面上都能完美衔接。更进一步,墙面纹理还必须与相邻的斜面、墙顶和地面衔接起来。

正面纹理完成后,很容易就能将其以 45 度角重新绘制。然后,只需稍作修改,就可以重复使用斜面纹理图块的一部分,创建底部连接图块和部分顶部连接图块。此外,还可以将斜面纹理反射并交换颜色,从而创建墙面的另一侧。请注意以上亮点中提到的这些简单的纹理循环利用技巧。

当在悬崖上添加平台时(如上图第 4 层所示),朝前的倾斜部分与重叠的墙面纹理无法完美衔接。因此,应将重叠的墙面纹理替换为合适的三角形图块,使其与第 3 层的地面衔接。

阴影可以增加必要的深度,但其设计必须谨慎,以避免与精灵和其他图块发生冲突。此外,最好将其限制在一到两个墙面上,并注意光源,且长度不应超过一个图块。无论岩壁有多高,所有阴影的长度都相同。虽然这并不现实,但这种效果足以以假乱真,只有仔细分析场景才能注意到。对比有阴影和无阴影的环境,阴影的影响显而易见。绝对值得付出努力。

沙滩和水

img

最后,除了常见的泥土、草地和岩石之外,我还添加了一些环境元素。我承诺会在后续功能中加入更多独特的纹理,但我觉得有必要对基础纹理进行一些更新。至于沙子纹理,我喜欢用长而倾斜的“S”形线条来营造出令人愉悦的波浪图案。为了避免看起来过于人工化,可以添加一些不规则的线条来打破波浪的形状。如果连接起来的线条太多,看起来就像拉面一样。

另一方面,水是由波浪状的、相互连接的斑点状图案构成,这些图案由单像素宽的线条组成。我喜欢先画一个斑点,然后从它延伸出分支线条,最终连接起来形成一个斑点网络。接下来,最好在某些地方断开线条,以保持图案的流畅感。最后,添加一些高光来增加光泽,并添加阴影来增加深度。阴影的位置可以在亮线下方几个像素处添加一个粗略的投影。

要制作水动画,请使用相同的方法制作另一个水纹理图块,但使用不同的图案。然后,您可以在这两个帧之间进行过渡,从而创建一个简单却又令人惊喜的水动画。某些纹理组合的效果会比其他组合更好。尝试旋转和反射纹理,看看哪些组合能带来最佳的流畅效果。

一种动画风格是在水 A 和水 B 之间进行硬切。这可能看起来有些突兀,但如果游戏整体具有复古美学风格,例如 Pixelblog 36 中所示,这种风格就非常合适。然而,在这个版本中,我添加了一个帧,通过将最上层水图层的透明度降低到 50% 来使图块图层融合在一起。我的灵感来自我在老式动画中看到的技巧。这几乎简单得可笑,但与半透明纹理一起使用时,效果却很理想。请注意,帧速度也会极大地影响动画效果。速度太快,会感觉像噪点;速度太慢,会显得卡顿。但只要速度恰到好处,只需两帧就能达到逼真的效果。

Scene_1.gif

Scene_2.gif

Scene_1.png

上面的场景将所有地形概念和各种纹理组合融为一体,形成一个无缝的景观。请注意阴影是如何帮助将岩壁融入地面,使其与泥土、草地和沙地流畅衔接的。

结语

图块设计总是从简单的开始,但很快就会变得繁琐。我这套图块的初稿只用了一天多一点的时间就完成了,但之后却花了一周多的时间来平衡和调整所有连接。当图块有多个连接点时,需要大量的尝试和不断修正错误。例如,角落图块需要与侧边图块连接,同时也要与其他角落图块连接。与任何像素艺术一样,为了保证可读性,考虑颜色和对比度也很重要。为了避免出现问题,最好先创建一个包含所有图块及其连接方式的粗略模板。然后,只要使用我之前提到的支持图块设计的应用程序,就可以在添加细节的同时实时监控所有连接。没关系,一路走来难免会遇到挫折,但也会收获美好的发现。我确信这套素材中仍存在一些不足,我也知道还有更多方向变化,但我尽量秉持极简主义理念,避免使用罕见的场景,并尽可能地让每个图块发挥最大的功能。

我对创作俯视视角世界的喜爱显而易见,我已经发表了几篇相关的像素博客,而且未来还会创作更多。正如我之前提到的,我致力于为大家带来更多独特的环境研究,例如雪、冰、熔岩、黏液等等。告诉我,大家最需要什么?