您想找什么?
Games

2D Pixel Perfect:如何为复古 8 位游戏设置Unity项目

EDUARDO ORIZ / UNITY TECHNOLOGIESSenior Content Marketing Manager
Mar 13, 2019|23 Min
2D Pixel Perfect:如何为复古 8 位游戏设置Unity项目
为方便起见,此网页已进行机器翻译。我们无法保证翻译内容的准确性或可靠性。如果您对翻译内容的准确性有疑问,请参阅此网页的官方英文版本。

将您的 2D 开发经验提升到新的水平,并探索 Unity 的 原生 2D 工具套件

具有简单机制和像素化图形的复古游戏可以唤起资深游戏玩家的美好回忆,同时也受到年轻玩家的欢迎。 如今,许多游戏都被贴上了“复古”的标签,但要创造一款真正具有怀旧外观和感觉的游戏需要付出努力和规划。这就是为什么我们邀请 Mega Cat Studios 的员工来帮助我们讨论这个话题。在这篇博文中,我们将介绍为 NES 风格的游戏创建真实艺术所需的一切,包括重要的Unity设置、图形结构和调色板。获取我们的示例项目并继续关注!

游戏示例

位于宾夕法尼亚州匹兹堡的Mega Cat Studios将高度精准的复古游戏的创作变成了一种艺术形式。事实上,他们的几款游戏也可以以卡带形式购买并在世嘉 Genesis 等复古游戏机上玩。

复古游戏
Unity工作流程可实现最大程度的复古感

Unity工作流程的最新添加使其成为创建复古游戏的理想环境。2D Tilemap 系统变得更加完善,现在支持网格、六边形和等距瓷砖地图!此外,您可以使用新的 Pixel Perfect Camera 组件来实现一致的基于像素的运动和视觉效果。您甚至可以使用 Post Processing堆栈 来添加各种很酷的复古屏幕效果。然而,在进行任何此类工作之前,您需要先导入并正确设置您的资产。

准备精灵资源

我们的资产首先需要正确的配置,才能清晰明了。对于您正在使用的每个资产,请在项目视图中选择该资产,然后在检查器中更改以下设置:

  • 过滤模式更改为“点”
  • 压缩更改为“无
过滤模式

其他过滤模式会导致图像略微模糊,从而破坏我们想要的清晰像素艺术风格。如果使用压缩,图像数据将被压缩,从而导致原始数据的准确性有所损失。这一点很重要,因为它可能会导致一些像素改变颜色,甚至可能导致整体调色板本身的改变。 颜色越少,精灵越小,压缩造成的视觉差异就越大。以下是正常压缩(默认)和无压缩之间的比较。

正常压缩/无压缩看起来与原始图像一致
正常压缩/无压缩看起来与原始图像一致

另一件需要注意的事情是检查器中图像的最大尺寸设置。如果您的精灵图像在任何轴上的尺寸大于“最大尺寸”属性(默认为 2048),它将自动调整为最大尺寸。这通常会导致质量损失并导致图像变得模糊。由于某些硬件无法正确支持任一轴上超过 2048 的纹理,因此尝试保持在该限制内是一个好主意。

最大尺寸设置为 2048 / 现在最大尺寸设置为 4096
最大尺寸设置为 2048 / 现在最大尺寸设置为 4096

上面是来自精灵表的一个精灵,其一个轴的尺寸为 2208,最大尺寸设置为 2048。如您所见,将 Max Size 属性增加到 4096 可以使图像大小合适并避免质量损失。

最后,在准备精灵或精灵表时,请确保将枢轴单位模式设置为“像素”而不是“标准化”。

像素模式

这样,精灵的枢轴点将基于像素,而不是图像每个轴上从 0 到 1 的平滑范围。如果精灵不能准确地以像素为中心,我们就会失去像素的完整性。可以在 Sprite 编辑器中为精灵设置枢轴,当您选择精灵资产时可以从检查器中打开该编辑器。

