跳到主要内容

41 - ISO像素画

待润色

Pixelblog - 41 - Isometric Pixel art — SLYNYRD

img

简介

等距像素艺术基于等距投影,这是一种将三维物体精确“投影”到精美二维平面上的方法。与透视画法不同,等距投影中没有消失点。此外,三个坐标轴的透视缩短程度相同,无需根据与观察者的距离调整长度。这使得我们可以高效地创建能够精确描述完整形状和所有尺寸的三维物体。传统上,等距投影用于工程、建筑等技术图纸以及乐高积木的组装指南。然而,这些特性也使其成为游戏图形的理想风格。将其与像素艺术相结合,便会产生真正奇妙的效果。让我们一起创造奇迹吧!

基础

img

真正的等距投影的地面以 30° 角排列。由于像素画中真正的 30° 线会导致锯齿状的线条,等距像素画采用 2:1 的线条模式作为折衷方案,其角度更接近 26.5°。这种 2:1 的线条模式,或者我通常称之为“两步线”,构成了等距像素画的基础地面。只要你理解了所有元素都源自两步线网格,你就可以忽略其他技术术语,开始创作技术精湛的等距像素画。

img

侧向的圆尤其难以目测。首先,用一个倾斜的正方形创建一个网格,然后画一个十字。圆与正方形在十字的四个端点处相交。注意切角的形状以及它们如何相互反射。即使有了网格,目测曲线也很难。作为 Photoshop 用户,我通常会先画一个普通的圆,然后在自由变换模式下按住 Option+Command 键,再拖动一个侧边节点,使其倾斜。变换后通常需要稍作调整。

立方体的样式取决于个人喜好,但需要注意的是,有些样式比其他样式更容易平铺。我个人更喜欢像 A1 那样的宽角样式。然而,它们需要一些巧妙的重叠才能完美平铺。例如,D1 更符合 2:1 的网格比例,可以完美平铺,但那些尖角让我感觉不太舒服。

如需更多基础知识,请参阅 Pixelblog 4。

等距图块

img

等高线图块可以有很多变化,但基本上就是选择一种立方体样式,然后通过纹理来表现所需的场景。虽然可以创建包含斜坡的复杂等高线图块,但我将坚持使用长方体,它也能创造出令人惊喜的丰富有趣的场景。我使用“长方体”这个词,是因为图块不需要是完美的立方体。只要顶面平整,图块的高度就可以变化。你甚至可以使用没有侧面的图块,但这些图块只能平放在地面上,不能有任何高度差。不过,立方体非常灵活,因为它可以相对于其他图块上下滑动,从而根据需要调整高度。

注意,纹理应该能够沿着每个表面的所有四个面无缝循环。将创建普通正方形图块的相同原则应用于每个表面。想要了解更多关于如何为图块添加纹理的技巧,请查看 Pixelblog 20。

图块的大小也取决于你想要的效果。越大,细节就越多,但工作量也会大幅增加。无论你选择多大的尺寸,精确的边距都至关重要。我最终选择了 36x36 像素,这是基于与精灵图设计的关系而随意选择的。

本教程展示了各种风格的图块,从纯色到更精细的纹理(并非循序渐进的教程)。我认为纯色和简单纹理的图块可以组合起来,营造出不错的效果,但它们的风格与高细节图块不太协调。我的示例地形完全由最高细节的图块组成。

即使是像树木这样的有机物体,我也发现从基本的几何形状入手,然后再雕刻细节,会很有帮助。这比尝试自由地塑造整个物体要容易得多,而且基础形状有助于保持一致的等距视图。

等距机器

img

本次等值线课程的最终测试,是一个机甲!乍一看,最终的精灵图可能看起来像是一个高难度挑战,但当你把所有部件拆解开来后,你会发现它们的几何形状相当简单,始终围绕着基础立方体。虽然有些信息会被隐藏在最终的合成图中,但将所有部件可视化仍然非常值得。这种逐层叠加的方法也有助于确保最终设计更加合理,因为它提供了移动和替换部件的灵活性。我反复调整了所有部件的位置,如果把这些修改都放在单个图层上渲染,将会非常痛苦。此外,亲手搭建一个东西的感觉真的很有成就感,如果你胆子够大,想要尝试给这个“庞然大物”制作动画,那么分层渲染绝对是最佳选择。

至于绘制角色精灵图,我发现先画一个线框等值线立方体很有帮助,它可以帮助你保持 2:1 的比例关系。一旦你掌握了技巧,就可以直接想象出形状,而无需再绘制辅助线。制作等距像素画时,我通常会在构图中单独创建一个图层,并画一条 2:1 的直线作为标尺,确保画面对齐。

总结

等距像素画入门可能有点繁琐,但一旦熟练掌握了绘制两步线,就会变得非常自然。这种画法非常值得投入,因为它总是能吸引大量玩家,并为游戏创作开辟了许多可能性。然而,由于视角旋转,直接输入式游戏玩法会有些棘手,因为模拟的透视效果可能会使距离判断变得困难。因此,它不太适合平台跳跃类游戏,但非常适合回合制策略游戏。

img

A Day at the Park, 2018

我的像素画生涯早期就接触了等距像素画。经过一番学习,我开始尝试创作非常大型且细节丰富的场景。这段经历让我技艺精湛,而这一切都建立在易于掌握的基础之上。如果你会画立方体,就能画出一座完整的城市!

抛开这些不谈,我认为理解等距像素画的最佳方法是先观察范例,然后通过实践来精通。基础知识相对容易上手,而真正的挑战在于尝试创作完整的场景。关键在于精准度,确保各个元素之间的间距正确,并且所有元素都沿着两步线对齐。不要总是相信你的眼睛。数像素,并使用2:1的尺子来确保该对齐的元素都对齐了。从小处着手,然后逐步扩大规模!