精灵检查器
安装2D Pixel Perfect软件包

准备好资产后,我们可以将相机设置为“像素完美”。像素完美的结果看起来干净而清晰。像素艺术未以像素完美方式显示的明显迹象包括模糊(混叠)以及一些像素看起来是矩形而它们应该是正方形。

2D Pixel Perfect包可以通过Unity中的包管理器导入。单击工具栏中的“窗口”菜单,然后单击“包管理器”。在新窗口中,单击“高级”并确保已启用“显示预览包”。从左侧列表中选择2D Pixel Perfect ,然后在窗口右上角选择安装。

像素完美

就是这样。现在您就可以开始使用像素完美相机组件了。

高水平的像素完美度

Pixel Perfect Camera 组件被添加并增强了 Unity 的 Camera 组件。要添加它,请转到主摄像头并向其中添加 Pixel Perfect Camera 组件。如果没有 Pixel Perfect Camera 组件选项,请按照前面的说明先将其导入到项目中。

添加组件

现在让我们看看我们可用的设置。

相机组件

首先,我建议检查“在编辑模式下运行”并将游戏视图中的显示纵横比设置为“自由纵横比”,以便您可以自由调整游戏视图的大小。如果显示在任何给定的分辨率下不是像素完美的,该组件将在游戏视图中显示有用的消息,解释这一点。

长宽比

现在,您可以查看每个设置来了解它们的作用以及它们如何影响游戏的外观!

  • 每单位资产像素数 - 此字段参考您可以在检查器中为每个资产选择的设置。一般来说,游戏世界空间中使用的每个资产都应使用相同的每单位像素数 (PPU),并且您也会将该值放在这里。如果您的游戏世界以图块和精灵的网格形式存在,每个图块和精灵的大小为 16 像素 x 16 像素,则 16 的 PPU 是有意义的 - 网格的每个图块在世界空间坐标中都是 1 个单位。确保将您选择的 PPU 放在这里。
  • 参考分辨率 - 将其设置为您希望查看所有资产的分辨率。如果您想要复古的外观,这通常意味着非常小的分辨率。例如,Sega Genesis 的原始分辨率为 320x224。从 Sega Genesis 移植游戏时,我们将使用 320x224 的参考分辨率。对于一般的 16:9 用法,320x180 以及 398x224(如果您想保留垂直分辨率)应该可以很好地工作。
  • 升级渲染纹理 - 这会使场景以尽可能接近参考分辨率进行渲染,然后升级以适合实际显示尺寸。由于此设置会导致屏幕填满,因此如果您想要没有边距的全屏像素完美体验,我们建议您这样做。“高档渲染纹理”也会显著影响精灵旋转时的外观。
1.原件(未旋转)2.没有高档渲染纹理(旋转 45 度,由于对角线边缘的像素大小不同,像素完美度会丢失)3。使用高档渲染纹理(旋转 45 度,由于所有像素都是相同大小,因此像素完美度得以保持,但与原始图像相比,精灵看起来不太准确。)
1.原件(未旋转)2.没有高档渲染纹理(旋转 45 度,由于对角线边缘的像素大小不同,像素完美度会丢失)3。使用高档渲染纹理(旋转 45 度,由于所有像素都是相同大小,因此像素完美度得以保持,但与原始图像相比,精灵看起来不太准确。)
  • 像素捕捉 (仅在禁用“高档渲染纹理”时可用) - 启用此功能后,精灵渲染器将自动捕捉到世界空间网格,其中网格的大小基于您选择的 PPU。请注意,这实际上并不影响任何对象的变换位置。因此,您仍然可以平滑地在位置之间插入对象,但视觉运动将保持像素完美且敏捷。
  • 例子:
像素捕捉已禁用。由于我们的背景位于位置 (0, 0) 且角色精灵位于 (1.075, 0),因此我们发现一些像素排列不正确。请注意,有些像素仅被阴影覆盖了一半。像素捕捉已启用。相同的位置——背景(0, 0)和角色精灵(1.075, 0)。像素完美地结合在一起。
像素捕捉已禁用。由于我们的背景位于位置 (0, 0) 且角色精灵位于 (1.075, 0),因此我们发现一些像素排列不正确。请注意,有些像素仅被阴影覆盖了一半。像素捕捉已启用。相同的位置——背景(0, 0)和角色精灵(1.075, 0)。像素完美地结合在一起。
  • 裁剪框架(X 和 Y)- 裁剪所查看的世界空间区域以完全匹配参考分辨率,并在显示屏上添加黑色边缘以填充屏幕边缘的间隙。
  • 拉伸填充 - 如果为裁剪框架启用 x 和 y,则可用。这会使相机缩放到游戏视图,以保持纵横比的方式适应屏幕。因为这种缩放不会仅发生在参考分辨率的整数倍中,所以它会导致在任何非参考分辨率的整数倍的分辨率下丢失像素完美度。这样做的好处是,尽管许多分辨率下像素的完整性会受到影响,但不会留下黑条边缘,而是会有一个完全填满的屏幕。请注意,尽管由于拉伸填充而经常发生模糊,但通常的警报显示消息不会出现。
字符和背景因拉伸填充而变得模糊
字符和背景因拉伸填充而变得模糊
关于使用 Pixel Perfect 相机的建议

如果您想要一个像素完美且快速的显示,以适用于各种用例,我建议:

  • 使用永远不会大于播放器窗口分辨率的参考分辨率(例如 320x180)。
  • 启用或禁用高级渲染纹理
  • 如果您要使用 90、180 和 270 之外的旋转,并且您更喜欢它在旋转精灵上产生的视觉效果,请启用它。
  • 根据您的参考分辨率,升级的渲染纹理可能会在某些分辨率下产生非像素完美的图像。使用在 Pixel 上启用的“在编辑模式下运行”来试验此功能和不同的屏幕分辨率。完善相机组件以确定这是否是您的分辨率的问题。如果您可以让它在所有目标分辨率下产生像素完美的图像,这将带来最佳的全屏像素完美体验。
  • 根据需要启用或禁用像素捕捉
  • 这更多的是个人喜好。如果没有捕捉,您的运动会更加流畅,但像素可能会不对齐。
  • 如果不使用高档渲染纹理,则启用裁剪框 X 和/或 Y
  • 如果您无法通过高档渲染纹理始终获得像素完美的结果,则裁剪 X 和/或 Y 将确保任何大于参考分辨率的分辨率都具有像素完美的图像,但对于某些分辨率,会在屏幕边缘产生较大的边距。
  • 禁用拉伸填充

我们建议将相机设置为针对 16:9 宽高比观看进行优化,如果可能的话包括参考分辨率。在撰写本文时,大多数游戏玩家使用 16:9 显示器和 1920x1080 分辨率玩游戏。例如,320x180 的参考分辨率为 16:9,因此在 1920x1080 或 320x180 的偶数倍的任何分辨率(例如 1280x720)下播放时,不会有黑条边缘。

在 Unity 的工具栏中,您可以进入“编辑”>“项目设置”>“播放器”,并限制游戏支持的纵横比。如果您发现某个特定的配置在目标比例下能按您想要的方式工作,但在某些特定的纵横比下看起来很糟糕,那么您可以在此处阻止窗口处于这些比例。但是,请记住,并非所有用户都拥有能够适应您的限制的显示设置,因此不建议这样做。相反,启用裁剪以便这些用户有边距,而不必在不适合其屏幕的分辨率下播放。

创作真实的 NES 风格艺术品

现在我们已经介绍了如何设置Unity以获得像素完美艺术,让我们看看遵循经典任天堂娱乐系统限制的游戏艺术创作的基础知识。这一代游戏机对试图创造真实形象的艺术家施加了大量限制。这些限制包括使用的调色板以及屏幕上对象的大小和数量等。此外,当“瞄准”该控制台时,需要记住的是参考分辨率为 256x240。

调色板

在创作 NES 原创的艺术作品时,艺术家必须遵守一系列限制。无论艺术家试图模仿哪种复古游戏机,其中一些都是一致的,而许多其他则特定于 NES 本身。这些限制中第一个也可能是最重要的一个涉及图像中调色板的使用方式。NES 的调色板相当独特,因为控制台的全彩色调色板是硬编码到控制台中的。NES 通过向 NES 上的图形处理器发送一系列值来选择在图像中使用哪些颜色,然后图形处理器返回与这些值相关的颜色。下面是 NES 调色板的图像:

调色板

由于这些颜色是控制台本身的一部分,因此无法改变。您所见过的该游戏机上的每款游戏都使用这些颜色的组合来制作图像。

子调色板

为了创建游戏中使用的组合,需要创建子调色板并将其分配给游戏内的精灵或背景元素。NES 将其调色板分成可分配给精灵和背景的子调色板。每个子调色板包含一种用于所有子调色板的通用颜色和三种独特颜色。它能够为背景加载四个子调色板,为精灵加载四个子调色板。对于精灵来说,每个子调色板开始处的通用颜色被视为透明度。

子调色板

这是游戏中使用的一系列子调色板的示例。顶行代表背景子调色板,底行代表精灵子调色板。在这个例子中,黑色被用作所有子调色板共享的通用颜色。由于常用颜色在精灵上被视为透明色,因此需要为精灵子调色板创建第二个黑色调色板条目,以便将其用作可见颜色。

子调色板分配

随着艺术家逐渐了解调色板在游戏中的使用方式,对调色板使用的限制变得更加严格。为了解释这一点,需要进一步讨论复古游戏机如何存储、使用和展示艺术品。任何复古游戏机中的艺术品都以 8x8 像素的图块形式存储在游戏中。使用这种基于图块的方法,艺术家可以通过重复使用图块来处理不同的事情,从而节省空间。(例如,人行道上的一些部分可以重新利用,用来制作建筑物上的窗台)。关于基于图块的存储需要注意的另一件重要事情是颜色信息通常不与图形一起保存。所有的瓷砖都用单色调色板保存。这样,每当游戏中显示一个图块时,它都可以分配一个子调色板,从而允许同一个图块同时使用不同的子调色板显示在屏幕上。当在现代平台上创建忠于复古控制台的艺术作品时,这一点很重要,因为它会影响您如何为艺术作品分配调色板。

NES 以不同的方式为精灵和背景分配调色板。它逐块为精灵分配子调色板。这意味着精灵中的每个 8x8 图块都可以分配四个精灵子调色板之一。

这个忍者角色使用了两个子调色板来赋予它更大的色彩深度。在右侧,您可以看到它分割成每个单独的 8x8 精灵图块。通过这种分割视图,可以更明显地看出,剑和头带上使用的浅青色和深红色是这些瓷砖所独有的,而其余三块瓷砖则使用了深紫色和黑色轮廓部分。
这个忍者角色使用了两个子调色板来赋予它更大的色彩深度。在右侧,您可以看到它分割成每个单独的 8x8 精灵图块。通过这种分割视图,可以更明显地看出,剑和头带上使用的浅青色和深红色是这些瓷砖所独有的,而其余三块瓷砖则使用了深紫色和黑色轮廓部分。

另一方面,背景的限制则要严格得多。背景以 16x16 的块分配其调色板。整个屏幕背景的子调色板分配称为属性表。这些属性表就是为什么大多数复古艺术品大量使用重复平铺片段的原因。这些段往往由 16x16 个图块组成,以便它们能够整齐地放入属性表中。尽管是为了应对硬件限制,这种基于 16x16 图块的背景方法最终成为了复古艺术品的决定性特征,并且在尝试重新创建时是绝对必要的。

这是一个在限制内制作的 RPG 风格城镇背景的好例子
这是一个在限制内制作的 RPG 风格城镇背景的好例子
精灵分层

尽管艺术家可以自由地为精灵的每个 8x8 图块使用不同的子调色板,但他们可能会发现自己希望精灵的色彩深度比现有的更大。此时精灵分层就可以发挥作用了。精灵分层就是将一个精灵分成两个独立的精灵,然后将它们叠加在一起。这使得艺术家能够规避每 8x8 图块一个子调色板的限制。这样做实际上可以让艺术家在单个 8x8 区域内可使用的颜色数量增加一倍。这样做的唯一主要缺点是精灵渲染的限制。NES 只能同时在屏幕上显示 64 个 8x8 精灵图块,并且在同一水平线上只能显示 8 个精灵图块。一旦达到这些数字,任何进一步的精灵图块都不会在屏幕上呈现。这就是为什么当屏幕上同时出现大量精灵时,许多 NES 游戏的精灵会闪烁的原因。这样,它只会在交替的帧上显示某些精灵。当艺术家将精灵层叠在一起时,他们需要注意这些限制,因为虽然颜色数量增加了一倍,但同一水平线上的精灵图块数量也增加了一倍。

这是 Sprite Layering 实际应用的一个示例。从左边开始,是幽灵海盗精灵的原始三色版本。然后,艺术家将其分成两部分,即身体/帽子和脸/手,并为它们分配不同的调色板。最后,您可以看到将两片叠放在一起的结果。
这是 Sprite Layering 实际应用的一个示例。从左边开始,是幽灵海盗精灵的原始三色版本。然后,艺术家将其分成两部分,即身体/帽子和脸/手,并为它们分配不同的调色板。最后,您可以看到将两片叠放在一起的结果。

精灵分层也可以通过背景来完成,以绕过属性表的限制。此技巧通常用于静态图像,例如故事画面和人物肖像,以赋予它们更大的色彩深度。为了做到这一点,艺术家会绘制图像的一部分作为背景,然后在其上分层添加精灵来填充其余部分。

幽灵海盗的肖像也使用了精灵分层,以赋予它更大的深度。他的绿色头骨在屏幕上以精灵的形式呈现,而他的衣领和帽子则作为背景的一部分呈现。这使得艺术家可以在 16x16 区域内使用更多颜色,以完全绕过属性表限制。
幽灵海盗的肖像也使用了精灵分层,以赋予它更大的深度。他的绿色头骨在屏幕上以精灵的形式呈现,而他的衣领和帽子则作为背景的一部分呈现。这使得艺术家可以在 16x16 区域内使用更多颜色,以完全绕过属性表限制。
图形库

为了解释 NES 的下一个主要限制,首先,我们需要回顾图形存储在图块中的事实。图形图块存储在 256 个图块页面中,这些页面中的图块无法加载到不同位置的 VRAM 中,因此很难动态混合和匹配不同页面中的图块。NES 的 VRAM 一次只能显示 512 个这样的图块。除了这个限制之外,它还将图块一分为二,分别用于精灵和背景。这意味着它在任何时候都只能显示 256 个精灵图块和 256 个背景图块。如果艺术家想要展示各种各样的精灵和背景元素,这可能会变得非常受限制。

这是加载到 VRAM 中的游戏背景和精灵图块的视觉表示。控制台干净地将背景和精灵加载到单独的页面上。

为了克服这个限制,NES 有一项功能允许艺术家将每页分成称为“库”的部分页面。因此,虽然 NES 无法从图形数据的各个点加载单个图块,但它能够在不同时间加载页面的不同部分。对于大多数游戏来说,这些银行要么是 1K 银行,要么是 2K 银行。1K 存储体相当于页面的四分之一或 64 个图块,而 2K 存储体相当于页面的一半或 128 个图块。艺术家必须决定是否要为 Sprites 或 Background 元素保留每种类型的库的使用,因为两种类型的库都需要使用。这意味着你不能为精灵和背景同时拥有 1K 个库。一个页需要使用 1K 个 bank,另一个页需要使用 2K 个 bank。一般来说,大多数游戏倾向于使用 1K 库作为精灵,使用 2K 库作为背景,因为背景图块集往往更加静态,对动态变化的要求较低。

这显示了上面的同一张图片是如何被银行盗用的。左侧的背景窗格使用 2K 库,这意味着它在中间被分割,而右侧的精灵窗格使用 1K 库。每个银行都可以随时自由交换。

1K 库对于精灵来说非常有用。如果玩家精灵具有大量动画,无法与需要加载的所有其他精灵一起放在单个页面中,则可以将各个动作保存在 1K 库中,然后根据屏幕上发生的动作进行交换。它还允许在游戏的单个区域中使用更多种类的精灵。例如,如果玩家在游戏的某个区域遇到六种不同的敌人,但精灵页面只允许玩家和其他三种类型的精灵,那么当一种敌人类型从屏幕上清除时,游戏可以将其中一种敌人库换成一种新的敌人类型。

使用 1K 库来存储精灵、使用 2K 库来存储背景的唯一主要缺点之一是 NES 如何处理背景动画。为了给 NES 游戏的背景元素制作动画,艺术家必须创建动画背景元素的重复库。每个新的重复库将包含每个动画元素的下一帧动画。然后,像翻书一样,这些库被一次换入或换出,以创建动画。如果艺术家使用半页库作为背景,那么存储所有这些重复的库会占用大量空间。不过,解决此问题的一种方法是将整个游戏的所有动画背景元素放入一个库中。但是,这也给艺术家带来了限制,即每个背景的静态元素只能剩下 128 个图块。当艺术家决定使用什么类型的银行来进行艺术创作时,最佳的行动方案由艺术家自己决定。

分层技巧

那个时代的许多游戏都会采用技巧来创造背景中视差滚动等效果,但这些也给艺术家和设计师带来了挑战。虽然后来的 16 位控制台允许多个背景层,但这不是 NES 上的选项。所有背景都是一张扁平图像。为了创造深度和层次感,我们使用了不同的编程技巧。例如,为了创建视差背景,开发人员能够设置一个寄存器,该寄存器可以判断何时在屏幕上呈现某条水平线(称为光栅线)。然后他们可以使用该寄存器来控制屏幕滚动的速度和方向。通过使用它,他们可以创建一个水平的背景行,其滚动速度与背景其余部分不同。此时,艺术家和设计师的诀窍是注意背景仍然是一张平面图像。如果将一个平台或任何其他应该位于较慢移动背景“前面”的元素放置在该区域,那么它的滚动速度也会比图像的其余部分慢。这意味着设计师需要注意在场景中放置背景元素的位置,而艺术家需要以无缝效果的方式创建背景。

在此示例屏幕中,可以将以红色突出显示的区域设置为比背景其余部分滚动得更慢,以模拟深度。其上方的平视显示器将被设置为永不滚动,即使它也是扁平背景图像的一部分。

对于想要让背景元素之一出现在前景中的艺术家来说,还有另一个技巧。在 NES 上,开发人员可以将精灵的优先级设置为小于零。完成后,精灵将显示在任何非透明背景像素的后面。精灵的优先级也可以动态修改和触发,从而允许某些元素根据需要更改精灵的优先级。

结论

当有人尝试创建一个真实还原复古游戏机的项目时,他们需要牢记许多技术考虑,而这些可能不是现代开发需要担心的事情。由于旧机器渲染图像的方式以及处理 CPU 和 GPU 的少量操作空间,设计师必须发挥创造性思维来解决硬件的限制。在现代,了解这些限制和技术变得非常重要,以便真正重现那个时代游戏的外观和设计。在下一篇文章中,我们将研究 16 位时代带来的设计限制以及实现真正“老电视”感觉所需的Unity工作。适用于 16 位复古视觉效果的2D Pixel Perfect指南现已 在此处提供。

---

第一次使用 Tilemap 设计关卡?在Unity Learn上的 初学者教程 中探索 2D 世界构建。